دسترسی به داده های PHP در جاوا اسکریپت با wp_localize_script

بعضی مواقع شرایطی پیش می آید که می خواهید به مقادیر متغیرها، خروجی توابع PHP و وردپرس در داخل کدهای جاوا اسکریپت دسترسی پیدا کنید، به عنوان مثال:

  • رشته نانس تولید شده برای اعتبارسنجی در سمت سرور
  • دسترسی به مسیر admin-ajax.php برای فراخوانی های ایجکس

در چنین شرایطی می توانید از روش های زیر استفاده نمائید:

۱- ویژگی *-data تگ های HTML

در این روش داده های موردنیازمان را در عناصر HTML نگهداری کرده و از طریق jQuery یا جاوا اسکریپت به آنها دسترسی پیدا می کنیم. به عنوان مثال در کدهای زیر خروجی تابع wp_create_nonce را در تگ a ذخیره کردیم.

<div>
    <a href="#"
       class="login-link"
       data-nonce="<?php echo wp_create_nonce( "login-token" ); ?>">User Login</a>
</div>

 

حالا با کتابخانه jQuery به مقدار data-nonce دسترسی پیدا می کنیم.

( function ( $ ) {
    let nonce = $( '.login-link' ).data( 'nonce' );
})( jQuery );

 

نمونه کد جاوا اسکریپت هم بدین صورت می باشد.

<script>
   let nonce = document.querySelector( ".login-link" ).dataset.nonce;
</script>

 

لازم به ذکر است که در مطلب آموزش استفاده از ایجکس(jQuery Ajax) در وردپرس(مثال استان و شهر) از این روش استفاده شده است، همچنین پیشنهاد می کنیم مقاله آموزشی روش صحیح و اصولی استفاده از jQuery در وردپرس را نیز مطالعه فرمائید.

۲- استفاده از wp_localize_script

خوشبختانه وردپرس برای هر مشکلی راه حلی در نظر گرفته است، به کمک تابع wp_localize_script می توانید داده های PHP را به جاوا اسکریپت منتقل نمائید، این تابع سه آرگومان دریافت می کند:

  1. مقدار handle$(آرگومان اول تابع wp_enqueue_script) در اینجا js-init.
  2. نام متغیری که برای دسترسی به داده ها در جاوا اسکریپت استفاده می شود(مثلا phpvars).
  3. آرایه ای از کلید-مقدار(Key/Value) برای ذخیره داده ها(مثلا آرایه data$).

برای این منظور کدهای زیر را به فایل functions.php اضافه کنید.

function my_theme_scripts()
{ 
    wp_enqueue_script( 'js-init', get_theme_file_uri( '/js/custom.js' ), array( 'jquery' ), '1.1', true );

    $data = array(
        'plugins_url' => plugins_url(),
        'ajax_url' => get_admin_url( 'admin-ajax.php' )
    );

    wp_localize_script( 'js-init', 'phpvars', $data );
}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

برای مشاهده تغییرات کافی است سورس HTML صفحه وب را مشاهده کنید، خروجی کار در تصویر زیر نشان داده شده است.

فراخوانی مقادیر php در جاوا اسکریپت

 

در نهایت برای دسترسی به متغیرهای ذخیره شده کدهای زیر به فایل custom.js اضافه می کنیم.

( function ( $ ) {
    let ajaxURL = phpvars.ajax_url,
       pluginsURL = phpvars.plugins_url;
})( jQuery )

 

اگر از جی کوئری استفاده نمی کنید کد جاوا اسکریپت بدین صورت خواهد بود.

<script>
    let ajaxURL = phpvars.ajax_url,
       pluginsURL = phpvars.plugins_url;
</script>

 

تابع ()wp_localize_script حتما باید بعد از ()wp_enqueue_script و ()wp_register_script فراخوانی شود.

جمع بندی

توجه داشته باشید که در روش دوم علاوه بر داده های رشته ای(String) می توانید داده های عددی(Integer) و بولین(Boolean) هم ذخیره کنید.

نظرات و سوالات کاربران

پاسخی بگذارید

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