كيفية استخدام Ajax في ووردبريس
نشرت: 2023-02-12إذا كان لديك قاعدة عملاء نشطة ونشطة لموقع الويب الخاص بك ، فقد تتساءل كيف يمكنك توفير تجربة ويب تفاعلية ومثيرة حقًا لهم. يمكن أن يكون تقديم التفاعل في الوقت الفعلي عامل جذب كبير لجمهورك.
لحسن الحظ ، تعد JavaScript و XML (Ajax) غير المتزامنة طريقة سهلة الاستخدام لإضافة ميزات تفاعلية إلى موقع الويب الخاص بك. عندما يتعلق الأمر بـ WordPress ، يمكنك حتى تبسيط العملية باستخدام مكون إضافي قائم على Ajax.
في هذه المقالة ، سوف نقدم لك Ajax وكيف يعمل. سنرشدك أيضًا خلال بدء استخدام Ajax في WordPress. دعنا نقفز مباشرة!
ما هو اياكس وكيف يعمل؟
يجمع Ajax بين عدد من لغات البرمجة المختلفة ، مثل HTML و CSS و JavaScript والمزيد. في الواقع ، تعمل هذه الأداة خلف الكواليس لتلقي الطلبات من مستعرض الويب وإرسالها إلى الخادم ونقل النتائج مرة أخرى إلى المتصفح.
كمستخدم للويب ، لن تعرف أن Ajax يعمل. ستحصل ببساطة على تجربة تفاعلية للغاية. على موقعك الخاص ، على سبيل المثال ، قد تستخدم Ajax لقبول الإعجابات على المنشورات من المستخدمين الذين قاموا بتسجيل الدخول ، وعرض حصيلة في الوقت الفعلي.
لماذا اياكس مفيد؟
مع Ajax ، لا يضطر المستخدمون إلى إعادة تحميل صفحة لرؤية تغييرات معينة عليها. هذا يعني أن موقعك سيبقى سريعًا ويقدم تجربة مستخدم أكثر سلاسة. نظرًا لأن Ajax فعال ، حيث يرسل البيانات التي يحتاجها فقط ذهابًا وإيابًا ، فيمكنه زيادة عرض النطاق الترددي وتجنب عمليات نقل البيانات الثقيلة.
كمستخدمين للويب ، نحصد فوائد Ajax طوال الوقت. أحد الأمثلة على ذلك هو وظيفة البحث التلقائي في Google.
من الأمثلة الأخرى التي قد تكون على دراية بها تعليقات Facebook وإعجابات Instagram. من المحتمل أن يعمل Ajax في أي مكان يمكنك فيه التفاعل مع صفحة الويب وتلقي المعلومات في المقابل على الفور.
الشروع في العمل مع Ajax في WordPress
عندما يتعلق الأمر بـ WordPress ، فهناك بعض الطرق التي يكون فيها Ajax مفيدًا. أولاً ، سنلقي نظرة على عنوان Ajax URL وكيفية استخدامه جنبًا إلى جنب مع خطافات وظيفة WordPress.
عنوان Ajax URL في ووردبريس
نظرًا لأن WordPress يستخدم Ajax افتراضيًا في لوحة تحكم المسؤول ، فإن إضافة المزيد من وظائف Ajax ليس بالأمر الصعب. إذا كنت تريد استخدام Ajax في الواجهة الأمامية لموقعك ، فستحتاج إلى فهم كيفية عمل عنوان URL الخاص بـ Ajax.
في WordPress ، يحتوي ملف admin-ajax.php الخاص بك على عنوان URL. يوفر هذا المعلومات اللازمة لإرسال البيانات للمعالجة ، وهو أمر حيوي لتطوير Ajax للواجهة الأمامية. يستخدم WordPress استدعاء wp_localize_script () لاستخدام عنوان Ajax URL لتوصيل وظائف JavaScript و PHP ، حيث لا يمكن لـ PHP عكسها مباشرة دون بعض المساعدة.
كيفية استخدام Ajax Action Hook في ووردبريس
يستخدم WordPress الخطافات في برمجته ، كطريقة للمكونات الإضافية والسمات للتفاعل مع WordPress Core. تأتي الخطافات في نوعين: "الإجراءات" و "الفلاتر". مع Ajax ، ستستخدم خطافات الحركة لتنفيذ الوظائف.
تمكّنك الإجراءات من إضافة البيانات إلى WordPress أو تغيير طريقة عملها. مع Ajax ، ستستخدم الإجراء wp_ajax_ (الإجراء). يمكن بعد ذلك ربط وظيفة مخصصة بهذا ، ليتم تنفيذها أثناء مكالمة Ajax.
على سبيل المثال ، يوضح نموذج كود WordPress هذا كيف يمكن دمج استدعاء Ajax وكائن JavaScript في نفس الملف لتنفيذ إجراء:
<؟ php
add_action ('wp_ajax_my_action'، 'my_action') ؛
وظيفة my_action () {
wpdb دولار عالمي ؛ // هذه هي طريقة الوصول إلى قاعدة البيانات
$ أيا كان = intval ($ _POST ['أيا كان'])؛
أيا كان $ + = 10 ؛
صدى $ أيا كان؛
wp_die () ، // هذا مطلوب للإنهاء فورًا وإعادة الرد المناسب
}
يمكنك أيضًا إنشاء ملفات JavaScript منفصلة لإجراءات Ajax الخاصة بك. ستحتاج فقط إلى التأكد من استخدام عنوان URL الخاص بـ Ajax ، حتى لا تضيع المكالمات.
كيفية استخدام Ajax من خلال العمل مع مثال البرنامج المساعد (3 خطوات)
إذا كنت ترغب في تجربة Ajax ، فإن أفضل طريقة هي إنشاء مكون إضافي به. لحسن الحظ ، هناك العديد من نماذج التعليمات البرمجية أو المكونات الإضافية التي يمكنك البدء منها. في هذا المثال ، سنستخدم بعض كود WordPress Plugin Boilerplate القابل للتنزيل.
الخطوة 1: إنشاء هياكل الملفات المناسبة
أولاً ، ستحتاج إلى تسمية المكون الإضافي الخاص بك وإنشاء هياكل الملفات المناسبة له. يجب أن يكون الاسم فريدًا ولا يتعارض مع أي أداة أخرى في دليل مكونات WordPress. هذا لأنه عندما يقوم المستخدم بتحميل المكون الإضافي الخاص بك ، فإنه سينتقل إلى دليل wp-content / plugins / الخاص به.
بمجرد تحديد الاسم ، ستحتاج إلى إنشاء الملفات الثلاثة التالية على الأقل في دليل wp-content / plugins / الخاص بك:
- plugin-name.php
- plugin-name.js
- plugin-name.css
سترغب في وضع ملف .php في مجلد المكون الإضافي الجديد ، وإنشاء مجلدات فرعية منفصلة لملفات JavaScript و CSS لتعيش فيها. يجب أن تكون جميع الملفات اللازمة لتشغيل المكون الإضافي في نفس المجلد الرئيسي.
في الخطوة التالية ، ستلاحظ أن نموذج الكود الذي نستخدمه يأتي بهياكل ملفات مُنشأة مسبقًا. نعتقد أنه من المهم فهم كيفية البدء من نقطة الصفر ، ولماذا تحتاج ملفاتك إلى التنظيم بطريقة معينة.
الخطوة 2: اختر عينة من التعليمات البرمجية لتبدأ بها
يعد استخدام ملف رمز نموذجي مكانًا جيدًا للبدء عند تجربة Ajax على المكون الإضافي الأول. ومع ذلك ، فأنت تريد دائمًا التحقق مرة أخرى من نموذج التعليمات البرمجية للتأكد من أنها آمنة ولا تحتوي على أخطاء.
كما ذكرنا سابقًا ، سنستخدم WordPress Plugin Boilerplate كمثال. يأتي نموذج التعليمات البرمجية هذا مرفقًا بالملفات التي ستحتاجها لإكمال المكون الإضافي الخاص بك.
يلتزم نموذج المكون الإضافي هذا أيضًا بمعايير الترميز والتوثيق في WordPress. يمكنك تنزيل ملف .zip الخاص بالمكوِّن الإضافي من موقع الويب المعياري للبدء.
الخطوة 3: ربط الإجراءات في التعليمات البرمجية الخاصة بك
تم إنشاء نموذج كود البرنامج المساعد الذي نستخدمه باستخدام البرمجة الموجهة للكائنات (OOP). يساعد هذا المبرمجين على تنظيم التعليمات البرمجية الخاصة بهم ، ويخلق نمط تطوير يمكن مشاركته بسهولة وإعادة استخدامه.
بالإضافة إلى ذلك ، تأتي الشفرة معبأة مع جميع الملفات اللازمة لتطوير البرنامج المساعد ، بما في ذلك ملفات التنشيط وإلغاء التنشيط في الدليل / include / . ستجد أيضًا أنه من السهل تحديد موقع الملفات العامة والموجهة للمسؤول حسب الحاجة.
دعنا نلقي نظرة على نموذج المكون الإضافي الخاص بنا ، من خلال عرض بداية ملف plugin-name.php :
<؟ php
/ **
* ملف تمهيد البرنامج المساعد
*
* يقرأ WordPress هذا الملف لتوليد معلومات البرنامج المساعد
* منطقة الإدارة. يتضمن هذا الملف أيضًا جميع التبعيات التي يستخدمها المكون الإضافي ،
* يسجل وظائف التنشيط وإلغاء التنشيط ، ويحدد الوظيفة
* يسجل وظائف التنشيط وإلغاء التنشيط ، ويحدد الوظيفة
* أن يبدأ البرنامج المساعد.
*
*link http://example.com
* منذ 1.0.0
*package Plugin_Name
*
* @ wordpress-plugin
* اسم البرنامج المساعد: WordPress Plugin Boilerplate
* عنوان URL للمكون الإضافي: http://example.com/plugin-name-uri/
* الوصف: هذا وصف موجز لما يفعله المكون الإضافي. يتم عرضه في منطقة إدارة WordPress.
* الإصدار: 1.0.0
* المؤلف: اسمك أو شركتك
* عنوان URL للمؤلف: http://example.com/
* الترخيص: GPL-2.0 +
* عنوان URI للترخيص: http://www.gnu.org/licenses/gpl-2.0.txt
* مجال النص: اسم البرنامج المساعد
* مسار المجال: / اللغات
* /
جميع المعلومات الواردة في هذا الجزء من الكود مهمة لتسجيل المكون الإضافي الخاص بك في WordPress. هذه هي الطريقة التي سيعرف بها دليل البرنامج المساعد ما سيتم عرضه للمكون الإضافي الخاص بك.
الآن ستحتاج إلى القيام ببعض الأشياء لربط جميع النقاط ، بما في ذلك:
- تأكد من أن عنوان Ajax URL الخاص بك متاح للنص البرمجي الخاص بك. يمكنك استخدام wp_localize_script () لتحقيق ذلك.
- قم بإنشاء فئة اسم المكون الإضافي باستخدام class Plugin-Name {} في ملف plugin-name.php . هذا هو المكان الذي ستحدد فيه خطافات الحركة الخاصة بك.
- أنشئ وظيفة JavaScript مقابلة في ملف plugin-name.js .
أحد العناصر المهمة في نهج Ajax هو تحديد من يمكنه استخدام كل وظيفة ، خاصةً عند إنشاء تفاعل أمامي. سنقوم بتنفيذ إجراء أمامي مع بعض نماذج التعليمات البرمجية من WordPress:
إذا (is_admin ()) {
add_action ('wp_ajax_my_frontend_action'، 'my_frontend_action') ؛
add_action ('wp_ajax_nopriv_my_frontend_action'، 'my_frontend_action') ؛
add_action ('wp_ajax_my_backend_action'، 'my_backend_action') ؛
// أضف خطافات عمل خلفية أخرى هنا
} آخر {
// أضف هنا خطاطيف عمل للواجهة الأمامية بخلاف Ajax
}
دعنا نلاحظ بعض الأشياء في هذا المثال. أولاً ، ستكون هذه الإجراءات متاحة لأي شخص على الموقع ، سواء تم تسجيل الدخول إلى حساب أم لا. يشار إلى ذلك من خلال استدعاء "wp_ajax_nonpriv_ ()". ثانيًا ، يمكنك أن ترى أن هناك أيضًا إجراءات إدارية خلفية يتم ربطها أثناء إجراءات الواجهة الأمامية.
لفهم العملية التي تحدث في هذه المجموعة من الإجراءات ، من المهم أيضًا معرفة أن my_frontend_action سيؤدي إلى تشغيل وظيفة PHP my_frontend_action_callback ().
الخطوة 4: اختبار البرنامج المساعد الخاص بك وتصحيحه
بمجرد قيامك بإعداد جميع خطافات الإجراءات والوظائف المقابلة التي تحتاجها ، سترغب في اختبار المكون الإضافي الخاص بك ومن المحتمل تصحيحه (إذا كانت هناك أية مشكلات). قد يقدم مضيف الويب أداة تصحيح الأخطاء كجزء من حزمة الاستضافة الخاصة به.
هنا في WP Engine ، نقدم WP Engine Error Log لمساعدتك في العثور على نقاط المشاكل.
يوفر سجل الأخطاء الخاص بنا عرضًا تفصيليًا مرمزًا بالألوان لأي أخطاء في كود موقعك ، وأين تتفاعل مع خوادمنا أو أجزاء أخرى من موقعك. هذا يجعل استكشاف الأخطاء وإصلاحها أسهل كثيرًا ، سواء كنت تعمل مع Ajax أو أي شيء آخر تمامًا.
استكشف موارد وأدوات محرك WP الأخرى
الآن بعد أن كنت في طريقك لإنشاء إضافات WordPress مذهلة باستخدام Ajax ، قد ترغب في تقييم الأدوات الأخرى التي ستحتاج إليها. يقدم WP Engine منصة تجربة رقمية كاملة (DXP) ، وهو هنا لمساعدتك في إنشاء مكونات إضافية جديدة لـ WordPress.
سواء كنت مهتمًا بـ WP Engine Error Log حتى تتمكن من تنفيذ مكون إضافي خالٍ من الأخطاء ، أو تحتاج فقط إلى استضافة WordPress قوية وآمنة ، فنحن نقدم مجموعة متنوعة من الخطط والموارد لتستخدمها!