آموزش بارگذاری استایل و جاوا (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 قالب وردپرس استفاده میشود.
عملکرد هر متغییر عبارتست از:
- $handle: ( رشته ای – لازم ): یک نام منحصر به فرد برای استایل می باشد.
- $src: ( رشته ای – لازم ): آدرس فایل در این بخش قرار میگیرد.
- $deps: ( آرایه – اختیاری ): این مقدار شامل نام منحصر به فرد ( $handle ) سایر فایل های وابسته می باشد.
- $ver: ( رشته ای یا منطقی – اختیاری ): این مقدار شامل شماره نسخه فایل می باشد. مقدار پیشفرض این متغیر false است.
- $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 را در وردپرس تان فعال کنید.
سلام و عرض ادب ، آقای تبریزی یک دنیا ممنون ، من برای حل این مشکل کلی سایت خارجی دیدم کلی تو یوتیوب گشتم و مشکلم حل نشد ، تا این که سایت شما را دیدم و بالاخره مشکلم برطرف شد
واقعا یک دنیا ممنون …
I really liked your offer, so I plan to use the said application. Also on the forum I found a suggestion for a natural treatment for pain, stress and anxiety with CBD dispensary that I have been hearing so much about lately. It seems to me that only natural treatment can have a lasting effect on health and I am very glad that I have first good results, as I began to sleep better and be less nervous.