آموزش بارگذاری استایل و جاوا (js و css) قالب وردپرس در فوتر سایت

امروزه در طراحی قالب وردپرس از تعداد زیادی افزونه جی کوئری برای ایجاد بخشهای مختلف پوسته مانند: اسلایدر، تیکر اخبار، تب بندی و … استفاده میشود. این افزونه های جی کوئری معمولا تعداد زیادی فایل css و js را در پوسته وردپرس لود میکنند. همینطور که میدانید که یکی از راه های افزایش سرعت بارگذاری قالب وردپرس لود فایلهای css و js در پانوشت یا پاورقی پوسته است. در این مقاله از ایران تمز به آموزش بارگذاری استایل و جاوا (js و css) با استفاده از توابع وردپرس wp_enqueue_style و wp_enqueue_script از طریق فایل فانکشن functions.php قالب وردپرس در فوتر سایت میپردازیم پس تا انتها همراه ما باشید.

آموزش بارگذاری استایل و جاوا قالب وردپرس در فوتر سایت

معمولا فایلهای استایل و جاوا توسط طراحان در هدر header.php پوسته فراخوانی میشوند که کار درستی نیست.
در این آموزش از توابع وردپرس wp_enqueue_style و wp_enqueue_script که در فایل فانکشن پوسته فراخوانی میشوند استفاده میکنیم.
نکته مهم: پیش از انجام هرگونه تغییرات از فانکشن functions.php قالب وردپرس تان پشتیبان بگیرید.

تابع wp_enqueue_style برای لود استایل در پوسته وردپرس

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

عملکرد هر متغییر عبارتست از:

1. $handle: ( رشته ای – لازم ): یک نام منحصر به فرد برای استایل می باشد.
2. $src: ( رشته ای – لازم ): آدرس فایل در این بخش قرار میگیرد.
3. $deps: ( آرایه – اختیاری ): این مقدار شامل نام منحصر به فرد ( $handle ) سایر فایل های وابسته می باشد.
4. $ver: ( رشته ای یا منطقی – اختیاری ): این مقدار شامل شماره نسخه فایل می باشد. مقدار پیشفرض این متغیر false است.
5. $media: ( رشته ای – اختیاری ): این مقدار هم شامل نوع استایل شما می شود. مانند: screen , all و….. اگر نمی خواهید از این استفاده کنید آن را ننویسید. مقدار پیشفرض : all

تابع wp_enqueue_script برای لود فایلهای جاوا در پوسته وردپرس

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

متغییرها دقیقا عملکردی مشابه متغییرهای تابع wp_enqueue_style دارند.
تنها تفاوت در متغییر $in_footer برای نمایش فایل جاوا در فوتر است، میباشد.
متغییر $in_footer دو مقدار true برای نمایش فایل جاوا در پانوشت پوسته یا false برای نمایش فایل جاوا در هدر یا سربرگ قالب میگیرد. مقدار پیشفرض false است.

آموزش بارگذاری استایل و جاوا از طریق فانکشن پوسته

با عملکرد متغییرهای wp_enqueue_script و wp_enqueue_style آشنا شدید، اکنون نوبت به استفاده از آنها در فانکشن پوسته است.
به مثال زیر توجه کنید.

function iranthemes_scripts(){
wp_enqueue_style('style',get_stylesheet_directory_uri().'/style.css',array(),'all');
wp_enqueue_script('rk-script',get_stylesheet_directory_uri().'/js/rk-script.js',array(),'',true);}
add_action('wp_enqueue_scripts','iranthemes_scripts');

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

کدهایی که باید در هدر قبل از تگ بسته هد وجود داشته باشند
<?php wp_enqueue_script("jquery"); wp_head(''); ?>
کدی که باید در فوتر وجود داشته باشد
<?php wp_footer(''); ?>

اکنون با لود مجدد سایت نتیجه را خواهید دید.

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