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

افزودن جاوا اسکریپت و استایل در وردپرس همواره یک چالش است. بسیاری از کاربران اغلب این اشتباه را مرتکب می‌شوند که مستقیماً اسکریپت‌ها و استایل‌های خود را در افزونه‌ها و تم‌ها فراخوانی می‌کنند. در این مقاله به شما نشان خواهیم داد که چگونه کدهای جاوا اسکریپت و CSS را به درستی در وردپرس اضافه کنید.

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

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

بسیاری از توسعه دهندگان قالب این اشتباه را مرتکب می‌شوند که مستقیماً اسکریپت‌های خود یا Inline CSS را به افزونه‌ها و قالب‌های خود اضافه می‌کنند.

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

<?php
add_action('wp_head', 'vebeet_bad_script');
function vebeet_bad_script() {
echo 'jQuery goes here';
}
?>

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

چرا اسکریپت‌ها و استایل‌ها را در وردپرس قرار می‌دهیم؟

برای اطمینان از اینکه همه چیز به درستی کار می‌کند، وردپرس یک سیستم اولویت بندی دارد. این سیستم یک روش قابل برنامه ریزی برای بارگیری کردن جاوا اسکریپت‌ها و استایل‌های CSS ارائه می‌دهد.

با استفاده از توابع wp_enqueue_script و wp_enqueue_style، به وردپرس می‌گویید که چه زمانی یک فایل را بارگیری کند.

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

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

?php
function vebeet_adding_scripts() {
 
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
 
wp_enqueue_script('my_amazing_script');
}
  
add_action( 'wp_enqueue_scripts', ' vebeet_adding_scripts' );  
?>

توضیحات:

ما با ثبت اسکریپت خود از طریق تابع()wp_register_script شروع کردیم. این تابع 5 پارامتر را می پذیرد:

handle$: نام منحصر به فرد اسکریپت شماست. اسکریپت ما « my_amazing_script» نام دارد.

src$: محل اسکریپت شماست. در اینجا ما از تابع plugins_url برای دریافت URL مناسب پوشه plugins خود استفاده می کنیم. هنگامی که وردپرس آن را پیدا کرد، نام فایل amazing_script.js را در آن پوشه جستجو می کند.

deps$: برای تعیین وابستگی‌هاست. در این مثال که اسکریپت از jQuery استفاده می کند، jQuery را در قسمت وابستگی اضافه کرده است. وردپرس به طور خودکار جی کوئری را بارگیری می‌کند (اگر قبلاً در سایت لود نشده باشد).

ver$: شماره نسخه یا ورژن اسکریپت بوده و نیازی به وارد کردن پارامتر نیست.

in-footer$: در این مثال می‌خواهیم اسکریپت خود را در فوتر بارگذاری کنیم، بنابراین مقدار true را تنظیم کرده‌ایم. اگر می‌خواهید اسکریپت را در هدر بارگذاری کنید، مقدار آن را false تعیین کنید.

پس از ارائه تمام پارامترها در wp_register_script، می‌توانیم اسکریپت را در ()wp_enqueue_script فراخوانی کنیم. آخرین مرحله استفاده از wp_enqueue_scripts برای بارگذاری اسکریپت است.

درست همانند اسکریپت‌ها، می‌توانید استایل‌ها را نیز به همین شیوه اضافه کنید.

<?php
function vebeet_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'vebeet_adding_styles' );  
?>

به جای استفاده از  wp_enqueue_script، اکنون از wp_enqueue_style برای اضافه کردن استایل خود استفاده می‌کنیم.

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

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

با این حال، اگر از تابع enqueue scripts در قالب خود استفاده می‌کنید، به جای آن از get_template_directory_uri() استفاده کنید. اگر با یک قالب Child کار می‌کنید، از تابع     get_stylesheet_directory_uri()استفاده کنید.

در زیر، یک نمونه کد قرار داده شده است.

<?php
function vebeet_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . 'https://cdn.vebeet.com/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
  
add_action( 'wp_enqueue_scripts', 'vebeet_adding_scripts' );  

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