Construire un plugin WordPress avec Vue

Ce tutoriel montre comment créer une interface utilisateur WordPress moderne à l'aide de Vue.js, un cadre JavaScript progressif. Nous allons créer un plugin simple avec une interface Vue interagissant avec l'API WordPress REST via l'API Fetch.

Concepts clés:

• Ce guide couvre la création d'un plugin WordPress qui enregistre un shortcode, intégrant Vue.js et créant une application VUE qui interagit avec le point final /wp-json/wp/v2/posts?filter[orderby]=date pour afficher les messages récents.
• Nous allons démontrer la création d'une instance VUe, en utilisant des crochets de cycle de vie comme mounted() et en récupérant des données. Les mises à jour en temps réel utilisant setInterval() seront également affichées.
• Le tutoriel assume la familiarité de base avec Vue.js.

Construire le plugin WordPress:

1. Créer un répertoire de plugin: Créer un dossier (par exemple, vueplugin) dans votre répertoire WordPress wp-content/plugins.

2. vueplugin.php: À l'intérieur du dossier, créez vueplugin.php avec le contenu initial suivant:

   <?php
   /*
   Plugin Name: Latest Posts
   Description: Latest posts shortcode with Vue.js
   Version: 1.0
   */

3. Enregistrer le shortcode: Ajouter ce code à vueplugin.php pour enregistrer un shortcode nommé latestPosts:

   function handle_shortcode() {
       return '<div id="mount"></div>';
   }
   add_shortcode('latestPosts', 'handle_shortcode');
   
   function enqueue_scripts() {
       global $post;
       if (has_shortcode($post->post_content, "latestPosts")) {
           wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js', [], '2.5.17');
           wp_enqueue_script('latest-posts', plugin_dir_url(__FILE__) . 'latest-posts.js', [], '1.0', true);
       }
   }
   add_action('wp_enqueue_scripts', 'enqueue_scripts');

   Cela met en place la bibliothèque Vue.js et un fichier javascript personnalisé (latest-posts.js).

4. Activer le plugin: Activez le plugin via votre tableau de bord d'administration WordPress.

5. Tester Shortcode: Ajouter [latestPosts] à un post ou une page pour tester le shortcode.

Intégration de Vue.js:

1. latest-posts.js: Créer latest-posts.js dans votre répertoire de plugin avec ce code:

   (function() {
       var vm = new Vue({
           el: '#mount',
           data: {
               posts: []
           },
           mounted: function() {
               this.fetchPosts();
               setInterval(this.fetchPosts.bind(this), 5000);
           },
           methods: {
               fetchPosts: function() {
                   fetch('/wp-json/wp/v2/posts?filter[orderby]=date')
                       .then(response => response.json())
                       .then(data => this.posts = data);
               }
           },
           template: `
               <div>
                   <h1 id="My-Latest-Posts">My Latest Posts</h1>
                   <div v-if="posts.length > 0">
                       <ul>
                           <li v-for="post in posts">
                               <a :href="https://www.php.cn/link/f417d05af72b37f956c906aea42d1511">{{ post.title.rendered }}</a>
                           </li>
                       </ul>
                   </div>
                   <div v-else>
                       <p>Loading posts...</p>
                   </div>
               </div>
           `
       });
   })();

Cette instance Vue récupère les messages, les affiche dans une liste et se met à jour toutes les 5 secondes.

2. Vérification: Vérifiez la console de développeur de votre navigateur pour "le composant est monté" et les messages récupérés. Le script latest-posts.js doit également être inclus dans la source de votre page.

Conclusion:

Ce tutoriel amélioré fournit un exemple complet et fonctionnel d'intégration de Vue.js dans un plugin WordPress pour une expérience utilisateur dynamique en temps réel. N'oubliez pas d'ajuster les chemins et le style au besoin pour votre thème spécifique. Les FAQ de l'entrée d'origine ont été omises car elles sont correctement couvertes dans le tutoriel révisé et élargi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!