جعل البرنامج المساعد WordPress الخاص بك مستجيبًا باستخدام AJAX

آخر تحديث - 8 يوليو 2021

AJAX هي أحدث منهجية للتطوير وهي تلك التي تكتسب زخمًا ببطء نظرًا لسهولة الاستخدام التي توفرها لمطوريها. بمجرد دمج AJAX في مكونات WordPress الإضافية ، فإنك تقلل بشكل أساسي من الحاجة إلى إعادة تحميل صفحة الويب بأكملها باستمرار. بمعنى آخر ، سيجعل AJAX المكون الإضافي WordPress الخاص بك مستجيبًا ويمكّن المستخدمين من الحصول على معلومات جديدة عن طريق إعادة تحميل هذا الجزء المحدد فقط مع الحفاظ على بقية الصفحة ثابتة.

هذا لا يجعل صفحات الويب أو المكونات الإضافية سريعة الاستجابة فحسب ، بل يقلل أيضًا من وقت الانتظار إلى النصف. هناك العديد من المكونات الإضافية والتطبيقات التي تستخدم Ajax لإنشاء تجارب أفضل للمستخدمين. على سبيل المثال ، يستخدم WooCommerce ميزة Ajax لتحسين سلوك Add to Cart.

بالنظر إلى فوائده ، سنعلمك كيفية جعل مكونات WordPress الإضافية تستجيب من خلال AJAX.

إنشاء البرنامج المساعد

قبل أن تتمكن من العمل السحري مع AJAX ، يجب أن يكون لديك أساس مكون إضافي يمكنك استخدامه لإنشاء منتج متقدم وسريع الاستجابة.

ليس من الصعب إنشاء مكون إضافي لأن كل ما تحتاجه هو إنشاء ملف يحتوي على محتوى من سطر واحد. لهذا الغرض ، تتمثل الخطوة الأولى في الانتقال إلى ملف wp-content / plugins وإنشاء مجلد جديد باسم من اختيارك. افتح المجلد وأنشئ ملفًا جديدًا name_of_the_plugin.php. الآن ، قم بعرض الملف في أي محرر نصوص واكتب المعلومات التالية:

<؟ php

/ *

اسم البرنامج المساعد: Coolness Inducer

عنوان URI للمكون الإضافي: http://coolness-inducer.com

الوصف:> -

مكون إضافي مثالي لجعل موقع الويب الخاص بك أكثر روعة.

الإصدار: 1.3.2

المؤلف: السيدة فيدر

عنوان URI للمؤلف: http://msvader.com

الترخيص: GPL2

* /

؟>

قبل القيام بذلك ، قم بإنشاء دليل ajaxloadpost في تثبيت ملحق WordPress الخاص بك. بمجرد القيام بذلك ، قم بإنشاء المكون الإضافي وتنشيطه. بعد ذلك ، قم بتضمين المعلومات التالية في ajaxloadpost الخاص بك.

تعريف ('AJAXLOADPOSTURL'، WP_PLUGIN_URL. "/". dirname (plugin_basename (__FILE__))) ؛

الوظيفة ajaxloadpost_enqueuescripts () {

wp_enqueue_script ('ajaxloadpost'، AJAXLOADPOSTURL. '/ js / ajaxloadpost.js'، array ('jquery')) ؛

wp_localize_script ('ajaxloadpost'، 'ajaxloadpostajax'، مصفوفة ('ajaxurl' => admin_url ('admin-ajax.php'))) ؛

}

add_action ('wp_enqueue_scripts'، ajaxloadpost_enqueuescripts) ؛

بعد ذلك ، حدد متغير AJAXLOADPOSTURL لأنك ستحتاج إليه لتوجيه WordPress إلى عنوان URL الخاص بالمكون الإضافي الخاص بك. الآن عليك أن تقوم بتدوين البرامج النصية الخاصة بك والتي يمكنك القيام بها عن طريق إضافة ajaxloadpost_enqueuescripts إلى wp_enqueue_scripts من WordPress.

ضع في اعتبارك أنه لا يمكن أبدًا استخدام AJAX في شكله الخام. سيتم استخدامه دائمًا مع لغات البرمجة الأخرى ، مثل jQuery أو JavaScript. في هذه الحالة ، سنعمل مع JavaScript لذا يجب أن يكون لديك بعض الفهم الأساسي لها.

بالانتقال ، أضف JavaScript إلى ajaxloadpost.js الذي ستجده في المجلد \ wp-content \ plugins \ ajaxloadpost \ js \. اتبع هذا الإجراء بإنشاء مجلد JS ووضع ajaxloadpost.js فيه.

الآن ، استخدم WordPress wp_localize_script لإضافة متغير JS المطلوب. سيوفر هذا الإجراء بنية للدليل الخاص بك ويضع نصوصك في قائمة الانتظار.

كتابة معالج AJAX

لكتابة معالج AJAX ، ستحتاج إلى الرموز التالية:

الوظيفة ajaxloadpost_ajaxhandler () {

إذا (! wp_verify_nonce ($ _POST ['nonce']، “ajaxloadpost_nonce”)) {

خروج ("خطأ غير صحيح") ؛

}

النتائج بالدولار = "؛

$ content_post = get_post ($ _ POST ['postid']) ؛

النتائج بالدولار = content_post دولار-> post_content ؛

يموت ($ النتائج) ؛

}

add_action ('wp_ajax_nopriv_ajaxloadpost_ajaxhandler'، 'ajaxloadpost_ajaxhandler') ؛

add_action ('wp_ajax_ajaxloadpost_ajaxhandler'، 'ajaxloadpost_ajaxhandler') ؛

سيؤدي إكمال هذا الإجراء إلى نتيجتين. أولاً ، سيتم إنشاء معرّف المنشورات التي يطلبها المستخدمون والثاني هو أنها ستنشئ رقمًا غير قياسي. ولكن هذا خارج عن الموضوع! بمجرد وضع أكواد معالج AJAX في مكانها الصحيح ، ستحتاج إلى الانتقال إلى الخطوة التالية وهي تسجيل معالج AJAX في دليل WordPress. سيؤدي القيام بذلك إلى جعل المكون الإضافي WordPress يستجيب لمكالمات AJAX. يمكنك تحقيق ذلك من خلال هذه الأكواد:

add_action ('wp_ajax_nopriv_ajaxloadpost_ajaxhandler'، 'ajaxloadpost_ajaxhandler') ؛

add_action ('wp_ajax_ajaxloadpost_ajaxhandler'، 'ajaxloadpost_ajaxhandler') ؛

أساسيات JavaScript و AJAX

مع وجود استدعاء AJAX ومعالج AJAX ، تحتاج إلى إنشاء وظيفة JS التي ستوصل النقطتين. ستساعدك JavaScript التالية على تحقيق هذا الإجراء الذي ستضعه في ملف ajaxloadpost.js الخاص بك:

الوظيفة ajaxloadpost_loadpost (postid، nonce) {

jQuery.ajax ({

اكتب: "POST" ،

url: ajaxloadpostajax.ajaxurl،

بيانات: {

الإجراء: "ajaxloadpost_ajaxhandler" ،

postid: postid ،

nonce: nonce

} ،

النجاح: function (data، textStatus، XMLHttpRequest) {

var loadpostresult = '#loadpostresult' ؛

jQuery (loadpostresult) .html (”)؛

jQuery (loadpostresult) .append (data) ؛

} ،

خطأ: الوظيفة (MLHttpRequest ، textStatus ، errorThrown) {

تنبيه (errorThrown) ؛

}

}) ؛

}

تمامًا مثل الخطوة المذكورة أعلاه ، سيخلق هذا الإجراء أيضًا نتيجتين ، أي nonce و post ID.

تتطلب الخطوة التالية إتقان jQuery أيضًا. لذا ، إذا كانت مهاراتك ذات طابع ريفي قليلاً ، فستجد هذا المقال مفيدًا!

للمضي قدمًا ، استخدم وظيفة jQuery.ajax لإجراء استدعاء AJAX للخوادم المناسبة. في الرموز أعلاه ، يكون عنوان URL هو عنوان URL الخاص بـ admin-ajax.php والذي يمكن العثور عليه في متغير JavaScript الذي سجلناه في وقت وضع البرامج النصية في قائمة الانتظار. بالإضافة إلى ذلك ، حدد هذا الإجراء باستخدام اسم معالج الإجراء الذي تم تسجيله في WordPress وقم أيضًا بنشر معرف nonce ومعرف المنشور أيضًا.

إذا سارت الأمور على ما يرام ، يمكنك تحديث <div> للمعرف #loadpostresult واستبدال المحتوى الذي تم جلبه بمعالج AJAX.

وضع وجه لشفرتك

حان الوقت الآن لإنشاء أكواد تعرض عناوين المنشورات المناسبة وتعرض المعلومات التي يرغب المستخدمون في الحصول عليها من خلال مكالمة AJAX. فيما يلي الرموز التالية:

الوظيفة ajaxloadpost_show_latest_posts ($ number = '5') {

النتائج بالدولار = "؛

$ the_query = new WP_Query ('posts_per_page ='. $ number)؛

بينما (the_query $-> have_posts ()):

$ the_query-> the_post ()؛

$ nonce = wp_create_nonce (“ajaxloadpost_nonce”)؛

arguments = get_the_ID (). ”، '”. $ nonce. ”'”؛

$ link = '<a onclick="ajaxloadpost_loadpost('.$arguments.')؛">'. get_the_title (). '</a>'؛

نتيجة $. = '<li>'. رابط $. "</li>" ؛

في غضون ذلك

wp_reset_postdata () ،

نتيجة $. = '<div id = ”loadpostresult”> </div>'؛

إرجاع نتيجة $؛

}

دالة ajaxloadpost_shortcode_function ($ atts) {

إرجاع ajaxloadpost_show_latest_posts () ،

}

add_shortcode ('AJAXLOADPOST'، 'ajaxloadpost_shortcode_function') ؛

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

قراءة متعمقة

• يساعدك التصميم سريع الاستجابة على تحسين معدلات التحويل.
• أفضل ثيمات WooCommerce سريعة الاستجابة