Come sviluppare un plugin di contenuto semplice con l'uso di WordPress

Sebbene alcuni vedano la condivisione come uno dei principi fondamentali di Internet, ci sono momenti in cui vogliamo solo condividere alcune informazioni con un certo gruppo di persone.

Questa informazione, chiamiamola "contenuto premium" a tutti gli effetti, sarà condivisa solo con gli utenti che ci danno qualcosain cambio. Questo "qualcosa" può essere un indirizzo email, una donazione PayPal o semplicemente una condivisione su Facebook.

In questo tutorial, spiegherò come creare un plug-in del content lock che con un semplice shortcode ci permetterà di scegliere quali contenuti vogliamo rendere premium.

Ci occuperemo di due esempi:

  1. Una volta l'esempio sarà un semplice shortcode che ci consentirà di visualizzare il contenuto agli utenti registrati sul sito.
  2. L'altro shortcode richiede che l'utente debba condividere l'URL del contenuto su Facebook per leggere il resto del contenuto.

Negli inviti sociali di WordPress utilizziamo un blocco dei contenuti molto simile che mostra il contenuto solo agli utenti che hanno invitato i loro amici.

Nota: Invece di aggiungere codice al file di funzioni di un tema e / o stylesheeet, ti consiglio di creare un plug-in per aggiungerlo al tuo sito. Questo metodo mantiene tutto in un unico posto e consente di utilizzare lo shortcode su qualsiasi altro sito.

Cosa ti serve per questo tutorial

Per completare questo tutorial, avrai bisogno di:

  • un sito con WordPress installato
  • un editor di codice
  • opzionalmente, un programma FTP per caricare il tuo plugin

Impostazione del plugin

Inizia aprendo un nuovo file nel tuo editor di testo e assegnandogli un nome. Negli esempi che vedremo in questo articolo, vedrai che ho chiamato il mio wptuts-content-locker.php ma puoi chiamare il tuo qualunque cosa desideri.

Nel file, inserisci il seguente codice:

Questo imposta il tuo plugin e dice a WordPress il suo nome e la sua versione.

Aggiunta della funzione Shortcode

Sotto il commento di apertura, è necessario aggiungere la funzione che creerà lo shortcode e lo collegherà al add_shortcode gancio di azione:

// registra lo shortcode che accetta un parametro add_shortcode ('premium-content', 'wptuts_content_locker'); // funzione funzione shortcode wptuts_content_locker ($ atts, $ content) extract (shortcode_atts (array ('metodo' => "), $ atts)); globale $ post; // se il metodo non è 'facebook', allora controlla utente registrato se ('facebook'! = $ metodo) if (is_user_logged_in ()) // Restituiamo il contenuto restituito do_shortcode ($ content); else // Restituiamo un link di accesso che reindirizzerà a questo post dopo che l'utente è registrato, restituisci '
Hai bisogno di ID)). '"> Accedi per vedere questo contenuto
'; // Usiamo il metodo facebook else // Controlla se abbiamo già impostato un cookie per questo post se (isset ($ _COOKIE ['wptuts-lock'] [$ post-> ID])) // Restituiamo il contenuto restituito do_shortcode ($ content); // Chiediamo all'utente di piacere post per vedere il contenuto else return '
Si prega di condividere questo post per vedere il contenuto
';

Ora possiamo usare il nostro shortcode come questo:

[contenuti premium] I contenuti premium vanno qui [/ contenuti premium]

Ma aspetta! Diamo un'occhiata dettagliata al codice sopra. 

Come puoi vedere, il nostro shortcode accetta un argomento che dividerà il nostro codice in due sezioni. Questo argomento che ho chiamato "metodo" distingue tra l'utilizzo dell'approccio "Mi piace su Facebook" o il controllo di "utente registrato semplice".

Entrambi i metodi sono simili nella logica, come puoi vedere nel seguente grafico:

Se l'utente non è registrato, stiamo mostrando un collegamento di accesso usando wp_login_url funzione e passiamo anche l'url post / pagina. In questo modo, dopo che l'utente ha effettuato l'accesso, verrà reindirizzato al post.

Il metodo di Facebook è un po 'più complesso e comporta l'uso di cookie. Li usiamo per memorizzare l'ID del post, per sapere quali post l'utente ha condiviso e quali no.

Il file JavaScript

Abbiamo anche bisogno di qualche javascript che gestirà la creazione di cookie e il callback di Facebook. Creiamo un file chiamato script.js e incolla il codice qui sotto:

 funzione createCookie (nome, valore, giorni) var scade; se (giorni) var date = new Date (); date.setTime (date.getTime () + (days * 24 * 60 * 60 * 1000)); expires = "; expires =" + date.toGMTString ();  else expires = "";  document.cookie = escape (nome) + "=" + escape (valore) + scadenza + "; path = /";  (function ($) $ (function () FB.Event.subscribe ('edge.create', function (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']', vero, 9999 ); location.reload (););); (jQuery));

In questo script, associamo una funzione di callback all'FB evento edge.create. Nello specifico, questa funzione creerà il cookie che usiamo nel nostro script principale per verificare se l'utente ha condiviso il post. Una volta creato il cookie, lo script ricaricherà la pagina per visualizzare il contenuto premium.

Aggiunta degli script al nostro plugin

Ora dobbiamo aggiungere il nostro file di script al plugin, ma creiamo prima un file CSS di base per modellare il nostro plugin. 

Crea un file chiamato style.css e aggiungi il seguente codice:

/ * Foglio di stile per Tuts + Short Locker contenuto * / .wptuts-content-locker width: 80%; blocco di visualizzazione; border: 3px dashed #ccc; imbottitura: 20px; allineamento del testo: centro; margin: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget overflow: hidden; 

Ora lascia che i nostri script siano registrati nel wp_enqueue_scripts gancio:

// Registra foglio di stile e javascript con hook 'wp_enqueue_scripts', che può essere usato per front-end CSS e JavaScript add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // funzione che accoda lo script solo se si utilizza lo shortcode 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)); 

Si prega di notare che stiamo usando il has_shortcode funzione. In questo modo includeremo i file JavaScript e CSS solo quando necessario e non in ogni pagina del nostro sito. 

Approfittiamo anche del localize_script funzione per passare correttamente l'ID del post al file JavaScript.

Conclusione e codice

In circa 120 righe di codice, abbiamo creato un semplice ma molto utile plugin per il content locker. E 'stato facile, giusto?

La bellezza di questo plugin è che puoi regolarlo per lavorare con qualsiasi metodo riesci a pensare. Ad esempio, invece di un tipo di Facebook, puoi chiedere agli utenti di twittare del tuo sito, aggiungere un link di donazione PayPal o qualsiasi altra cosa tu possa immaginare.

Puoi prendere il codice da GitHub o provare una demo.