مقاله امروز وردپرس به معرفی تابع کاربردی wp_enqueue در وردپرس اشاره دارد. کار این تابع در واقع رجیستر کردن فایل های css و js می باشد. بیشتر در مواردی از قبیل ساخت افزونه و ساخت شورت کد استفاده دارد.

مثلا فرض کنید که افزونه عضویت در خبرنامه می نویسید. اگر بخواهید به افزونه استایل مشخصی بدهید می بایست در کدهاتون از تابع wp_enqueue استفاده کنید.

بسیار خب شروع می کنیم.

تابع wp_enqueue در وردپرس

طریق نوشتن تابع به شکل زیر است:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer ); ?>

 

 معرفی پارامتر های wp_enqueue در وردپرس

$handle: وارد کردن این پارامتر اجباری است. این پارامتر شامل نام اسکریپت یا استایل می شود. مقدار پیشفرض ندارد. نوع پارامتر از نوع رشته ای می باشد

$src: این پارامتر آدرس لینک فایل اسکریپت با استایل را ذخیره می کند و از نوع پارامتر اختیاری است. نوع پارامتر از نوع رشته ای می باشد. مثلا: http://example.com/wp-content/themes/my-theme/my-theme-script.js

اگر می خواهید آدرس فایل های یک افزونه را اینجا قرار دهید از تابع  plugins_url() و اگر می خواهید فایل ها را از پوسته خودتون فراخوان کنید از تابع get_template_directory_uri() استفاده کنید.

مثلا:

<img src="' . plugins_url( 'images/wordpress.png' , __FILE__ ) . '" >;
<img src="' get_template_directory_uri() . '/i,ages/wpschool.png'">;

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

$ver: این پارامتر اختیاری است و نوع آن رشته می باشد. در این پارامتر شما شماره نسخه فایل را وارد می کنید. اگر مقدار این پارامتر را وارد کنید، به انتهای مسیر query sting اضافه خواهد شد و اگر مقدار را وارد کنید وردپرس به طور اتوماتیک یک شماره نسخه برای فایل در نظر می گیرد. این زمانی که به کار می رود که بخواهید فایل را مرتب بروز کرده و نسخه جدیدی به آن اضافه کنید

$in_footer: این پارامتر اختیاری است و نوع آن رشته می باشد. به طور طبیعی،  اسکریپت ها و فایل هاس استایل داخل تگ <head> رجیستر می شوند اما مقدار این پارامتر را true قرار دهید فایل قبل از تگ </body> قرار می گیرد. مقدار پیشفرض: false

 

مثال های wp_enqueue در وردپرس

1- رجیستر فایل ها به صورت تکی و ساده

/**
 * روش رایج رجیستر فایل ها ( تک به تک )
 */
function 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', 'theme_name_scripts' );

 

نحوه استفاده wp_enqueue در پوسته ها در وردپرس

معمولا برای لینک کردن اسکریپت ها و استایل ها در پوسته های وردپرسی کد آنها را در header.php قرار میدهند که این روش روش صحیحی برای این کار نیست. بهتر از برای این کار از فانکشن wp_enqueue استفاده کنیم.

در کد زیر یک نمونه از نحوه استفاده wp_enqueue در پوسته وردپرس را قرار دادم.

<?php
function my_scripts_method() {
wp_enqueue_script('custom-script',get_stylesheet_directory_uri() . '/js/custom_script.js',array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

 

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

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

<?php
function my_scripts_method() {
wp_enqueue_script('newscript',plugins_url( '/js/newscript.js' , __FILE__ ),array( 'scriptaculous' ));
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

در اینجا فقط به جای get_stylesheet_directory_uri() از plugins_url استفاده کردم.

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

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

<?php
    add_action( 'admin_init', 'my_plugin_admin_init' );
    add_action( 'admin_menu', 'my_plugin_admin_menu' );

    function my_plugin_admin_init() {
        /* فراخوانی اسکریت */
        wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );
    }

    function my_plugin_admin_menu() {
        /* افزودن منو یا زیر منو افزونه در پنل مدیریت */
        $page_hook_suffix = add_submenu_page( 'edit.php', // صفحه اصلی
                                  __( 'My Plugin', 'myPlugin' ), // عنوان زیر منو
                                  __( 'My Plugin', 'myPlugin' ), // عنوان صفحه
				  'manage_options', // امکان دسترسی به صفحه
				  'my_plugin-options', //نامک صفحه
                                  'my_plugin_manage_menu' // فانکشن برای فراخوانی نمایش صفحه
                               );
        add_action('admin_print_scripts-' . $page_hook_suffix, 'my_plugin_admin_scripts');
    }

    function my_plugin_admin_scripts() {
        wp_enqueue_script( 'my-plugin-script' );
    }

    function my_plugin_manage_menu() {
        /* نمایش صفحه تنظیمات ما */
    }
?>

 

نحوه استفاده wp_enqueue در پیشخوان وردپرس

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

<?php add_action( 'admin_enqueue_scripts', 'function_name' ); ?>

کد زیر یک نمونه هستش:

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

آموزش امروز مدرسه وردپرس درباره ” wp_enqueue در وردپرس ” به پایان رسید. امیدوارم که کاربردی باشه

موفق باشید

5 دیدگاه برای “wp_enqueue در وردپرس

  • دیزل ژنراتور
    - ۱۳ دی , ۱۳۹۳

    تابع به درد بخوریه
    ممنون که بابت اموزش

  • میزبانی وب هاست سنتر
    - ۲۳ دی , ۱۳۹۳

    این کد جون میده واسه کپی رایت گذاشتن تو قالب ها 🙂

  • فرزانه
    - ۲۴ دی , ۱۳۹۳

    ممنون – واقعا عالی نوشتید .
    موفق باشید .

  • استیو
    - ۲۰ اسفند , ۱۳۹۳

    سلام ممنون از سایت خوبتون .. میگم لا اقل یه گزینه لایک واسه مطالبتون بزارید تا من و امثال من که حال ندارن نظر بدن حداقل یه لایک بکوبن!

    • الناز بیک زاده
      - ۲۵ اسفند , ۱۳۹۳

      سلام دوست من. چشم حتما اضافه می کنم

دیدگاه خود را بیان کنید

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

-- بارگیری کد امنیتی --