Så här utvecklar du ett enkelt innehållsskärmsprogram med WordPress

Även om vissa ser delning som en av de grundläggande principerna för Internet finns det tillfällen där vi bara vill dela information med en viss grupp människor.

Denna information, låt oss kalla det "premium content" för alla ändamål, kommer bara att delas med användare som ger oss någoti gengäld. Denna "något" kan vara en e-postadress, en PayPal-donation eller helt enkelt en del på Facebook.

I den här handledningen kommer jag att förklara hur man skapar ett innehållsskyddsprogram som med ett enkelt kortnummer låter oss välja vilket innehåll vi vill göra premie.

Vi kommer att täcka två exempel:

När exemplet kommer att vara en enkel kortnummer som tillåter oss att visa innehåll till användare som är registrerade på webbplatsen.
Den andra kortkoden kräver att användaren måste dela innehållets webbadress på Facebook för att kunna läsa resten av innehållet.

I WordPress Social Invitationer använder vi en mycket liknande innehållslåda som bara visar innehåll till användare som bjudit in sina vänner.

Notera: I stället för att lägga till kod till ett temas funktionsfil och / eller stylesheeet rekommenderar jag att du skapar ett plugin för att lägga till det på din webbplats. Denna metod håller allt på ett ställe och låter dig använda kortnumret på någon annan webbplats.

Vad du behöver för denna handledning

För att slutföra denna handledning behöver du:

en webbplats med WordPress installerad
en kodredigerare
valfritt, ett FTP-program för att ladda upp ditt plugin

Ställa in plugin

Börja med att öppna en ny fil i din textredigerare och ge det ett namn. I de exempel som vi kommer att se i den här artikeln ser du att jag har namngett min wptuts-innehålls locker.php men du kan ringa din vad du än vill.

I filen lägger du in följande kod:

Detta ställer in ditt plugin och berättar WordPress sitt namn och version.
Lägga till kortnummerfunktionen
Under den inledande kommentaren måste vi lägga till den funktion som kommer att skapa kortkoden och koppla den till add_shortcode handtagskrok:
// registrera kortkoden som accepterar en parameter add_shortcode ('premium-content', 'wptuts_content_locker'); // kortnummerfunktionsfunktion wptuts_content_locker ($ atts, $ content) extrakt (shortcode_atts (array ('method' => ", $ atts)); global $ post; // om metoden inte är" facebook " kolla för loggad användare om ('facebook'! = $ metod) if (is_user_logged_in ()) // Vi returnerar innehållsavkastningen do_shortcode ($ content); else // Vi returnerar en inloggnings länk som omdirigeras till detta inlägg efter användaren är loggad retur 'Du behöver ID)). '"> Logga in för att se detta innehåll
';  // Vi använder facebook-metoden else // Kontrollera om vi har en cookie som redan är inställd för det här inlägget om (isset ($ _COOKIE ['wptuts-lock'] [$ post-> ID])) Vi returnerar innehållsavkastningen do_shortcode ($ content); // Vi ber användaren att gilla posten för att se innehåll annars returnera "
Vänligen dela det här inlägget för att se innehållet 
'; 
Vi kan nu använda vår kortnummer så här:
[premium-innehåll] Premium-innehåll går här [/ premium-innehåll]
Men vänta! Låt oss ta en detaljerad titt på koden ovan. 
Som du kan se accepterar vår kortnummer ett argument som delar upp vår kod i två sektioner. Detta argument som jag kallade "metod" skiljer sig mellan att använda "Like on Facebook" -metoden eller en "enkel inloggad användare" -kontroll.
Båda metoderna är lika i logiken som du kan se i följande grafik:
Om användaren inte är inloggad visar vi en inloggningslänk med wp_login_url funktion och vi skickar också post / sidadressen. På så sätt, efter att användaren loggat in, kommer han att omdirigeras tillbaka till posten.
Facebook-metoden är lite mer komplex och innebär att cookies används. Vi använder dem för att lagra post-ID, för att veta vilka inlägg användaren delade och vilka som inte gör det.
JavaScript-filen
Vi behöver också lite javascript som hanterar cookieskapandet och Facebook-återuppringningen. Låt oss skapa en fil som heter script.js och klistra in koden nedan:
 funktion createCookie (namn, värde, dagar) var utgår; om (dagar) var date = new Date (); date.setTime (date.getTime () + (dagar * 24 * 60 * 60 * 1000)); expires = "; expires =" + date.toGMTString ();  else expires = "";  document.cookie = escape (namn) + "=" + flykt (värde) + utgår + "; sökväg = /";  (funktion ($) $ (funktion () FB.Event.subscribe ('edge.create', funktion (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']' true 9999 ); location.reload (););); (jQuery));
I det här skriptet kommer vi att bifoga en återuppringningsfunktion till FB edge.create händelse. Specifikt kommer denna funktion att skapa den cookie som vi använder i vårt huvudskript för att kontrollera om användaren delade inlägget. När kakan är skapad, kommer skriptet att ladda om sidan för att visa premiuminnehållet.
Lägga till skript i vårt plugin
Nu måste vi lägga till vår skriptfil till plugin, men låt oss skapa en mycket grundläggande CSS-fil för att ställa in vårt plugin. 
Skapa en fil som heter style.css och lägg till följande kod:
/ * Stylesheet for Tuts + Content Locker Shortcode * / .wptuts-content-locker bredd: 80%; display: block; gränsen: 3px streckad #ccc; vaddering: 20px; text-align: center; marginal: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget översvämning: dold; 
Låt oss nu registrera våra skript i wp_enqueue_scripts krok:
// Registrera stylesheet och javascript med hook 'wp_enqueue_scripts', som kan användas för CSS och JavaScript add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts') // funktion som enqueue script endast om kortnummer används. 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') om (has_shortcode ($ post-> post_content, premium-innehåll)) 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)); 
Observera att vi använder has_shortcode fungera. På det sättet kommer vi att inkludera JavaScript och CSS-filerna endast vid behov och inte på varje sida på vår webbplats. 
Vi drar också nytta av localize_script funktionen för att passera post-ID korrekt till JavaScript-filen.
Slutsats och kod
I cirka 120 kodkod skapade vi ett enkelt men mycket användbart innehållsskärmsprogram. Det var lätt, rätt?
Skönheten i denna plugin är att du kan anpassa den till arbete med vilken metod du kan tänka dig. Till exempel, i stället för en Facebook-liknande, kan du be användarna att Tweet om din webbplats, lägga till en PayPal-donationslänk eller något annat du kan bilda.
Du kan ta tag i koden från GitHub eller prova en demo.



		
			
	   
	




Koda