افزودن فایل های CSS و JS به قالب وردپرس با توابع wp_enqueue

موضوع : مقالات آموزشی وردپرس
تاریخ : 1400/02/11
مجموع پسند شده : 10
بازدید : 2.683 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 )
?>

<?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'), 1, true);
?>

<?php

wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), ۱, true);

توجه : فرض بر این است که فایل bootstrap.min.js در پوشه js قالب قرار دارد.

نکته : استفاده از این توابع به این صورت نیست و در اخر همین مقاله استفاده صحیح از این توابع گفته خواهد شد.

جهت بررسی بیشتر تابع به لینک زیر مراجعه کنید :

wp_enqueue_script

تابع 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' )
?>

<?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');
?>

<?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'), 1, true);
}
?>

۱۰

۱۱

<?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'); ?>">

۱	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">

ولی اینجا بهتره به جای استفاده از تابع bloginfo بهتره به شکل زیر فایل style.css رو با توابع wp_enqueue فراخوانی کنیم :

<?php
wp_enqueue_style('style', get_stylesheet_uri(), [], '1.0');
?>

<?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'), 1, true);
}

add_action('admin_enqueue_scripts', 'webstandAdminScripts');

<?php

function webstandAdminScripts() {

wp_enqueue_script('wbsAdminJS', get_template_directory_uri() . '/js/admin-js.js', array('jquery'), ۱, true);

}

add_action('admin_enqueue_scripts', 'webstandAdminScripts');

خب اینم از آموزش امروز مون. امیدوارم که براتون مفید واقع شده باشه و بتونید توی پروژه هاتون از این کدها استفاده کنید.

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

درصورتی که سوال یا مشکلی دارید از قسمت دیدگاه های همین مقاله برامون ارسال کنید.

موفق و پیروز باشید.

کلمات کلیدی

هادی خانزاده

دانش آموخته مهندسی فناوری اطلاعات هستم و بیش از 11 سال سابقه در زمینه طراحی و برنامه نویسی وب دارم. عاشق وردپرس هستم و بیشتر پروژه هام رو بر اساس این سیستم مدیریت محتوای قدرتمند به اجرا در آوردم. همیشه آرزو داشتم یاد بگیرم و دانسته هام و در اختیار همه کسانی که علاقه مند به یادگیری هستند ، قرار بدم. وب استند متولد شده از این آرزوست :)