Comment développer un plugin de contenu simple en utilisant WordPress

Bien que certains considèrent le partage comme l'un des principes fondamentaux d'Internet, il arrive que nous ne voulions partager certaines informations qu'avec un certain groupe de personnes..

Cette information, appelons-la «contenu premium» à toutes fins utiles, ne sera partagée qu'avec les utilisateurs qui nous donnent quelque choseen retour. Ce «quelque chose» peut être une adresse email, un don PayPal ou simplement un partage sur Facebook..

Dans ce tutoriel, j'expliquerai comment créer un plugin de Content Locker qui, avec un simple shortcode, nous permettra de choisir le contenu que nous voulons rendre premium..

Nous allons couvrir deux exemples:

  1. Une fois, l’exemple sera un simple code court qui nous permettra d’afficher du contenu aux utilisateurs qui sont inscrits sur le site..
  2. L'autre shortcode obligera l'utilisateur à partager l'URL du contenu sur Facebook pour pouvoir lire le reste du contenu..

Dans WordPress Social Invitations, nous utilisons un casier de contenu très similaire qui affiche le contenu uniquement pour les utilisateurs qui ont invité leurs amis..

Remarque: Au lieu d’ajouter du code au fichier de fonctions et / ou aux stylesheeet d’un thème, je vous recommande de créer un plugin pour l’ajouter à votre site. Cette méthode conserve tout au même endroit et vous permet d’utiliser le shortcode sur n’importe quel autre site..

Ce dont vous aurez besoin pour ce tutoriel

Pour compléter ce tutoriel, vous aurez besoin de:

  • un site avec WordPress installé
  • un éditeur de code
  • éventuellement un programme FTP pour télécharger votre plugin

Configurer le plugin

Commencez par ouvrir un nouveau fichier dans votre éditeur de texte et donnez-lui un nom. Dans les exemples que nous allons voir dans cet article, vous verrez que j'ai nommé le mien wptuts-content-locker.php mais tu peux appeler le tien comme tu veux.

Dans le fichier, insérez le code suivant:

Ceci configure votre plugin et indique à WordPress son nom et sa version..

Ajout de la fonction Shortcode

Au-dessous du commentaire d’ouverture, nous devons ajouter la fonction qui créera le shortcode et le reliera au add_shortcode crochet d'action:

// enregistre le shortcode qui accepte un paramètre add_shortcode ('premium-content', 'wptuts_content_locker'); // fonction shortcode fonction wptuts_content_locker ($ atts, $ content) extract (shortcode_atts (array ('method' => "), $ atts));; global $ post; // si la méthode n'est pas 'facebook', alors nous vérifie la présence d'un utilisateur connecté if ('facebook'! = $ method) if (is_user_logged_in ()) // Nous renvoyons le contenu, retournons do_shortcode ($ content); // Nous renvoyons un lien de connexion qui redirigera vers ce contenu. post après que l'utilisateur est connecté, retour '
Vous devez vous identifier)). '"> Connectez-vous pour voir ce contenu
'; // Nous utilisons la méthode facebook else // Vérifiez si un cookie est déjà défini pour cette publication if (isset ($ _COOKIE ['wptuts-lock']] [$ post-> ID])) // Nous retournons le contenu return do_shortcode ($ content); // Nous demandons à l'utilisateur d'aimer post pour voir le contenu else return '
S'il vous plaît partager ce post pour voir le contenu
';

Nous pouvons maintenant utiliser notre shortcode comme ceci:

[contenu premium] le contenu Premium va ici [/ premium-contenu]

Mais attendez! Laissons un regard détaillé sur le code ci-dessus. 

Comme vous pouvez le constater, notre shortcode accepte un argument qui divisera notre code en deux parties. Cet argument que j’ai appelé «méthode» distingue l’utilisation de l’approche «J'aime sur Facebook» ou de la vérification «simple utilisateur connecté»..

Les deux méthodes sont similaires dans la logique, comme vous pouvez le voir dans le graphique suivant:

Si l'utilisateur n'est pas connecté, nous affichons un lien de connexion à l'aide de wp_login_url fonction et nous passons aussi le post / page url. De cette façon, après que l'utilisateur se soit connecté, il sera redirigé vers le poste..

La méthode Facebook est un peu plus complexe et implique l'utilisation de cookies. Nous les utilisons pour stocker l’ID de publication, afin de savoir quelles publications sont partagées par l’utilisateur et lesquelles ne le sont pas..

Le fichier JavaScript

Nous avons également besoin de javascript qui gérera la création de cookies et le rappel Facebook. Créons un fichier appelé script.js et collez le code ci-dessous:

 function createCookie (nom, valeur, jours) var expires; si (jours) var date = nouvelle date (); date.setTime (date.getTime () + (jours * 24 * 60 * 60 * 1000)); expires = "; expires =" + date.toGMTString ();  else expires = "";  document.cookie = escape (nom) + "=" + escape (valeur) + expire + "; chemin = /";  (function ($) $ (function () FB.Event.subscribe ('edge.create', fonction (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']', vrai, 9999 ); location.reload (););); (jQuery));

Dans ce script, nous allons associer une fonction de rappel au FB. événement edge.create. Plus précisément, cette fonction créera le cookie que nous utilisons dans notre script principal pour vérifier si l'utilisateur a partagé la publication. Une fois le cookie créé, le script rechargera la page pour afficher le contenu premium.

Ajouter les scripts à notre plugin

Nous devons maintenant ajouter notre fichier de script au plugin, mais créons d'abord un fichier CSS très basique pour styler notre plugin. 

Créez un fichier appelé style.css et ajoutez le code suivant:

/ * Feuille de style pour Tuts + Shortcode Content Locker * / .wptuts-content-locker width: 80%; bloc de visualisation; bordure: 3px en pointillé #ccc; rembourrage: 20px; text-align: center; marge: auto 20 pixels .wptuts-content-locker div.fb-like.fb_iframe_widget débordement: masqué; 

Maintenant, laissez enregistrer nos scripts dans le wp_enqueue_scripts crochet:

// Enregistre la feuille de style et le javascript avec le hook 'wp_enqueue_scripts', qui peut être utilisé pour les CSS et l'interface frontales add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // fonction qui met en file d'attente le script uniquement si un shortcode est utilisé 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 (' wputs_content_locker_style '); wp_enqueue_script (' wptuts_content_locker_js-fb ',' http://connect.facebook.net/en_US/all.js#xfbml=1 ', array (' jquery '), ", jQuery',", FALSE); wp_enqueue_script ('wptuts_content_locker_js'); wp_localize_script ('wptuts_content_locker_js', 'wptuts_content_locker', array ('ID' => $ post-> ID)); 

Veuillez noter que nous utilisons le has_shortcode une fonction. De cette façon, nous allons inclure les fichiers JavaScript et CSS uniquement lorsque cela est nécessaire et non sur toutes les pages de notre site.. 

Nous profitons également de la localiser_script fonction pour passer correctement l'ID de publication au fichier JavaScript.

Conclusion et code

En environ 120 lignes de code, nous avons créé un plugin de contenu simple mais très utile. C'était facile, non?

La beauté de ce plugin est que vous pouvez l'ajuster pour fonctionner avec n'importe quelle méthode que vous pouvez penser. Par exemple, au lieu d’un Facebook similaire, vous pouvez demander aux utilisateurs de tweeter sur votre site, d’ajouter un lien de donation PayPal ou de n’importe quoi d’autre que vous pouvez imaginer..

Vous pouvez récupérer le code de GitHub ou essayer une démo.