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

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

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

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

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

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

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

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

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

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

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

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

تابع 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 را در وردپرس تان فعال کنید.

مطالب مرتبط

دیدگاهی بنویسید.

بهتر است دیدگاه شما در ارتباط با همین مطلب باشد.