استفاده از Vue در WordPress

سلام به همه‌‌ی دوستان ٬ تو این نوشته قصد دارم نحوه‌ی استفاده از فریم ورک محبوب Vue.js در وردپرس آموزش بدم.

این نوشته آموزشی برای کسانی است که در WordPress و vue قبلاً کد زدن و یا علاقه‌مند هستند.

سطح این نوشته متوسط هستش و جاهایی که نیاز به توضیح هست رو توضیح دادم ٬ امیدوارم نهایت استفاده رو ببرید.

شاید کسانی که تو زمینه طراحی تم و پلاگین وردپرس هستن براشون سؤال پیش بیاد چرا باید از ‌Vue.js استفاده کنیم؟

پاسخ کوتاه اینه که vue به خاطر سادگی و استحکامش شناخته میشه و اونو به یک انتخاب محکم برای توسعه تبدیل میکنه.

وردپرس از React استفاده میکنه ٬ آیا میتونیم از Vue.js استفاده کنیم؟

درسته بعضی ویژگی‌های WordPress با React نوشته شده اما ما رو محدود نمیکنه.

خوب ما میخوایم یک پلاگین shortcode بسازیم که چیزی که توسط Vue تولید میشه رو نمایش بده

مراحلی که قراره طی این آموزش طی کنیم:

۱−ساخت پلاگین وردپرس

۲−ایجاد یک shortcode در پلاگین

۳−ایجاد فایل Vue

مرحله اول:ایجاد پلاگین وردپرس

۱: به مسیر وردپرس خودتون برین ٬ سپس پوشه wp-content رو باز کنید و بعد پوشه plugins رو باز کنید

۲:یک فولد به نام wp-vue-tutorial ایجاد کنید ٬ مسیرتون باید تا الان به این صورت باشه:

/wp-content/plugins/wp-vue-tutorial

۳:فایلی به نام wp-vue-tutorial.php که همنام فولدر ایجاد شده است بسازید.(توجه داشته باشید که فایلی که ساختید حتماً هم نام فولدر پلاگین باشه تا وردپرس بتونه پلاگین رو تشخیص بده)

مسیر فایلی که ساختید:

/wp-content/plugins/wp-vue-tutorial/wp-vue-tutorial.php

۴:فایلی که ساختید رو باز کنید و کد زیر رو وارد کنید:

<?php
/**
 * Plugin Name: نام پلاگین رو اینجا بزنید
 * Description: یه توضیح کوتاه درباره پلاگین
 */
?>

نکته: اگر به پلاگین نویسی وردپرس علاقه دارید حتماً به :https://developer.wordpress.org/plugins سر بزنید.

۵:برید به قسمت افزونه ها در داشبورد(پیشخوان) وردپرس و پلاگینی که ساختید رو فعال کنید.

خوب تا اینجا هنوز کدی نزدیم ولی قراره یه پلاگین shortcode بسازیم ٬ خوب shortcode اصلاً چی هست؟

جواب:یک shortcode به WordPress میگه که محتوای تولید شده توسط کد PHP شما را در محتوای صفحه یا پست وارد کن و نمایش بده.مثال:مثلاً کاربر میزنه ['mycode'] و وقتی صفحه بارگذاری شد محتویات shortcode رو نشون میده.

۶:کد زیر رو به فایل wp-vue-tutorial.php اضافه کنید:

//Add shortscode
 function func_wp_vue(){
   return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );

توضیحات کد:

تابع () func_wp_vue به ما "Hello Shortcode" رو بر میگردونه

‌تابع add_shortcode ٬ shortcode رو به وردپرس اضافه میکنه پارامتر اول که میگیره اسم کد کوتاه هست (همون ['mycode'] که قبل تر توضیح دادم) و پارامتر بعدی تابعی هست که یک رشته رو برای نمایش shortcode برمیگردونه.

فایلتون تا الان باید اینجوری باشه:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Add shortscode
 function func_wp_vue(){
 return "Hello Shortcode";
} // end function
add_shortcode( 'wpvue', 'func_wp_vue' );
?>‌

الان برید یه صفحه یا پست جدید بسازید و shortcode یا کدکوتاه رو به این صورت وارد کنید:['wpvue']

وقتی برید صفحه یا پست رو ببنید باید نوشته باشه:Hello ShortCode

خوب حالا کد رو به صورت زیر تغییر بدید:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Add shortscode
 function func_wp_vue(){
 $str= "<div id='divWpVue'>"
    ."Message from Vue: "
    ."</div>";
  return $str;
}
add_shortcode( 'wpvue', 'func_wp_vue' );
?>‌// end function

مرحله دوم:راه‌اندازی Vue

۱−فایل Vue باید تو صفحه بارگذاری شه تا پلاگین کار کنه

۲−ما به یک المنت html نیاز داریم تا Vue کار کنه (معمولاً از المنت Div استفاده میشه و اینجا هم قراره استفاده شه)

۳− برای نوشتن کدهای Vue ما به یه فایل جاوااسکریپت احتیاج داریم

۱:برای بارگذاری فایل از CDN خوده Vue استفاده میکنیم:

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

برای بارگذاری فایل Vue نیاز داریم که اول به وردپرس معرفیش کنیم (رجیستر)

کد زیر رو به اول فایل(قبل از کامنت add shortcode // اضافه کنید:

function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

توضیحات کد:

تابع wp_register_script به وردپرس میگه که این اسکریپت وجود داره ولی بارگذاریش نمیکنه ٬ پارامتر اول که میگیره اسمه اسکریپتمون هست که وردپرس با این اسم میشناستش و پارامتر دوم آدرس یا محل اسکریپتمون هست.

تابع add_action به وردپرس میگه این کارو انجام بده ٬ پارامتر اول تابع قلاب(hook) هست و پارامتر دوم اسمه تابعی هست که قراره hook شه.(شاید یکم گیج شید میتونید برید توی این لینک برای مطالعه بیشتر)

فایلتون تا اینجا باید این شکلی باشه:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register Scripts to use 
function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

//Add shortscode
function func_wp_vue(){
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

تا اینجا ما Vue.js رو به وردپرس معرفی کردیم ولی هنوز بارگذاریش نکردیم ٬ دلیلش هم اینه که میخوایم وقتی shortcode صدا زده شد بارگذاریش کنیم.

کد زیر رو به تابع func_wp_vue اضافه کنید:

//Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  

توضیحات کد:

تابع wp_enqueue_script به وردپرس میگه این فایل رو برام بارگذاری کن ٬ پارامتری هم که گرفته همون اسمه اسکرپیتمونه که بهش دادیم.

الان هنوز هیچ اتفاقی نیوفتاده اما اگر برید تو پست یا صفحه‌ایی که shortcode رو اضافه کردید و سورس رو نگاه کنید میبنید که

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js?ver=5.1.1'>

به صفحتون اضافه شده.

۲:ساختن فایل جاوااسکریپت

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

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue'
  }
})

توضیحات کد:

ما یک instant از Vue به نام app میسازیم

با el ٬ id المنت رو انتخاب میکنیم و data میگه که این المنت انتخاب شده این اطلاعات رو داره که ما اینجا یک message داریم و مقدارش هم 'Hello Vue' است.

اگر گیج شدین برید به لینک های زیر سر بزنید :

• https://vuejs.org/v2/guide/index.html
• https://vuejs.org/v2/guide/#Declarative-Rendering

برای اینکه بتونیم message رو از Vue نمایش بدیم نیاز داریم که کد {{ message }} رو به div اضافه کنیم.

حالا برید به فایل wp-vue-tutorial.php و این قسمت رو عوض کنید:

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Message from Vue: {{ message }}" // اینجا
  ."</div>";

  //Return
  return $str;
} // end function

خوب الان باید اسکریپتمون رو بارگذاری کنیم ٬ کد زیر رو به تابع func_wp_vue اضافه کنید:

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );

توضیحات کد:

این تابع رو قبلاً توضیح دادم ٬ اینجا یه تابع جدید به نام plugin_dir_url میبینید که بهتره برید به سایت خوده وردپرس و دربارش بخونید:

https://codex.wordpress.org/Function_Reference/plugins_url

پارامتر سوم یعنی این اسکریپت یک وابستگی داره و پارامتر چهارم اسکریپت رو در فوتر بارگذاری میکنه چون نیاز هست که فایل هامون بعد از بارگذاری کامل DOM بارگذاری بشن.

و در آخر کد زیر بعد از('wpvue_vuejs') wp_enqueue_script رو تو تابع func_wp_vue رو بزنید:

wp_enqueue_script('my_vuecode');

شکل فایل نهایی php :

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
//Tell WordPress to register the scripts 
add_action('wp_enqueue_scripts', 'func_load_vuescripts');


//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

شکل نهایی فایل جاوااسکریپت:

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

اگه تا الان همه چیز درست باشه باید تو صفحتون پیغام : Message From Vue:Hello Vue رو ببنید اگر به جای Hello Vue ٬ {{Message}} رو دیدید یه جا اشتباه کردید.

خوشحال میشم نظراتتون رو بشنوم ٬ موفق باشید ✋