اياكس وورد

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

مواقع WordPress بالطبع ليست استثناء. لكن كيف نستخدم Ajax في WordPress يختلف مقارنة بالاستخدام في تطبيقات الويب الأخرى.

ما هو admin-ajax وكيف يعمل؟

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

ملف المفتاح لهذا الغرض هو ملف admin-ajax.php ، الموجود أسفل مجلد wp-admin ، والذي يستخدم لإنشاء اتصال بين العميل والخادم.

داخل هذا الملف ، حول السطر 159 ، يمكنك أن ترى كيف يتم تسجيل جميع طلبات Ajax بواسطة بعض أدوات العمل.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

يشير wp_ajax _ {$ action} إلى المستخدمين المسجلين و wp_ajax_nopriv _ {$ _ REQUEST ['action']} إلى زوار الموقع. إذا كنت ترغب في إنشاء طلب يتضمن جميع المستخدمين ، فسيتعين علينا استخدام كلا الخطافين.

لذلك بمساعدة هذه الإجراءات ، يمكنك ربط وظيفة مخصصة وتمرير بياناتك إلى WordPress لتقديم طلب Ajax. دعونا نلقي نظرة على هذا في العمل.

مثال على ووردبريس أجاكس

سنستخدم نفس المثال الذي استخدمناه في مقالتنا التمهيدية في Ajax وننشئ نموذجًا يتيح للمستخدم البحث في عناوين المقالات والاطلاع على النتائج المقترحة على الفور.

في مساحة رأس القالب الخاص بنا ، سنقوم بإدخال ناتج HTML لنموذج البحث الخاص بنا. نستخدم نسق Twenty-One لذا قمنا بتحرير ملف header.php الموجود أسفل المجلد الرئيسي للقالب وأدخلنا الأسطر التالية قبل سطر <div id = ”content” class = ”site-content”>.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

الآن يجب أن يكون النموذج الذي يمكن للمستخدم استخدامه مرئيًا في الواجهة الأمامية.

ملاحظة: هنا ، سنقوم بتحرير ملف header.php الخاص بالسمة مباشرةً دون إنشاء سمة فرعية. هذه ليست ممارسة جيدة ولها عدد من العيوب. إذا كنت تريد معرفة المزيد عن أهمية الموضوعات الفرعية ، فيرجى قراءة مقالتنا ذات الصلة. لأغراض هذا المثال ، أبقينا الكود بسيطًا وموضوعًا. على هذا النحو ، لا يُقترح استخدام هذا الرمز في موقع إنتاج على شبكة الإنترنت.

الشيء التالي هو تضمين وظيفة JavaScript التي سترسل الطلب. سنستخدم jQuery بدلاً من ذلك ، لأنه يأتي بالفعل مع WordPress وجاهز للاستخدام. بالطبع ، علينا تضمين برنامج نصي بطريقة WordPress.

جرد السيناريو الخاص بنا

سنخبر WordPress عن وجود ملف JS ، عن طريق تحرير ملف function.php الخاص بالقالب وإدراج البرنامج النصي في قائمة الانتظار مثل هذا. سيكون ملفنا هو custom.js الذي أنشأناه ووضعناه داخل مجلد "js" جديد تحت المجلد الرئيسي للموضوع.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

في وظيفة ajax_search_script() ، قمنا بتسجيل النص وترجمته ، ثم قمنا بإدراج البيانات المترجمة في قائمة الانتظار باستخدام وظيفة wp_enqueue_script () المضمنة. ثم قمنا بتوصيل وظيفة ajax_search_script() على wp_enqueue_scripts ، وهو الإجراء المناسب لاستخدامه عند وضع نصوص برمجية في قائمة الانتظار في WordPress.

قد يكون استخدام wp_localize_script محيرًا هنا لأنه ، كوظيفة في WordPress ، تم تصميمه في الأصل لترجمة أي سلاسل مستخدمة في البرنامج النصي الخاص بك. ومع ذلك ، يتم استخدامه بشكل متكرر لتمرير البيانات العامة من PHP إلى JavaScript. في حالتنا ، لتمرير عنوان URL الخاص بـ Ajax وكائن nonce.

يعد استخدام nonce ضروريًا حتى يمكن التحقق من صحة طلب jQuery Ajax باعتباره طلبًا واردًا من موقع الويب. إذا لم تكن معتادًا على استخدام الرموز المميزة في WordPress ، يمكنك قراءة المزيد في مقالتنا ذات الصلة.

ajax_object هي قيمة المعامل $object_name المطلوب wp_localize_script() وهو ما سيتم استخدامه لاحقًا في كود jQuery.

رائعة! الآن دعنا نملأ وظيفتنا بالمحتوى الصحيح.

جافا سكريبت

داخل ملف custom.js قمنا بتضمين jQuery الخاص بنا.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

استخدمنا هذه المرة jQuery و JSON لتمرير البيانات المطلوبة ، الإجراء ، search_text ، nonce ، إلى البرنامج النصي من جانب الخادم. ستكون وظيفة رد الاتصال get_articles_titles() مسؤولة عن معالجة البيانات في النهاية الخلفية ، وإعداد النتائج وإعادة إرسال الرد.

أيضًا ، كما ترى ، نستخدم ajax_object من wp_localize_script ، nonce و url.

الخطاف

الآن علينا ربط إجراءات Ajax المصادق عليها بالخطافات الضرورية التي ذكرناها سابقًا. نذكرك أنه من أجل تضمين المستخدمين المسجلين وغير المسجلين ، يجب عليك استخدام كلا الخطافين. في ملف functions.php الخاص بك ، أضف هذين السطرين تحت الكود الذي تمت إضافته من قبل لإدراج البرنامج النصي في قائمة الانتظار.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

كما لاحظت بالفعل ، فإن اسم الخطاف هو في الواقع بادئة متبوعة باسم الإجراء الخاص بنا. وظيفة hooked get_articles_titles هي المكان الذي سنقوم فيه بالفعل باسترداد عناوين المقالات. سنحدد هذه الوظيفة داخل functions.php أيضًا.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

يعتبر check_ajax_referer مسؤولاً عن التحقق من عدم معالجة طلب Ajax خارجيًا.

المعلمات الضرورية هنا هي الإجراء المرتبط بـ 'nonce' => wp_create_nonce( 'ajax_nonce' ) داخل ajax_search_script() ، جنبًا إلى جنب مع القيمة المتعلقة بـ nonce.

وهذا كل شيء! لقد أنشأنا مثالًا بسيطًا للغاية لـ Ajax-PHP. في هذه المرحلة ، إذا جربت الكود في بيئة اختبار WordPress ، فيجب أن تعمل على هذا النحو.

حيث الخدمة 1-5 هي عناوين مشاركاتنا الاختبارية.

استنتاج

كانت هذه مقالة حول كيف يمكننا زيادة الاستجابة والأداء على موقع WordPress من خلال الاستفادة من مزايا Ajax. نأمل أن تكون جاهزًا الآن لاستخدام تقنيات مماثلة على موقع الويب الخاص بك والاستمتاع بتحسين تجربة المستخدم!