このチュートリアルは、プログレッシブJavaScriptフレームワークであるVue.jsを使用して最新のWordPress UIを構(gòu)築する方法を示しています。 Fetch APIを介してWordPress REST APIと対話するVUEインターフェイスを使用したシンプルなプラグインを作成します。

このガイドは、ショートコードを登録するWordPressプラグインの作成、Vue.jsの統(tǒng)合、

VUEインスタンスの作成を?qū)g証して、
• などのライフサイクルフックを使用し、データを取得します。 /wp-json/wp/v2/posts?filter[orderby]=dateを使用したリアルタイムの更新も表示されます。
• チュートリアルは、vue.js. mounted()に基本的な知識を想定しています setInterval()

WordPressプラグインの構(gòu)築：

WordPress內(nèi)でフォルダー（例えば
1. ）を作成します

   ディレクトリ。 vueplugin wp-content/plugins

   ：
フォルダー內(nèi)で、次の初期コンテンツで
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');

   プラグインをアクティブにします：

   WordPress管理ダッシュボードを介してプラグインをアクティブにします。 latest-posts.js

4. テストショートコード：

   ショートコードをテストするためにを投稿またはページに追加します。

5. [latestPosts]

   vue.jsの統(tǒng)合：

このコードを使用して、プラグインディレクトリに

を作成してください：

1. このVueインスタンスは、投稿を取得し、リストに表示し、5秒ごとに更新します。

   latest-posts.js検証：ブラウザの開発者コンソールでは、「コンポーネントが取り付けられている」とフェッチされた投稿を確認(rèn)してください。 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="http://www.miracleart.cn/link/f417d05af72b37f956c906aea42d1511">{{ post.title.rendered }}</a>
                           </li>
                       </ul>
                   </div>
                   <div v-else>
                       <p>Loading posts...</p>
                   </div>
               </div>
           `
       });
   })();