در این مقاله از آموزش وردپرس ، نحوه استفاده از تابع 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 در وردپرس به پایان رسید ، اگر سوال و یا مشکلی بود در قسمت دیدگاه های همین مطلب عناون کنید.
موفق باشید