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

Ahmad ِAlkhalaf
6 Min Read

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

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

ستعلمك هذه المقالة كيفية تمرير بيانات PHP والسلاسل الثابتة بشكل صحيح إلى مكتبة JavaScript الخاصة بك.

اقرا ايضاً: كيفية تمكين وضع تصحيح أخطاء WordPress بسهولة لإصلاح أخطاء الموقع

- Advertisement -

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

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

 

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

 

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

 

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

 

- Advertisement -

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

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

نحن نضعها في قائمة وظائف. php بالرمز التالي:

الآن ، السؤال هو: كيف يمكننا ملء home و pleaseWaitLabel الخصائص؟ ربما أضفت غريزيًا شيئًا كهذا في ملف header.php للحصول على البيانات التي تحتاجها:

- Advertisement -

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

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

طريقة WordPress

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

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

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

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

 

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

 

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

 

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

 

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

دعنا نضبط المثال السابق لاستخدام طريقتنا الجديدة لتمرير البيانات. أولاً ، نضع النص في قائمة الانتظار ، ثم ندعو wp_localize_script في منطقتنا وظائف. php ملف:

ملكنا home و pleaseWaitLabel يمكن الآن الوصول إلى القيم داخل مكتبة jQuery الخاصة بنا عبر ملف php_vars عامل.

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

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

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

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

 

    • $handle. اسم البرنامج النصي المراد إضافة البرنامج النصي المضمن إليه.

 

    • $data. سلسلة تحتوي على JavaScript المراد إضافتها.

 

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

 

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

دعنا نراجع المثال الذي ناقشناه في القسم السابق مع wp_add_inline_script إصدار.

الآن لدينا home و pleaseWaitLabel يمكن الوصول إلى القيم داخل مكتبة jQuery الخاصة بنا عبر ملف php_vars عامل.

ستتوفر متغيراتنا في JavaScript بتنسيق php_vars.home و php_vars.pleaseWaitLabel، كما هو موضح في المقتطف التالي.

بهذه الطريقة ، يمكنك تمرير بيانات PHP والسلاسل إلى JavaScript في WordPress.

استنتاج

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

إذا أعجبك هذا المقال ، تابعنا على Twitter و Facebook.

اقرا ايضاً:

 

 

 

Share this Article
Follow:
نائب مدير موقع AE
Leave a comment
best WordPress Plugins for Business Websites in 2023 5 Best WordPress Ecommerce Plugins Compared – 2023 أفضل 5 شركات استضافة مواقع للويب 2023
adbanner