افزودن کد جاوا اسکریپت در وردپرس مثل حرفه ای ها
برای اضافه کردن جاوااسکریپت به قالب وردپرس خود، یک روش خاص وجود دارد که از بروز تداخل با افزونه‌ها یا قالب والد جلوگیری می‌کند. مشکل اینجاست که بسیاری از “توسعه‌دهنده‌ها” فایل‌های جاوااسکریپت‌شان را مستقیماً در فایل header.php یا footer.php فراخوانی می‌کنند که این کار درست نیست.
در این راهنما به شما نشان می‌دهم چگونه فایل‌های جاوااسکریپت خود را به شکل درست از طریق فایل functions.php اضافه کنید تا به درستی در تگ head یا footer وب‌سایت شما بارگذاری شوند. به این شکل اگر قالبی را برای دیگران آماده می‌کنید و کاربر نهایی قصد ویرایش اسکریپت‌ها از طریق چایلد تم را داشت، این امکان وجود دارد و همچنین اگر افزونه‌های بهینه‌سازی مثل minify یا کش استفاده کنند، همه چیز درست کار می‌کند. هنگام کار با چایلد تم هم اسکریپت‌های شما به روش صحیح اضافه می‌شوند و نیازی به کپی کردن header.php یا footer.php در چایلد تم نخواهید داشت (البته اگر قالب استانداردی نوشته باشید).
راهنمای مطالعه:
روش نادرست افزودن جاوااسکریپت به قالب وردپرس
فراخوانی مستقیم فایل جاوااسکریپت در header.php یا footer.php مانند نمونه زیر، روش درست نیست و اکیداً پیشنهاد نمی‌کنم این کار را انجام دهید. معمولاً این کار باعث تداخل با سایر افزونه‌ها می‌شود و در کار با یک CMS بهتر است از کارهای دستی پرهیز کنید.
<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>روش صحیح افزودن جاوااسکریپت به قالب وردپرس
بهترین روش افزودن جاوااسکریپت به قالب وردپرس، استفاده از فایل functions.php و تابع wp_enqueue_script است. با استفاده از اکشن wp_enqueue_scripts برای بارگذاری اسکریپت، از بروز مشکل برای قالب‌تان جلوگیری می‌شود.
نمونه
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );کد بالا فایل my-script.js را در سایت شما بارگذاری می‌کند. همانطور که می‌بینید فقط $handle استفاده شده اما همچنین می‌توانید وابستگی‌ها، نسخه اسکریپت و اینکه در هدر یا فوتر بارگذاری شود (که پیش‌فرض هدر است) را هم مشخص کنید.
تابع wp_enqueue_script() را از نظر فنی می‌توان در هر فایل قالب یا افزونه وردپرس استفاده کرد اما اگر اسکریپت شما سراسری است، بهتر است آن را در functions.php یا یک فایل مخصوص بارگذاری اسکریپت‌ها قرار دهید. اگر تنها قصد دارید اسکریپتی فقط در یک فایل خاص بارگذاری شود (مثلاً فقط در نوشته‌های گالری)، می‌توانید تابع را همانجا قرار دهید، اما شخصاً توصیه می‌کنم همه اسکریپت‌ها در یک جا باشند و با شرط‌ها، به موقع فراخوانی شوند.
اسکریپت‌های میزبانی‌شده در وردپرس
یکی از ویژگی‌های خوب وردپرس این است که مجموعه‌ای از اسکریپت‌ها را خودش میزبانی و رجیستر کرده که می‌توانید در توسعه قالب استفاده کنید. مثلاً برای jQuery، که تقریباً در اکثر پروژه‌ها استفاده می‌شود، همیشه باید از نسخه میزبانی شده توسط وردپرس استفاده کنید و هرگز از سایت‌های دیگر مثل گوگل بارگذاری نکنید. بنابراین پیش از افزودن اسکریپت سفارشی خود، لیست اسکریپت‌های ثبت‌شده را بررسی کنید تا اگر آن اسکریپت از قبل وجود دارد، همان را بارگذاری کنید نه اینکه اسکریپت خودتان را جداگانه ثبت کنید.
استفاده از هوک Enqueue وردپرس
قبلاً به تابع لازم برای بارگذاری یک اسکریپت اشاره کردیم. اما هنگام کار با فایل‌هایی مانند functions.php توصیه می‌شود این توابع را داخل یک تابع دیگر قرار داده و آن را به هوک مناسب وردپرس متصل کنید تا اسکریپت‌های شما همراه با دیگر اسکریپت‌های ثبت‌شده توسط وردپرس، افزونه‌ها یا قالب والد (در صورت استفاده از چایلد تم) ثبت شوند.
وردپرس دو اکشن متفاوت برای بارگذاری اسکریپت‌ها دارد:
- wp_enqueue_scripts – برای بارگذاری اسکریپت‌ها در سایت (سمت کاربر)
- admin_enqueue_scripts – برای بارگذاری اسکریپت‌ها در محیط مدیریت وردپرس
در اینجا مثالی می‌بینید (که باید به functions.php افزوده شود) درباره ساخت یک تابع و متصل کردن آن به هوک وردپرس برای فراخوانی اسکریپت‌های شما.
/**
* Enqueue a script
*/
function myprefix_enqueue_scripts() {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );نکته: همانطور که در این مثال با get_template_directory_uri محل اسکریپت را مشخص کردیم، این تابع مسیر قالب را می‌سازد. اگر با چایلد تم کار می‌کنید باید از get_stylesheet_directory_uri استفاده کنید تا مسیر به پوشه چایلد تم اشاره کند نه قالب والد.
افزودن کد جاوااسکریپت به صورت خطی (Inline)
هر چند می‌توانید به راحتی جاوااسکریپت خطی را با تگ script در هر قالبی قرار دهید، اما استفاده از هوک‌های وردپرس برای افزودن کدهای خطی به ویژه وقتی مربوط به افزونه یا هسته قالب است، گزینه بهتری است. نمونه‌ای از افزودن کد خطی به سایت را در زیر ببینید:
function myprefix_add_inline_script() {
wp_add_inline_script( 'my-script', 'alert("hello world");', 'after' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );این کد کدهای جاوااسکریپت خطی شما را پس از اسکریپت “my-script” که قبلاً ثبت شده، بارگذاری می‌کند. هنگام استفاده از wp_add_inline_script فقط می‌توانید کد خطی را پیش یا پس از یک اسکریپت ثبت‌شده اضافه کنید؛ پس اگر می‌خواهید کد اسکریپت خاصی را تغییر دهید، مطمئن شوید بعد از آن بارگزاری می‌شود، یا اگر تنها قرار است کد سفارشی اضافه کنید می‌توانید به اسکریپت jQuery متصلش کنید که معمولاً اکثر قالب‌ها بارگذاریش می‌کنند، در غیر این صورت هم می‌توانید نسخه jQuery وردپرس را بارگذاری کنید.
با این روش حذف اسکریپت خطی برای دیگران راحت است (مثلاً با چایلد تم یا افزونه)، همه کدهای جاوااسکریپت سفارشی سر و سامان دارند و توسط وردپرس مدیریت می‌شوند که ایمن‌تر است. همچنین با چایلد تم می‌توانید از طریق functions.php کدها را اضافه کنید و نیازی به کپی کردن header.php یا footer.php نخواهد بود.
با این حال اگر با چایلد تم کار می‌کنید، می‌توانید اسکریپت خود را مستقیماً به header از طریق هوک wp_head یا wp_footer مانند نمونه زیر اضافه کنید:
add_action( 'wp_footer', function() { ?>
<script>
( function( $ ) {
'use strict';
$( document ).on( 'ready', function() {
// Your custom code here
} );
} ( jQuery ) );
</script>
<?php } );دلایل فنی اهمیت استفاده از wp_enqueue_script
استفاده از wp_enqueue_script علاوه بر جلوگیری از تداخل اسکریپت‌ها، مزایای فنی دیگری نیز دارد. این روش مدیریت وابستگی‌ها را ساده می‌کند؛ یعنی مثلاً اگر اسکریپت شما به jQuery نیاز داشته باشد، کافی است در آرگومان وابستگی نام jquery را قرار دهید تا فقط پس از اطمینان از بارگذاری آن، اسکریپت شما اجرا شود. این شیوه همچنین باعث افزایش سازگاری با پلاگین‌های کش و بهینه‌سازی می‌شود، چرا که این پلاگین‌ها معمولاً فقط فایل‌هایی را در نظر می‌گیرند که توسط سیستم مدیریت صف وردپرس ثبت شده باشند.
مثالی پیشرفته‌تر با ثبت نسخه و وابستگی‌ها
فرض کنید می‌خواهید یک پلاگین گالری بسازید که به jquery و jquery-ui-slider نیاز دارد و فقط در pages بارگذاری شود:
function my_gallery_scripts() {
if (is_page()) {
wp_enqueue_script(
'my-gallery',
get_template_directory_uri() . '/js/my-gallery.js',
array('jquery', 'jquery-ui-slider'), // وابستگی‌ها
'1.0.0', // شماره نسخه
true // بارگذاری در فوتر
);
}
}
add_action('wp_enqueue_scripts', 'my_gallery_scripts');
این کار علاوه بر مدیریت وابستگی و نسخه، کنترل بیشتری روی محل بارگذاری و دامنه بارگذاری اسکریپت فراهم می‌آورد.
بارگذاری شرطی اسکریپت‌ها بر اساس نوع صفحه یا پست تایپ
یکی از ویژگی‌های قدرتمند و توسعه‌پذیر سیستم مدیریت صف وردپرس این است که می‌توانید اسکریپت‌ها را به شرط حضور در یک نوع خاص صفحه ثبت کنید. مثلا:
- بارگذاری فقط در برگه تماس با ما (
is_page('contact')) - بارگذاری فقط در نوع نوشته custom post type خاص (
is_singular('event')) - بارگذاری فقط در صفحات ورود یا ثبت‌نام (
is_page_template('template-login.php'))
با این کار، هم سرعت سایت افزایش می‌یابد و هم از بارگذاری بی‌مورد اسکریپت‌ها جلوگیری می‌شود.
حذف یا جایگزین کردن اسکریپت‌های ثبت‌شده توسط افزونه‌ها یا قالب والد
اگر یک پلاگین یا قالب والد اسکریپتی را ثبت می‌کند که شما نیاز به تغییر یا غیرفعال کردن آن دارید، می‌توانید از wp_dequeue_script یا wp_deregister_script استفاده کنید. برای مثال:
function my_dequeue_unwanted_scripts() {
wp_dequeue_script('unwanted-script-handle');
wp_deregister_script('unwanted-script-handle');
}
add_action('wp_enqueue_scripts', 'my_dequeue_unwanted_scripts', 100);
توجه داشته باشید که اولویت بالا (مثلاً 100) برای این اکشن تعیین کنید تا بعد از سایر ثبت‌ها اجرا شود.
بارگذاری فایل‌های جاوااسکریپت با خصوصیات مدرن (type=module و async/defer)
از وردپرس ۵.۷ به بعد، می‌توانید به راحتی اسکریپت‌هایی با attributeهای مدرن جاوااسکریپت مانند type="module" یا async و defer ثبت کنید. این کار به کمک فیلتر script_loader_tag انجام می‌شود:
function set_script_as_module($tag, $handle) {
if ($handle === 'my-es6-script') {
return str_replace('src', 'type="module" src', $tag);
}
return $tag;
}
add_filter('script_loader_tag', 'set_script_as_module', 10, 2);
این انعطاف امکان یکپارچه‌سازی اسکریپت‌های پیشرفته را با وردپرس فراهم می‌آورد.
خطاهای رایج هنگام بارگذاری اسکریپت‌ها و نحوه رفع آن‌ها
- بارگذاری دوباره jQuery از CDN: همیشه از نسخه ثبت شده توسط وردپرس استفاده کنید تا از بروز ناسازگاری جلوگیری شود.
- عدم تعیین وابستگی درست: نادیده گرفتن آرگومان وابستگی موجب عدم اطمینان از ترتیب بارگذاری اسکریپت‌ها می‌شود.
- بارگذاری اسکریپت در همه صفحات: از شرط‌ها استفاده کنید تا سرعت سایت کاهش نیابد.
- استفاده از مسیر نسبی: همواره از
get_template_directory_uri()یاget_stylesheet_directory_uri()جهت تعیین مسیرها بهره ببرید تا اسکریپت‌ها در محیط‌های مختلف درست بارگذاری شوند.
جمع‌بندی
با رعایت موارد بالا و استفاده از توابع استاندارد وردپرس اسکریپت‌های شما سازگار، امن، قابل مرور و قابل مدیریت خواهند بود. به خاطر داشته باشید که همیشه قبل از افزودن اسکریپت سفارشی، وجود نسخه اصلی آن در وردپرس را بررسی کنید، از درج مستقیم اسکریپت در فایل‌های قالب خودداری کنید و برای بارگذاری مدرن و بهینه جاوااسکریپت، از آخرین امکانات وردپرس بهره ببرید.
دیدگاه و پرسش