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

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

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

وردپرس دارای یک تابع wp_head میباشد که به شما اجازه ی بارگذاری هر چیزی در بخش بالای سایت را میدهد. میتوانند براحتی اسکریپت خود را با استفاده از کدی مانند زیر اضافه کنند:

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

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

علت قرار دادن اسکریپت در نوبت

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

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

قرار دادن صحیح اسکریپت در صف

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

<?php

function wpb_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', 'wpb_adding_scripts' );  
?>

توضیح:

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

• handle$: یک نام منحصر به فرد برای اسکریپت است. که ما آنرا “my_amazing_script” مینامیم.
• src$: مکان اسکریپت میباشد. ما از تابع آدرس افزونه برای بدست آوردن آدرس صحیحی از فولدر افزونه استفاده میکنیم. پس از اینکه وردپرس آنرا پیدا کرد سپس به دنبال فایل amazing_script.js در فولدر میگردد.
• deps$: این پارامتر برای وابستگی میباشد. از آنجا که اسکریپت از جی کوئری استفاده میکند ما جی کوئری را در بخش وابستگی اضافه میکنیم. وردپرس بصورت خودکار جی کوئری را اگر در سایت در حال بارگذاری نباشد بار گذاری میکند.
• ver$: این پارامتر نسخه ی اسکریپت ما را نشان میدهد. این پارامتر مورد نیاز نمیباشد.
• in_footer$: میخواهیم اسکریپت را در فوتر بارگذاری کنیم بنابراین برای درست بودن باید ارزش تعیین کنیم. اگر بخواهید اسکریپت را در هدر بارگذاری کنید پس به شما میگوید نادرست است.

پس از فراهم کردن تمام پارامترها در wp_register_script فقط میتوانیم اسکریپت را در ()wp_enqueue_script که باعث میشود همه چیز اتفاق بیفتد صدا بزنیم. رفتن به گام ثبت نام و در صف قرار دادن اسکریپت به سایتهای دیگر اجازه ی ثبت نام اسکریپت شما اگر بخواهند بدون تغییر کد افزونه استفاده کنند را میدهد.

در صف قرار دادن صحیح سی اس اس

درست مثل اسکریپت ها میتوانید سی اس اس خود را در صف قرار دهید. به مثال زیر توجه کنید:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

توجه کنید که ما از قلاب عمل wp_enqueue_scripts هم برای اسکریپت و هم برای سبک استفاده کرده ایم. پس این تابع برای هر دو حالت کار میکند. در مثال بالا ما از  plugins_url برای اشاره کردن به مکان اسکریپت و یا سبک که میخواهیم در صف قرار دهیم استفاده کرده ایم. با این حال اگر از تابع اسکریپت صف در قالب خود استفاده میکنید پس از ()get_template_directory_uri استفاده کنید. اگر با قالب کودک کار میکنید از () get_stylesheet_directory_uri استفاده کنید مانند مثال زیر:

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

موفق باشید