Membina plugin WordPress dengan Vue

Tutorial ini menunjukkan cara membina UI WordPress moden menggunakan Vue.js, rangka kerja JavaScript yang progresif. Kami akan membuat plugin mudah dengan antara muka Vue yang berinteraksi dengan API REST WordPress melalui API Fetch.

Konsep Utama:

• Panduan ini meliputi membuat plugin WordPress yang mendaftarkan kod shortcode, mengintegrasikan Vue.js, dan membina aplikasi Vue yang berinteraksi dengan titik akhir /wp-json/wp/v2/posts?filter[orderby]=date untuk memaparkan jawatan baru -baru ini.
• Kami akan menunjukkan membuat contoh Vue, menggunakan cangkuk kitaran hayat seperti mounted(), dan mengambil data. Kemas kini masa nyata menggunakan setInterval() juga akan ditunjukkan.
• Tutorial menganggap kebiasaan asas dengan Vue.js.

Membina plugin WordPress:

1. vueplugin: wp-content/plugins Di dalam folder, buat

   dengan kandungan awal berikut:

2. vueplugin.php Daftar shortcode: vueplugin.php tambahkan kod ini ke

   untuk mendaftarkan kod shortcode yang dinamakan

   <code class="language-php"><?php
   /*
   Plugin Name: Latest Posts
   Description: Latest posts shortcode with Vue.js
   Version: 1.0
   */</code>

   :

3. ini memupuk perpustakaan vue.js dan fail JavaScript tersuai (). vueplugin.php latestPosts

   <code class="language-php">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');</code>

   Aktifkan plugin:

   Aktifkan plugin melalui papan pemuka Admin WordPress anda. latest-posts.js

4. shortcode ujian: Tambah ke pos atau halaman untuk menguji kod shortcode.

5. [latestPosts]

Mengintegrasikan vue.js:

: Buat

di direktori plugin anda dengan kod ini:

1. latest-posts.js contoh Vue ini mengambil jawatan, memaparkannya dalam senarai, dan mengemas kini setiap 5 saat. latest-posts.js

   <code class="language-javascript">(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>
           `
       });
   })();</code>

   Pengesahan:
Periksa konsol pemaju penyemak imbas anda untuk "komponen dipasang" dan jawatan yang diambil. Skrip

juga harus dimasukkan ke dalam sumber halaman anda.

2. Kesimpulan:

   Tutorial yang dipertingkatkan ini menyediakan contoh kerja yang lengkap untuk mengintegrasikan Vue.js ke dalam plugin WordPress untuk pengalaman pengguna yang dinamik dan masa nyata. Ingatlah untuk menyesuaikan laluan dan gaya seperti yang diperlukan untuk tema khusus anda. Soalan Lazim dari input asal telah ditinggalkan kerana ia dilindungi secukupnya dalam tutorial yang disemak dan diperluas.

Atas ialah kandungan terperinci Membina plugin WordPress dengan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!