Cum se adaugă un câmp de căutare în meniul secundar al lui Divi

În tutorialul Divi de astăzi, vă vom arăta cum să adăugați un câmp de căutare în meniul dvs. secundar. Meniul secundar este, de asemenea, cunoscut sub numele de antetul paginii dvs. și locul în care încercați să vă încadrați în unele informații practice despre site-ul sau compania dvs. Adăugarea unui câmp de căutare la acesta ar putea fi o cerere pe care ați avut-o de la un client sau o nevoie pe care o aveți pentru propriul site web. Oricum ar fi, vă vom arăta cum puteți integra cu ușurință acest câmp de căutare în navigarea dvs. secundară atunci când utilizați tema Divi.

Rezultat

Înainte de a ne arunca cu capul în diferiții pași pe care va trebui să-i faceți pentru a ajunge acolo; ar putea fi interesant să vă arăt rezultatul în avans. Urmând pașii din postare și adăugând modificări ale aspectului CSS, veți obține următorul rezultat într-un meniu secundar implicit:

De ce să adăugați un câmp de căutare în meniul dvs. secundar

Adăugarea unei posibilități de căutare la meniul secundar este unul dintre lucrurile pe care ați fi încercat să le faceți. Dar, spre deosebire de meniul principal, antetul nu are o pagină separată în WordPress care vă ajută să adăugați lucruri manual, fără a fi nevoie să adăugați linii de cod PHP în fișierul header.php al site-ului dvs. web.

Cu toate acestea, adăugarea unei posibilități de căutare în meniul secundar poate fi un lucru interesant. Să aruncăm o privire la câteva motive pentru care ați dori să adăugați unul.

Oferiți vizitatorilor dvs. o posibilitate de căutare de la început

Aveți tot felul de vizitatori pe site-ul dvs. Unii dintre ei caută să exploreze lucruri și să-și ia timp, în timp ce alții doresc să găsească informații specifice imediat. Adăugând câmpul dvs. de căutare la meniul secundar, veți avea garanția că vizitatorii care caută ceva anume au capacitatea de a face asta imediat. Deoarece un meniu secundar este situat în partea de sus a paginii, vizitatorii care se grăbesc vor aprecia efortul care le îmbunătățește experiența utilizatorului.

Pentru a vă salva meniul principal din câmpul de căutare

Desigur, un alt lucru pe care l-ați putea face este să adăugați câmpul de căutare în meniul principal. Dar, în unele cazuri, este posibil să nu doriți să faceți asta. De exemplu; dacă doriți să vă concentrați asupra elementelor de meniu sau dacă nu doriți să amestecați elementele de meniu cu câmpul de căutare. Un alt motiv ar putea fi faptul că aveți deja câteva elemente de meniu care fac ca meniul dvs. principal să pară ocupat și nu doriți să adăugați un câmp de căutare deasupra.

Accentuați câmpul de căutare fără a avea un meniu principal fulgerător

Majoritatea oamenilor tind să mențină meniul principal sobru și să facă meniul secundar să apară. În primul rând, pentru că vor să arate diferența evidentă dintre cele două meniuri. Și secundar, deoarece meniul secundar are adesea unele lucruri pe care doresc să le sublinieze (cum ar fi pictogramele de pe rețelele sociale). Când decideți să integrați câmpul de căutare și în meniul secundar, acesta va fi evidențiat automat și va stimula vizitatorii să caute și să găsească exact ceea ce caută.

Cum se adaugă un câmp de căutare în meniul secundar al lui Divi

Abonați-vă la canalul nostru Youtube

Adăugați câmpul de căutare în antetul fișierului PHP

Acum, pentru a adăuga de fapt câmpul de căutare la antetul dvs., așa cum se arată în imaginea de mai jos, va trebui să adăugați în primul rând ceva la fișierul header.php al site-ului dvs. web. Linia de cod de care veți avea nevoie este următoarea:

<? php get_search_form (); ?>

Continuați și copiați această linie de cod PHP și accesați tabloul de bord WordPress. În tabloul de bord WordPress, accesați Aspect> Editor> header.php.

Acum puteți plasa linia de cod oriunde doriți să apară bara de căutare. Din moment ce dorim să apară chiar lângă pictogramele de pe rețelele de socializare, vă vom arăta exact unde să îl plasați în cod. Va trebui să-l plasăm chiar înainte de închiderea meniului secundar, a containerului și a antetului superior.

Stilizați câmpul de căutare

În mod implicit, câmpul de căutare pare puțin depășit. Probabil că veți dori să schimbați unele lucruri doar pentru a face să arate așa cum doriți și pentru a se potrivi cu aspectul și restul site-ului dvs. web. Acestea sunt trei lucruri pe care probabil veți dori să le modificați: eticheta de căutare, introducerea căutării și introducerea butonului.

Dacă nu efectuați modificări CSS câmpului de căutare, va apărea în mod implicit în meniul secundar:

Care nu este în mod evident rezultatul final pe care vrem să îl obținem. Din fericire, putem face cât mai multe modificări pe câmp dorim. În următoarea parte a acestei postări, vă vom arăta cum să modificați toate elementele câmpului de căutare și vom distribui, de asemenea, liniile de cod CSS pentru a obține următorul rezultat:

Eliminați / modificați eticheta de căutare

Primul element care face parte din câmpul de căutare este eticheta de căutare. Acesta este textul care apare care explică oamenilor că pot căuta orice pe site folosind câmpul. Cu toate acestea, această etichetă nu este necesară. Toată lumea știe în zilele noastre cum funcționează un câmp de căutare. Puteți face oricând dispariția etichetei de căutare adăugând „display: none;” la CSS-ul etichetei respective. Sau, puteți schimba aspectul etichetei.

Clasa de care va trebui să faceți modificări etichetei de căutare este „.screen-reader-text”. Așa cum se arată în exemplul de mai jos, îl puteți dezactiva de la apariție.

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

Stilizați datele de căutare

Următorul lucru pe care ați putea dori să îl stilizați este introducerea căutării. Pentru a face orice ajustări la această intrare, plasați toate liniile de cod CSS între următoarele paranteze:

 input#s
{

}

Stilizați introducerea butonului

Și, în sfârșit, avem și stilul butonului. Pentru a aduce modificări acestei părți a câmpului de căutare, plasați liniile de cod CSS între următoarele paranteze:

input#searchsubmit
{
}

Cod CSS necesar pentru exemplul nostru

După ce ați făcut modificarea PHP, puteți obține instantaneu rezultatul afișat mai sus accesând tabloul de bord WordPress> Divi> Opțiuni temă> General> și adăugând următoarele linii de cod CSS în câmpul Personalizat:

.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;
}}

Rezultat

Acum, că am parcurs toți pașii, să aruncăm o privire asupra modului în care ar trebui să arate antetul:

Gânduri finale

În acest tutorial, v-am arătat cum să adăugați un câmp de căutare în meniul dvs. secundar. În afară de aceasta, v-am arătat și cum să modificați elementele din câmpul de căutare respectiv și v-am prezentat un exemplu de linii de cod CSS pe care le puteți copia și lipi pentru a le folosi. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de D Line / shutterstock.com