استخدام AJAX مع PHP على موقع WordPress الخاص بك مع المكون الإضافي الخاص بك
نشرت: 2021-07-23
في هذه المقالة نناقش موضوع AJAX مع PHP لموقع الويب الخاص بك على WordPress.
AJAX هي تقنية لتطوير الويب تساعد المستخدمين على تطوير تطبيقات تفاعلية على موقع الويب. يوفر للمستخدمين تجربة ويب أسرع وأكثر سلاسة. يسمح للمستخدمين بإجراء تغييرات أو تحديث المحتويات في صفحة الويب دون إعادة تحميل الصفحات أو تحديثها. يحتاج المرء إلى معرفة لغات البرمجة المختلفة للعمل مع AJAX.
ما هو اياكس؟
AJAX تعني "Asynchronous JavaScript and XML". كما ذكرنا سابقًا ، يتم استخدامه لإنشاء تطبيقات ويب مسلية ومتغيرة وتفاعلية باستمرار.
بعض الأمثلة الشائعة لتطبيقات الويب التي تم تطويرها بمساعدة AJAX والتقنيات ذات الصلة هي خرائط Google وميزة الإكمال التلقائي في بحث Google والتعليقات والإعجابات على العديد من منشورات الوسائط الاجتماعية وغيرها الكثير.
أساسيات أجاكس
تقوم Ajax بمساعدة لغات البرمجة المختلفة مثل JavaScript و HTML و CSS و XML بتطوير تطبيقات ومواقع ويب أسرع وأفضل. بصرف النظر عن لغات البرمجة هذه ، لتطوير تطبيقات الويب ، يتم أيضًا استخدام AJAX مع PHP ولغات أخرى من جانب الخادم.
يستخدم JavaScript لعرض المحتويات ، بينما يساعد CSS في العرض التقديمي ونموذج كائن المستند. يستخدم كذلك XHTML للمحتوى.
في تطبيقات الويب التقليدية أو صفحات الويب ، يتم تبادل المعلومات مع الخادم بشكل متزامن. من ناحية أخرى ، في تطبيقات الويب ، التي تم تصميمها لاستخدام AJAX ، عند حدوث حدث مثل النقر فوق زر أو ملء نموذج ، يقوم JavaScript بإنشاء طلب XMLHTTP وإرساله إلى الخادم بتنسيق XML.
يعالج الخادم الطلب ويخلق استجابة من جانب الخادم ويرسلها مرة أخرى إلى المتصفح. ثم يعالج JavaScript الاستجابة ويتم تحديث المحتوى على شاشة العرض الحالية. نظرًا لأن إعادة تحميل الصفحات أو تحديثها غير مطلوب ، فلن يكون المستخدمون على دراية بنقل أي معلومات إلى الخادم.
المهارات اللازمة للعمل مع AJAX في WordPress
كما هو مفهوم من المناقشة أعلاه ، يحتاج المستخدمون إلى المهارات التالية لاستخدام AJAX بشكل صحيح.
• معرفة لغات البرمجة مثل JavaScript و HTML و CSS
• إجادة لغات الخادم مثل PHP وغيرها
• أساسيات XML أو JSON
مزايا أجاكس
تمت مناقشة المزايا المختلفة لـ AJAX أدناه
• يدعم تقريبًا جميع المستعرضات المستخدمة في الأوقات الحالية
• يتضمن وقت استجابة أسرع ، مما يعني تحسين تجربة المستخدم من حيث السرعة والأداء
• مكتبات JavaScript مفتوحة المصدر مثل Prototype و jQuery وغيرها متاحة للاستخدام
• يقلل الوقت بين العميل والخادم ، وبالتالي يتم حفظ وقت كلا المستخدمين ، وكذلك الخادم
• نظرًا لأن الخادم غير مطلوب لمعالجة كميات كبيرة من البيانات ، فإنه يساعد في تقليل استخدام النطاق الترددي وتحسين تشغيل الشبكة.
• نظرًا لاستخدام طلب XMLHTTP لاسترداد البيانات ، يمكن للمستخدمين تنفيذ مهام متعددة في وقت واحد.
أجاكس في وورد
يتم استخدام AJAX في الواجهة الخلفية لـ WordPress ، ونتيجة لذلك ، كلما تم إجراء أي تغييرات على النشر أو الفئات ، أو كلما كان المسؤول يشرف على التعليقات ، سيتم إجراء التحديثات على الفور. يتم استخدام AJAX في الغالب مع JQuery على WordPress. العملية التي يستخدم فيها WordPress AJAX كالتالي
• عند تقديم طلب ، يمر عبر ملف "admin-ajax.php" الموجود في مجلد "wp-admin".
• هذه الطلبات مطلوبة لتوفير جزء من البيانات على الأقل ، يسمى أيضًا "الإجراء" بشكل عام ، باستخدام طريقة "get" أو "post".
• يطالب هذا الإجراء الكود الموجود في ملف "admin-ajax.php" بإنشاء خطافين ، وهما "wp_ajax_my_action" و "wp_ajax_nopriv_my_action". يشير "my_action" في هذه الخطافات إلى قيمة "الإجراء" المتغير لأسلوب "get" أو "post".
• بينما يكون الخطاف الأول مخصصًا للإجراءات التي يتخذها المستخدمون المسجلون للدخول ، فإن الخطاف الثاني مخصص حصريًا للمستخدمين الذين تم تسجيل خروجهم.
• يجب التخطيط للوظائف الموصولة من أجل التدهور اللطيف ، والذي يضمن أنه حتى إذا تم تعطيل JavaScript في المتصفحات ، فإن الأكواد ستظل تعمل.
قم بإنشاء برنامج WordPress AJAX الإضافي
في هذا القسم ، دعنا نأخذ مثالاً على مكون إضافي أساسي لـ WordPress AJAX يسمى "Post Likes Counter". يتضمن هذا البرنامج المساعد الميزات التالية:
• يتم تحديثه على الفور في الواجهة الأمامية
• يسمح للمستخدمين المسجلين بالإعجاب بالمشاركات.
• إذا حاول المستخدمون الذين قاموا بتسجيل الخروج الإعجاب بالمنشور ، فستظهر رسالة خطأ على الشاشة
• يساعد هذا المكون الإضافي في الحفاظ على السجل الإجمالي لعدد "الإعجابات" ويعرضها
أولاً ، يلزم إنشاء مكون إضافي فارغ لـ WordPress وتنشيطه. لإنشاء مكون إضافي ، يجب تنفيذ الخطوات التالية.
الخطوة 1 : حدد اسمًا فريدًا للمكون الإضافي. يمكن للمرء التحقق من مستودعات البرنامج المساعد للتأكد من أن الاسم المقترح للمكون الإضافي ليس قيد الاستخدام بالفعل. عادةً ما يختار مطورو المكونات الإضافية اسم المكون الإضافي بناءً على الوظيفة التي من المفترض أن يؤديها.
الخطوة 2 : في الخطوة التالية ، يلزم إنشاء ملف PHP باستخدام اسم البرنامج المساعد المحدد. نظرًا لأن المستخدمين الذين سيقومون بتثبيت هذا البرنامج المساعد ، فسوف تكون هناك حاجة لوضع ملف PHP في دليل البرنامج المساعد WordPress 'wp-content / plugins-' لتثبيته ، لا يمكن للمكونات الإضافية مشاركة نفس الاسم لملفات PHP.
لذلك ، يجب أن يكون اسم ملف البرنامج المساعد فريدًا أيضًا لتجنب التعارض مع مكون إضافي آخر في المستودع. يمكن للمرء استخدام اسمه أو اسم شركته في البادئة لإنشاء اسم فريد لملف PHP.
الخطوة 3 : تجدر الإشارة إلى أن البرنامج المساعد WordPress يجب أن يحتوي على ملف PHP واحد على الأقل إلى جانب JavaScript و CSS واللغات وملفات الصور. في حالة وجود عدة ملفات ، حدد اسمًا فريدًا للدليل واسمًا مفضلًا لملف PHP الرئيسي.
ضع جميع ملفات البرنامج المساعد في الدليل الذي تم إنشاؤه واطلب من مستخدمي البرنامج المساعد تحميل هذا الدليل بالكامل إلى دليل "wp-content / plugins /".
يمكن تكوين تثبيت WordPress لتغيير دليل البرنامج المساعد القياسي "wp-content / plugins /". لذلك ، يجب على المرء استخدام plugin_dir_path () و plugin_url () dor المسار المطلق وعناوين URL في كود PHP الخاص بهم.
قالب آخر للموضوع
بعد إنشاء المكون الإضافي ، يحتاج المرء إلى العثور على قالب المنشور "single.php" لموضوعه. يمكن العثور عليها في الدليل الجذر للموضوع النشط. يتم استخدامه عند الاستعلام عن منشور واحد ؛ حيث يريد المرء وضع المكوّن الإضافي "Post Like Counter". يجب أن يظل الملف مفتوحًا للتحرير.
قم بإعداد نموذج النشر جاهزًا لاستدعاء AJAX
يلزم إنشاء ارتباط حتى يمكن للمستخدمين الإعجاب بالمشاركات. إذا قام المستخدمون بتمكين JavaScript ، فيمكنهم استخدام ملفات JavaScript (التي سيتم إنشاؤها لاحقًا) أو يمكنهم اتباع الرابط مباشرةً. لهذا الغرض ، أدخل الكود التالي في ملف "single.php". يمكن أيضًا إضافة هذا الرمز إلى أي جزء من أجزاء القالب التي يحتوي عليها ملف "single.php".
// ستخزن القيمة الوصفية للمفتاح "الإعجابات" إجمالي عدد مرات الإعجاب لمنشور معين ، وستظهر القيمة 0 إذا كانت سلسلة فارغة ID ، "الإعجابات" ، صحيح) ؛ الإعجابات بالدولار = (الإعجابات بالدولار == "")؟ 0: إبداءات الإعجاب بالدولار الأمريكي ؛ ؟ & GT؛ هذه المشاركة <span id = 'like_counter'> </span> من إبداءات الإعجاب <br> // الربط بملف admin-ajax.php. تم تضمين شيك غير أساسي لمزيد من الأمان. لاحظ فئة "user_like" لعملاء JS الذين تم تمكينهم. المعرف. '& amp؛ nonce ='. $ nonce) ؛ صدى "<a class="user_like" data-nonce="'. $nonce.'"> المعرّف. "" href = "". رابط $. '"& gt؛ مثل هذا المنشور </a>'؛ ؟ & GT؛
معالجة نداء Ajax بدون JavaScript
بالنقر فوق الارتباط الذي تم إنشاؤه في الخطوة السابقة ، سيتم إعادة توجيه أحدهم إلى البرنامج النصي "admin-ajax.php" ؛ ومع ذلك ، لن يعثروا على أي نتيجة مفيدة ، حيث لم يتم إنشاء الوظيفة لتشغيل الإجراء. لإنشاء الوظيفة في ملف البرنامج المساعد وإضافتها إلى الخطافات التي تم إنشاؤها بواسطة WordPress ، أدخل الكود التالي.
& lt؛؟ php // يُستخدم هنا فقط لتمكين تمييز بناء الجملة. اترك هذا بالخارج إذا كان مضمنًا بالفعل في ملف البرنامج المساعد الخاص بك.
// حدد الإجراءات للخطافين اللذين تم إنشاؤهما ، أولاً للمستخدمين الذين قاموا بتسجيل الدخول والتالي للمستخدمين الذين تم تسجيل خروجهم
add_action (& quot؛ wp_ajax_my_user_like & quot ؛، & quot؛ my_user_like & quot؛)؛
add_action (& quot؛ wp_ajax_nopriv_my_user_like & quot ؛، & quot؛ please_login & quot؛) ؛
// تحديد الوظيفة التي سيتم تشغيلها للمستخدمين المسجلين
وظيفة my_user_like () {
// nonce تحقق من طبقة أمان إضافية ، ستخرج الوظيفة إذا فشلت
إذا (! wp_verify_nonce ($ _REQUEST [& # 039؛ nonce & # 039؛]، & quot؛ my_user_like_nonce & quot؛)) {
خروج (& quot؛ اللحمة اللحمة & quot؛)؛
}
// fetch like_count لمنشور ما ، اضبطه على 0 إذا كان فارغًا ، قم بزيادة 1 عند تسجيل نقرة
$ like_count = get_post_meta ($ _ REQUEST [& quot؛ post_id & quot؛]، & quot؛ الإعجابات & quot؛، صحيح)؛
$ like_count = ($ like_count == ')؟ 0: $ like_count؛
new_like_count = $ like_count + 1 دولار ؛
// تحديث قيمة & # 039 ؛ الإعجابات & # 039 ؛ مفتاح التعريف للمنشور المحدد ، يقوم بإنشاء بيانات تعريف جديدة للمنشور إذا لم تكن موجودة
$ like = update_post_meta ($ _ REQUEST [& quot؛ post_id & quot؛]، & quot؛ الإعجابات & quot ؛، $ new_like_count)؛
// إذا فشل الإجراء أعلاه ، يتم تعيين نوع النتيجة إلى & # 039 ؛ error & # 039 ؛ و like_count مضبوطة على القيمة القديمة ، إذا نجحت ، تم تحديثها إلى new_like_count
إذا (مثل $ === خطأ) {
نتيجة $ [& # 039 ؛ اكتب & # 039 ؛] = & quot ؛ خطأ & quot ؛؛
نتيجة $ [& # 039 ؛ like_count & # 039 ؛] = $ like_count ؛
}
آخر {
نتيجة $ [& # 039 ؛ اكتب & # 039 ؛] = & quot ؛ نجاح & quot ؛؛
نتيجة $ [& # 039 ؛ like_count & # 039 ؛] = $ new_like_count ؛
}
// تحقق مما إذا تم إطلاق الإجراء عبر مكالمة Ajax. إذا كانت الإجابة بنعم ، فسيتم تشغيل رمز JS ، وإلا تتم إعادة توجيه المستخدم إلى صفحة النشر
إذا (! blank ($ _ SERVER [& # 039؛ HTTP_X_REQUESTED_WITH & # 039؛]) & amp؛ & amp؛ strtolower ($ _ SERVER [& # 039؛ HTTP_X_REQUESTED_WITH & # 039؛]) == & # 039؛ xmlhttprequest & # 039؛) {
نتيجة $ = json_encode ($ نتيجة) ؛
صدى $ نتيجة؛
}
آخر {
header (& quot؛ الموقع: & quot؛. $ _ SERVER [& quot؛ HTTP_REFERER & quot؛])؛
}
// لا تنسَ إنهاء نصوصك بوظيفة يموت () - مهم جدًا
موت()؛
}
// حدد الوظيفة التي سيتم تشغيلها للمستخدمين الذين تم تسجيل خروجهم
الوظيفة please_login () {
صدى & quot؛ يجب عليك تسجيل الدخول لإعجاب & quot ؛؛
موت()؛
}
إذا نجح كل شيء ، فعندما ينقر مستخدم قام بتسجيل الدخول على رابط "الإعجاب بهذا المنشور" ، سيتم تحديث عدد الإعجابات تلقائيًا. من ناحية أخرى ، إذا تم تعطيل JavaScript ، فسيتم تحديث الصفحة وعرض الأعداد المحدثة لـ "الإعجاب".
إضافة دعم لجافا سكريبت
يمكن أن تؤدي إضافة دعم لـ JavaScript إلى تسهيل الأمور. لاستخدام AJAX مع PHP على WordPress ، يلزم إدراج مكتبة jQuery مع ملف JavaScript المخصص للمكوِّن الإضافي. لهذا الغرض ، اكتب الكود التالي في البرنامج المساعد.
admin_url ('admin-ajax.php'))) ؛
// enqueue jQuery library والنص الذي سجلته أعلاه
wp_enqueue_script ('jquery') ،
wp_enqueue_script ('liker_script') ،
}
بعد ذلك ، يلزم إنشاء ملف Javascript "liker_script.js" ، والذي سيتم تحميله أيضًا في المجلد الجذر للمكون الإضافي. يتم استخدام الكود التالي لإنشاء ملف "liker_script.js".
jQuery (مستند). جاهز (الوظيفة () {
jQuery (". user_like"). انقر (الوظيفة (هـ) {
e.preventDefault () ؛
post_id = jQuery (this) .attr ("data-post_id") ؛
nonce = jQuery (this) .attr ("data-nonce") ؛
jQuery.ajax ({
اكتب: "مشاركة" ،
نوع البيانات: "json" ،
url: myAjax.ajaxurl،
البيانات: {action: "my_user_like"، post_id: post_id، nonce: nonce}،
النجاح: الوظيفة (الاستجابة) {
إذا (response.type == "Success") {
jQuery ("# like_counter"). html (response.like_count) ؛
}
آخر {
تنبيه ("لا يمكن إضافة إعجابك") ؛
}
}
}) ؛
}) ؛
}) ؛
كيفية تنفيذ AJAX في قوالب ووردبريس
ستساعد الخطوات التالية في تطبيق AJAX مع PHP في قوالب WordPress. على سبيل المثال ، لنفترض أن عملنا يتمثل في عرض الفئات في قائمة منسدلة وعند النقر فوق "فئة الأصل" ، ستظهر الفئات الفرعية في مربع منسدل آخر. سيتم إنجاز هذه المهمة بمساعدة الخطوات التالية
الخطوة 1 : حدد "فئات" على الجانب الأيسر من لوحة القيادة ، وأدخل اسم الفئات في المربع الذي يظهر على الجانب الأيمن وأدخل شريحة الفئة أدناه. إذا تم إنشاء الفئة الرئيسية ، فحدد "لا شيء" ، أو إذا تم إنشاء الفئات الفرعية ، فحدد الفئة الرئيسية من الخيارات.
الخطوة 2 : في هذه الخطوة ، سيتم إنشاء قالب WordPress حيث سيتم تنفيذ وظيفة AJAX. افتح ملف PHP جديد واحفظه. أدخل الكود التالي في الصفحة التي تم إنشاؤها.
في الكود أعلاه ، "اسم القالب: تنفيذ Ajax" ، هو اسم قالب WordPress ويتم استخدام الدالتين "get_header ()" و "get_footer ()" لعرض محتوى رأس الصفحة وتذييلها.
أولاً ، يلزم تضمين ملف مكتبة jQuery في الصفحة مما سيساعد في إضافة عناصر AJAX. AJAX مع PHP يمكن للمرء إما استخدام أي مكتبة JavaScript أو يمكنه استدعاء AJAX باستخدام JavaScript خام. في المثال التالي ، تُستخدم مكتبة jQuery JavaScript لتنفيذ AJAX.
الخطوة 3 : أضف ملف jQuery في القالب واستدع وظيفة "wp_dropdown_categories" بحيث يمكن استرداد الفئات الرئيسية في القائمة المنسدلة.
#content {width: auto؛ الارتفاع: 400 بكسل ؛ الهامش: 50 بكسل}
<div>
</div>
العلامة & lt؛؟ php
الخطوة 4 : أدخل كود jQuery للحصول على معرف الفئة الرئيسية التي يتم تحديدها. أرسله إلى ملف "jobs.php" للحصول على الفئات الفرعية ضمن معرّف الفئة الرئيسية المحددة. يمكن بعد ذلك إرسال النتائج مرة أخرى إلى الصفحة دون تحديثها.
$ (وظيفة () {
$ ('# main_cat'). تغيير (الوظيفة () {
var $ mainCat = $ ('# main_cat'). val ()؛
// دعوة أياكس
$ ("# sub_cat"). فارغ () ؛
.ajax $ ({
url: "/ wp-admin / admin-ajax.php" ،
اكتب: "POST" ،
data: 'action = my_special_action & amp؛ main_catid =' + $ mainCat،
النجاح: الوظيفة (النتائج)
{
// تنبيه (النتائج) ؛
$ ("# sub_cat"). removeAttr ("معطل") ؛
$ ("# sub_cat"). إلحاق (النتائج) ؛
}
}) ؛
}
) ؛
}) ؛
في هذا الكود أعلاه ، تمت إضافة الرمز في حدث تغيير القائمة المنسدلة للفئات الرئيسية بالمعرف "#main_cat".
var $ mainCat = $ ('# main_cat'). val ()؛
.val () وظيفة تساعد في الحصول على قيمة الخيار المحدد من القائمة المنسدلة وتخزينها في المتغير "$ mainCat".
$ ("# sub_cat"). فارغ () ؛
يجب إخلاء القائمة المنسدلة للفئة الفرعية "#sub_cat" ، إذا كانت تحتوي على أي قيمة سابقة ، قبل استدعاء AJAX.
سيساعد سطر jQuery التالي في استدعاء وظائف AJAX jQuery. تحقق من معلمات وظيفة AJAX الواردة في القسم أدناه.
url: "bloginfo ('wpurl')؛؟ & gt؛ /wp-admin/admin-ajax.php"،
اكتب: "POST" ،
لجعل AJAX يعمل في WordPress ، يتم استخدام معلمة "URL". لذلك ، سيتم إرسال الطلبات إلى ملف "admin-ajax.php". بعد ذلك ، سيتم استدعاء الخطافات في ملف "jobs.php" للحصول على البيانات المنشورة التي تم إرسالها إلى عنوان URL: "/wp-admin/admin-ajax.php"
لإرسال القيم مع الطلب ، يتم استخدام معلمة "البيانات". في هذا المثال ، يتم استخدام وسيطتين مع معلمة البيانات - الإجراء و main_catid.
الخطوة 5 : في ملف "jobs.php" ، يتم استخدام الكود التالي لربط إجراء ما.
add_action ('wp_ajax_my_special_action'، 'my_action_callback') ؛
في هذا الإجراء أعلاه ، يحتوي الخطاف على وسيطين. في الوسيطة الأولى "wp_ajax_my_special_action" ، "wp_ajax_" هي القيمة التي يتم إرسالها مع معلمة البيانات "action". في الوسيطة الثانية "my_action_callback" ، ستتم معالجة البيانات وسيتم إرسال النتائج مرة أخرى.
خطاف الإجراء المذكور أعلاه مخصص للمستخدمين الذين قاموا بتسجيل الدخول. بالنسبة للمستخدمين الذين تم تسجيل خروجهم ، يمكن للمرء ربط الإجراء التالي
add_action ('wp_ajax_nopriv_my_special_action'، 'my_action_callback') ؛
الكود النهائي بعد إضافة الخطافات لكل من المستخدمين ووظيفة معاودة الاتصال هو كما يلي
دالة تنفيذ_أجاكس () {
إذا (isset ($ _ POST ['main_catid']))
{
فئات $ = get_categories ('child_of ='. $ _ POST ['main_catid']. '& amp؛ hide_empty = 0')؛
foreach (فئات $ كـ $ cat) {
$ option. = 'term_id. "" & GT؛'؛
$ option. = $ cat- & gt؛ cat_name؛
$ option. = '('. $ cat- & gt؛ category_count. ')'؛
الخيار $. = '' ؛
}
صدى "Scegli ...". $ option؛
موت()؛
} // إنهاء إذا
}
add_action ('wp_ajax_my_special_ajax_call'، 'Implement_ajax') ؛
add_action ('wp_ajax_nopriv_my_special_ajax_call'، 'Implement_ajax')؛ // للمستخدمين الذين لم يقوموا بتسجيل الدخول.
الخطوة 6 : في هذه الخطوة ، قم بإنشاء صفحة جديدة في لوحة القيادة وقم بتعيين القالب لها. بعد تحميل الصفحة في المتصفح ، سيتم تحميل القائمة المنسدلة الأولى بالفئات الرئيسية فيه.
نظرًا لأن القائمة المنسدلة الثانية فارغة ، حدد الخيار في القائمة المنسدلة الأولى للتحقق من كيفية عملها.
وبالتالي يمكن استخدام AJAX مع PHP على موقع WordPress بمساعدة مكون إضافي تم إنشاؤه حديثًا.