نحوه افزودن جاوا اسکریپت سفارشی به وب سایتهای وردپرسی

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

در این آموزش همه روش‌ها را بررسی می‌کنیم، نحوه کار آن‌ها را می‌بینیم و توضیح می‌دهیم که چه زمانی باید از کدام یک استفاده کنید.

افزودن جاوا اسکریپت سفارشی به وردپرس

با این‌که می‌توانید از Customizer داخلی وردپرس برای اضافه کردن CSS سفارشی به قالب خود کمک بگیرید، اما همین کار را نمی‌توانید برای جاوا اسکریپت انجام دهید. پس برای افزودن جاوا اسکریپت سفارشی به سایت وردپرس خود، باید یا از یک پلاگین استفاده کرده یا فایل functions.php قالب خود را ویرایش کنید. ما هر دو گزینه را با جزئیات بررسی خواهیم کرد، در زیر خلاصه‌ای کوتاه از هر یک ذکر شده است.

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

• پلاگین‌هایی برای ویرایش هدر و فوتر
• پلاگین‌هایی برای اضافه کردن کد جاوا اسکریپت سفارشی به وردپرس
• پلاگین‌های مخصوص برای افزودن و پیکربندی اسکریپت‌های شخص ثالث مانند Google Analytics یا AdSense

2. می‌توانید از توابع و هوک‌های وردپرس در فایل functions.php استفاده کنید

• اکشن هوک‌های wp_head و wp_footer
• اکشن هوک‌های wp_enqueue_scripts، admin_enqueue_scripts و login_enqueue_scripts
• تابع ()wp_enqueue_script وردپرس

یک کاری که هرگز نباید انجام دهید

حتی اگر ساده‌ترین راه برای افزودن یک اسکریپت سفارشی به سایت وردپرس، قرار دادن تگ <script> مستقیما در فایل قالب header.php یا footer.php است، هرگز نباید این کار را انجام دهید. به این دلیل که وردپرس دارای یک توالی بارگذاری خاص است که تحت هر شرایطی باید رعایت شود.

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

بنابراین هرگز خطی مانند خط زیر را به فایل header.php یا footer.php خود اضافه نکنید (حتی اگر از نظر فنی امکان انجام آن را داشته باشید):

<script src="https://example.com/wp-content/themes/your-theme/js/script.js">

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

استفاده از پلاگین زمانی توصیه می‌شود که:

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

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

پلاگینی برای ویرایش header.php و footer.php

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

Insert Headers and Footers نمونه خوبی است که به شما امکان ویرایش قالب‌های هدر و فوتر را می‌دهد. این پلاگین یک رابط کاربری ساده با دو قسمت دارد، یکی برای هدر و دیگری برای فوتر. به این صورت که اسکریپت‌های شما را به wp_head یا wp_footer اکشن هوک اضافه می‌کند.

بدین ترتیب می‌توانید هر نوع اسکریپت را در دو فیلد ورودی وارد نمایید. همچنین باید اسکریپت‌های خود را درون تگ <script></script> قرار دهید. به علاوه می‌توانید از این پلاگین برای اضافه کردن CSS سفارشی به قالب هدر خود نیز کمک بگیرید، فقط کافی است آن را بین تگ <style></style> بنویسید (توجه داشته باشید که CSS همیشه باید به هدر اضافه شود).

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

گزینه دیگر این است پلاگینی را انتخاب کنید که به شما امکان می‌دهد جاوا اسکریپت سفارشی را به سایت وردپرس خود اضافه نمایید. این پلاگین‌ها شباهت زیادی به نمونه‌های ویرایش هدر و فوتر دارند و اکثر آن‌ها از اکشن هوک‌های wp_head و wp_footer استفاده می‌کنند. ضمن این‌که آن‌ها معمولا گزینه‌های پیکربندی بیشتری را در اختیار شما قرار می‌دهند.

به عنوان مثال، پلاگین Simple Custom CSS and JS به شما امکان می‌دهد permalink مربوط به فایل‌های جاوا اسکریپت سفارشی خود را تعریف کنید، آن‌ها را در فولدر wp-content/ ذخیره نمایید، اسکریپت‌های خود را به عنوان یک نوع پست سفارشی مدیریت کنید و مواردی از این دست. به علاوه اگر می‌خواهید چندین فایل جاوا اسکریپت سفارشی را به سایت وردپرس خود اضافه کرده و آن‌ها را مرتب نگه دارید، این نوع پلاگین برای شما بسیار مفید خواهد بود.

پلاگین‌های مخصوص اسکریپت

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

به عنوان مثال، پلاگین محبوب GA Google Analytics به شما امکان می‌دهد گوگل آنالیتیکس را مستقیما از قسمت مدیریت وردپرس به سایت خود اضافه کنید. همچنین ویژگی‌های داخلی بسیاری برای Google Analytics دارد مانند امکانات مربوط به لینک‌دهی، پنهان کردن IP و موارد دیگر.

2. فایل functions.php قالب خود را ویرایش کنید

علاوه بر استفاده از پلاگین‌ها می‌توانید از توابع داخلی وردپرس و اکشن هوک‌ها نیز برای افزودن جاوا اسکریپت سفارشی به سایت خود کمک بگیرید. در این مورد باید فایل functions.php را ویرایش کرده و اسکریپت‌ها را به صورت دستی در سرور خود آپلود کنید. همچنین توصیه می‌شود برای سفارشی‌سازی‌های خود یک Child Theme ایجاد کنید تا بتوانید بدون از دست دادن کد سفارشی، طرح زمینه اصلی را به ‌طور ایمن به‌روزرسانی نمایید. برای این کار می‌توانید اسکریپت‌های سفارشی خود را در فولدر اصلی Child Theme آپلود کرده یا اگر بیش از یک اسکریپت دارید، یک فولدر scripts برای آن‌ها در نظر بگیرید.

همچنین باید کد PHP که جاوا اسکریپت سفارشی شما را در صف قرار می‌دهد یا چاپ می‌کند به فایل functions.php قالب خود اضافه کنید. می‌توانید این فایل را در ویرایشگر کد خود ویرایش کرده و نسخه به‌روزشده را به صورت دستی در سرور آپلود کنید، یا آن را از طریق منوی Appearance > Theme Editor در بخش مدیریت وردپرس ویرایش نمایید (تصویر زیر را ببینید).

اسکریپت‌های سفارشی خود را با تابع ()wp_enqueue_script مرتب کنید

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

پس با استفاده از ()wp_enqueue_script می‌توانید جاوا اسکریپت سفارشی را هم به قالب‌های هدر و هم به فوتر اضافه کنید. این متد به طور پیش‌فرض اسکریپت‌ها را در بخش <head> صفحه توسط قالب هدر داخل صف قرار می‌دهد.

اگر می‌خواهید اسکریپت خود را به هدر اضافه کنید، فقط باید یک handle سفارشی در نظر گرفته و مسیر اسکریپت را تعریف نمایید. همانطور که در زیر می‌بینید، من از تابع وردپرس ()get_stylesheet_directory_uri برای دریافت URI دایرکتوری قالب فرزند خود استفاده کرده‌ام. تابع ()add_action هم ()tutsplus_enqueue_custom_js را به اکشن هوک wp_enqueue_scripts اضافه می‌کند که به شما امکان می‌دهد اسکریپت‌های سفارشی که می‌خواهید در قسمت فرانت-اند سایت خود نمایش دهید را داخل صف بگذارید.

/* Custom script with no dependencies, enqueued in the header */

add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');

function tutsplus_enqueue_custom_js() {

    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');

}

توجه داشته باشید تابع ()wp_enqueue_script داخلی وردپرس و wp_enqueue_scripts با این‌که نام تقریبا یکسانی دارند، اما دو چیز کاملا متفاوتی هستند.

علاوه بر قرار دادن اسکریپت‌ها برای هدر، می‌توانید از تابع ()wp_enqueue_script نیز برای اضافه کردن جاوا اسکریپت سفارشی به قالب فوتر استفاده کنید. بدین منظور باید تمام پارامترهای اختیاری را به ترتیب تعریف نمایید:

• وابستگی‌ها: ()array - چون در حال حاضر هیچ وابستگی نداریم.
• ورژن اسکریپت: false - چون نمی‌خواهیم شماره ورژن را اضافه کنیم.
• الگوی هدر یا فوتر: true - چون به فوتر که گزینه غیر پیش‌فرض است سویچ می‌کنیم.

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

اگر اسکریپت سفارشی شما دارای وابستگی است، باید آن‌ها را به پارامتر array تابع ()wp_enqueue_script اضافه کنید. چند اسکریپت و کتابخانه محبوب مانند jQuery وجود دارد که قبلا توسط هسته وردپرس ثبت شده‌اند، بنابراین می‌توانید آن‌ها را با استفاده از handle خود اضافه نمایید (در مثال زیر از jquery استفاده شده است).

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array('jquery'), false, true);
}

اگر وابستگی دارید که توسط وردپرس ثبت نشده، قبل از این‌که بتوانید با استفاده از handle سفارشی آن را به عنوان یک وابستگی اضافه کنید، باید آن را با یک تابع ()wp_enqueue_script دیگر ثبت کرده و در صف قرار دهید.

اگر هم می‌خواهید اسکریپت خود را به جای قسمت فرانت-اند سایت خود در قسمت مدیریت اجرا کنید، باید از اکشن هوک admin_enqueue_scripts به جای wp_enqueue_scripts در تابع ()add_action کمک بگیرید. همچنین برای صفحه لاگین هم باید از اکشن هوک login_enqueue_scripts استفاده کنید که اسکریپت‌های سفارشی را فقط برای صفحه ورود در صف قرار می‌دهد.

اسکریپت درون خطی خود را با اکشن هوک wp_head یا wp_footer چاپ کنید

اگر چه مستندات وردپرس استفاده از تابع ()wp_enqueue_script را برای اسکریپت‌های سفارشی توصیه می‌کند، اما می‌توانید اسکریپت‌های درون خطی را با اکشن هوک‌های wp_head و wp_footer نیز به سایت خود اضافه نمایید. این هوک‌ها به جای قرار دادن اسکریپت‌های سفارشی، آن‌ها را فقط در قالب هدر یا فوتر چاپ می‌کنند. بنابراین می‌توانید از این تکنیک تنها برای افزودن اسکریپت‌های درون خطی استفاده کنید، نه برای فایل‌های جاوا اسکریپت خارجی.

به صورت زیر می‌توانید از اکشن هوک wp_head برای چاپ یک اسکریپت درون خطی در قالب هدر بهره بگیرید:

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

از آنجایی که wp_head و wp_footer فقط در قسمت فرانت-اند سایت شما فعال می‌شوند، اسکریپت‌های اضافه شده با این هوک‌ها دیگر در قسمت مدیریت و صفحه لاگین بارگیری نمی‌شوند. اما برای افزودن اسکریپت‌های درون خطی سفارشی به بخش مدیریت باید به جای آن از اکشن هوک‌های admin_head و admin_footer در تابع ()add_action استفاده نمایید. و اگر می‌خواهید اسکریپت‌ها را در صفحه لاگین چاپ کنید، از اکشن هوک‌های login_head و login_footer کمک بگیرید.

توجه داشته باشید که پلاگین‌های فوق (درج هدرها، فوترها، CSS و JS سفارشی) از wp_head و wp_footer نه تنها برای اسکریپت‌های درون خطی بلکه برای فایل‌های جاوا اسکریپت خارجی نیز استفاده می‌کنند، اما باز هم تاکید می‌کنم که دومی را نباید انجام دهید مگر اینکه واقعا بدانید چه هدفی برای اجرای آن دارید. به این دلیل که پلاگین‌ها یک سری بررسی‌های اضافی انجام می‌دهند تا مطمئن شوند توالی بارگذاری وردپرس رعایت می‌شود. اگر می‌خواهید اسکریپت‌های سفارشی خود را به صورت دستی اضافه کنید، بسیار ایمن‌تر و آسان‌تر است که به تابع ()wp_enqueue_script توصیه شده پایبند باشید.

جمع‌بندی

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

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

منبع