طراحی پلاگین با vue در وردپرس

در این مقاله قصد داریم تا نحوه ی طراحی پلاگین با vue در وردپرس را به شما آموزش دهیم. اما خواندن این مقاله بیشتر برای کسانی توصیه می‌کنیم که در وردپرس و vue قبلا کد زده باشند؛ و یا علاقه مند یادگیری در زمینه طراحی پلاگین با vue باشند.
ابتدا با بررسی چند پرس و پاسخ شروع میکنیم.
اگر شما هم جزء کسانی باشید که در زمینه طراحی قالب و پلاگین وردپرس فعالیت دارید این سوال برای شما پیش آمده است. چرا باید از vue.js استفاده کنیم؟
بهترین و کوتاه ترین پاسخی که می‌توانیم در جواب به این سوال بگوییم. سادگی و استحکام vue است. که باعث شده است یک انتخاب محکم برای توسعه محسوب شود.

وردپرس از react استفاده می‌کند. آیا با استفاده از vue تداخلی در آن پیش نمی آید؟

باید بگوییم با اینکه برخی ویژگی های وردپرس با react هستند. اما محدودیتی برای استفاده از vue در این cms وجود ندارد.

نحوه ی پلاگین نویسی با vue در وردپرس

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

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

۲. ایجاد شورتکد در پلاگین

۳. ایجاد فایل vue

حال به بررسی هر مرحله و انجام کار هایی که باید در آن صورت گیرد میپردازیم

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

۱. به مسیر وردپرس خود بروید و در پوشه wp-content ، پوشه پلاگین را باز کنید.

۲. یک فولدر با نام wp-vue-totorial ایجاد کنید.

۳.یک فایل php همنام پوشه ی پلاگین بسازید.

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

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

اما شاید بگویید تا الان هیچ کدی را ثبت نکرده ایم اما قرار است به سراغ یک پلاگین ساخت شورتکد برویم؟

وشاید برای برخی این سوال پیش بیاید که shortcode چیست؟
باید بگوییم که شورتکد یک کد کوتاه است. که به وردپرس می‌گوید که چه محتوای تولید شده، توسط کد php را در آن صفحه قرار داده و نمایش دهد.

۶. کد زیر را در فایل php هم نام افزونه قرار دهید.

//Add shortscode
function func_wp_vue(){
return “Hello Shortcode”;
}
add_shortcode( ‘wpvue’, ‘func_wp_vue’ );

اما دقیقا این کد چه کاری انجام می‌دهد؟

برای توضیح این موضوع باید بگوییم
() func_wp_vue به ما مقدار “Hello Shortcode” را برمی‌گرداند.

و در بخش آخر نام شورتکد را بیان میکند.

حال در پیشخوان وردپرس خود به قسمت برگه ها بروید، یک برگه ی جدید را اضافه کنید. از بین المان های واقع شده، شورتکد را پیدا و جایگذاری کنید. کد کوتاه خود را در این قسمت قرار دهید. حال نمایش صفحه را انتخاب کنید.
پس از نمایش برگه شما باید مقدار “Hello Shortcode” را در این صفحه مشاهده می نمایید.

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

۱. فایل vue شما باید در صفحه بارگذاری شود؛ تا پلاگین به درستی کار کند.

۲. برای کار کردن vue به یک المنت html نیاز داریم. که معمولا از div برای جایگذاری و طراحی آن استفاده می‌کنیم.

۳.برای نوشتن کد های vue خود باید یک فایل جاوا اسکریپت در اختیار داشته باشید.

۳.۱ برای بارگذاری فایل ها vue بهتر از cdn خودش استفاده کنیم.

برای بارگذاری فایل vue، باید ابتدا آن را به وردپرس معرفی نماییم.

برای شناسایی فایل باید کد زیر را در ابتدا فایل phpساخته شده قرار دهیم.

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 کاری را که باید انجام شود اعلام می‌کند. پارامتر اول در این تابع هوک است و پارامتر دوم تابعی است که قرار است هوک شود‌.

تا اینجای کار ما توانستیم در طراحی پلاگین با vue در وردپرس، این فریمورک را به این CMD معرفی کنیم. اما هنوز هیچ گونه اطلاعاتیدر آن بارگذاری نشده است. و دلیل این است که، هر وقت شورتکد را صدا زدیم بارگذاری انجام شود.

در طراحی پلاگین با vue، برای صدا زدن باید تابع func_wp_vue را به‌ فایل اضافه کنیم.

//Add Vue.js
wp_enqueue_script(‘wpvue_vuejs’);

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

تا این لحظه هیچ اتفاقی برای پست یا صفحه ای که شورت کد را درون آن قراردادید نیافتاده است. اما اگر به سورس آن نگاه کنید، متوجه میشودکه <script type=’text/javascript’ src=’https://cdn.jsdelivr.net/npm/vue/dist/vue.js?ver=5.1.1′> به صفحه اضافه شده است.

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

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

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

در این کد یک instant از vue با نام app ساخته میشود. و با دستور el ، id المان انتخاب می‌شود. Data در این بخش اعلام می‌کند که ما پیامی با مقدار ‘Hello Vue’ داریم.

حالا برای آنکه پیام از vue نمایش داده شود؛ لازم است تا کد پیغام را به div اضافه کنیم.

پس از طی کردن مراحل بالا به فایل php افزونه بروید؛ قسمتی که در ان پیغام را به صورت متنی نوشته بودید؛ پاک کنید و به جای آن مقدار {{ message }} را در آن جایگذاری نمایید.

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

wp_register_script(‘my_vuecode’, plugin_dir_url( FILE ).’vuecode.js’, ‘wpvue_vuejs’, true );

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

در نهایت فابل 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 را مشاهده خواهید کرد. دقت کنیداگر هر پیامی غیر از چیزی که خروجی گرفته شده را مشاهده کردید؛ بدانید خطایی در مسیر پیاده سازی رخ داده است.