用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中文网其他相关文章！