اياكس ووردبرس] دروس

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

1.

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

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

2.

أنشئ مجلدًا جديدًا في نسقك واسمه "scripts". أنشئ ملف جافا سكريبت جديدًا داخل مجلد البرامج النصية واسمه "my-ajax.js". سيتم استخدام ملف JavaScript هذا بواسطة البرامج النصية Ajax.

3.

افتح ملف "functions.php" وأضف هذا الكود لإضافة ملف جافا سكريبت my-ajax.js إلى السمة:

function add_myscript () {wp_enqueue_script ('my-ajax.js'، get_bloginfo ('template_directory'). "/scripts/my-ajax.js"، array ('jquery'))؛ } add_action ('init'، 'add_myscript')؛

4.

افتح ملف my-ajax.js وأضف jQuery ajax () لإجراء مكالمة Ajax. استخدم هذا الرمز كمثال:

jQuery (document). ready (function () {var greeting = jQuery ("# ​​greeting"). val ()؛ jQuery ("# ​​push-me"). انقر فوق (function () {jQuery.ajax ({type: ' POST '، url:' //www.yoursite.com/wp-admin/admin-ajax.php '، data: {action:' myAjax '، greeting: greeting،}، success: function (data، textStatus، XMLHttpRequest) {jQuery ("# ​​test-div"). html ('') ؛ jQuery ("# ​​test-div"). إلحاق (البيانات) ؛} ، الخطأ: وظيفة (MLHttpRequest ، textStatus ، errorThrown) {alert (errorThrown)؛ }})؛}))؛ })؛

استبدل "www.yoursite.com" بعنوان المدونة على WordPress الخاص بك. يشرع جزء التعليمات البرمجية هذا في تهيئة دالة سيتم تنفيذها عند النقر فوق العنصر "# push-me". يمكن أن يكون عنصر push-me أي شيء ، من زر إلى رابط.

5.

افتح ملف functions.php وأضف وظيفة Ajax التي تريد تنفيذها. على سبيل المثال ، استخدم هذه الوظيفة البسيطة التي تعرض رسالة ترحيب:

وظيفة myAjax () {// الحصول على بيانات من استدعاء ajax () $ greeting = $ _POST ['greeting']؛ النتائج $ = "

". $ تحية."

"؛ // تمكّن" سلسلة العودة "(نتائج $)؛} / إنشاء دعوة جديدة لأياكس ل WordPress add_action ('wp_ajax_nopriv_myAjax'، 'myAjax')؛ add_action ('wp_ajax_myAjax'، 'myAjax')؛

استخدم دائمًا "add_action" لإنشاء وظائف Ajax للتأكد من التعرف عليها من خلال نظام إدارة المحتوى. هذا يسمح لك باستخدام ملف "admin-ajax.php" الموجود.

6.

احفظ وأغلق جميع الملفات التي استخدمتها لهذا البرنامج التعليمي. انتقل إلى "//www.yoursite.com/test.html" وسترى الزر. انقر فوق الزر و "مرحبا أيها القراء!" ستظهر رسالة فوقها. لاحظ أنه لم تتم إعادة تحميل الصفحة ، لذلك عملت وظيفة Ajax بشكل مثالي.