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

مقدمه :

در چند روز اخیر کاربران زیادی به ما پیام دادن که توضیحات بیشتری درباره تابع wp_localize_script در وردپرس که در مقالات فرم جستجوی Suggestion و دکمه مطالب بیشتر با Ajax و ساخت صفحه ارتباط با ما استفاده شده ، ارائه کنید.

بنابراین تصمیم گرفتیم یک مقاله درباره تابع wp_localize_script در وردپرس با ذکر مثال آماده کنیم.

معرفی تابع wp_localize_script در وردپرس

به صورت کلی اگر متغیری در PHP داشته باشیم و بخواهیم به مقادیر این متغییر در کدهای جاوا اسکریپت خود دسترسی داشته باشیم از تابع wp_localize_script در وردپرس استفاده می کنیم.

توجه : برای استفاده از تابع wp_localize_script در وردپرس ، ابتدای باید اسکریپت مربوطه را با استفاده از تابع wp_register_script و تابع wp_enqueue به وردپرس اضافه کرده باشیم.

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

شکل کلی این تابع به صورت زیر می باشد :

wp_localize_script( string $handle, string $object_name, array $l10n )

handle (اجباری) : نام اسکریپتی که قرار است از داده ارسالی استفاده کند (نامی که برای  اسکریپت در تابع wp_enqueue تعریف کردیم)

$object_name (اجباری) : یک نام برای object جاوا اسکریپت ، که از طریق این object به مقادیر متغیرهای ارسالی دسترسی خواهیم داشت.

array $l10n (اجباری) :  داده های ارسالی که می توانند در قالب آرایه ای یک یا چند بعدی باشند.

Return : در صورتی که تابع کار خود را با موفقیت انجام دهد true و در غیر این صورت false  بر می گرداند.

مثال کاربردی

در این مثال می خواهیم اسکریپتی برای ایجاد ارتباط Ajax ایجاد کنیم ، این اسکریپت نیاز به مقادیر خاصی جهت  نمایش پیام مناسب به کاربر و آدرس ارتباط با سرور دارد ، ما این مقادیر را از طریق  تابع wp_localize_script به جاوا اسکریپت انتقال خواهیم داد.

برای اینکار کدهای زیر را به تابع functions.php اضافه می کنید:

function wpschool_ajax_script(){
    wp_register_script('ajax-script', get_template_directory_uri() . '/ajax-script.js', array('jquery') ); 
    wp_enqueue_script('ajax-script ');
 
    wp_localize_script( 'ajax-script', 'ajax_object', array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'loading_message' => __('در حال ارسال اطلاعات ، لطفا صبر کنید...')
        ));
}

در تابع بالا ابتدا با استفاده از wp_register_script و wp_enqueue_script اسکریپت خود را در وردپرس ثبت و اضافه می کنیم.

تابع get_template_directory_uri جهت بدست آوردن آدرس پوسته فعال وردپرس استفاده شده است.

در قدم بعدی با استفاده از تابع wp_localize_script  یک object به نام ajax_object تعریف کرده و مقادیر ajax_url و loading_message را به کدهای جاوا اسکریپت منتقل می کنیم.

توجه: در صورتی که شما وب سایتی چند زبانه داشته باشید مقدار  loading_message را با توجه به زبان فعال در وب سایت از پایگاه داده بارگذاری کرده و با این روش به اسکریپت خود منتقل می کنید ، بدون اینکه تغییر در کد بالا انجام دهید.

جهت استفاده از مقادیر ارسالی در جاوا اسکریپت ابتدا به مسیر پوسته در وردپرس رفته و فایل ajax-script.js را ایجاد کرده و کدهای زیر را به آن اضافه می کنیم:

jQuery(document).ready(function($) {
    $('.form').on('submit', function(e){
        $('.status').text(ajax_object.loading_message);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_object.ajax_url,
            data: { 
                        //Your_Data
	},
            success: function(data){
                         //do somthing  
            },
            error: function(data){
  		           //do somthing else 
            }
        });
        e.preventDefault();
    });
});

در خط سوم بعد از اینکه فرم مورد نظر شما  submit شد با استفاده از ajax_object.loading_message  پیام مناسب که از طریق wp_localize_script به کدهای جاوا اسکریپت خود منتقل کرده بودیم به کاربر نمایش داده می شود.

در خط هفتم مقدار url نیز با استفاده از ajax_object.ajax_url برابر با مقداری که از طریق wp_localize_script به کدهای جاوا اسکریپت خود منتقل کرده بودیم، قرار می گیرد.

نکته: توجه داشته باشید که در کد بالا باید  بخش های data  و success و error را بسته به نیاز خود جایگذاری کنید.

مقاله تابع wp_localize_script در وردپرس به پایان رسید ، اگر سوال و یا مشکلی بود در قسمت دیدگاه های همین مطلب عناون کنید.

موفق باشید

+3

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

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

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