用VUE構建WordPress插件

本教程展示瞭如何使用漸進的JavaScript框架Vue.js構建現代WordPress UI。 我們將通過fetch api與WordPress Rest API進行VUE接口創建一個簡單的插件。

密鑰概念：

• >本指南涵蓋了創建一個wordpress插件，該插件會記錄一個短代碼，集成vue.js，並構建與/wp-json/wp/v2/posts?filter[orderby]=date端點交互以顯示最新帖子的VUE應用程序。
• >我們將使用Lifecycle鉤子和獲取數據來演示創建VUE實例。 也將顯示使用mounted()的實時更新。 setInterval()>
教程對vue.js.
• 的基本熟悉程度

>構建WordPress插件：>

1. >創建插件目錄：>在您的WordPress 目錄中創建一個文件夾（例如，vueplugin）。 wp-content/plugins

2. ：在文件夾中，創建以下初始內容：> vueplugin.php vueplugin.php

   註冊快捷代碼：

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

   將此代碼添加到中，以註冊一個名為
的快捷代碼：
3. ：

   這引起了vue.js庫和自定義JavaScript文件（vueplugin.php）。 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');

   激活插件：latest-posts.js>通過您的WordPress admin儀表板激活插件。

4. 測試快捷代碼：添加在帖子或頁面上測試快捷代碼。

5. [latestPosts]

>集成vue.js： <>>

：

在您的插件目錄中使用此代碼：

1. 此VUE實例獲取帖子，將其顯示在列表中，並每5秒更新一次。

   latest-posts.js驗證：latest-posts.js檢查瀏覽器的開發人員控制台“已安裝了組件”和獲取的帖子。 您的頁面源也應包含

   腳本。

   (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>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>
           `
       });
   })();

   >

結論：

這個增強教程提供了一個完整的工作示例，將VUE.JS集成到WordPress插件中，以獲得動態的實時用戶體驗。 請記住，根據需要調整特定主題的路徑和样式。 原始輸入的常見問題解答已被省略，因為它們在修訂和擴展的教程中被充分覆蓋。

以上是用VUE構建WordPress插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！