كيفية إضافة حقل بحث إلى قائمة Divi الثانوية

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

نتيجة

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

لماذا تضيف حقل بحث إلى قائمتك الثانوية

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

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

قدم للزائرين إمكانية البحث من البداية

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

لحفظ القائمة الأساسية الخاصة بك من حقل البحث

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

أكد على حقل البحث دون وجود قائمة أساسية مبهرجة

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

كيفية إضافة حقل بحث إلى قائمة Divi الثانوية

اشترك في قناتنا على اليوتيوب

أضف حقل البحث إلى ملف PHP الرئيسي

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

<؟ php get_search_form ()؛ ؟>

امض قدمًا وانسخ سطر كود PHP وانتقل إلى لوحة معلومات WordPress الخاصة بك. داخل لوحة معلومات WordPress الخاصة بك ، انتقل إلى المظهر> المحرر> header.php.

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

نمط حقل البحث الخاص بك

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

إذا لم تقم بإجراء أي تعديلات على CSS في حقل البحث ، فسيبدو بشكل افتراضي كما يلي في قائمتك الثانوية:

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

إزالة / تعديل تسمية البحث

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

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

.screen-reader-text {
display: none;
}

نمط إدخال البحث الخاص بك

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

 input#s
{

}

نمط إدخال الزر الخاص بك

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

input#searchsubmit
{
}

مطلوب كود CSS على سبيل المثال لدينا

بعد إجراء تعديل PHP ، يمكنك تحقيق النتيجة الموضحة أعلاه على الفور من خلال الانتقال إلى لوحة معلومات WordPress> Divi> Theme Options> General> وإضافة الأسطر التالية من كود CSS إلى الحقل المخصص:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

نتيجة

الآن وقد مررنا بجميع الخطوات ، دعنا نلقي نظرة أخرى على الشكل الذي يجب أن يبدو عليه رأسك:

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة D Line / shutterstock.com