نحوه انتقال داده ها و رشته های PHP به جاوا اسکریپت در وردپرس

تمرین خوبی است که تمام داده های خود را در رشته های ثابت در فایل های PHP خود قرار دهید. اگر بعداً نیاز به استفاده از برخی داده ها در جاوا اسکریپت دارید، تمرین خوبی است که داده های خود را در HTML خود به عنوان data-* ویژگی های. اما در برخی سناریوهای خاص، شما چاره ای ندارید جز اینکه رشته ها را مستقیماً به کد جاوا اسکریپت خود منتقل کنید.

اگر از یک کتابخانه جاوا اسکریپت استفاده می کنید، و متوجه شده اید که یک شی جاوا اسکریپت را در داخل خود مقداردهی اولیه می کنید. header.php و سپس اختصاص داده ها به ویژگی های آن، سپس این مقاله برای شما مناسب است.

این مقاله به شما آموزش می دهد که چگونه داده های PHP و رشته های استاتیک را به کتابخانه جاوا اسکریپت خود به درستی ارسال کنید.

چرا باید داده ها را به جاوا اسکریپت منتقل کنیم؟

اجازه دهید چند سناریو معمولی برای نیاز به انتقال داده به جاوا اسکریپت را توضیح دهم. به عنوان مثال، گاهی اوقات لازم است این مقادیر را در کد جاوا اسکریپت خود وارد کنیم:

• آدرس های صفحه اصلی، مدیر، پلاگین، طرح زمینه یا AJAX
• رشته های قابل ترجمه
• یک تم یا گزینه وردپرس

روش رایج انتقال داده ها

فرض کنید یک فایل جی کوئری به نام داریم myLibrary.js که در سایت وردپرس خود قرار خواهیم داد:

var myLibraryObject;

(function($) {
    "use strict";

    myLibraryObject = {
        home: '', // populate this later

        pleaseWaitLabel: '', // populate use this later

        someFunction: function() {
            // code which uses the properties above
        }
    }
});

ما آن را در صف خود قرار می دهیم functions.php با کد زیر:

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

حال، سؤال این است: چگونه می‌توانیم آن را پر کنیم home و pleaseWaitLabel خواص؟ شما ممکن است به طور غریزی چیزی شبیه به این را در خود اضافه کرده باشید header.php برای به دست آوردن داده های مورد نیاز:

<script>
(function( $ ) {
  "use strict";
 
  $(function() {
 
    myLibraryObject.home="<?php echo get_stylesheet_directory_uri() ?>";
    myLibraryObject.pleaseWaitLabel="<?php _e( "Please wait...', 'default' ) ?>';
 
  });
}(jQuery));
</script>

این همانطور که در نظر گرفته شده است کار می کند، اما راه بهتر و کوتاه تری برای انجام این کار وجود دارد.

راه وردپرس

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

روش قدیمی: از wp_localize_script عملکرد

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

بیایید سینتکس این تابع و آرگومان های آن را بررسی کنیم.

wp_localize_script( $handle, $objectName, $arrayOfValues );

• $handle. دسته به اسکریپت صف داده شده برای اتصال مقادیر به.
• $objectName. شی جاوا اسکریپت که تمام مقادیر را نگه می دارد $arrayOfValues.
• $arrayOfValues. یک آرایه انجمنی حاوی نام و مقادیری که باید به اسکریپت ارسال شود.

پس از فراخوانی این تابع، $objectName متغیر در اسکریپت مشخص شده در دسترس خواهد بود.

بیایید مثال قبلی را برای استفاده از روش جدید انتقال داده تنظیم کنیم. ابتدا اسکریپت را در نوبت قرار می دهیم و سپس فراخوانی می کنیم wp_localize_script در ما functions.php فایل:

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
 
$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );

ما home و pleaseWaitLabel اکنون می توان به مقادیر از طریق کتابخانه جی کوئری ما دسترسی پیدا کرد php_vars متغیر.

از آنجایی که استفاده کردیم wp_localize_script، ما مجبور نخواهیم بود چیزی را در خود اجرا کنیم header.php، و ما می توانیم با خیال راحت محتویات را حذف کنیم <script> برچسب زدن ما همچنین می توانیم ویژگی های اضافی را از اسکریپت جی کوئری خود حذف کنیم. اکنون می توان آن را به این شکل ساده کرد:

var myLibraryObject;

(function($) {
    "use strict";

    myLibraryObject = {
        someFunction: function() {
            // code which uses php_vars.home and php_vars.pleaseWaitLabel
        }
    }
}(jQuery));

راه جدید: از wp_add_inline_script عملکرد

راه جدید و پیشنهادی استفاده از wp_add_inline_script عملکرد. این تابع باید بعد از اینکه با استفاده از یک اسکریپت در صف قرار دادید استفاده شود wp_enqueue_scripts.

بیایید به نحو و آرگومان های این تابع نگاهی بیندازیم.

wp_add_inline_script( $handle, $data, $position = 'after' );

• $handle. نام اسکریپتی که باید اسکریپت درون خطی را به آن اضافه کنید.
• $data. رشته حاوی جاوا اسکریپتی که باید اضافه شود.
• $position. آیا اسکریپت درون خطی قبل از دسته اضافه شود یا بعد از آن.

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

بیایید مثالی را که در بخش قبل با آن مورد بحث قرار دادیم تجدید نظر کنیم wp_add_inline_script نسخه

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);

wp_add_inline_script( 'wpdocs-my-script', 'const php_vars=" . json_encode( $dataToBePassed ), "before' );

حالا ما home و pleaseWaitLabel مقادیر را می توان در داخل کتابخانه jQuery ما از طریق php_vars متغیر.

متغیرهای ما در جاوا اسکریپت به صورت در دسترس خواهند بود php_vars.home و php_vars.pleaseWaitLabel، همانطور که در قطعه زیر نشان داده شده است.

var myLibraryObject;

(function($) {
    "use strict";

    myLibraryObject = {
        someFunction: function() {
            console.log(php_vars.home);
            console.log(php_vars.pleaseWaitLabel);
        }
    }
}(jQuery));

بنابراین از این طریق می توانید داده ها و رشته های PHP را به جاوا اسکریپت در وردپرس منتقل کنید.

نتیجه

با استفاده از wp_add_inline_script، کد ما ساده تر است و ما header.php تمیزتر است امیدوارم بتوانید از این تابع در کد خود استفاده کنید و از مزایای آن بهره مند شوید.

این پست با مشارکت‌ها به‌روزرسانی شده است سجال سونی. ساجل متعلق به هند است و دوست دارد زمان خود را صرف ایجاد وب سایت بر اساس چارچوب های منبع باز کند.