البرنامج التعليمي لـ AJAX Search WordPress: أسهل طريقة لإضافة بحث مباشر

هل تبحث عن أفضل مكون إضافي لبحث AJAX في WordPress؟

تعد إضافة البحث المباشر المدعوم من AJAX إلى WordPress طريقة رائعة لتحسين تجربة المستخدم (UX) لموقعك وتعزيز إمكانية اكتشاف المحتوى.

في هذا المنشور، ستتعلم خطوة بخطوة كيفية إعداد بحث AJAX في WordPress باستخدام حل خالٍ تمامًا من التعليمات البرمجية.

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

كل ما عليك فعله هو:

قم بتثبيت البرنامج المساعد Otter Blocks .
أضف كتلة البحث حيث تريد أن يظهر مربع بحث AJAX WordPress الخاص بك وقم بتمكين تبديل البحث المباشر.
قم بتخصيص وظيفة البحث المباشر في AJAX حسب الحاجة، مثل تكوينها للبحث فقط في منشورات المدونة وليس الصفحات.

👇 إذا كنت تريد الانتقال مباشرة إلى البرنامج التعليمي، يمكنك النقر فوق رابط الانتقال هذا.

ما هو بحث AJAX لـ WordPress؟

من المحتمل أن تستخدم وظيفة البحث المباشر على أساس يومي. على سبيل المثال، توفر جميع محركات البحث ومواقع الفيديو الرئيسية مثل YouTube هذا النوع من الميزات.

تبدأ بالكتابة في مربع البحث وسترى على الفور قائمة بالاستعلامات المقترحة (أو النتائج المقترحة) – لا حاجة إلى تحميل الصفحة.

على الرغم من أن WordPress لديه شريط بحث خاص به، إلا أنه لا يستخدم AJAX افتراضيًا.

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

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

فوائد بحث AJAX المباشر في WordPress

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

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

لماذا قد لا يكون حل الترميز اليدوي للبحث المباشر هو الأفضل

نظرًا لأن AJAX يستخدم JavaScript، فقد تفكر في “طرح الحل الخاص بك” باستخدام لغة البرمجة.

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

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

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

استخدم مكون WordPress الإضافي لبحث AJAX بدلاً من ذلك

بالنسبة لمعظم الأشخاص، يعد استخدام مكون WordPress الإضافي لبحث AJAX خيارًا أفضل بكثير.

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

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

لهذا السبب، سنستخدم البرنامج الإضافي Otter Blocks لهذا البرنامج التعليمي.

كما يوحي الاسم، فإن Otter Blocks عبارة عن مجموعة من العناصر لمحرر قوالب WordPress الأصلي.

فيما يتعلق بوظيفة بحث AJAX، فإن الميزة الأكثر صلة هي كتلة البحث.

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

بالإضافة إلى وظيفة بحث AJAX في WordPress، تمنحك Otter Blocks بعض الطرق الإضافية لإضفاء الحيوية على تخطيطاتك وتصميماتك:

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

في الواقع، توفر Otter Blocks وظائف إضافية لجميع الكتل المعروضة – حتى تلك الأصلية. على سبيل المثال، يمكنك تعيين شروط الرؤية وCSS المخصص والمزيد من واجهة Block Editor النموذجية.

كيفية استخدام Otter Blocks لإضافة بحث AJAX المباشر إلى WordPress

ستحتاج فقط إلى بضع خطوات لإعداد Otter Blocks لإضافة بحث AJAX مباشر إلى WordPress. لنبدأ بعملية التثبيت:

تثبيت وتفعيل كتل Otter
تمكين بحث AJAX المباشر عن WordPress ضمن إعدادات Otter Blocks
قم بتعديل الإعدادات لتحسين تجربة البحث على الواجهة الأمامية لموقعك

1. تثبيت وتفعيل كتل Otter

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

سيوضح لك هذا كيفية تثبيت الإصدارين المجاني والمتميز من Otter Blocks. ومع ذلك، بالنسبة لهذا المنشور، ستحتاج إلى الإصدار المميز لأنه يمنحك وظيفة البحث المباشر.