Share
Dans cette série, nous discutons de la façon d'implémenter Ajax dans l'interface WordPress. Dans le premier article de la série, nous avons examiné le fonctionnement général d'Ajax, comment l'introduire dans le tableau de bord de WordPress et comment inclure Ajax dans le tableau de bord de WordPress, ainsi que les deux crochets disponibles pour l'intégration d'Ajax dans WordPress..
À ce stade, il est temps de créer quelque chose qui montrera comment nous pouvons utiliser Ajax dans l'interface WordPress. Pour ce faire, nous allons écrire notre propre plugin en nous assurant que nous suivons les meilleures pratiques de WordPress tout au long du processus..
À la fin de cet article, nous aurons un plugin pleinement fonctionnel avec le code source disponible publiquement sur GitHub. Cela dit, commençons.
Si vous avez lu l'un de mes articles précédents, sachez que j'aime toujours commencer mes projets en planifiant ce que nous allons faire. Ce projet n'est pas différent.
Dans cet exemple, nous allons introduire une case à cocher qui permet aux lecteurs connectés à un site WordPress de cocher les articles de blog qu'ils ont lus. De cette façon, ils ne verront que les messages qu'ils n'ont pas encore lus depuis leur connexion au site..
Pour construire cela, nous allons utiliser deux choses:
Une fois que vous avez configuré l’environnement, voici le plan d’action que nous allons suivre pour notre plugin:
Je l'ai? Allez-y et connectez-vous en tant qu'utilisateur créé avec le rôle 'Abonné' et commençons!
Une fois les données de test importées, votre configuration devrait ressembler à ceci:
A partir de là, nous sommes prêts à commencer à écrire le plugin.
Avant d'écrire du code, j'aime bien aller décompresser les fichiers du plugin. Cela signifie que nous allons configurer le répertoire, la structure de base du plugin et tous les répertoires que nous pourrions avoir besoin d'utiliser pour les dépendances de plugins..
Étant donné que nous allons fournir un style clair ainsi que des fichiers JavaScript pour lancer la demande Ajax, voici à quoi devrait ressembler la structure de répertoires de base. Le répertoire lang est optionnel, bien que je le considère comme une bonne pratique:
Maintenant, extrayons le texte requis pour la plugin.php. Notez que ce ne sera qu'un squelette. Il sera principalement responsable de jeter les bases de ce que nous construirons plus tard dans l'article:
À ce stade, vous pouvez réellement activer le plugin dans le tableau de bord du plugin WordPress, bien que rien ne se produise réellement. Si vous le souhaitez, allez-y maintenant, vous pourrez regarder le plugin prendre vie à mesure que nous y travaillons..
Étant donné que nous allons introduire une case à cocher sur chaque message permettant aux utilisateurs de choisir si ils ont lu le message ou non, nous devrons prendre en compte les éléments suivants:
Nous pouvons atteindre ces deux objectifs en ajoutant la fonction suivante:
/ ** * Ajoute une case à la fin d'une publication en vue unique qui permet aux utilisateurs connectés * de marquer leur publication comme lue. * * @param $ content Contenu de la publication * @return Contenu de la publication avec ou sans la case à cocher ajoutée * / public function add_checkbox ($ content) // Nous souhaitons modifier le contenu uniquement si l'utilisateur est connecté si (is_user_logged_in ( ) && is_single ()) // Construit l'élément qui sera utilisé pour marquer ce message comme lu $ html = ''; $ html. = ''; $ html. = ''; // l'ajoute au contenu $ content. = $ Html; // end if return $ content; // fin de add_checkbox
Lisez attentivement les commentaires, car ils doivent expliquer exactement ce qui se passe. Cependant, si vous n'êtes pas clair, n'hésitez pas à laisser un commentaire..
Ensuite, nous devons ajouter la ligne suivante dans le constructeur afin que le contenu le filtre s'appelle:
Accentsconagua
// Configurez l'action pour afficher la case à cocher add_filter ('the_content', array (& $ this, 'add_checkbox')); Enfin, ajoutons un peu de style pour donner à la case à cocher une apparence légèrement unique dans le contexte du thème Twenty Eleven. Dans le plugin plugin.css fichier, ajoutez le code suivant:
# ive-read-this-container margin: 1em 0 1em; fond: #eee; bordure: 1px solide #ccc; rembourrage: 0.25em;
Maintenant, si vous vous connectez à l’installation de WordPress et naviguez jusqu’au bas d’un article, vous devriez voir quelque chose comme l’image suivante:
À ce stade, nous sommes prêts à commencer à écrire du code JavaScript..
La première chose à faire est de configurer JavaScript afin qu'il ne se déclenche que si le conteneur "J'ai lu ceci" se trouve sur la page. Il existe différentes façons de procéder, mais comme nous chargeons le code JavaScript sur chaque page, nous utiliserons le code JavaScript pour vérifier la présence de la case à cocher "J'ai lu ce" que nous écrivons. à la page.
Pour ce faire, ajoutez le code suivant à plugin.js. Les commentaires de code doivent être explicites. Si non, laissez un commentaire!
(function ($) $ (function () // Si le "J'ai lu ce conteneur" est sur cette page, configurons le gestionnaire d'événements if (1 === $ ('# ive-read-this- conteneur '). longueur) // fin si); (jQuery)); Dans le code que vous voyez ci-dessus, tout ce que nous plaçons dans le conditionnel ne sera déclenché que si l'élément conteneur "J'ai lu ce" est présent..
Dans ce cas, nous savons que nous devons envoyer l'ID de la publication au serveur. Puisque l'utilisateur est connecté, nous pourrons obtenir son identifiant côté serveur..
La prochaine étape consiste donc à obtenir l'identifiant de la publication sur laquelle nous sommes. Heureusement, Twenty Eleven enregistre le numéro du poste dans la article ID de l'élément. Nous avons juste besoin de l'analyser.
Faisons cela maintenant:
// Nous utilisons l'attribut change pour que le gestionnaire d'événements se déclenche à chaque fois que l'on clique sur la case à cocher ou son étiquette associée. $ ('input [name = "ive-read-this"] "). change (function (evt) // Nous pouvons récupérer l'ID de cette publication à partir du L'identifiant Ceci sera nécessaire // pour que nous puissions marquer que l'utilisateur a lu ce message particulier et que nous pouvons le cacher. var sArticleId, iPostId; // Récupère l'identifiant de l'article et le divise - le deuxième index est toujours l'identifiant de la publication dans Twenty Eleven sArticleId = $ ("article"). Attr ('id'); iPostId = parseInt (sArticleId.split ('-') [1]); ); À ce stade, nous sommes prêts à configurer une demande Ajax. Nous utiliserons jQuery $ .post méthode pour le faire et nous allons utiliser le standard de WordPress ajaxurl pour gérer notre réponse.
Continuons et écrivons le code qui enverra l'ID de la publication. Nous nous préoccuperons de la réponse plus tard dans cet article, d’où le commentaire "TODO" dans le code.
// Initialise la demande pour marquer cet article particulier comme lu $ .post (ajaxurl, post_id: iPostId, function (response) // TODO);
À ce stade du développement, la source JavaScript complète devrait ressembler à ceci:
(function ($) $ (function () // Si le "J'ai lu ce conteneur" est sur cette page, configurons le gestionnaire d'événements if (1 === $ ('# ive-read-this- container '). length) // Nous utilisons l'attribut change pour que le gestionnaire d'événements se déclenche à chaque fois que l'on clique sur la case ou son étiquette associée. $ (' input [name = "ive-read-this"] "). change (function (evt) // Nous pouvons récupérer l'ID de cette publication à partir du L'identifiant Ceci sera nécessaire // pour que nous puissions marquer que l'utilisateur a lu ce message particulier et que nous pouvons le cacher. var sArticleId, iPostId; // Récupère l'identifiant de l'article et le divise - le deuxième index est toujours l'identifiant de la publication dans Twenty Eleven sArticleId = $ ("article"). Attr ('id'); iPostId = parseInt (sArticleId.split ('-') [1]); // Initialise la demande pour marquer cette publication particulière comme lue $ .post (ajaxurl, post_id: iPostId, function (response) // TODO); ); // fin si ); (jQuery)); Pour ceux d'entre vous qui ont travaillé sur l'exemple de code lors de la lecture de l'article, vous remarquerez immédiatement que votre navigateur génère une erreur de console:
Uncaught ReferenceError: ajaxurl n'est pas défini
Oops! Et ce est l'endroit où nous devons nous assurer d'inclure correctement la bibliothèque Ajax de WordPress.
Pour ce faire, nous devrons nous accrocher à la wp_head action. Ajoutez la ligne de code suivante dans le constructeur de votre plugin:
// Inclut la bibliothèque Ajax sur le front-end add_action ('wp_head', array (& $ this, 'add_ajax_library')); Ensuite, ajoutez la fonction suivante. C'est ce qui est en fait responsable d'inclure la bibliothèque Ajax:
/ ** * Ajoute la bibliothèque WordPress Ajax à l'interface. * / fonction publique add_ajax_library () $ html = ''; echo $ html; // fin add_ajax_library
Maintenant, si vous essayez d’exécuter le code, vous ne devriez pas avoir de problème. À ce stade, nous sommes prêts à continuer.
Maintenant que la demande est envoyée au serveur, nous pouvons écrire notre gestionnaire d'événements côté serveur. Voici comment le gestionnaire devrait fonctionner:
-1; sinon, nous reviendrons 1. Nous allons gérer ces valeurs dans le gestionnaire de réponses dans JavaScript.Tout d'abord, nous allons ajouter le hook dans le constructeur du plugin:
// Configure le gestionnaire d'événement pour marquer cette publication comme lue pour l'utilisateur actuel add_action ('wp_ajax_mark_as_read', array (& $ this, 'mark_as_read')); Ensuite, nous allons implémenter le gestionnaire:
/ ** * Utilise l'ID utilisateur actuel et l'ID de l'article entrant pour marquer cet article comme lu * pour l'utilisateur actuel. * * Nous stockons l'identifiant de ce message dans la méta de l'utilisateur associé afin de pouvoir le cacher * et ne l'affichera plus dans la liste. * / public function mark_as_read () // Premièrement, nous devons nous assurer que le paramètre post ID a été défini et qu'il s'agit d'une valeur numérique if (isset ($ _POST ['post_id']) && is_numeric ($ _POST ['post_id '])) // Si nous ne parvenons pas à mettre à jour la méta de l'utilisateur, répondons par -1; sinon, répondez avec 1. echo false == update_user_meta (wp_get_current_user () -> ID, $ _POST ['post_id'], 'ive_read_this')? "-1": "1"; // fin si die (); // fin mark_as_read
À cette fin, revenons sur l'exceptionnel FAIRE dans la fonction de réponse du JavaScript sur lequel nous travaillions. Voici le script complet:
(function ($) $ (function () // Si le "J'ai lu ce conteneur" est sur cette page, configurons le gestionnaire d'événements if (1 === $ ('# ive-read-this- container '). length) // Nous utilisons l'attribut change pour que le gestionnaire d'événements se déclenche à chaque fois que l'on clique sur la case ou son étiquette associée. $ (' input [name = "ive-read-this"] "). change (function (evt) // Nous pouvons récupérer l'ID de cette publication à partir du L'identifiant Ceci sera nécessaire // pour que nous puissions marquer que l'utilisateur a lu ce message particulier et que nous pouvons le cacher. var sArticleId, iPostId; // Récupère l'identifiant de l'article et le divise - le deuxième index est toujours l'identifiant de la publication dans Twenty Eleven sArticleId = $ ("article"). Attr ('id'); iPostId = parseInt (sArticleId.split ('-') [1]); // Initialise la demande pour marquer cet article particulier comme lu $ .post (ajaxurl, action: 'mark_as_read', post_id: iPostId, function (réponse) // Si le serveur renvoie '1', nous pouvons marquer cette publication sera lue, nous allons donc masquer la case à cocher // conteneur. La prochaine fois que l'utilisateur naviguera dans l'index, cette publication n'apparaîtra pas si (1 === parseInt (réponse)) $ ('# ive-read- this-container '). slideUp (' fast '); // Sinon, avertissons l’utilisateur qu’il ya un problème. Dans un environnement plus vaste, // nous voulons gérer ce problème de manière plus élégante. else alert (" Une erreur s'est produite lors de la lecture de ce message. Veuillez réessayer. "); // end if / else); ); // fin si ); (jQuery)); S'il arrive que l'utilisateur trouve son chemin vers une page de publication individuelle (par exemple, en étant lié à celle-ci), nous devons vérifier s'il a déjà marqué cette page pour qu'elle soit lue..
Pour ce faire, nous devons repenser la add_checkbox function afin qu'il vérifie si l'utilisateur est connecté et qu'il lit la méta de l'utilisateur pour déterminer si la publication a déjà été marquée comme lue:
/ ** * Ajoute une case à la fin d'une publication en vue unique qui permet aux utilisateurs connectés * de marquer leur publication comme lue. * * @param $ content Le contenu du message * @return Le contenu du message avec ou sans la case à cocher ajoutée * / public function add_checkbox ($ content) // Nous souhaitons modifier le contenu uniquement si l'utilisateur est connecté si (is_single ( )) // Si l'utilisateur est connecté… if (is_user_logged_in ()) // Et s'ils ont déjà lu ce message… if ('ive_read_this' == get_user_meta (wp_get_current_user () -> ID, get_the_ID () , true)) // Construit l'élément pour indiquer que cette publication a été lue $ html = ''; $ html. = ''; $ html. = __ ("J'ai lu ce post.", 'ive-read-this'); $ html. = ''; $ html. = ''; // Sinon, donnez-leur la possibilité de marquer ce message comme lu else // Construisez l'élément qui sera utilisé pour marquer ce message comme lu $ html = ''; $ html. = ''; $ html. = ''; // fin si // Ajoute-le au contenu $ content. = $ html; // fin si // fin si retour $ contenu; // fin de add_checkbox À ce stade, vous avez un plugin fonctionnel:
Pas mal, droit?
Bien sûr, il y a toujours de la place pour expérimenter par soi-même avec cela. Par exemple, vous pouvez exclure ces publications de la boucle principale si elles ont été marquées comme lues. Une autre option consisterait à ajouter un nom de classe personnalisé, puis à styler le message pour indiquer que l'utilisateur actuel l'a lu..
Enfin, rappelez-vous que vous pouvez récupérer tout le code source dans son intégralité sur GitHub..
