كيفية AJAX-ify التعليقات الخاصة بك وورد

الإعلانات

بشكل افتراضي ، نظام التعليق في WordPress غير ملائم على الإطلاق - أحد أكبر اعتراضاتي هو أنه لنشر تعليق ، يجب تحديث الصفحة. يمكنك التبديل إلى نظام تابع لجهة خارجية مثل Livefyre [تمت إزالة عنوان URL المكسور] أو Disqus 3 طرق لتشجيع التعليقات على مدونة وورد الخاصة بكالحصول على التعليقات على مدونتك هو محفز رائع لإبقائك على تواصل مع المدى الطويل الذي يتم فيه التدوين. مجرد معرفة أن هناك شخصًا ما ، فإن تقدير عملك يبدو رائعًا ، ولكن ليس ... اقرأ أكثر ، ولكن إذا كنت تفضل إبقاء كل شيء في المنزل أو إجراء نوع آخر من التخصيص ، فإن نشر التعليقات بواسطة AJAX هو أقل ما يجب عليك فعله.

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

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

، وتأكد من الاطلاع على جميع المقالات ذات الصلة بـ WordPress.

المقدمة

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

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

جافا سكريبت

أولاً ، هذا سيحتاج مسج، كما يفعل أي شيء مثير عن بعد في تطوير الويب في الوقت الحاضر. إذا لم تكن متأكدًا مما إذا كان قد تم تحميله بالفعل أم لا ، فانتقل إلى رمز جافا سكريبت وجربه على أي حال - إذا كان لديك Firebug ويقول سجل وحدة التحكم "مسج غير معروف"عند تحديث الصفحة ، ثم أضف هذا السطر إلى ملف jobs.php للتأكد من تحميله.

دالة google_jquery () { if (! is_admin ()) {wp_deregister_script ('jquery')؛ wp_register_script ('jquery'، (" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), خاطئة)؛ wp_enqueue_script ('jquery') ؛ }} add_action ('wp_print_scripts'، 'google_jquery')؛

لاحظ أن هذه طريقة معقدة لتحميل jQuery لأننا سنستخدم أحدث إصدار من Google CDNs ، وهو أسرع وأكثر تاريخ من التاريخ الذي تم تضمينه افتراضيًا مع WordPress - لذا قد يكون من الجيد إضافة ذلك على أي حال حتى إذا تم تحميل jQuery بالفعل في مكان آخر.

الآن ، بالنسبة لجافا سكريبت الفعلي الذي سيتعامل مع نموذج التعليق ، لدينا بعض الخيارات. الأسهل هو فقط لصق الكود في جهازك single.php النموذج - بافتراض عدم تمكين التعليق للصفحات أيضًا.

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

add_action ('init'، 'ajaxcomments_load_js'، 10) ؛ function ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments'، get_stylesheet_directory_uri (). '/ ajaxcomments.js')؛ }

هنا جافا سكريبت للتعامل مع نموذج التعليق (أو يمكنك مشاهدته على الباستبين):

 // نظام تعليق AJAXified. jQuery ('document'). ready (function ($) { var commentform = $ ('# commentform') ؛ // ابحث عن نموذج التعليق. commentform.prepend ('
 
') ؛ // إضافة لوحة معلومات قبل النموذج لتقديم ملاحظات أو أخطاء. var statusdiv = $ ('# comment-status') ؛ // تعريف infopanel commentform.submit (الوظيفة () { // إجراء تسلسل وتخزين بيانات النموذج في متغير. var formdata = commentform.serialize () ، // أضف رسالة حالة. statusdiv.html ('
 قيد المعالجة...  p>') ؛ // استخراج عنوان URL للإجراء من نموذج التعليق. var formurl = commentform.attr ('action') ، // نموذج المشاركة مع البيانات. $ .ajax ({ النوع: 'post' ، url: formurl ، data: formdata ، خطأ: function (XMLHttpRequest ، textStatus ، errorThrown) { statusdiv.html ('
 ربما تكون قد تركت أحد الحقول فارغًا ، أو تقوم بالنشر بسرعة كبيرة  p>') ؛ } ، النجاح: الوظيفة (البيانات ، textStatus) { إذا (البيانات == "النجاح") statusdiv.html ('
 شكرًا لتعليقك. نحن نقدر ردك.  p> ') ؛ آخر. statusdiv.html ('
 يرجى الانتظار بعض الوقت قبل نشر تعليقك التالي  p>') ؛ commentform.find ('textarea [name = comment]'). val ('') ؛ } }); عودة كاذبة؛ }); });

لتقسيم الشفرة ، نقوم أولاً بإنشاء كائنات jQuery من نموذج التعليق (الذي يفترض أن نموذج التعليق الخاص بك يحتوي على معرف Css الافتراضي لـ "تعليق التعليق")، وإضافة لوحة معلومات فارغة فوقها سنستخدمها لاحقًا لعرض الرسائل للمستخدم حول تقدم نشر تعليقه.

تعليق يستخدم "لاختطاف" زر الإرسال. ثم نقوم بتسلسل بيانات النموذج (تحويلها إلى سطر واحد طويل من البيانات) ، وإعطاء "معالجة"إلى المستخدم في لوحة المعلومات هذه ، والمضي قدمًا في طلب AJAX. طلب AJAX هو شكل موحد، ولكن ليس في نطاق هذا البرنامج التعليمي اليوم - يكفي أن نقول أنه يتفاعل مع نجاح أو خطأ ، ويفرغ النموذج إذا نجح في منع نشر نفس التعليق بطريق الخطأ مرتين. اضبط الرسائل والأخطاء حسب الاقتضاء ، أو أضف بعض الأنماط المناسبة إلى ورقة أنماط السمة الخاصة بك إذا كنت تريد أن تبرز رسائل الخطأ بطريقة أو بأخرى. الخط الأخير - عودة كاذبة - يمنع النموذج من إكمال الإجراء الافتراضي الخاص به.

معالج PHP

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

(أيضا متوفر في هذا Pastebin)

add_action ('comment_post'، 'ajaxify_comments'، 20، 2) ؛ function ajaxify_comments ($ comment_ID، $ comment_status) { if (! فارغة ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // If AJAX Request Then. التبديل ($ comment_status) { الحالة "0": // إعلام المشرف بالتعليق غير الموافق عليه. wp_notify_moderator ($ comment_ID) ؛ الحالة "1": // تعليق معتمد. صدى "النجاح" ؛ $ commentdata = & get_comment ($ comment_ID، ARRAY_A) ؛ $ post = & get_post ($ commentdata ['comment_post_ID']) ؛ wp_notify_postauthor ($ comment_ID ، $ commentdata ['comment_type']) ؛ استراحة؛ الافتراضي: صدى "خطأ" ؛ } خروج؛ } }

المشاكل الفورية

إذا كانت الصفحة لا تزال محدثة بدلاً من النشر من خلال AJAX ، فمن المحتمل أن تكون إحدى مشكلتين. واحد - ربما لم يتم تحميل jQuery. تثبيت Firebug كيفية تثبيت Firebug على IE و Safari و Chrome و Opera اقرأ أكثر ، أو تمكين أدوات مطوري Chrome ، وتحقق من سجل وحدة التحكم عن الأخطاء. إذا لم يتم العثور على jQuery ، فارجع إلى قسم JavaScript واقرأ الجزء الأول حول إضافة jQuery إلى مظهرك. الاحتمال الثاني هو أن موضوعك يفعل شيئًا خاصًا بنموذج التعليق ولم يعد معرفه "نموذج تعليق". تحقق من شفرة المصدر ، ثم اضبط var commentform = $ ("# commentform") سطر في جافا سكريبت ليكون المعرف الصحيح - الذي قد يعمل.

كما هو الحال دائمًا ، أنا موجود لتقديم المساعدة قدر المستطاع ، ولكن يرجى نشر الروابط إلى مثال URL حيث يمكنني إلقاء نظرة سريعة.