اقتراح سهل للبحث التلقائي في WordPress - تعليمي

نشرت: 2022-04-10

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

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

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

ماذا ستحتاج

ستحتاج إلى مدير مقتطف الشفرة ، والقدرة على النسخ واللصق ، والمكوِّن الإضافي Live Search (مجاني على الريبو).

يجب أن نلاحظ ما يلي: أي نموذج يستخدم <?php get_search_form() ?> ، سيعمل تلقائيًا مع هذا الحل ، ولن يحتاج إلى الخطوتين التاليتين. ما عليك سوى تخطي هذا القسم إذا اخترت هذا الطريق.

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

حتى إذا قمت بإضافته عبر PHP ، كما هو موضح أعلاه ، بدون أي CSS ، فسيتم ترك نموذج بحث غير منظم. ومع ذلك - إذا كان لديك حق الوصول إلى ملفات / قوالب السمات الخاصة بك ، فهذه طريقة قابلة للتطبيق للحصول على نموذج بحث على موقعك. سيستخدم هذا ترميز WordPress القياسي ، بحيث يمكنك ضبط CSS أدناه.

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

لغة PHP

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

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

طريقة مدفوعة (سهل)

اختر Scripts Orginizer ، وهو مكون إضافي لبرنامج WordPress يجعل من السهل إدارة التعليمات البرمجية على موقع WordPress الخاص بك (مراجعة). بعد التثبيت ، انتقل إلى Scripts Organizer -> Import ، الموجود في قائمة مسؤول الشريط الجانبي.

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

استيراد ، انتقل إلى Scripts Organizer -> Code Blocks ، وانسخ الرمز القصير. قم بلصقه في الواجهة الأمامية حيث تريد نموذج البحث الإكمال التلقائي الخاص بك ، وتخطى إلى قسم CSS المخصص (انقر للانتقال إلى هناك).

بمجرد الوصول إلى قسم CSS المخصص ، انتقل إلى قسم SCORG الجزئي ، وقم بتنزيل JSON واستيراده وتثبيته المكون الإضافي للبحث المباشر وتشغيله.

يمكنك أيضًا اتباع الخطوات اليدوية. للبدء ، قم بإنشاء إدخال جديد:

الآن ، قم بتشغيل ما يلي:

أعطها عنوان
تمكين رمز كتلة التبديل: تشغيل
موقع البرنامج النصي: الرمز القصير
انسخ / الصق كود PHP / HTML من الأعلى.
احتفظ بجميع الإعدادات الأخرى افتراضيًا ، وانقر فوق نشر

يجب أن يبدو هكذا عندما تنتهي من ذلك ️.

احصل على الرمز القصير الذي سيظهر داخل إدخال البرنامج النصي في الجزء السفلي الأيسر من محرر الشفرة ، أو في صفحة قائمة مقتطف الشفرة:

خذ هذا الرمز القصير وأدخله في أي مكان باستخدام Gutenberg أو TINYMCE أو Elementor Shortcode Widget أو أي طريقة أخرى خاصة بالرمز القصير.

انتقل الآن إلى الخطوة الثانية ، وأضف CSS إلى موقعك.

طريقة حرة (أصعب قليلاً)

قم بتثبيت البرنامج المساعد المجاني Code Snippets. قم بتنزيل مقتطف الشفرة التالي واستيراده إلى موقع الويب الخاص بك:

Live Search Shortcode Snippet JSON

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

بعد ذلك ، أضف البحث باستخدام الرمز المختصر التالي في الواجهة الأمامية:

[iso_live_search]

بغض النظر عن كيفية إضافة البحث ، إذا كنت تستخدم HTML و PHP الأساسيين من هذا القسم ، فإن CSS في القسم التالي سيعطيه أسلوبًا رائعًا.

CSS

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

ملاحظة: هذا الرمز غير متوافق مع طريقة <?php get_search_form() ?> لإدراج شريط البحث. ومع ذلك ، بناءً على المظهر الخاص بك ، فإن إدراج نموذج بحث بهذه الطريقة يعني أنه سيرث أنماط المظهر الخاص بك.

# iso-searchform {موضع: نسبي؛ } .iso-search {padding: 10px؛ المساحة المتروكة لليمين: 50 بكسل ؛ نصف قطر الحدود: 5 بكسل ؛ الخلفية: # f8fbff ؛ الحد: 1 بكسل صلب rgba (42 ، 140 ، 255 ، .27) ؛ المخطط التفصيلي: لا شيء ؛ العرض: 100٪؛ } .iso-search: focus {border: 1px solid # ffb300؛ } .iso-search-btn {height: 40px؛ العرض: 40 بكسل ؛ الحدود: لا يوجد ؛ الخلفية: لا شيء ؛ نصف قطر الحدود: 5 بكسل ؛ الموقف: مطلق. أعلى: 0؛ اليمين: 0؛ } .iso-search-btn: active، .iso-search-btn: focus {background: rgba (42، 140، 255، .27)؛ }

يمكنك إضافة CSS هذا إلى الأداة المساعدة لمنشئي الصفحات ، عبر المظهر -> التخصيص -> CSS الإضافي ، أو باستخدام SCORG.

نقترح SCORG. أضف جزء CSS جديدًا ، والصق الرمز فيه ، وانشره (أو قم باستيراد هذا الملف). انتقل إلى مقتطف الرمز القصير الذي تم إنشاؤه في الخطوة السابقة ، وانتقل إلى قسم "SCSS Partials Manager" وحدد عرض ، وابحث عن عنوان ذلك الجزئي وحدده. قم بتحديثه. الآن ، أينما تضع الرمز القصير ، سيتم أيضًا تحميل CSS. سيتم تحميله فقط في مكان وجود الرمز القصير ، وليس عالميًا ، وهو أمر رائع للأداء.

الآن ، كل ما نحتاجه هو الصلصة السحرية.

الصلصة السحرية (SearchWP Live Ajax Search)

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

انتقل إلى Live Search Plugin

بمجرد التثبيت ، انقر فوق نموذج البحث الذي أدخلته مع الرمز القصير أو الكود الأولي أو الذي يستخدم إدراج WordPress PHP الأصلي ، وسترى السلوك التالي:

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

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

قم بالتوسيع عند هذا البحث المباشر في WordPress

SearchWP Live Ajax Search هو مكون إضافي مجاني يسمح لك بالقيام بما يوحي به الاسم: إضافة Live Ajax Search. ستعمل مع أو بدون المجموعة المتميزة من SearchWP والإضافات المرتبطة بها. إذا كنت لا تستخدم SearchWP ، فسيستخدم محرك البحث القياسي WP.

يفرز البحث القياسي في WordPress حسب الصلة (في الماضي ، لم يكن - جامحًا!) من خلال النظر في عنوان المنشور ، ثم في المحتوى. لكن هذا لا يزال Elementor ، وهناك خيارات أفضل هناك. في الواقع ، لقد كتبنا مقالًا آخر يناقش البدائل الأفضل ، والذي يمكنك قراءته هنا: حلول بحث أفضل لـ WordPress

هناك العديد من الطرق لتحسين البحث في WordPress.

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

إذا كنت تبحث عن بديل لـ SearchWP ، فإن Ivory Search هو مكون إضافي منخفض التكلفة يوفر ميزات مماثلة ، و LTD! يجب أن يعمل هذا المكون الإضافي Live Search (WP Search Autocomplete) خارج المربع مع Ivory Search. يمكنك استخدام محركات البحث الأخرى أيضًا ؛ وفقًا للمستندات ، كل ما عليك فعله هو:

أضف السمة التالية إلى input النموذج: data-swpengine="supplemental" مع استبدال "التكميلي" باسم محرك البحث المطلوب.
قائمة الأسئلة الشائعة

أسهل مع الأكسجين

ليس سراً أننا نحب Oxygen Builder ، لذا فإليك طريقة أسهل لإضافة AJAX Live Search (الإكمال التلقائي) باستخدام هذه الأداة.

ملاحظة: لن يعمل هذا البرنامج التعليمي والمكوِّن الإضافي مع Oxygen Search Form Widget ، لأنه كما هو مذكور في القسم السابق ، لا يستخدم طريقة PHP القياسية لإدخال نموذج بحث ، ولا يتضمن سمة البيانات المطلوبة.

خطوات سهلة:

أضف كتلة التعليمات البرمجية حيثما تريد نموذج البحث ، والصقها في PHP الموجودة أدناه (أو الصق في الرموز المختصرة للهيدروجين والتي ستجعل كتلة الشفرة تلقائيًا) ..
أضف CSS الموجود أدناه إلى Oxygen Global CSS ، وقم بالتغيير كما تريد (الألوان بشكل أساسي).
قم بتثبيت وتفعيل المكون الإضافي Live Search ، مجانًا على الريبو هنا.
تشمس في مجد البحث المباشر.

نظرًا لأننا قادرون على وضع PHP مباشرةً في القوالب والصفحات باستخدام Page Builder ، يمكننا ببساطة لصق PHP التالية في كتلة التعليمات البرمجية وإضافة CSS عبر الإعدادات العامة واستدعائها ليلاً (تأكد من إضافة البرنامج المساعد للبحث المباشر ، موجود هنا).

يمكنك أيضًا نسخ / لصق أكواد الهيدروجين القصيرة التالية (إذا كان لديك Hydrogen Pack (راجع هنا)).

eyJzb3VyY2UiOiJodHRwczovL2RlYWxzLmlzb3Ryb3BpYy5jbyIsImNvbXBvbmVudCI6W3siaWQiOjIwMCwibmFtZSI6ImN0X2NvZGVfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoyMDAsImN0X3BhcmVudCI6MTAsInNlbGVjdG9yIjoiY29kZV9ibG9jay0yMDAtMTkiLCJvcmlnaW5hbCI6eyJjb2RlLXBocCI6Ijxmb3JtIGlkPVwiaXNvLXNlYXJjaGZvcm1cIiBhcmlhLWxhYmVsPVwiU2l0ZXdpZGVcIiBtZXRob2Q9XCJnZXRcIiBhY3Rpb249XCI8P3BocCBlY2hvIGVzY191cmwoIGhvbWVfdXJsKCAnLycgKSApOyA / PlwiPlxuICAgIDxpbnB1dCBkYXRhLXN3cGxpdmU9XCJ0cnVlXCIgY2xhc3M9XCJpc28tc2VhcmNoIHNlYXJjaC1maWVsZFwiIHR5cGU9XCJzZWFyY2hcIiBzcGVsbGNoZWNrPVwidHJ1ZVwiIHBsYWNlaG9sZGVyPVwiU2VhcmNoXCIgdmFsdWU9XCI8P3BocCBlY2hvIGdldF9zZWFyY2hfcXVlcnkoKTsgPz5cIj5cbiAgICA8aW5wdXQgY2xhc3M9XCJpc28tc2VhcmNoLWJ0blwiIHR5cGU9XCJzdWJtaXRcIiB2YWx1ZT1cIvCflI1cIj5cbjwvZm9ybT4iLCJjb2RlLWNzcyI6IiNpc28tc2VhcmNoZm9ybSB7XG5wb3NpdGlvbjpyZWxhdGl2ZTtcbn1cblxuLmlzby1zZWFyY2gge1xuXHRwYWRkaW5nOiAxMHB4O1xuXHRwYWRkaW5nLXJpZ2h0OiA1MHB4O1xuXHRib3JkZXItcmFkaXVzOiA1cHg7XG5cdGJhY2tncm91bmQ6ICNmOGZiZmY7XG5cdGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoNDIsIDE0MCwgMjU1LCAu MjcpO1xuXHRvdXRsaW5lOiBub25lO1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmlzby1zZWFyY2g6Zm9jdXMge1xuXHRib3JkZXI6IDFweCBzb2xpZCAjZmZiMzAwO1xufVxuXG4uaXNvLXNlYXJjaC1idG4ge1xuXHRoZWlnaHQ6IDQwcHg7XG5cdHdpZHRoOiA0MHB4O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJhY2tncm91bmQ6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6IDVweDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cdHJpZ2h0OjA7XG59XG5cbi5pc28tc2VhcmNoLWJ0bjphY3RpdmUsXG4uaXNvLXNlYXJjaC1idG46Zm9jdXMge1xuXHRiYWNrZ3JvdW5kOiByZ2JhKDQyLCAxNDAsIDI1NSwgLjI3KTtcbn0ifSwibmljZW5hbWUiOiJDb2RlIEJsb2NrICgjMjAwKSIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY2xhc3NlcyI6WyJ3LWZ1bGwiXSwiY3RfZGVwdGgiOjUsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjUsIiQkaGFzaEtleSI6Im9iamVjdDo0MjIifV0sImNsYXNzZXMiOnsidy1mdWxsIjp7ImtleSI6InctZnVsbCIsInBhcmVudCI6Ik94eU1hZGVGcmFtZXdvcmsiLCJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiJSIsInNlbGVjdG9yLWxvY2tlZCI6InRydWUiLCJ3aWR0aCI6IjEwMCJ9fX0sImNvbG9ycyI6e319

ما عليك سوى النقر فوق نسخ ، وتثبيت Hydrogen ، ولصقه في صفحتك. سيتم تضمين CSS في كتلة التعليمات البرمجية.

أخيرًا ، استخدم CSS (مأخوذ من أعلاه):

# iso-searchform {موضع: نسبي؛ } .iso-search {padding: 10px؛ المساحة المتروكة لليمين: 50 بكسل ؛ نصف قطر الحدود: 5 بكسل ؛ الخلفية: # f8fbff ؛ الحد: 1 بكسل صلب rgba (42 ، 140 ، 255 ، .27) ؛ المخطط التفصيلي: لا شيء ؛ العرض: 100٪؛ } .iso-search: focus {border: 1px solid # ffb300؛ } .iso-search-btn {height: 40px؛ العرض: 40 بكسل ؛ الحدود: لا شيء ؛ الخلفية: لا شيء ؛ نصف قطر الحدود: 5 بكسل ؛ الموقف: مطلق. أعلى: 0؛ اليمين: 0؛ } .iso-search-btn: active، .iso-search-btn: focus {background: rgba (42، 140، 255، .27)؛ }

نقترح إدخال CSS هذا عبر Oxygen's Global CSS.

إليك ما يجب أن تبدو عليه النتيجة النهائية:

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

<?php get_search_form() ?>

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

خاتمة

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

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

أي أسئلة؟ لا تتردد في تركها في قسم التعليقات أدناه.

اشترك وانشر

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

إلغاء الاشتراك في أي وقت. نحن لا نرسل بريدًا عشوائيًا ولن نبيع أو نشارك بريدك الإلكتروني أبدًا.