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

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

ماذا لو قلنا لك أنه يمكنك تحسين سرعة موقع WordPress الخاص بك عن طريق دمج ميزة بسيطة في المكونات الإضافية الخاصة بك ، والمعروفة باسم AJAX. مصطلح AJAX هو اختصار لـ Asynchronous JavaScript و XML. تساعدك AJAX على تحسين سرعة موقع الويب الخاص بك. سيؤدي ذلك إلى تحميل جزء معين فقط من الصفحة والحفاظ على ثبات الصفحة المتبقية ، وبالتالي تحسين وقت التحميل. تستخدم العديد من المكونات الإضافية والتطبيقات هذه الميزة بالفعل للمساعدة في تحسين سرعة صفحات الويب الخاصة بهم حتى اليوم.

اكتسبت AJAX في فترة زمنية قصيرة سمعة ممتازة في عالم التسويق الرقمي ويتم استخدامها من قبل غالبية مالكي مواقع الويب. لحسن الحظ ، يوفر WordPress دعمًا ممتازًا لـ AJAX ، مما يسهل كتابة المكونات الإضافية المدمجة في AJAX. بدعم من WordPress ومقالتنا ، يجب أن تكون قادرًا على دمج AJAX في المكونات الإضافية الخاصة بك في أي وقت من الأوقات.

يوجد أدناه دليل تفصيلي خطوة بخطوة لإرشادك خلال هذه العملية.

الخطوة # 1 - أنشئ البرنامج المساعد الخاص بك

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

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

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

الخطوة # 2 - أضف مكتبة JavaScript

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

define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

يجب عليك توجيه WordPress من خلال عنوان URL للمكون الإضافي الذي تم إنشاؤه ؛ لهذا السبب تحتاج إلى تعريف المتغير باسم AJAXLOADPOSTURL.

يتم استخدام AJAX دائمًا مع مجموعة من لغات البرمجة ، وسنعمل مع JavaScript في مقالتنا المتبقية. ابحث عن ajaxloadpost.js في المجلد \ wp-content \ plugins \ ajaxloadpost \ js \ وأضف JavaScript إليه. يمكنك الآن إضافة متغير JavaScript إلى البرنامج النصي الخاص بك.

الخطوة # 3 - دمج معالج AJAX

بمجرد فرز كل ما سبق ، يمكنك أخيرًا الانتقال إلى دمج معالج AJAX في المكون الإضافي الخاص بك. ما يلي هو رمز معالج AJAX الخاص بك:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

سوف يفي الكود أعلاه بشكل أساسي بمهمتين. سيقوم أولاً بتطوير معرف للمنشورات المطلوبة من قبل المستخدم. المهمة الثانية هي إنشاء "nonce". لا داعي للقلق بشأن العنصر الثاني في الوقت الحالي (تم وصفه بالتفصيل في نهاية المقال).

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

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

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

الخطوة # 4 - استخدام JavaScript لـ AJAX

الشيء التالي الذي تحتاجه هو كتابة دالة تمكّن AJAX من الاتصال وتحديث البيانات التي تم إرجاعها من خلال معالج AJAX. الوظيفة بشكل عام هي ajacloadpost.js. يمكن استخدام الكود التالي لتحديد الإجراء الموضح أعلاه.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

ستأخذ الوظيفة أعلاه مدخلين ، أحدهما هو معرف المنشور والثاني هو nonce. يمكنك استخدام الوظيفة jQuery.ajax لإجراء استدعاء للخادم. بمجرد النجاح ، قم بتحديث <div> للمعرف #loadpostresult بالبيانات التي تم إرجاعها من خلال معالج AJAX. الجزء الأخير من الكود هو شرط في حالة حدوث خطأ. في حالة حدوث خطأ ، يتم تنبيه النظام من خلال نافذة منبثقة.

الخطوة # 5 - عرض القوائم

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

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );  

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

ما هو "nonce"؟

يتم استخدام nonce للتحقق مما إذا كان الطلب قادمًا من مصدر حقيقي أم لا. يمكن إنشاء nonce باستخدام دالة WordPress بسيطة: "wp_create_nonce". يمكن التحقق منها بشكل أكبر من خلال معالج AJAX باستخدام الوظيفة: "wp_verify_nonce". يعد استخدام هذه الميزة في غاية الأهمية إذا كنت تقوم بمهمة حساسة على WordPress الخاص بك.

  خاتمة

  يمكن أن يساعد تكامل AJAX مع المكونات الإضافية في تحسين استجابة صفحاتك بشكل مرئي. إذا لم تكن مرتاحًا لاستخدام JavaScript ، فيمكنك اختيار لغة برمجة يسهل عليك ترميزها أو البحث عن خبير يمكنه مساعدتك في كتابة التعليمات البرمجية للمكوِّن الإضافي الخاص بك. حاول دمج AJAX في المكونات الإضافية الخاصة بك ولن تشعر بخيبة أمل!