Fermer

octobre 30, 2018

Construire un plugin WordPress avec Vue –


Dans ce didacticiel, nous allons apprendre à intégrer Vue.js à un plugin WordPress afin de fournir une expérience d'interface utilisateur moderne à nos utilisateurs WordPress.

Vue.js est un JavaScript progressif très populaire. bibliothèque pour la construction d’interfaces utilisateur modernes et riches, similaires à Angular et React en termes de popularité, de performances et d’architecture à base de composants. Nous allons plonger dans l'ensemble du processus de construction d'un plugin WordPress très simple avec une interface Vue qui interagit avec l'API REST WordPress via l'API JavaScript Fetch.

Nous allons créer un shortcode qui nous permettra d'ajouter un . ] derniers articles publiés dans notre site Web WordPress. L’interface utilisateur du widget est une application Vue qui récupère les derniers messages publiés via le filtre / wp-json / wp / v2 / posts [orderby] = date WP-API.

Ce tutoriel suppose une certaine familiarité avec Vue.js. Nous verrons comment créer une instance Vue, utiliser des crochets de cycle de vie tels que mount () ainsi que l'API JavaScript Fetch pour interagir avec l'API REST WordPress.

Création d'un plugin WordPress [19659006] Dans cette section, nous verrons comment créer un plugin WordPress qui enregistre un shortcode en quelques étapes.

Création d'un dossier dans wp-content / plugins

Commençons par créer le back-end une partie de notre plugin. Les plugins résident dans le dossier de wp-content / plugins . Naviguez jusqu'à ce dossier dans votre dossier d'installation WordPress et créez un sous-dossier pour votre plugin. Appelons-le vueplugin :

 cd / var / www / html / wp-content / plugins
mkdir vueplugin

Dans votre dossier de plug-in, créez un fichier de vueplugin.php et ajoutez le contenu initial:

 <? Php
/ *
Nom du plugin: Derniers messages
Description: Derniers articles shortcode
Version: 1.0
* /

Ces commentaires sont utilisés comme méta-informations pour le plug-in. Dans notre cas, nous fournissons simplement un nom, une description et une version du plug-in.

Si vous visitez la page des plug-ins dans l'interface d'administration, vous devriez pouvoir voir votre plug-in répertorié:

. page des plugins

Création d'un code court

Les codes courts sont utilisés via des plugins WordPress pour permettre aux utilisateurs d'ajouter du contenu à des publications et à des pages. Pour enregistrer un shortcode, vous devez ajouter le code minimal suivant dans votre fichier de plug-in:

 function handle_shortcode () {
    retourne 'Mon dernier message Widget';
}
add_shortcode ('latestPosts', 'handle_shortcode');

Nous enregistrons un shortcode nommé latestPosts .

WordPress fournit la fonction intégrée add_shortcode () pour créer le shortcode dans votre plugin WordPress. La fonction prend un nom en tant que premier paramètre et la fonction de gestionnaire qui traite votre logique de code court et renvoie une sortie en tant que deuxième paramètre.

À ce stade, nous ne renvoyons qu'une chaîne statique de notre code court, mais les codes courts sont plus nombreux. utile pour insérer du contenu dynamique.

Activez maintenant le plug-in à partir de l'interface d'administration en cliquant sur le lien Activer sous le nom du plug-in:

 Activer le plug-in

Vous pouvez utiliser un shortcode en le mettant entre crochets, c'est-à-dire [SHORTCODE_NAME]. Le texte entre crochets est le nom que nous avons transmis en tant que premier paramètre à la fonction add_shortcode () . Il est remplacé par la sortie renvoyée par la fonction PHP passée en tant que deuxième paramètre.

Pour vérifier si notre shortcode est enregistré avec succès, nous pouvons créer un nouveau message et ajouter [latestPosts] au contenu du message:

 Tester le code court

Vous devriez voir Mes derniers messages Widget sentence:

 La phrase test a été rendue

Maintenant, au lieu d’afficher le statique Widget My Latest Posts, affiche les derniers messages en utilisant Vue.js.

Intégration de Vue.js à un plugin WordPress

Le Vue docs répertorie différentes méthodes d'utilisation de Vue .js. Le plus simple consiste à utiliser une balise

 (function () {
 var vm = new Vue ({
    el: document.querySelector ('# mount'),
    monté: function () {
    console.log ("Hello Vue!");
 }
});
}) ();

Nous créons une nouvelle instance Vue avec la fonction Vue () qui constitue la première étape du démarrage de l'application Vue.

Lors de la création de l'instance Vue, vous devez également fournir un élément . ] options qui vous permet de fournir différentes options pour construire votre application Vue.

Dans notre exemple, nous utilisons la propriété el pour fournir à l'instance Vue un élément DOM existant sur lequel monter. . Cela peut être un sélecteur CSS ou un HTMLElement réel. Dans notre cas, nous utilisons document.querySelector ('# mount') pour obtenir l'élément HTML de l'élément

avec l'identificateur #mount .

. propriété montée pour fournir une fonction qui sera appelée une fois l'instance montée. À ce stade, nous n'enregistrons qu'une chaîne Hello Vue! sur la console

. Vous pouvez également parcourir la liste complète des options disponibles dans la référence de l'API .

. Ensuite, tout comme la bibliothèque Vue, vous devez mettre ce fichier en file d'attente. Dans la fonction enqueue_scripts () ajoutez le code suivant:

 wp_enqueue_script ('latest-posts', plugin_dir_url (__FILE__). 'Latest-posts.js', []"1.0", true )

La fonction intégrée plugin_dir_url () est utilisée pour obtenir l'URL absolue d'un fichier. __ FILE __ est une constante qui vous donne le chemin du système de fichiers vers le fichier PHP actuel. Cela nous permettra d'obtenir le chemin absolu du fichier latest-posts.js sans utiliser d'URL codées en dur pouvant être modifiées sur un autre système.

À ce stade, vous devriez voir le fichier . Hello Vue! chaîne sur la console du navigateur:

 The Hello Vue! chaîne sur la console du navigateur

Et vous devriez également voir le script latest-posts.js inclus dans le code source d'un article contenant le code court.

 -posts.js script inclus dans le code source

Modifions ensuite le plug-in pour afficher la chaîne précédente My Latest Posts Widget mais cette fois à partir de Vue. Dans votre instance Vue, incluez la propriété template avec le code HTML que vous souhaitez restituer:

 var vm = new Vue ({
   el: document.querySelector ('# mount'),
   modèle: "

Mon dernier message Widget

",    monté: function () {    console.log ("Hello Vue!");  } });

Maintenant, récupérons et rendons les derniers posts en utilisant l'API fetch.

Dans l'occurrence Vue, ajoutez une propriété data avec un tableau posts qui contiendra les posts récupérés:

 var vm = new Vue ({
   el: document.querySelector ('# mount'),
   Les données: {
    messages: []
   },

Ensuite, incluons le code permettant d'extraire les derniers messages de l'événement de cycle de vie monté qui est déclenché lorsque le composant est monté sur le DOM:

 var url = '/ wp-json / wp / v2 / posts? filter [orderby] = date ';
 chercher (url) .then ((response) => {}
    retourne response.json ()
  ) .then ((data) => {
    this.posts = data;
  })

Nous appelons la méthode JavaScript fetch () qui renvoie une promesse. Après avoir résolu la promesse avec succès, nous affectons les données au tableau posts .

Enfin, ajoutez la propriété template :

: '

Mes derniers messages

            
                

                     {{post.title.rendered}}                 

            
',

Nous utilisons la directive Vue v-for pour parcourir les publications et afficher les propriétés ainsi que le titre et le lien de chaque publication. [19659003] Ceci est une capture d'écran du résultat pour moi.

 Un exemple de résultat

Dans votre cas, il peut sembler différent en fonction de votre thème actif et des messages que vous avez publiés sur votre site Web WordPress. 19659003] Si vous cliquez sur le titre de l'article, vous devriez accéder à la page de l'article.

Nous pouvons ajouter d'autres fonctionnalités à notre widget, telles que l'extraction de données en temps réel, de sorte que l'utilisateur n'a pas besoin de recharger la page. récupérer les derniers articles publiés. Pour ce faire, nous interrogeons en permanence le point de terminaison WP-API à l'aide de la méthode JavaScript setInterval () .

Déplacez d'abord le code qui récupère les publications dans sa propre méthode:

 var vm = new Vue ({
  /*...*/

 méthodes: {

  fetchPosts: function () {
    var url = '/ wp-json / wp / v2 / posts? filtre [orderby] = date';
    chercher (url) .then ((response) => {
      retourne response.json ()
      }). then ((data) => {
        this.posts = data;
        console.log (this.posts);
      });
  }
 },

Nous utilisons la propriété methods de l'instance Vue pour ajouter des méthodes personnalisées dans notre instance Vue. Vous pouvez ensuite accéder à ces méthodes directement sur l'instance via par celle-ci .

Ensuite, dans la fonction () [)ajoutez le code suivant pour extraire les messages toutes les cinq secondes: [19659047] var vm = new Vue ({
  /*...*/
 monté: function () {
   console.log ("Le composant est monté");

   this.fetchPosts ();
   setInterval (function () {
    this.fetchPosts ();
   } .bind (this), 5000);
 }

Vous pouvez le tester en ouvrant l'interface d'administration de WordPress dans l'onglet d'un autre navigateur et en ajoutant un nouveau message. Votre widget Vue devrait être mis à jour avec une nouvelle publication sans actualisation manuelle de la page.

Conclusion

Dans ce didacticiel, nous avons vu comment créer un plug-in WordPress utilisant la bibliothèque Vue.js. Nous avons créé un shortcode pouvant être utilisé pour afficher un composant Vue dans vos publications et pages, qui récupère et affiche les dernières publications toutes les cinq secondes. Ceci a été réalisé via une interrogation de l'API REST WordPress à l'aide de la méthode setInterval () .




Source link