طريقة تمرير بيانات وسلاسل PHP إلى JavaScript في وردبريس

كيفية تمرير بيانات وسلاسل PHP إلى JavaScript في وردبريس من الجيد وضع كل بياناتك في سلاسل ثابتة في ملفات PHP. إذا كنت بحاجة إلى استخدام بعض البيانات في JavaScript لاحقًا ، فمن الجيد أيضًا وضع بياناتك في HTML بصيغة data-* صفات. لكن في بعض السيناريوهات المعينة ، ليس لديك خيار سوى تمرير السلاسل مباشرة إلى كود JavaScript الخاص بك.

إذا كنت تقوم بتضمين مكتبة JavaScript ، ووجدت نفسك تقوم بتهيئة كائن JavaScript داخل ملف header.php ثم تخصيص البيانات لخصائصها ، فهذه المقالة لك.

لماذا الحاجة إلى تمرير البيانات إلى JavaScript

اسمحوا لي أن أوضح بعض السيناريوهات النموذجية للحاجة إلى تمرير البيانات إلى JavaScript. على سبيل المثال ، نحتاج أحيانًا إلى إدخال هذه القيم في كود JavaScript الخاص بك:

• • الصفحة الرئيسية أو المسؤول أو المكون الإضافي أو السمة أو عناوين URL لـ AJAX

• • سلاسل قابلة للترجمة

• • موضوع أو خيار WordPress

الطريقة الشائعة لتمرير البيانات

لنفترض أن لدينا ملف jQuery يسمى myLibrary.js والتي سنقوم بتضمينها في موقع WordPress الخاص بنا:

var myLibraryObject;

(function($) {
    "use strict";

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

        pleaseWaitLabel: '', // populate use this later

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

نحن نضعها في قائمة وظائف. 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>

يعمل هذا على النحو المنشود ، ولكن هناك طريقة أفضل وأقصر للقيام بذلك.

اقرا ايضاً: كيفية إضافة Venmo في الوردبريس

طريقة WordPress

في هذا القسم ، سنناقش طريقتين مختلفتين لفهم كيفية عمله في WordPress.

الطريقة القديمة: استخدم wp_localize_script دور

الطريقة القديمة لتمرير البيانات إلى JavaScript هي باستخدام wp_localize_script وظيفة. من المفترض استخدام هذه الوظيفة بعد إدراج نص باستخدام wp_enqueue_scripts.

دعنا نلقي نظرة على بناء جملة هذه الوظيفة وحججها.

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

 

• • $handle. المقبض للنص الموجود في قائمة الانتظار لربط القيم به.

• • $objectName. كائن JavaScript الذي سيحتوي على جميع قيم $arrayOfValues.

• • $arrayOfValues. مصفوفة ترابطية تحتوي على الاسم والقيم التي سيتم تمريرها إلى البرنامج النصي.

بعد استدعاء هذه الوظيفة ، يقوم ملف $objectName متغير سيصبح متاحًا داخل البرنامج النصي المحدد.

دعنا نضبط المثال السابق لاستخدام طريقتنا الجديدة لتمرير البيانات. أولاً ، نضع النص في قائمة الانتظار ، ثم ندعو wp_localize_script في منطقتنا وظائف. 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 يمكن الآن الوصول إلى القيم داخل مكتبة jQuery الخاصة بنا عبر ملف php_vars عامل.

منذ استخدمنا wp_localize_script، لن نضطر إلى تشغيل أي شيء في منطقتنا header.php، ويمكننا إزالة محتويات ملف <script> بطاقة شعار. يمكننا أيضًا إزالة الخصائص الإضافية من سكربت jQuery. يمكن تبسيطها الآن إلى هذا:

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. سلسلة تحتوي على JavaScript المراد إضافتها.

• • $position. ما إذا كنت تريد إضافة البرنامج النصي المضمّن قبل المقبض أو بعده.

لذلك ستضيف هذه الوظيفة برنامج نصي مضمن قبل أو بعد كود JavaScript الخاص بك.

دعنا نراجع المثال الذي ناقشناه في القسم السابق مع 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 عامل.

ستتوفر متغيراتنا في JavaScript بتنسيق 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 والسلاسل إلى JavaScript في WordPress.

استنتاج

باستخدام wp_add_inline_script، فإن الكود الخاص بنا أبسط ، و header.php أنظف. نأمل أن تتمكن من استخدام هذه الوظيفة في التعليمات البرمجية الخاصة بك والاستمتاع بفوائدها.