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

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

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

ما هو اياكس؟

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

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

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

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

- المصدر: W3Schools

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

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

كيفية استخدام أجاكس في الووردبريس؟

يدعم 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.

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

في حالتي ، تم تقديم هذه الطلبات بشكل أساسي بواسطة مكون إضافي للمشاركة الاجتماعية. يرسل هذا المكون الإضافي المحدد طلب ajax إلى حسابات الوسائط الاجتماعية عبر API كل 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 API

قم بتسجيل الدخول إلى لوحة تحكم مسؤول WordPress الخاصة بك. انتقل إلى Plugins → Add New → ابحث عن Breeze → Install and Activate it.

- تثبيت Breeze في WordPress

تكوين البرنامج المساعد بريز

انتقل إلى الإعدادات → Breeze → Heartbeat API. ستجد هناك 4 خيارات مختلفة لتكوين Heartbeat.

1. Control Heartbeat: يمكنك تبديل الزر لتشغيل أو إيقاف Heartbeat API للواجهة الخلفية ومحرر المشاركة والواجهة الأمامية.
2. Heartbeat Frontend: سيسمح لك هذا بتغيير سلوك الواجهة الأمامية أو تعطيلها تمامًا.
3. Heartbeat Post Editor: سيسمح لك ذلك بتغيير سلوك محرر مشاركة WP أو تعطيله تمامًا.
4. Heartbeat Backend: سيسمح لك هذا بتغيير سلوك الواجهة الخلفية أو تعطيلها تمامًا.

- إعدادات Heartbeat API في Breeze

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

بشكل افتراضي ، تحصل على التردد الافتراضي لواجهة برمجة تطبيقات WordPress Heartbeat ، ولكن يمكنك إنشاء قواعد متعددة بناءً على متطلباتك. على سبيل المثال ، قد ترغب في تشغيل WordPress Backend (Dashboard) في غضون دقيقتين (120 ثانية) ، ولكن يتم تشغيل محرر النشر في 3 دقائق (180 ثانية). للقيام بذلك ، تحتاج إلى إنشاء قاعدتين: واحدة للوحة تحكم WordPress والأخرى لمحرر المشاركات. اضبط التردد على دقيقتين و 3 دقائق على التوالي.

اكتشاف المكونات الإضافية التي تستخدم 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 API / تمكينها في مواقع قليلة فقط - أو - الترقية إلى استضافة مُدارة يمكنها التعامل مع عبء الطلبات وتقليل وقت استجابة الخادم أيضًا.

أسئلة مكررة