آموزشوردپرس

آشنایی با wp_enqueue در وردپرس و نحوه استفاده از آن

اگر فایل header یا footer یک پوسته وردپرسی را مشاهده کرده باشید، حتما توابع wp_head() و wp_footer() را دیده‌اید. این توابع برای فراخوانی اسکریپت‌ها و استایل‌های یک پوسته به صورت پویا کاربرد دارند و به طراحان پوسته و توسعه دهندگان افزونه‌های وردپرس اجازه اتصال فایل‌های مورد نیاز برای اجرای پوسته و افزونه‌های مختلف از طریق تابع wp_enqueue یا به صورت دقیق تر wp_enqueue_script() و wp_enqueue_style() را می‌دهد. دو تابع ذکر شده به ترتیب برای اتصال فایل‌های جاوا اسکریپت و استایل مورد استفاده قرار می‌گیرند و شامل چند پارامتر‌ می‌شوند که برای تعیین نسخه و انتخاب مکان فراخوانی آن‌ها مورد استفاده قرار می‌گیرد.

wp_enqueue

تابع  wp_enqueu به طور کلی شامل پارامتر‌های زیر می شود:

wp_enqueue_script ( string $handle, string|bool $src = false, array $deps = array(), string|bool $ver = false, bool $in_footer = false )

$handle

این پارامتر نام اسکریپت را تعیین می کند.

$src

از طریق این پارامتر آدرس فایل مورد نظر جهت فراخوانی مشخص می‌شود.

$deps

این پارامتر که بوسیله یک آرایه مشخص می‌شود پیشنیاز‌های اسکریپت مورد نظر را مشخص می‌کند.

$ver

این پارامتر ورژن یا نسخه اسکریپت را مشخص می‌کند.

$in_footer

این پارامتر که از جنس bool  یا شرطی است مکان فراخوانی اسکریپت را مشخص می‌کند. اگر مقدار آن روی true تنظیم شود اسکریپت در فوتر پوسته (از طریق تابع wp_footer()) فراخوانی می شود؛ اگر مقدار برابر false باشد اسکریپت در header و توسط تابع wp_header() فراخوانی می‌شود.

نحوه استفاده از wp_enqueue

اگر فایل اسکریپت مورد نظر در کتابخانه وردپرس موجود نباشد و لازم باشد آن را از طریق پوسته یا افزونه فراخوانی کرد تابع فراخوانی به این صورت تعریف می شود:

/**  * Proper way to enqueue scripts and styles.  */ function wpdocs_theme_name_scripts() {     wp_enqueue_style( 'style-name', get_stylesheet_uri() );     wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' ); 

اگر اسکریپت مورد نظر در کتابخانه وردپرس موجود باشد نحوه فراخوانی به صورت زیر است:

/**  * Enqueue script.aculo.us.  *  * Tha callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end.  */ function my_scripts_method() {     wp_enqueue_script( 'scriptaculous' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

در صورتی که در یک پوسته اسکریپت مورد نظر لازم باشد پس از یک اسکریپت خاص فراخوانی شود کدی مشابه کد زیر خواهد داشت:

/**  * Enqueue a script with jQuery as a dependency.  */ function wpdocs_scripts_method() {     wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' ); 

برای فراخوانی اسکریپت به همین صورت، برای یک افزونه:

/**  * Enqueue script with script.aculo.us as a dependency.  */ function my_scripts_method() {     wp_enqueue_script( 'newscript', plugins_url( '/js/newscript.js' , __FILE__ ), array( 'scriptaculous' ) ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

و در نهایت نحوه فراخوانی یک اسکریپت در صفحه تنظیمات افزونه:

/**  * Register the plugin script.  */ function wpdocs_plugin_admin_init() {     // Register our script.     wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) ); } add_action( 'admin_init', 'wpdocs_plugin_admin_init' );   /** 

نکته: توابع  wp_enqueue باید در فایل functions.php مورد استفاده قرار گیرند.

برچسب ها

ایرانووب

متولد 1368، طراح و توسعه دهنده وب، عاشق کدنویسی، ایده پردازی دیجیتال و بازی های ویدئویی!!!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن