Accentsconagua

So entwickeln Sie ein einfaches Content Locker-Plugin mit WordPress

Code
Share

Obwohl einige das Teilen als eines der Kernprinzipien des Internets betrachten, gibt es Zeiten, in denen wir nur einige Informationen mit einer bestimmten Gruppe von Menschen teilen möchten.

Diese Informationen, nennen wir sie in jeder Hinsicht als „Premium-Inhalt“, werden nur an Benutzer weitergegeben, die uns etwas mitteilenim Gegenzug. Dieses „Etwas“ kann eine E-Mail-Adresse, eine PayPal-Spende oder einfach eine Facebook-Aktie sein.

In diesem Tutorial erkläre ich, wie Sie ein Content Locker-Plugin erstellen, das uns mit einem einfachen Shortcode auswählen lässt, welche Inhalte wir als Premium nutzen möchten.

Wir werden zwei Beispiele behandeln:

  1. Ein Beispiel ist ein einfacher Shortcode, mit dem wir den Benutzern, die auf der Website registriert sind, Inhalte anzeigen können.
  2. Für den anderen Shortcode muss der Benutzer die URL des Inhalts auf Facebook freigeben, um den Rest des Inhalts lesen zu können.

In WordPress Social Invitations verwenden wir ein sehr ähnliches Inhaltssperren, das Inhalte nur Benutzern anzeigt, die ihre Freunde eingeladen haben.

Hinweis: Statt der Funktionsdatei und / oder dem Stylesheeet eines Themes Code hinzuzufügen, empfehle ich, ein Plugin zu erstellen, um es Ihrer Site hinzuzufügen. Bei dieser Methode bleibt alles an einem Ort und Sie können den Kurzcode auf jeder anderen Site verwenden.

Was Sie für dieses Tutorial benötigen

Um dieses Tutorial abzuschließen, benötigen Sie:

  • eine Site mit installiertem WordPress
  • ein Code-Editor
  • optional ein FTP-Programm zum Hochladen Ihres Plugins

Plugin einrichten

Öffnen Sie zunächst eine neue Datei in Ihrem Texteditor und geben Sie ihr einen Namen. In den Beispielen, die wir in diesem Artikel betrachten werden, sehen Sie, dass ich meine benannt habe wptuts-content-locker.php aber Sie können Ihre anrufen, was Sie möchten.

Fügen Sie in der Datei den folgenden Code ein:

Dadurch wird Ihr Plugin eingerichtet und WordPress Name und Version mitgeteilt.
Hinzufügen der Shortcode-Funktion
Unter dem Eröffnungskommentar müssen wir die Funktion hinzufügen, die den Kurzcode erstellt und an den anhängt add_shortcode Aktionshaken:
// den Shortcode registrieren, der einen Parameter akzeptiert add_shortcode ('premium-content', 'wptuts_content_locker'); // shortcode function function wptuts_content_locker ($ atts, $ content) extract (shortcode_atts (array ('method' => "), $ atts)); global $ post; // wenn die Methode nicht 'facebook' ist, dann werden wir Überprüfen Sie den protokollierten Benutzer if ('facebook'! = $ method) if (is_user_logged_in ()) // Wir geben den Inhalt zurück. do_shortcode ($ content); else // Wir geben einen Login-Link zurück, der auf diesen Link umleitet post nachdem der Benutzer angemeldet ist
Sie müssen ID)). '"> Melden Sie sich an, um diesen Inhalt zu sehen
';  // Wir verwenden die Facebook-Methode else // Prüfen Sie, ob bereits ein Cookie für diesen Beitrag gesetzt ist, wenn (isset ($ _COOKIE ['wptuts-lock'] [$ post-> ID])) // Wir geben den Inhalt zurück und geben do_shortcode ($ content) zurück. // Wir bitten den Benutzer, Beiträge zu posten, um Inhalte anzuzeigen else return '
Bitte teilen Sie diesen Beitrag, um den Inhalt zu sehen 
'; 
Wir können jetzt unseren Shortcode so verwenden:
[Premium-Content] Premium-Inhalt geht hier [/ Premium-Content]
Aber warte! Schauen Sie sich den Code oben genau an. 
Wie Sie sehen, akzeptiert unser Shortcode ein Argument, das unseren Code in zwei Abschnitte aufteilt. Dieses Argument, das ich als "Methode" bezeichnet habe, unterscheidet zwischen der Verwendung des "Like on Facebook" -Ansatzes oder einer Überprüfung des "einfachen angemeldeten Benutzers".
Beide Methoden sind in der Logik ähnlich, wie Sie in der folgenden Grafik sehen können:
Wenn der Benutzer nicht angemeldet ist, wird ein Login-Link angezeigt wp_login_url Funktion und wir übergeben auch die Post- / Seiten-URL. Auf diese Weise wird der Benutzer nach der Anmeldung zum Post-Server zurückgeleitet.
Die Facebook-Methode ist etwas komplexer und erfordert die Verwendung von Cookies. Wir verwenden sie zum Speichern der Beitrags-ID, um herauszufinden, welche Beiträge der Benutzer freigegeben hat und welche nicht.
Die JavaScript-Datei
Wir benötigen auch ein Javascript, das die Cookie-Erstellung und den Facebook-Rückruf unterstützt. Erstellen wir eine Datei mit dem Namen script.js und fügen Sie den Code unten ein:
 Funktion createCookie (Name, Wert, Tage) var verfällt; if (days) var date = neues Datum (); date.setTime (date.getTime () + (days * 24 * 60 * 60 * 1000)); verfällt = "; verfällt =" + date.toGMTString ();  else erlischt = "";  document.cookie = escape (name) + "=" + escape (value) + verfällt + "; pfad = /";  (Funktion ($) $ (Funktion () FB.Event.subscribe ('edge.create', Funktion (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']', true, 9999) ); location.reload (););); (jQuery));
In diesem Skript fügen wir dem FB eine Rückruffunktion hinzu edge.create event. Diese Funktion erstellt insbesondere das Cookie, das wir in unserem Hauptskript verwenden, um zu prüfen, ob der Benutzer den Beitrag freigegeben hat. Sobald das Cookie erstellt wurde, lädt das Skript die Seite erneut, um den Premium-Inhalt anzuzeigen.
Hinzufügen der Skripts zu unserem Plugin
Jetzt müssen wir unsere Skriptdatei zum Plugin hinzufügen, aber zuerst erstellen wir eine sehr einfache CSS-Datei, um unser Plugin zu gestalten. 
Erstellen Sie eine Datei mit dem Namen style.css und fügen Sie den folgenden Code hinzu:
/ * Stylesheet für Tuts + Content Locker Kurzcode * / .wptuts-content-locker width: 80%; Bildschirmsperre; Rahmen: 3px gestrichelt #ccc; Polsterung: 20px; Text ausrichten: Mitte; margin: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget overflow: hidden; 
Lassen Sie jetzt unsere Skripte im registrieren wp_enqueue_scripts Haken:
// Registrieren Sie Stylesheet und Javascript mit dem Hook 'wp_enqueue_scripts', der für Front-End-CSS und JavaScript verwendet werden kann. Add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // Funktion, die ein Skript nur in die Warteschlange stellt, wenn shortcode verwendet wird Funktion 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)); 
Bitte beachten Sie, dass wir das verwenden has_shortcode Funktion. Auf diese Weise fügen wir die JavaScript- und CSS-Dateien nur dann ein, wenn sie benötigt werden, und nicht auf jeder Seite unserer Website. 
Wir nutzen auch die localize_script Funktion, um die Beitrags-ID ordnungsgemäß an die JavaScript-Datei zu übergeben.
Schlussfolgerung und Code
In etwa 120 Zeilen Code haben wir ein einfaches, aber sehr nützliches Plug-In für Inhaltssperren erstellt. Das war einfach, richtig?
Das Schöne an diesem Plugin ist, dass Sie es so einstellen können, dass es mit jeder denkbaren Methode funktioniert. Anstelle von Facebook können Sie beispielsweise die Benutzer auffordern, über Ihre Website zu twittern, einen PayPal-Spendenlink hinzuzufügen oder alles, was Sie sich vorstellen können.
Sie können den Code von GitHub herunterladen oder eine Demo ausprobieren.





	
	
			
	   
	







Code
×