نحوه ساخت یا توسعه افزونه وردپرس با کتابخانه Vue.js

Vue.js یک کتابخانه جاوا اسکریپت در حال پیشرفت بسیار محبوب برای ساخت رابط های کاربری مدرن و غنی مشابه Angular و React از نظر محبوبیت، عملکرد و معماری مبتنی بر کامپوننت است. ما در این مقاله فرآیند ساخت و توسعه یک افزونه وردپرس بسیار ساده با یک رابط Vue.js که با API REST وردپرس از طریق JavaScript Fetch API تعامل دارد، بررسی خواهیم کرد.

ما یک کد کوتاه ایجاد می کنیم که به ما امکان می دهد آخرین ویجت پست های منتشر شده را در وب سایت وردپرس خود اضافه کنیم. رابط کاربری ویجت یک برنامه Vue است که آخرین پست‌های منتشر شده را از طریق /wp-json/wp/v2/posts?filter[orderby]=date نقطه پایانی WP-API دریافت می‌کند.

این آموزش آشنایی با Vue.js را بررسی می کند. خواهیم دید که چگونه یک نمونه از Vue ایجاد کنیم، از هوک های چرخه حیات مانند mounted() و همچنین JavaScript Fetch API برای تعامل با WordPress REST API استفاده کنیم.

ساخت افزونه وردپرس با Vue.js

در این بخش، نحوه ایجاد یک افزونه وردپرس که یک کد کوتاه را در چند مرحله ثبت می کند، خواهیم دید.

ایجاد پوشه در wp-content/plugins

بیایید با ایجاد بخش back-end پلاگین خود شروع کنیم. پلاگین ها در پوشه wp-content/plugins قرار دارند. به این پوشه در پوشه نصب وردپرس خود بروید و یک زیر پوشه برای افزونه خود ایجاد کنید. بیایید اسمش را vueplugin بگذاریم:

cd /var/www/html/wp-content/plugins
mkdir vueplugin

در داخل پوشه افزونه خود، یک فایل vueplugin.php ایجاد کنید و محتوای اولیه را اضافه کنید:

<?php
/*
Plugin Name: Latest Posts
Description: Latest posts shortcode
Version: 1.0
*/

این کامنت ها به عنوان اطلاعات متا برای افزونه استفاده می شود. در این مثال ما به سادگی نام، توضیحات و نسخه افزونه را ارائه می دهیم. اگر از صفحه افزونه ها در پنل ادمین بازدید کنید، باید بتوانید افزونه خود را در لیست مشاهده کنید:

ایجاد یک کد کوتاه

کد های کوتاه از طریق افزونه های وردپرس استفاده می شوند تا کاربران بتوانند محتوا را به پست ها و صفحات اضافه کنند. برای ثبت کد کوتاه باید حداقل کد زیر را در فایل افزونه خود اضافه کنید:

function handle_shortcode() {
    return 'My Latest Posts Widget';
}
add_shortcode('latestPosts', 'handle_shortcode');

در این قسمت از آموزش ساخت افزونه وردپرس با Vue.js ما در حال ثبت یک کد کوتاه به نام lastPosts هستیم.

وردپرس تابع داخلی add_shortcode() که با استفاده از vue.js ساخته شده است، قابلیت ایجاد کد کوتاه در افزونه وردپرس شما را ارائه می‌کند. این تابع یک نام به عنوان پارامتر اول و تابع کنترل کننده که منطق کد کوتاه شما را پردازش می کند در بر دارد و خروجی را به عنوان پارامتر دوم برمی گرداند.

در این مرحله، ما فقط یک رشته ثابت را از کد کوتاه خود برمی گردانیم، اما کد های کوتاه زمانی مفیدتر هستند که برای درج محتوای پویا استفاده شوند. حالا بیایید افزونه را از پنل مدیریت با کلیک بر روی پیوند فعال سازی در زیر نام افزونه فعال کنیم:

می‌توانید از یک کد کوتاه با قرار دادن آن در کروشه استفاده کنید – یعنی [SHORTCODE_NAME]. متن داخل پرانتز نامی است که به عنوان اولین پارامتر به تابع add_shortcode() دادیم. با خروجی برگردانده شده توسط تابع PHP که به عنوان پارامتر دوم ارسال می شود، جایگزین می شود.

برای آزمایش اینکه آیا کد کوتاه ما با موفقیت ثبت شده است، می توانیم یک پست جدید ایجاد کنیم و [latestPosts] را در محتوای پست اضافه کنیم:

شما باید جمله ویجت آخرین پست های من را مشاهده کنید:

اکنون، به جای نمایش رشته ویجت استاتیک آخرین پست‌های من، اجازه دهید آخرین پست‌ها را با استفاده از Vue.js نمایش دهیم.

ادغام Vue.js با افزونه وردپرس

اسناد Vue روش های مختلف استفاده از Vue.js را فهرست می کند. ساده ترین راه استفاده از تگ برای گنجاندن اسکریپت کتابخانه است که ساده ترین راه برای ادغام Vue.js با وردپرس نیز است.

شما می توانید یک برنامه Vue را با وردپرس در چند مرحله ساده ادغام کنید:

• ابتدا باید یک عنصر DOM را در وردپرس اضافه کنید (به عنوان مثال از طریق یک کد کوتاه) که در آن می توانید برنامه Vue را نصب کنید.
• در مرحله بعد، باید اسکریپت کتابخانه Vue را در صف قرار دهید.
• در نهایت، باید یک برنامه Vue در یک فایل جاوا اسکریپت جداگانه ایجاد کنید و آن را در صف قرار دهید.

برخلاف رویکرد سنتی استفاده از وردپرس، استفاده از Vue.js به شما امکان می دهد تعامل و تجربه کاربری بهتری را اضافه کنید. به جای نیاز به بارگذاری مجدد صفحه فعلی، کاربران می توانند با صفحه تعامل داشته باشند و رابط را به صورت پویا به روز کنند.

برنامه ها یا افزونه های وردپرس که با Vue.js ایجاد می شوند SPA یا برنامه های تک صفحه ای نامیده می شوند. اما در مثال ما، به جای ایجاد یک SPA کامل، ما فقط از Vue.js برای ایجاد یک ویجت ساده استفاده می‌کنیم که می‌تواند برای ارائه اطلاعات در بخش کوچکی از صفحه شما (مانند نوار کناری) استفاده شود. یک ویجت ایجاد شده با Vue.js را به عنوان یک SPA کوچک در نظر بگیرید.

بیایید با قرار دادن کتابخانه Vue در وردپرس شروع کنیم. ما باید یک تابع دیگر را به پلاگین خود اضافه کنیم که صف بندی کتابخانه Vue را مدیریت می کند:

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');
   }           
}

ابتدا بررسی می‌کنیم که آیا پستی را نمایش می‌دهیم که حاوی کد کوتاه آخرین پست‌های ما باشد، سپس اسکریپت Vue را با استفاده از تابع ()wp_enqueue_script در صف قرار می‌دهیم. با مراجعه به کد منبع پست خود می توانید بررسی کنید که آیا اسکریپت گنجانده شده است:

در مرحله بعد، به تابع handle_shortcode() برگردید و آن را به یک <div> تغییر دهید تا بتوانیم یک برنامه Vue را رندر کنیم:

<div id="mount"></div>

سپس، یک فایل lastposts.js در پوشه پلاگین خود ایجاد کنید و کد زیر را برای ایجاد یک نمونه Vue اضافه کنید:

( function() {
  var vm = new Vue({
    el: document.querySelector('#mount'),
    mounted: function(){
      console.log("Hello Vue!");
    }
  });
})();

ما یک نمونه Vue جدید با تابع Vue() ایجاد می کنیم که اولین گام برای شروع برنامه Vue است. هنگام ایجاد نمونه Vue، همچنین باید یک شی options ارائه دهید، که به شما امکان می دهد گزینه های مختلفی را برای ساخت برنامه Vue خود ارائه دهید.

در این مثال ما از ویژگی el استفاده می کنیم تا نمونه Vue یک عنصر DOM موجود را برای نصب بر روی آن فراهم کنیم. این می تواند یک انتخابگر CSS یا یک HTMLElement واقعی باشد. در مثال ما از document.querySelector(‘#mount’) برای دریافت عنصر HTML
با آیدی #mount استفاده می‌کنیم.

ما همچنین از ویژگی mounted برای ارائه تابعی استفاده می کنیم که پس از نصب نمونه فراخوانی می شود. در این مرحله، ما فقط یک Hello Vue را ثبت می کنیم! رشته پرینت شده روی کنسول.

همچنین می‌توانید فهرست کامل گزینه‌های موجود را در مرجع API این کتابخانه بررسی کنید. در مرحله بعد ساخت افزونه وردپرس، درست مانند کار با کتابخانه Vue.js، باید این فایل را در صف قرار دهید. داخل تابع enqueue_scripts() کد زیر را اضافه کنید:

wp_enqueue_script('latest-posts', plugin_dir_url( __FILE__ ) . 'latest-posts.js', [], '1.0', true);

تابع داخلی plugin_dir_url() برای دریافت URL مطلق یک فایل استفاده می شود. __FILE__ متغیر constant است که مسیر فایل سیستم فایل PHP فعلی را به شما می دهد. این به ما این امکان را می‌دهد که مسیر مطلق فایل latest-posts.js را بدون استفاده از URL های کدگذاری شده‌ای که می‌توان آن‌ها را در سیستم دیگری تغییر داد، دریافت کنیم.

در این مرحله باید Hello Vue را ببینید! رشته در کنسول مرورگر:

و همچنین باید اسکریپت latest-posts.js موجود در کد منبع یک پست که حاوی کد کوتاه است را مشاهده کنید.

در مرحله بعد، اجازه دهید ساخت افزونه وردپرس را تغییر دهیم تا رشته قبلی My Latest Posts Widget را ارائه کند، اما این بار از طریق Vue.js. در نمونه Vue خود، ویژگی template را با هر کد HTML که می خواهید ارائه دهید، اضافه کنید:

var vm = new Vue({
   el: document.querySelector('#mount'),
   template: "<h1>My Latest Posts Widget</h1>",
   mounted: function(){
   console.log("Hello Vue!");
 }
});

اکنون، بیایید آخرین پست ها را با استفاده از fetch API واکشی و رندر کنیم. در نمونه Vue، یک ویژگی داده با آرایه پست اضافه کنید که پست‌های واکشی شده را نگه می‌دارد:

var vm = new Vue({
   el: document.querySelector('#mount'),
   data: {
    posts: []
   },

در مرحله بعد، بیایید کدی را برای واکشی آخرین پست‌ها در رویداد چرخه حیات نصب شده که هنگام نصب مؤلفه بر روی DOM فعال می‌شود، اضافه کنیم:

var url = '/wp-json/wp/v2/posts?filter[orderby]=date';
 fetch(url).then((response)=>{
    return response.json()
  }).then((data)=>{
    this.posts = data;
  })

ما متد fetch() جاوا اسکریپت را فراخوانی می کنیم که یک Promise برمی گرداند. پس از حل موفقیت آمیز Promise، داده ها را به آرایه پست ها اختصاص می دهیم. در نهایت، ویژگی template را اضافه کنید:

template: `<div><h1>My Latest Posts</h1>
  <div>
    <p v-for="post in posts">
      <a v-bind:href="post.link">{{post.title.rendered}}</span></a>
    </p>
  </div>
</div>

ما از دستور Vue v-for برای حلقه زدن پست ها و نمایش title.rendered و ویژگی های پیوند هر پست استفاده می کنیم. این یک اسکرین شات از نتیجه حاصل شده برای من است.

در مورد شما، بسته به موضوع فعال شما و پست هایی که در وب سایت وردپرس خود دارید، ممکن است متفاوت به نظر برسد.

اگر روی عنوان پست کلیک کنید باید به صفحه پست هدایت شوید. ما می‌ توانیم ویژگی‌های بیشتری را به ویجت خود اضافه کنیم، مانند واکشی بی‌درنگ داده‌ها، بنابراین کاربر برای بازیابی آخرین پست‌های منتشر شده نیازی به بارگیری مجدد صفحه ندارد. ما می توانیم با نظرسنجی مداوم نقطه پایانی WP-API با استفاده از متد ()setInterval جاوا اسکریپت به این مهم دست یابیم.

ابتدا کدی را که پست ها را به روش خودش واکشی می کند منتقل کنید:

var vm = new Vue({
  /*...*/

 methods:{

  fetchPosts: function(){
    var url = '/wp-json/wp/v2/posts?filter[orderby]=date';
    fetch(url).then((response)=>{
      return response.json()
      }).then((data)=>{
        this.posts = data;
        console.log(this.posts);
      });
  }
 },

ما از ویژگی روش های نمونه Vue برای اضافه کردن متدهای سفارشی به نمونه Vue استفاده می کنیم. سپس می توانید از طریق این به این روش ها مستقیماً روی نمونه دسترسی داشته باشید.

سپس، در تابع mounted() کد زیر را برای واکشی پست‌ها هر پنج ثانیه اضافه کنید:

var vm = new Vue({
  /*...*/
 mounted: function() {
   console.log("Component is mounted");

   this.fetchPosts();
   setInterval(function () {
    this.fetchPosts();
   }.bind(this), 5000);
 }

می‌توانید با باز کردن پنل ادمین وردپرس در برگه مرورگر دیگر و اضافه کردن یک پست جدید، این بخش را آزمایش کنید. شما باید ویجت Vue خود را با یک پست جدید بدون بازخوانی دستی صفحه به‌روزرسانی کنید.

نتیجه گیری

در این آموزش، نحوه ساخت یک افزونه وردپرس را دیدیم که از کتابخانه Vue.js استفاده می کند. ما یک کد کوتاه ایجاد کرده‌ایم که می‌توان از آن برای نمایش یک مؤلفه Vue در پست‌ها و صفحات شما استفاده کرد که هر پنج ثانیه آخرین پست‌ها را واکشی و نمایش می‌دهد. این از طریق نظرسنجی API REST WordPress با استفاده از روش setInterval() به دست آمد.

منبع: sitepoint.com