افزودن فایل های CSS و JS به قالب وردپرس با توابع wp_enqueue
- موضوع : مقالات آموزشی وردپرس
- تاریخ : ۱۴۰۰/۰۲/۱۱
- مجموع پسند شده : 10
- بازدید : 3.162 K

در این مقاله که برای شما عزیزان آماده کرده ایم آموزش افزودن فایل های CSS و JS به قالب وردپرس با توابع wp_enqueue رو قرار دادیم.
اگر شما هم در زمینه برنامه نویسی قالب وردپرس فعالیت می کنید و یا به تازگی پا به این عرصه گذاشته اید باید به یک سری موارد توجه خاصی داشته باشید.
به طور مثال جهت سازگاری قالبتون با وردپرس و افزونه های وردپرس در ابتدای شروع به کار ، چند کار ساده رو انجام بدین که به مشکل برنخورید.
جهت آشنایی با این کارها توصیه می کنم مقاله رفع مشکل عدم سازگاری قالب با ووکامرس به صورت کامل را مطالعه کنید.
خب گذشته از این موارد جهت موفقیت بیشتر و خروجی بهتر کارتون ما در نظر داریم تا روش هایی رو در وب استند آموزش بدیم که بسیار حائز اهمیت بوده و کار شما رو آسان و خروجی پروژه شما را بهینه و استاندارد خواهد کرد.
در اولین مورد میخواییم با هم نحوه بارگذاری و مدیریت فایل های css و js رو به صورت غیر مستقیم و با استفاده از توابع wp_enqueue انجام بدیم.
توابع wp_enqueue ، چه توابعی هستند؟
توابع wp_enqueue در کل ۲ تابع یکی برای تعریف فایل های css و یکی هم برای تعریف فایل های js مورد استفاده قرار میگیره.
البته یک تفاوت کوچکی هم زمانی وجود داره که شما بخوایید یک فایل css و یا js رو در قسمت ادمین وردپرس فراخوانی کنید که این رو هم توضیح خواهیم داد.
این ۲ تابع عبارتند از :
- wp_enqueue_script
- wp_enqueue_style
تابع wp_enqueue_script
این تابع همونطور که از اسمش هم پیداست جهت فراخوانی فایل های js استفاده میشه. شکل کلی تایع زیر به صورت زیر است :
۱ ۲ ۳ | <?php wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false ) ?> |
خب حالا با هم دیگه مقادیر تابع wp_enqueue_script رو بررسی کنیم :
- handle : این ورودی ، نام منحصر به فردی است که بایستی برای فایلی که فراخوانی کرده ایم در نظر بگیریم. به عنوان مثال اگه بخواییم فایل bootstrap.min.js رو فراخوانی کنیم تو این قسمت می تونیم بنویسیم bootstrap. البته این قضیه یک نکته ظریفی هم داره که در ادامه بهش اشاره می کنیم.
- src : آدرس اینترنتی فایل موردنظرمون رو اینجا باید قرار بدیم.
- deps : در این ورودی که به صورت آرایه می باشد می تونیم مشخص کنیم که فایل مورد نظرمون بعد از کدوم فایل ها فراخوانی شه. ببینید مثلا اگه فایل bootstrap.min.js قبل از jquery فراخوانی شه چه اتفاقی می افته؟ قطعا خطا میده و اسکریپت ها از کار می افتن. خب حالا کاربرد مقدار اول یعنی handle رو اینجا خواهیم دید که ما بر اساس مقدار handel این ورودی رو مقدار دهی می کنیم. به عنوان مثال : [‘jquery’] . اگه این مقدار و قرار بدین فایل bootstrap.min.js بعد از jquery فراخوانی میشه. البته می تونید مقادیر دیگه ای رو هم در داخل آرایه قرار بدین.
- ver : با استفاده از این ورودی می تونید فایل مورد نظرتون رو ورژن گذاری کنید. خب این به چه دردی میخوره اصلا؟ جوابش کش هست. وقتی شما یکسری تغییرات در فایل js قالبتون انجام میدید بعد اینکه صفحه رو رفرش کنید می بینید تغییرات شما اعمال نشده. دلیل این کار کش شدن فایل های سایت شما در سیستم کاربر است. شما هم نمیتونید به کاربرا بگید کش و پاک کنید ولی اگه اینجا ورژن بزنید برای فایلی که تغییر میدین بدون نیاز به پاک کردن کش تغییرات شما با اولین رفرش نمایان خواهند شد.
- in_footer : با استفاده از این خاصیت ما مشخص میکنیم که فایل موردنظرمون توی قسمت head سایتمون فراخوانی شه یا در قسمت footer سایتمون.
یک نمونه از تابع wp_enqueue_script برای فراخوانی فایل bootstrap.min.js :
۱ ۲ ۳ | <?php wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), ۱, true); ?> |
توجه : فرض بر این است که فایل bootstrap.min.js در پوشه js قالب قرار دارد.
نکته : استفاده از این توابع به این صورت نیست و در اخر همین مقاله استفاده صحیح از این توابع گفته خواهد شد.
جهت بررسی بیشتر تابع به لینک زیر مراجعه کنید :
تابع wp_enqueue_style
خب رسیدیم به تابع wp_enqueue_style از توابع wp_enqueue. این تابع هم مثل تابع wp_enqueue_script عمل میکنه فقط توی چند ورودی متفاوتن که با هم بررسی می کنیم.
شکل کلی تایع زیر به صورت زیر است :
۱ ۲ ۳ | <?php wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' ) ?> |
همونطور که می بینید فقط یک ورودی متفاوت است که اونم مربوط به به نوع مدیا می باشد. که میتونید تو این ورودی مشخص کنید که فایلی که فراخوانی کرده اید در چه نوع مدیایی عمل کند. مانند print و … .
یک نمونه از تابع wp_enqueue_script برای فراخوانی فایل bootstrap.min.css :
۱ ۲ ۳ | <?php wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.rtl.min.css'); ?> |
اگه به کد بالا دقت کنید متوجه می شید که من ورژن رو وارد نکردم.
دلیلش اینه که من قرار نیست فایل bootstrap.min.css دستکاری کنم به خاطر همین از ورژن هم استفاده نکردم.
فراخوانی فایل های css و js در وردپرس با توابع wp_enqueue
تا اینجای کار ما با دو تابع اصلی آشنا شدیم حالا نوبت این رسیده که با استفاده از این توابع فایل های مورد نظرمون رو فراخوانی کنیم.
برای استفاده از این توابع ما بایستی یک تابع با عنوان دلخواه ایجاد کنیم و با استفاده از action های وردپرس به action با عنوان wp_enqueue_scripts متصل نماییم.
جهت اینکار کد زیر رو خواهیم داشت :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | <?php add_action('wp_enqueue_scripts', 'webstandScripts'); function webstandScripts() { /* =============== Enqueue CSS Files ============== */ wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.rtl.min.css'); /* =============== Enqueue JS Files ============== */ wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), ۱, true); } ?> |
ما با استفاده از کد بالا دو فایل bootstrap.min.css و bootstrap.min.js رو فراخوانی کرده ایم.
نکته : اگه دقت کنید من handle هر دو تابع رو bootstrap نوشتم در حالی که گفتیم handle ی اسم منحصر به فرد یا یونیک باید باشه در اینصورت اصولا باید فایل css مون فراخوانی نشه ولی به این نکته توجه داشته باشید که شما دو فایل با پسوند متفاوت رو با دو تابع که یکسان نیستند فراخوانی کرده اید پس مشکلی در این حالت پیش نمیاد.
الان این کد رو کافیه در فایل functions.php قالبتون قرار بدید و تمام.
مشاهده می کنید که فایل های موردنظر به صورت کامل فراخوانی شدن.
توجه : درصورتی که فایل ها فراخوانی نشدن اولین کاری که باید بکنید اینه که مسیر فایل ها رو چک کنید که درست فراخوانی کرده باشید در غیر اینصورت با خطای ۴۰۴ در کنسول مرورگر مواجه خواهید شد.
فراخوانی فایل style اصلی قالب وردپرس با wp_enqueue
خب حتما متوجه شدید که برای فراخوانی فایل style.css قالب از کد زیر یا مشابه کد زیر استفاده می کردیم :
۱ | <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"> |
ولی اینجا بهتره به جای استفاده از تابع bloginfo بهتره به شکل زیر فایل style.css رو با توابع wp_enqueue فراخوانی کنیم :
۱ ۲ ۳ | <?php wp_enqueue_style('style', get_stylesheet_uri(), [], '۱.۰'); ?> |
به همین راحتی ما فایل style.css رو بدون هیچ زحمتی تونستیم فراخوانی کنیم.
شما هم میتونید با همین روش هر فایل css و js که توی قالبتون ازش استفاده کردین به راحتی توی پروژه تون فراخوانی کنید.
مزایای فراخوانی فایل های css و js با wp_enqueue
شاید برای خیلیاتون این سوال پیش بیاد که خب چه کاریه که از این روش استفاده کنیم همون روش دستی و روال عادی که خیلی بهتره.
ولی توجه داشته باشید وقتی برای وردپرس قالب طراحی می کنید سعی کنید تا حد امکان استانداردهای وردپرس رو رعایت کنید و از روش هایی که وردپرس برای کارای مختلف در نظر گرفته استفاده کنید تا یک قالب یکپارچه و بهینه بتونید برای خودتون داشته باشید.
من اینجا یک سری از مزایای این روش رو براتون میگم که بعدها البته بیشتر بهش پی می برین :
- مدیریت فایل های فراخوانی شده به صورت کامل. به طور مثال شما یک فایل خاصی دارید که فقط توی صفحه اصلی استفاده شده و تو صفحات جانبی استفاده نشده خب اینجا می تونید با یک شرط ساده فراخوانی فایل موردنظرتون رو به صفحه خاصی محدود کنید.
- سازگاری کامل قالب با افزونه های بهینه سازی ، کش و فشرده سازی ( در صورتی که در حالت معمول این امکان وجود ندارد! )
- ورژن گذاری آسان فایل هایی که مرتبا ویرایش میشن.
- از بین رفتن مشکلاتی اعم از ویرایش مرتب چندین فایل جهت فراخوانی فایل های مختلف ، سردرگمی در بین فایل های قالب و …
- توانایی فراخوانی فایل ها به پیشخوان وردپرس
- و …
فراخوانی فایل های css و js با wp_enqueue در پیشخوان وردپرس
اگر احیانا به هر دلیلی خواستید یک فایلی رو به پیشخوان وردپرس فراخوانی کنید همین مراحل قبلی رو انجام بدید ولی به جای استفاده از اکشن wp_enqueue_scripts از اکشن admin_enqueue_scripts استفاده کنید.
به همین راحتی :))
نمونه کد زیر رو هم قرار میدم که راحت بتونید استفاده کنید.
۱ ۲ ۳ ۴ ۵ ۶ | <?php function webstandAdminScripts() { wp_enqueue_script('wbsAdminJS', get_template_directory_uri() . '/js/admin-js.js', array('jquery'), ۱, true); } add_action('admin_enqueue_scripts', 'webstandAdminScripts'); |
خب اینم از آموزش امروز مون. امیدوارم که براتون مفید واقع شده باشه و بتونید توی پروژه هاتون از این کدها استفاده کنید.
البته توجه داشته باشید که کدهای مفید و منحصر به فرد دیگری هم هستند که توی این قسمت خیلی به دردمون میخورن که در آینده به توضیحات آن ها خواهیم پرداخت.
درصورتی که سوال یا مشکلی دارید از قسمت دیدگاه های همین مقاله برامون ارسال کنید.
موفق و پیروز باشید.
آیا این مقاله برای شما مفید بود ؟
نظر شما کاربر محترم در مورد این مقاله برای ما بسیار اهمیت دارد و ما را در ارائه مقالات مفید دیگر کمک خواهد کرد.
عضویت در خبرنامه
جهت دریافت جدیدترین مطالب در ایمیل خود ، در خبرنامه وب استند عضو شوید.
خیالتان راحت هیچگونه ایمیل تبلیغاتی ارسال نخواهد شد!