اگر به زبان برنامه‌نویسی JavaScript مسلط هستید، احتمالا به این فکر کرده‌اید که چطور می‌توان کدهای جاوا اسکریپت را به سایت‌های وردپرسی اضافه کرد. در واقع، یکی از بهترین راه‌ها برای بهبود عملکرد سایت، افزودن کدهای جاوا اسکریپت سفارشی به سایت است. در صورتی که با نحوه سفارشی سازی وردپرس آشنا نباشید، اضافه کردن کدهای جاوا اسکریپت به وردپرس شاید سخت به نظر برسد. اما خوشبختانه راه‌های ساده‌ای برای اینکار وجود دارد. در این نوشته از آموزش جاوا اسکریپت تصمیم داریم 3 روش اضافه کردن Javascript به وردپرس را با شما به اشتراک گذاشته و مزایا و معایب هر کدام را بررسی کنیم.
نکته: حتی اگر هیچ آشنایی با جاوا اسکریپت ندارید، حتما این آموزش را دنبال کنید. چرا که گاهی مواقع از شما خواسته می‌شود تا یک کد JavaScript را در بخشی از سایت قرار دهید. برای مثال، برای نصب Google Analytics باید کدهای مربوط به آن را در بخش header یا footer سایت قرار دهید. در صورتی هم که عاشق برنامه نویسی هستید، می‌توانید در دوره javaScript شرکت کرده و صفر تا صد آن را یاد بگیرید.
1. اضافه کردن کدهای جاوا اسکریپت به وردپرس با استفاده از افزونه
یکی از ساده‌ترین راه‌ها برای افزودن کدهای سفارشی javascript به WordPress، استفاده از افزونه است. افزونه‌های زیادی برای اینکار وجود دارد که Header & Footer Code جزو بهترین‌ها به شمار می‌رود. این پلاگین کاملا رایگان است و با کمک آن می‌توانید کدهای گوگل آنالیتیکس یا فیسبوک را در هدر یا فوتر سایت قرار دهید. همچنین امکان کدنویسی اختصاصی نیز وجود دارد.
برای استفاده از این پلاگین، به بخش افزونه‌های سایت رفته و گزینه افزودن را بزنید. سپس در بخش جستجو، عبارت Header & Footer Code را وارد کنید. بعد از آن باید بر روی دکمه‌های نصب و فعالسازی کلیک کنید تا افزونه فعال شود.
برای اضافه کردن javascript به صفحات وردپرس، به بخش ابزارها رفته و روی Head & Footer کلیک کنید. با اینکار وارد تنظیمات این افزونه خواهید شد. در این صفحه سه بخش وجود دارد که عبارتند از:
- Script in Header (کدهای JS هدر)
- Script in Body (کدهای JS بدنه)
- Script in Footer (کدهای JS فوتر)
بعد از قرار دادن کدهای جاوا اسکریپت سفارشی در کادر مربوطه، دکمه ذخیره تغییرات انتخاب کنید. با اینکار، کدهای شما در همه صفحات سایت اعمال خواهد شد. علاوه بر افزونه Header & Footer می‌توانید از افزونه Simple Custom CSS and JS نیز استفاده کنید.
مزایا و معایب استفاده از افزونه برای اضافه کردن کدهای جاوا اسکریپت
برای افراد مبتدی، استفاده از افزونه یک مزیت بسیار مهم به شمار می‌رود. چرا که لازم نیست برای اضافه کردن کد، در فایل‌های PHP و کدهای Html تغییراتی ایجاد کند.
اما معمولا هدف افراد از اضافه کردن کدهای جاوا اسکریپت سفارشی، به حداقل رساندن تعداد افزونه‌ها است. به همین دلیل استفاده از افزونه برای اینکار با هدف آن‌ها سازگار نیست. این افراد می‌توانند از روش‌هایی که در ادامه معرفی خواهیم کرد، استفاده کنند. از طرفی، با این روش کدهای JS در همه صفحات سایت اعمال می‌شوند و نمی‌توان آن را در یک صفحه خاص اجرا کرد.
2. ویرایش فایل functions.php
در این بخش از آموزش جاوا اسکریپت در وردپرس، به نحوه اضافه کردن کدهای JS از طریق فایل functions.php خواهیم پرداخت. این فایل در همه قالب‌های وردپرس وجود دارد و هر کدی را در داخل آن قرار دهید، اجرا خواهد شد. اینکار توسط توابع داخلی وردپرس و هوک‌ها انجام می‌شود.
برای اینکه کدهای سفارشی با هر بار آپدیت قالب حذف نشوند، حتما تم کودک (child theme) قالب را نصب کرده و تغییرات را در فایل function آن اعمال کنید. همچنین از سایت یک بکاپ بگیرید. برای شروع، functions.php را باز کرده و سپس قطعه کد زیر را در آن قرار دهید.
function ti_custom_javascript() {
?>
<script>
// your javscript code goes here
</script>
<?php
}
add_action(‘wp_head’, ‘ti_custom_javascript’);
کدهای سفارشی خود را در بخش «your javascript code goes here» قرار دهید. این کدها به بخش هدر سایت اضافه خواهد شد.
نکته: برای اضافه کردن کد به فوتر، به جای wp_head از wp_footer استفاده کنید.
برای اعمال این کدها به یک صفحه خاص، باید از تابع IS_PAGE وردپرس استفاده کنید. در قطعه کد زیر ما از وردپرس خواسته‌ایم تا کدهای سفارشی جاوا اسکریپت را فقط به یکی از صفحات سایت که آیدی 3 دارد، اعمال کند.
function ti_custom_javascript() {
if (is_single (‘3’)) {
?>
<script type=”text/javascript”>
// your javscript code goes here
</script>
<?php
}
}
add_action(‘wp_head’, ‘ti_custom_javascript’);
به جای عدد 3، می‌توانید آیدی پست مورد نظر را قرار دهید. برای پیدا کردن آیدی پست، در بخش نوشته‌ها بر روی ویرایش نوشته کلیک کنید. اگر به بخش URLها نگاه کنید، عدد بعد از post=” همان آیدی است.
در نهایت اگر فایل functions.php را ذخیره کنید، تغییرات در صفحه تعیین شده اعمال خواهد شد. این روند را می‌توانید برای هر همه صفحات سایت انجام دهید.
مزایا و معایب ویرایش فایل functions.php
یکی از مزایای ویرایش فایل فانکشن این است که نیازی به نصب افزونه اضافی ندارید. همچنین با این روش می‌توان کدهای جاوا اسکریپت به صفحات دلخواه نیز اضافه کرد. تنها ضعف این روش، کار کردن با کدها است که اگر در این زمینه تجربه نداشته باشید، گزینه مناسبی به شمار نمی‌رود. برای ویرایش functions.php باید با توابع و کلاس‌های وردپرس آشنا باشید.
3. اضافه کردن کدهای جاوا اسکریپت به بخش header سایت
در روش سوم از این آموزش جاوا اسکریپت برای افزودن کدهای جاوا اسکریپت در وردپرس، می‌توانید با ایجاد تگ Script در داخل فایل header.php کدهای سفارشی خود را به سایت اضافه کنید. اما امکان دارد هنگام بارگذاری وردپرس این کدها با کدهای قالب و افزونه‌ها تداخل پیدا کند.
اگر می‌خواهید کد javascript را از طریق فایل header در همه صفحات سایت اعمال کنید، دو راه پیش روی خود دارد.
- استفاده از تابع wp_enqueue_script
- استفاده از هوک wp_head
نحوه استفاده از هوک را در بخش قبلی یعنی «ویرایش فایل functions.php» توضیح دادیم. اما برای استفاده از روش اول یعنی تابع wp_enqueue_script مراحل زیر را انجام دهید.
- یک فایل js با نام دلخواه ایجاد کرده و سپس کدهای جاوا اسکریپت سفارشی را در آن قرار دهید. به طور مثال می‌توانید این فایل را در داخل پوشه js ایجاد کرده و نام آن را js بگذارید.
- فایل php قالب را پیدا کرده و باز کنید.
- سپس کدهای زیر را به آن اضافه نمایید.
- به جای عبارت «js/examplescript.js» آدرس فایل جاوا اسکریپتی که ایجاد کرده‌اید را قرار دهید.
function ti_custom_javascript() {
wp_enqueue_script( ‘example-script’,
get_template_directory_uri() . ‘/js/examplescript.js’);
}
add_action(‘wp_enqueue_scripts’, ‘ti_custom_javascript’);
معمولا توسعه دهندگان از تابع wp_enqueue_script استفاده می‌کنند. چرا که هیچ تداخلی با قالب و افزونه‌ها به وجود نمی‌آورد.
آموزش جاوا اسکریپت برای فشرده سازی فایل
به طور پیش‌فرض وردپرس اجازه افزودن کدهای جاوا اسکریپت به صفحات سایت را نمی‌دهد. اما خوشبختانه می‌توان با برخی روش‌ها اینکار را انجام داد. بهترین راه حل برای افزودن کدهای سفارشی به سایت، ویرایش فایل‌های سایت است؛ چرا که در این حالت به هیچ افزونه‌ای نیاز نداریم که در این آموزش جاوا اسکریپت به آن پرداختیم.