Cum de a dezvolta un Plug simplu de conținut Locker folosind WordPress

Deși unii văd că partajarea este unul dintre principiile de bază ale internetului, există momente în care dorim doar să împărtășim anumite informații cu un anumit grup de persoane.

Această informație, să o numim "conținut premium" pentru toate intențiile și scopurile, va fi distribuită numai utilizatorilor care ne dau cevaîn schimb. Acest "ceva" poate fi o adresă de e-mail, o donare PayPal sau pur și simplu o partajare pe Facebook.

În acest tutorial, îți voi explica cum să creezi un plug-in de conținut care, cu un scurt cod scurt, ne va permite să alegem ce conținut dorim să facem premium.

Vom prezenta două exemple:

Odată ce exemplul va fi un simplu cod scurt care ne va permite să afișăm conținut pentru utilizatorii care sunt înregistrați pe site.
Celălalt cod scurt va cere ca utilizatorul să partajeze adresa URL a conținutului pe Facebook pentru a citi restul conținutului.

În invitațiile sociale WordPress folosim un dulap de conținut foarte asemănător, care afișează conținut numai pentru utilizatorii care i-au invitat prietenii.

Notă: În loc să adăugați codul la fișierul de funcții al unei teme și / sau stilul de stil, vă recomand să creați un plugin pentru a-l adăuga pe site-ul dvs. Această metodă păstrează totul într-un singur loc și vă permite să utilizați codul scurt pe orice alt site.

Ce veți avea nevoie pentru acest tutorial

Pentru a finaliza acest tutorial, veți avea nevoie de:

un site cu WordPress instalat
un editor de cod
opțional, un program FTP pentru încărcarea pluginului

Configurarea pluginului

Începeți prin a deschide un nou fișier în editorul dvs. de text și dându-i un nume. În exemplele pe care le vom vedea în acest articol, veți vedea că mi-am denumit a mea wptuts-content-locker.php dar puteți apela a ta cât vrei.

În fișier, introduceți următorul cod:

Acest lucru stabilește plugin-ul și îi spune WordPress numele și versiunea.

Adăugarea funcției Shortcode

Sub comentariul de deschidere, trebuie să adăugăm funcția care va crea codul de scurtcircuit și îl va prinde în add_shortcode cârlig de acțiune:

// înregistra codul scurt care acceptă un parametru add_shortcode ('premium-content', 'wptuts_content_locker'); // Funcția funcției shortcode wptuts_content_locker ($ atts, $ content) extract (shortcode_atts (array ('method' => "), $ atts)) global $ post; dacă is_user_logged_in ()) // Returăm returul conținutului do_shortcode ($ content); altfel // Returăm un link de conectare care va redirecționa la acest post dupa ce utilizatorul este inregistrat return "Trebuie să identificați)). ""> Conectați-vă pentru a vedea acest conținut
„;  // Folosim metoda facebook altceva // Verifica daca avem un cookie deja setat pentru aceasta posta daca isset $ _COOKIE ['wptuts-lock'] [$ post-> ID])) Returnează returul de conținut do_shortcode (conținut $); // Cerem utilizatorului să se bucure de post pentru a vedea conținutul altceva return '
Vă rugăm să distribuiți acest post pentru a vedea conținutul 
„;

Acum putem folosi codul nostru scurt astfel:

[premium-content] Conținutul Premium vine aici [/ premium-content]

Dar asteapta! Să examinăm detaliat codul de mai sus.

După cum puteți vedea, codul nostru scurt acceptă un argument care ne va împărți codul în două secțiuni. Acest argument, pe care l-am numit "metodă", face diferența între utilizarea abordării "Asemănă pe Facebook" sau a unei verificări "simple logged user".

Ambele metode sunt similare în logică, după cum puteți vedea în următoarea grafică:

Dacă utilizatorul nu este înregistrat, afișăm un link de conectare utilizând wp_login_url funcția și vom trece, de asemenea, url post / pagină. Astfel, după ce utilizatorul se loghează, el va fi redirecționat înapoi la post.

Metoda Facebook este un pic mai complexă și implică utilizarea cookie-urilor. Îi folosim pentru a stoca ID-ul postului, pentru a ști care dintre mesajele pe care le-a trimis utilizatorul și care nu le au.

Fișierul JavaScript

De asemenea, avem nevoie de javascript care să se ocupe de crearea cookie-urilor și de apelurile Facebook. Să creăm un fișier numit script.js și lipiți codul de mai jos:

 funcția createCookie (nume, valoare, zile) var expires; dacă (zile) var date = new Date (); date.setTime (date.getTime () + (zile * 24 * 60 * 60 * 1000)); expiră = "; expires =" + date.toGMTString ();  altceva expires = "";  document.cookie = escape (nume) + "=" + escape (valoare) + expiră + "; cale = /";  (functie ($) $ (function () FB.Event.subscribe (' ); loc.reload (););); (jQuery));

În acest script, vom atașa o funcție de apel invers la FB edge.create event. În mod specific, această funcție va crea cookie-ul pe care îl folosim în scriptul nostru principal pentru a verifica dacă utilizatorul a împărțit postul. Odată ce cookie-ul este creat, script-ul va reîncărca pagina pentru a afișa conținutul premium.

Adăugarea script-urilor la pluginul nostru

Acum, trebuie să adăugăm fișierul nostru script la plugin, dar să creăm mai întâi un fișier CSS foarte simplu pentru a modela plugin-ul nostru.

Creați un fișier numit style.css și adăugați următorul cod:

/ * Foaie de stil pentru Tuts + Shortcode Content Locker * / .wptuts-content-locker lățime: 80%; afișare: bloc; frontieră: 3px întreruptă #ccc; padding: 20px; text-align: centru; margine: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget overflow: hidden;

Acum permiteți înregistrarea scenariilor noastre în wp_enqueue_scripts cârlig:

// Înregistrează foile de stil și javascript cu cârligul "wp_enqueue_scripts", care poate fi folosit pentru CSS și JavaScript add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // funcția care încalcă script-ul numai dacă este utilizat funcția shortcode wptuts_content_locker_scripts () global $ post; wp_register_style ('wptuts_content_locker_style', plugins_url ('style.css', __FILE__)); wp_register_script ('wpt_subtitle'), plugins_url ('script.js', __FILE__), array ('jquery'), true, wpt_subject_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));

Rețineți că folosim has_shortcode funcţie. În acest fel vom include fișiere JavaScript și CSS numai atunci când este necesar și nu pe fiecare pagină a site-ului nostru.

De asemenea, profităm de localize_script funcția de a trece în mod corespunzător ID-ul postului în fișierul JavaScript.

Concluzie și cod

În aproximativ 120 de linii de coduri, am creat un plugin simplu, dar foarte util pentru locațiile de conținut. A fost ușor, corect?

Frumusețea acestui plugin este că îl puteți ajusta să funcționeze cu orice metodă pe care o puteți gândi. De exemplu, în loc de un Facebook cum ar fi, poți să ceri utilizatorilor să citească Twitter despre site-ul tău, să adauge un link de donare PayPal sau orice altceva poți imagina.

Puteți lua codul de la GitHub sau puteți încerca o demonstrație.

Cod