وردپرس اضافه کردن فایل های استایل یا اکشن با wp_enqueue_scripts

باید دو فایل css وjs را بسازیم و به وردپرس اضافه کنیم.

پس داخل پوشه افزونه‌ای که درست کردیم، یک پوشه به نام assets اضافه میکنیم تا این فایل ها را داخل آن قرار بدهیم.
برای این که کارمان برای استفاده از این فایل ها راحت تر شود دو تا ثابت تعریف میکنیم و مسیر این دو پوشه را به آن میدهیم.

define("PS_URI", plugin_dir_url(__FILE__));
define("PS_CSS", trailingslashit(PS_URI . "assets/css"));
define("PS_JS", trailingslashit(PS_URI . "assets/js"));

خط اول ثابت PS_URI مسیر url برای افزونه را تعریف کرده است. وردپرس تابعی دارد به نام plugin_dir_url که مسیر پوشه افزونه را به ما می‌دهد و یک مقدار میگرد که اسم فایل اصلی افزونه است. این مقدار را __FILE__ گذاشته ام. این به این معنی است که همین فایلی که در آن قرار داریم فایل اصلی افزونه است.

در خط دوم و سوم هم مسیر پوشه های css و js را تعیین کرده‌ام. تابع trailingslashitکه اینجا میبینید یک تابع داخلی وردپرس است که کار اسلش گذاری در انتهای url را انجام می‌دهد. اگر خودتان هم در انتها اسلش گذاشته باشید خودش تشخیص می‌دهد.


برای اضافه کردن فایل های css و جاوااسکریپت یک اکشن وجود دارد به نام wp_enqueue_scripts .

هر موقع بخواهیم فایل استایل یا جاوااسکریپت را از طریق پلاگین به وردپرس اضافه کنیم باید این اکشن را استفاده کنیم.

به این شکل:

add_action('wp_enqueue_scripts','load_prism_assets');

همانطور که در مقدار دوم میبینید یک تابع به اسم load_prism_assets نوشته ام. کدهای اضافه کردن استایل به وردپرس را باید درون این تابع بنویسم. پس حالا که اکشن را اضافه کردیم باید این تابع را هم تعریف کنیم.

function load_prism_assets(){
if (!is_admin()) {
wp_enqueue_style('r-prismcss', PS_CSS . "prism.css");
wp_enqueue_script('r-prismjs', PS_JS . "prism.js");
}
}

قبل از هرچیز در تابع چک میکنیم که در صفحه ادمین نباشیم بعد تابع اجرا شود. چرا؟ چون نیازی به لود شدن فایل های استایل در بخش ادمین نداریم. این کار با تابع is_admin انجام میشود.

بعد داخل شرط باید کدی بنویسیم که فایل ها را به صفحات وردپرس اضافه کند. وردپرس دو تابع برای فایل های css و js تعریف کرده.

wp_enqueue_style برای لود کردن فایل css

wp_enqueue_script برای لود کردن فایل js

آرگومان اول هر کدام از این دو تابع باید یک اسم باشد مهم نیست چه اسمی فقط چیزی باشد که بتوانید متوجه شوید این مربوط به چه فایلی است.

آرگومان دوم هم مسیر فایلی است که میخواهیم لود شود.

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