ما هو AJAX وكيفية استخدامه في WordPress (دليل خطوة بخطوة)

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

في هذه المقالة ، سأخبرك ما هو AJAX وكيفية استخدام AJAX في WordPress (المعروف أيضًا باسم WP AJAX). دعنا نقرأ!

ما هو اياكس؟

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

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

كيف تعمل أجاكس؟

تتمثل مهمة AJAX في العمل كجسر بين موقع الويب الخاص بك والخادم. جوهر هذه التقنية غير المتزامنة هو كائن XMLHttpRequest ، والذي يسمح بتبادل البيانات. هذه هي الخطوات الأساسية لإجراء مكالمة AJAX:

- المصدر: W3Schools

• حدد المعلومات المراد إرسالها
• قم بإعداد المكالمة
• استخدم كائن XMLHttpRequest لإرسال البيانات
• تلقي ومعالجة الاستجابة من الخادم

الشيء الجيد هو أنه يمكن تبسيط هذه العملية باستخدام مكتبة jQuery.

كيفية استخدام AJAX في ووردبريس؟

يدعم WordPress AJAX أصلاً. يمكنك رؤية "admin-ajax.php" داخل مجلد wp-admin.

تم إنشاؤه في البداية لجميع الوظائف التي تقدم طلبات AJAX من مسؤول WordPress. يتم استخدامه أيضًا للجزء العام من الويب.

يجب أن تمر جميع طلبات WordPress AJAX من خلال نص PHP. بمعنى آخر ، يجب أن يكون admin-ajax.php هو ملف PHP الذي يتم من خلاله استدعاء الإجراء الذي يقوم بإرجاع المحتوى.

في عام 2013 ، قدم WordPress واجهة برمجة تطبيقات WordPress Heartbeat التي وفرت العديد من الوظائف المهمة ، مثل ميزة الحفظ التلقائي وانتهاء صلاحية تسجيل الدخول وتحذير ما بعد القفل أثناء قيام مستخدم آخر بكتابة أو تحرير منشور WordPress.

هناك ميزتان بارزتان جدًا في Heartbeat API هما:

1. الحفظ التلقائي

عند حفظ مسودة منشور أو متابعة العمل عليه ، يقوم WordPress تلقائيًا بحفظ التغييرات. هناك فرق واضح بين الحفظ التلقائي وحفظ المسودة يدويًا. تحقق من لقطة الشاشة التالية التي تعرض كلا النوعين من عمليات الحفظ:

- الحفظ التلقائي في WordPress

2. قفل المشاركة

عندما تحاول تحرير منشور يعمل عليه مستخدم آخر بالفعل ، سيظهر تحذير منبثق حول الموقف. هناك ثلاثة إجراءات مرئية لك.

- قفل المشاركة في WordPress

أصبحت الميزات المذكورة أعلاه ممكنة بفضل واجهة برمجة تطبيقات WordPress Heartbeat التي تنشئ اتصالًا بين الخادم والمتصفح للتواصل والاستجابات المناسبة.

تنشئ واجهة برمجة تطبيقات WordPress Heartbeat طلبات للتواصل مع الخادم وتطلق الأحداث عند تلقي البيانات / الاستجابة. يؤدي هذا عادةً إلى زيادة الحمل على الخادم وفي النهاية يؤدي إلى إبطاء مدير WordPress.

مثال حي

أقوم بتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بي وأبدأ في صياغة منشور. بعد ذلك ، أترك علامة التبويب مفتوحة لعدة دقائق وأبدأ في تصفح علامات التبويب الأخرى. لا تزال لوحة القيادة قيد تسجيل الدخول ويمكنك أن ترى أن admin-ajax يرسل الطلبات باستمرار.

- admin-ajax.php إرسال الطلبات إلى الخادم

وفقًا للتذكرة المذكورة أعلاه ، يقوم admin-ajax.php في WordPress بإنشاء طلبات بعد كل 15 ثانية. يمكن أن يكون الطلب أي اتصال مع الخادم.

كيف تفرط الإضافات admin-ajax.php؟

يمكن أن تُعزى معظم المشاكل في admin-ajax.php في WordPress إلى الطلبات التي تم إجراؤها بواسطة المكونات الإضافية المثبتة. تجعل هذه المكونات الإضافية مسؤول WordPress بطيئًا عن طريق إرسال طلبات للحصول على وظيفة معينة ، مثل إطلاق نافذة منبثقة أو تحديث عداد مشاركة اجتماعية.

ومع ذلك ، لن تؤدي الطلبات بالضرورة إلى زيادة ملف admin-ajax.php. إذا تم التعامل مع الطلبات بشكل صحيح ، واتبع مطورو المكونات الإضافية أفضل الممارسات في استخدام مكالمات AJAX في المكونات الإضافية الخاصة بهم ، فسيكون ملف admin-ajax.php على ما يرام. وبالتالي ، من المهم أيضًا تشخيص أي مكون إضافي قبل إلغاء تنشيطه.

كيفية تشخيص البرنامج المساعد في WordPress؟

من المهم تشخيص المكون الإضافي بشكل صحيح من أجل تحديد تأثيره على ملف admin-ajax.php ، والذي قد يؤدي إلى إبطاء مسؤول WordPress. للقيام بذلك ، سنستخدم أداتين: GTmetrix و WebPageTest.

في حالة GTmetrix ، انتقل إلى علامة التبويب Waterfall للحصول على قائمة كاملة بالطلبات. عند النظر إلى القائمة عن كثب ، يمكنك رؤية طلبات POST التي قدمها ملف admin-ajax.php.

- تشخيص البرنامج المساعد في ووردبريس

في حالتي ، تم تقديم هذه الطلبات بشكل أساسي بواسطة مكون إضافي للمشاركة الاجتماعية. يرسل هذا المكون الإضافي المحدد طلب ajax إلى حسابات الوسائط الاجتماعية عبر واجهة برمجة التطبيقات كل 15 ثانية لجلب عدد مشاركة محدث.

قم بتوسيع علامة التبويب للحصول على معلومات مفصلة. تعرض علامة تبويب الاستجابة المكان المحدد الذي يؤدي إلى تشغيل هذه الطلبات.

يأتي Chrome مزودًا بأدوات للمطورين يمكن أن تساعد في تحليل الطلبات التي قدمتها المكونات الإضافية المختلفة. للتحقق من ذلك ، افتح موقع الويب في Chrome ، وانقر فوق CTRL + Shift + I ، وانقر فوق علامة التبويب الشبكة.

- طلبات admix-ajax.php في Chrome

أعد تحميل الصفحة وشاهد القائمة التي يتم ملؤها بالطلبات المحدثة. في مربع التصفية ، اكتب ajax أو admin-ajax لتصفية الملفات المطلوبة. يمنحك هذا نظرة ثاقبة على عدد الطلبات بالإضافة إلى تواترها ومصدر الطلب.

بعد ذلك ، انقر فوق الملف لمعرفة المزيد من المعلومات. في علامة تبويب الاستجابة ، يمنحك بعض التلميح عن المكون الإضافي الذي تسبب في هذا الطلب. في حالتي ، تم تشغيله هذه المرة بواسطة المكون الإضافي WP Popular (WPP) ، وهو مكون إضافي يسلط الضوء على المنشور الأكثر شيوعًا على مدار فترة زمنية محددة.

لتجنب ذلك ، تأكد من تحديث المكون الإضافي الذي تستخدمه. إذا لم يكن الأمر كذلك ، فحاول فتح تذكرة دعم حتى يتمكن مطوروها من حل المشكلة. إذا كان ذلك ممكنًا ، يمكنك أيضًا استبداله بمكوِّن إضافي آخر يتم تحديثه ولا يفرط في تحميل ملف admin-ajax.php.

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

في القسم التالي ، سنرى كيف يمكننا تقليل هذه الطلبات ومنع تحميل ملف admin-ajax.php بشكل زائد.

تسريع لوحة تحكم WordPress

لتسريع الواجهة الخلفية لـ WordPress ، فإن أفضل طريقة هي تعطيل واجهة برمجة تطبيقات Heartbeat ، أو على الأقل تعيين فترة زمنية أطول بحيث لا تصل إلى الخادم بعد كل بضع ثوانٍ.

تثبيت البرنامج المساعد Heartbeat Control

- البرنامج المساعد للتحكم في نبضات القلب

قم بتسجيل الدخول إلى لوحة تحكم مسؤول WordPress الخاصة بك. انتقل إلى الإضافات ← إضافة جديد. ابحث عن Heartbeat Control. قم بتثبيته وتنشيطه.

- تثبيت Heartbeat Control في ووردبريس

تكوين المكون الإضافي للتحكم في نبضات القلب

انتقل إلى الإعدادات ← إعدادات التحكم في نبضات القلب. ستجد هناك ثلاث قوائم منسدلة لتكوين المكون الإضافي.

1. السماح بنبضات القلب

يمكنك تحديد المناطق التي ستعمل فيها Heartbeat API. هناك ثلاثة خيارات للاختيار من بينها:

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

- السماح بالتحكم في نبضات القلب

2. تعطيل نبضات القلب

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

ومع ذلك ، إذا كان موقعك يحتوي على أكثر من مستخدم يساهم بانتظام ، فإنني أقترح أن تسمح لـ Heartbeat API على صفحات تحرير المنشور فقط.

- تعطيل ضربات القلب في التحكم في ضربات القلب

3. تعديل نبضات القلب

تسمح لك هذه القائمة المنسدلة بتعيين الفاصل الزمني ، الذي يتراوح من 0 إلى 300 ثانية لتنفيذ طلبات admin-ajax. من خلال تعيينه على 120 ثانية ، سيتم إنشاء الطلب بعد كل 120 ثانية. سيؤدي ذلك إلى تقليل الحمل على الخادم بشكل كبير. اضبطه وفقًا لاحتياجاتك.

- تعديل نبضات القلب في التحكم في نبضات القلب

إنشاء قواعد متعددة

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

اكتشاف المكونات الإضافية التي تستخدم Heartbeat API

الآن بعد أن قمت بإعداد كل شيء ، حان الوقت للتحقق من المكونات الإضافية التي تستخدم ملف admin-ajax.php وتؤدي إلى إبطاء موقع الويب.

انتقل إلى GTmetrix وأدخل عنوان URL لموقعك. سيستغرق تحليل الموقع بضع لحظات. بمجرد الانتهاء من ذلك ، انتقل إلى علامة التبويب Waterfall وسترى مقدار الوقت الذي يستغرقه الملف للاتصال والاستجابة. قم بالتمرير لأسفل قليلاً ، ومعرفة ما إذا كان هناك إدخال لـ POST admin-ajax.php. إذا كانت الإجابة بنعم ، فقم بتوسيعها وانتقل إلى علامة التبويب نشر. من هنا ، يمكنك تحديد المكون الإضافي الجاني.

في حالتي ، يستخدم المكون الإضافي "desktop switch" ملف admin-ajax.php ويرسل الطلبات باستمرار إلى الخادم. هذا هو الوقت المناسب لاتخاذ القرار. إما أن تستبدلها بمكوِّن إضافي آخر أو تقاطع أصابعك.

- انشر admin-ajax.php

ملخص

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

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