افزودن جاوا اسکریپت و استایل در وردپرس

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

یک اشتباه

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

[php]
<?php
add_action(‘wp_head’, ‘wpb_bad_script’);
function wpb_bad_script() {
echo ‘jQuery’;
}
?>
[/php]

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

علت سیستم نوبت‌دهی (صف) اسکریپت‌ها در وردپرس؟

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

نوبت‌دهی صحیح اسکریپتهای وردپرس

بارگذاری صحیح اسکریپتها در وردپرس بسیار ساده است. در ادامه مثالی آوردم که میتونید در functions.php قالب یا فایل پلاگین خودتون کپی کنید تا اسکریپتها به درستی بارگذاری شوند.

[php]
<?php

function wpb_adding_scripts() {
wp_register_script(‘my_BestIT_script’, plugins_url(‘BestIT_script.js’, __FILE__), array(‘jquery’),’1.1′, true);
wp_enqueue_script(‘my_BestIT_script’);
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
?>
[/php]

توضیح:

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

•    $handle – این پارامتر نام منحصر به فرد اسکریپت شماست. که ما در اینجا اسم اون رو my_BestIT_script گذاشتیم.
•    $src – این پارامتر محل اسکریپت رو مشخص میکنه ، که ما در اینجا از تابع plugins_url برای برگرداندن URL صحیح فولدر پلاگینها استفاده کردیم. وقتی که وردپرس اون رو پیدا کرد ، به دنبال نام فایل BestIT_script.js در اون فولدر میگرده .
•    $deps – وابستگی رو مشخص میکنه. از اونجایی که اسکریپت ما jQuery هست، ما در بخش وابستگیها jQuery رو اضافه کردیم. وردپرس به طور اتوماتیک جی کوئری رو لود میکنه ، البته اگر تا بحال این بارگذاری در سایت انجام نشده باشه.
•    $ver – شماره نسخه اسکریپت ما هست ، البته این پارامتر الزامی نیست.
•    $in_footer – از اونجایی که ما میخواهیم اسکریپتمون در فوتر بارگذاری باشه ، مقدار رو true قرار دادیم. اگر شما میخواید که اون رو در هدر بارگذاری کنید اون رو به false تغییر بدید.

بعد از اینکه تمام این پارامترهارو در wp_register_script مشخص کردیم  کافیه اسکریپت رو با wp_enqueue_script فراخوانی کنیم که نوبت‌دهی انجام بشه.
شاید بپرسید چرا اول باید چند مرحله اضافی برای ثبت اسکریپت انجام بدیم و بعد نوبت‌دهی رو انجام بدیم؟ خب اینکار به بقیه کسانی که از قالب یا پلاگین شما استفاده میکنن اجازه میده که بدون اینکه لازم باشه کدهای اصلی پلاگین شما رو تغییر بدن ، اسکریپت رو از حالت رجیستر در بیارن.

نوبت‌دهی صحیح استایلها وردپرس

درست مثل اسکریپتها ، میتونید استایل شیت‌ها رو هم نوبت‌دهی کنید. به مثال زیر توجه کنید:

[php]
<?php
function wpb_adding_styles() {
wp_register_script(‘my_stylesheet’, plugins_url(‘my-stylesheet.css’, __FILE__));
wp_enqueue_script(‘my_stylesheet’);
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_styles’ );
?>
[/php]

توجه کنید که از wp_enqueue_scripts هم برای اسکریپت و هم برای استایل ، استفاده کردیم. بر خلاف نامی که داره ،این تابع هم برای استایل و هم برای اسکریپت جواب میده.
در مثالهای بالا از تابع plugins_url برای مشخص کردن محل اسکریپت یا استایل استفاده کردیم. اگرچه ، اگر از تابع نوبت دهی اسکریپت در قالبتون استفاده میکنید ، میتونید در عوض از get_template_directoty_url استفاده کنید. و اگر از قالب فرزند (child theme)  استفاده میکنید از get_stylsheet_directory_url استفاده کنید. مثال زیر رو ببینید:

[php]
<?php

function wpb_adding_scripts() {
wp_register_script(‘my_BestIT_script’, get_template_directory_uri() . ‘/js/BestIT_script.js’, array(‘jquery’),’1.1′, true);
wp_enqueue_script(‘my_BestIT_script’);
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
?>
[/php]

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