Een eenvoudige plug-in voor Content Locker ontwikkelen met WordPress

Hoewel sommigen het delen zien als een van de kernprincipes van internet, zijn er tijden dat we alleen wat informatie willen delen met een bepaalde groep mensen.

Deze informatie, laten we het 'premium content' noemen, wordt alleen gedeeld met gebruikers die ons iets gevenin ruil. Dit 'iets' kan een e-mailadres zijn, een PayPal-donatie of gewoon een aandeel op Facebook.

In deze tutorial zal ik uitleggen hoe je een plugin voor inhoudskluizen kunt maken die met een eenvoudige shortcode ons laat kiezen welke inhoud we premium willen maken.

We bespreken twee voorbeelden:

Een voorbeeld hiervan is een eenvoudige shortcode waarmee we inhoud kunnen weergeven aan gebruikers die op de site zijn geregistreerd.
De andere shortcode vereist dat de gebruiker de URL van de inhoud deelt op Facebook om de rest van de inhoud te lezen.

In WordPress Social Invitations gebruiken we een zeer vergelijkbaar inhoudskastje dat inhoud alleen weergeeft aan gebruikers die hun vrienden hebben uitgenodigd.

Notitie: In plaats van code toe te voegen aan het bestandsbestand en / of stylesheeet van een thema, raad ik aan een plug-in te maken om deze toe te voegen aan uw site. Met deze methode wordt alles op één plek bewaard en kunt u de shortcode op elke andere site gebruiken.

Wat je nodig hebt voor deze les

Om deze tutorial te voltooien, heb je nodig:

een site met WordPress geïnstalleerd
een code-editor
optioneel een FTP-programma om uw plug-in te uploaden

De plug-in instellen

Begin met het openen van een nieuw bestand in je teksteditor en geef het een naam. In de voorbeelden die we in dit artikel gaan bekijken, zult u zien dat ik de mijne heb genoemd wptuts-inhoud locker.php maar je kunt de jouwe noemen wat je maar wilt.

Voeg in het bestand de volgende code in:

Hiermee wordt uw plug-in ingesteld en wordt WordPress de naam en versie ervan gegeven.
De Shortcode-functie toevoegen
Onder de openingscommentaar moeten we de functie toevoegen die de shortcode zal maken en deze zal koppelen aan de add_shortcode actie haak:
// registreer de shortcode die één parameter add_shortcode accepteert ('premium-content', 'wptuts_content_locker'); // shortcode functie functie wptuts_content_locker ($ atts, $ content) extract (shortcode_atts (array ('methode' => "), $ atts)); global $ post; // als de methode geen 'facebook' is, dan hebben we controleer of de gebruiker ingelogd is ('facebook'! = $ methode) if (is_user_logged_in ()) // We retourneren de inhoud return do_shortcode ($ content); else // We retourneren een aanmeldingslink die hiernaar verwijst plaatsen nadat gebruiker is teruggestuurd 'U moet een ID)). '"> Log in om deze inhoud te bekijken
';  // We gebruiken de facebookmethode else // Controleer of we al een cookie hebben ingesteld voor deze post als (isset ($ _COOKIE ['wptuts-lock'] [$ post-> ID])) // We retourneren de inhoud return do_shortcode ($ content); // We vragen de gebruiker om van post te houden om inhoud te bekijken else retourneer '
Deel deze post alsjeblieft om de inhoud te zien 
'; 
We kunnen onze shortcode nu als volgt gebruiken:
[premium-content] Hier komt premium-content bij [/ premium-content]
Maar wacht! Laten we de bovenstaande code gedetailleerd bekijken. 
Zoals u ziet, accepteert onze shortcode één argument dat onze code in twee secties zal splitsen. Dit argument dat ik "methode" noemde, maakt een onderscheid tussen het gebruik van de "Like op Facebook" -benadering of een "eenvoudige ingelogde gebruiker" -controle.
Beide methoden zijn vergelijkbaar in de logica zoals u kunt zien in de volgende afbeelding:
Als de gebruiker niet is aangemeld, geven we een inlogkoppeling weer met wp_login_url functie en we geven ook de url van de post / pagina door. Op die manier zal de gebruiker na het inloggen opnieuw worden doorgestuurd naar de post.
De Facebook-methode is wat ingewikkelder en omvat het gebruik van cookies. We gebruiken ze om de post-ID op te slaan, om te weten welke berichten de gebruiker heeft gedeeld en welke niet.
Het JavaScript-bestand
We hebben ook wat JavaScript nodig dat de cookiecreatie en de Facebook-callback afhandelt. Laten we een bestand maken met de naam script.js en plak de onderstaande code:
 function createCookie (naam, waarde, dagen) var vervalt; if (dagen) var date = new Date (); date.setTime (date.getTime () + (dagen * 24 * 60 * 60 * 1000)); vervalt = "; expires =" + date.toGMTString ();  else expires = "";  document.cookie = escape (naam) + "=" + escape (waarde) + verloopt + "; path = /";  (functie ($) $ (function () FB.Event.subscribe ('edge.create', functie (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']', true, 9999 ); location.reload (););); (jQuery));
In dit script gaan we een callback-functie aan de FB koppelen edge.create evenement. Deze functie maakt met name de cookie die we gebruiken in ons hoofdscript om te controleren of de gebruiker de post heeft gedeeld. Nadat de cookie is gemaakt, laadt het script de pagina opnieuw om de premium-inhoud weer te geven.
De scripts toevoegen aan onze plug-in
Nu moeten we ons scriptbestand toevoegen aan de plug-in, maar laten we eerst een heel basaal CSS-bestand maken om onze plug-in te stylen. 
Maak een bestand met de naam style.css en voeg de volgende code toe:
/ * Stylesheet voor Tuts + Content Locker Shortcode * / .wptuts-content-locker width: 80%; weergave: blok; border: 3px dashed #ccc; opvulling: 20px; text-align: center; marge: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget overflow: verborgen; 
Laten we nu onze scripts registreren in de wp_enqueue_scripts haak:
// Registreer stylesheet en javascript met hook 'wp_enqueue_scripts', die kunnen worden gebruikt voor front-end CSS en JavaScript add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // functie die script alleen in wachtrij plaatst als shortcode wordt gebruikt function wptuts_content_locker_scripts () global $ post; wp_register_style ('wptuts_content_locker_style', plugins_url ('style.css', __FILE__)); wp_register_script ('wptuts_content_locker_js', plugins_url ('script.js', __FILE__), array ('jQuery'), ", true); if (has_shortcode ($ post-> post_content, 'premium-content')) wp_enqueue_style (' wptuts_content_locker_style '); wp_enqueue_script (' wptuts_content_locker_js-fb ',' http://connect.facebook.net/en_US/all.js#xfbml=1 ', array (' jQuery '), ", FALSE); wp_enqueue_script ('wptuts_content_locker_js'); wp_localize_script ('wptuts_content_locker_js', 'wptuts_content_locker', array ('ID' => $ post-> ID)); 
Let op: we gebruiken de has_shortcode functie. Op die manier zullen we de JavaScript- en CSS-bestanden alleen opnemen wanneer dat nodig is en niet op elke pagina van onze site. 
We maken ook gebruik van de localize_script functie om de bericht-ID correct door te geven aan het JavaScript-bestand.
Conclusie en code
In ongeveer 120 regels code hebben we een eenvoudige maar erg nuttige invoegtoepassing voor inhoudskluizen gemaakt. Dat was makkelijk, toch??
Het mooie van deze plug-in is dat je hem kunt aanpassen om te werken met elke denkbare methode. Bijvoorbeeld, in plaats van een Facebook zoals, kunt u de gebruikers vragen om te tweeten over uw site, een PayPal-donatielink toevoegen of iets anders dat u kunt bekijken.
Je kunt de code van GitHub halen of een demo proberen.



		
			
	   
	




Code