افزودن جاوااسکریپت در وردپرس: چگونه اینکار را انجام دهیم؟

اگر که می خواهید که قابلیت فرانت اند وبسایت وردپرسی تان را ارتقا دهید، بایستی به وبسایت خود جاوااسکریپت بیافزایید – یا اینکه از کتابخانه ثانوی و یا از یک اسکریپت سفارشی استفاده کنید. بنا بر اهداف و دانش کدنویسی شما، از تکنیک هایی برای افزودن جاوااسکریپت سفارشی به وردپرس تان استفاده کنید؛ اینکار می تواند از استفاده از پلاگین برای بکارگیری اسکریپت های سفارشی باشد تا استفاده از action hookهای مختلف.

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

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

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

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

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

• اکشن هوک های wp_head و wp_footer
• اکشن هوک های wp_enqueue_exripts و 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"></script>

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

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

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

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

1.1. افزونه هایی برای ویرایش فایل header.php و footer.php

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

شیوه کار با دستورات شرطی if…else جاوااسکریپت

افزونه Insert Header and Footers نمونه خوبی از افزونه ای است که به شما اجازه می دهد تا بخشهای فوتر و هدر قالب را ویرایش کنید. این افزونه رابط کاربری ساده ای با تنها دو ناحیه متنی دارد – یکی برای بخش اسکریپت های هدر و دیگری برای اسکریپت های فوتر. این افزونه اسکریپت هایی را به action hookهای wp_head یا wp_footer می افزاید.

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

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

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

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

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

1.3. افزونه هایی برای اسکریپت‌های ویژه

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

برای مثال، افزونه محبوب GA Google Analytics به شما اجازه می دهد تا گوگل آنالیتیک را به وبسایت از طریق ناحیه مدیریت وردپرس خود بیافزایید. این افزونه با خصوصیات درون ساخته ای همراه است که مختص اسکریپت گوگل آنالیتیک می باشد، مثلا مخفی سازی IP و …

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

جدا از اتکا به افزونه ها، می توانید از توابع درون ساخته و اکشن هوک هایی برای افزودن جاوااسکریپت سفارشی به وبسایت خود نیز استفاده کنید. در این مورد، بایستی فایل functions.php را ویرایش کرده و اسکریپت ها را به صورت دستی بر روی سرور خود آپلود کنید.

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

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

2.1. enqueue کردن اسکریپت های سفارشی با تابع ()wp_enqueue_script

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

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

تفاوت برچسب و دسته‌بندی در وردپرس – بهترین روش برای سئو

اگر که می خواهید اسکریپت خود را به هدر بیافزایید، تنها نیاز است که تابع سفارشی ساخته و به اسکریپت مد نظر خود اشاره کنید. به طوری که در زیر می بینید، از تابع وردپرس ()get_stylesheet_directory_uri برای دریافت آدرس پوشه پوسته فرزند استفاده کنید. و تابع ()add_action تابع سفارشی ()wproket_enqueue_custom_js را به اکشن هوک wp_enqueue_scripts می افزاید که به شما اجازه می دهد اسکریپت های سفارشی را که می خواهید در سمت فرانت اند وبسایت تان نمایش داده شود را وارد صف کنید.

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

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

1. وابستگی ها: ()array بدین معنا که هیچ الحاقاتی نداریم
2. نسخه اسکریپت: false به این معنا که نمی خواهیم عدد نسخه را بیافزاییم
3. اینکه آیا برای بخش هدر یا فوتر می باشد: true بدین معنا که به فوتر سوییچ میکنیم که گزینه پیش فرض محسوب نمی شود.

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

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

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

اگر وابستگی وجود دارد که توسط وردپرس ثبت نشده است، بایستی آن را ثبت کرده و با تابع ()wp_enqueue_script دیگری آن را وارد صف کنید.

اگر که می خواهید اسکریپت خود را در بجای ناحیه فرانت اند وبسایت خود در ناحیه مدیریت وبسایت اجرا کنید بایستی به جای استفاده از تابع wp_enqueue_scripts از اکشن هوک admin_enqueue_scripts در تابع add_action استفاده کنید. و برای صفحه لاگین بایستی از اکشن هوک login_enqueue_scripts استفاده کنید که اسکریپت ها را تنها برای صفحه لاگین وارد صف می کند.

2.2. اجرای اسکریپت های inline با wp_head یا wp_footer

اگرچه که وردپرس استفاده از تابع wp_enqueue_script را برای اسکریپت های سفارشی پیشنهاد می کند، اما می توانید از اسکریپت های inline برای وبسایت تان با اکشن هوک های wp_head و wp_footer استفاده کنید. بجای وارد صف کردن اسکریپت های سفارشی خود، این هوک ها تنها آنها را وارد بخش فوتر و هدر می کنند. بنابراین بایستی تنها از این تکنیک برای افزودن اسکریپت های inline و نه فایل های js استفاده کنید.

کد زیر نشان می دهد که چگونه می توانید از اکشن هوک wp_head برای اجرای اسکریپت inline در بخش هدر قالب استفاده کنیم:

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

و در کد زیر می بینید که چگونه می توانید از اکشن هوک wp_footer برای اجرای اسکریپت inline در بخش فوتر استفاده کنید:

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

wp_head و wp_footer تنها در بخش فرانت اند وبسایت تان در دسترس هستند و اسکریپت های اضافه شده با این هوک ها در ناحیه مدیریت و صفحه لاگین بارگذاری نمی شوند. برای افزودن اسکریپت های inline سفارشی به ناحیه مدیریت خود بایستی از admin_head و admin_footer در تابع ()add_action استفاده کنید. و اگر  می خواهید اسکریپت ها را در صفحه لاگین اجرا کنید بایستی از اکشن هوک های login_head و login_footer استفاده کنید.

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