Un comutator de căutare curat, glisant, poate face instantaneu site-ul dvs. WordPress să pară elegant și modern. În loc să afișați o bară de căutare completă în antet sau să o ascundeți complet, un efect de comutare menține designul dvs. ordonat, făcând căutarea ușor de accesat.
Am văzut cum acest mic detaliu al interfeței utilizatorului a făcut o mare diferență, oferind site-urilor un aspect mai rafinat, profesional, fără a adăuga dezordine.
Partea cea mai bună? Există modalități de a face acest lucru inteligent și eficient.
În acest tutorial, vă vom arăta exact cum să adăugați un efect de comutare a căutării, fluid și glisant, în WordPress. Indiferent dacă aveți un blog, un site de afaceri sau un magazin online, acest upgrade vă va ajuta să îmbunătățiți experiența utilizatorului cu o notă simplă și elegantă. 🎨
Ce este efectul de comutare a căutării în WordPress?
Efectul de comutare a căutării este o tehnică de design web care vă permite, în loc să afișați un formular de căutare, să afișați o pictogramă de căutare. Când un utilizator face clic pe ea, formularul de căutare apare cu o animație de glisare.
Formularul de căutare implicit WordPress nu arată prea bine. Multe teme WordPress de top înlocuiesc deja formularul implicit cu stilurile lor.
Cu toate acestea, dacă tema dumneavoastră folosește în continuare un formular de căutare static, simplu, atunci puteți folosi acest tutorial pentru a-l face mai ușor de utilizat.
Având în vedere acest lucru, vă vom arăta cum să adăugați cu ușurință efectul de comutare a căutării în WordPress și să faceți site-ul dvs. mai interactiv. Iată o prezentare generală rapidă a tuturor subiectelor pe care le vom acoperi în acest ghid:
- Adăugarea unui efect de comutare a căutării în WordPress
- Depanarea efectului de comutare a formularului de căutare
- Sfat bonus: Adăugați o căutare WordPress mai bună pentru site-ul dvs.
- Întrebări frecvente: Adăugarea unui efect de comutare a căutării în WordPress
- Mai multe ghiduri pentru a îmbunătăți căutarea dvs. WordPress
💡 Sfat din interior: Acest tutorial se potrivește cel mai bine utilizatorilor WordPress de nivel intermediar și avansat, deoarece necesită o înțelegere de bază a HTML / CSS.
Să începem.
Adăugarea unui efect de comutare a căutării în WordPress
Pentru a adăuga un efect de comutare a căutării în WordPress, va trebui să plasezi un bloc sau un widget pentru formularul de căutare pe site-ul tău și apoi să adaugi un cod CSS personalizat.
Mai întâi, să ne asigurăm că aveți un formular de căutare pe site-ul dvs. web.
Adăugarea unui formular de căutare într-o temă bloc cu editare completă a site-ului
Dacă utilizați o temă WordPress bazată pe blocuri cu funcția de editare completă a site-ului, atunci așa veți adăuga formularul de căutare pe site-ul dumneavoastră.
Pur și simplu vizitați Aspect » Editor din tabloul de bord WordPress. Pe ecranul de editare, veți dori să adăugați blocul „Căutare” acolo unde doriți să afișați formularul de căutare.
După aceea, nu uitați să faceți clic pe butonul „Salvare” pentru a stoca modificările.
Adăugarea unui formular de căutare în alte teme WordPress
Pentru temele WordPress fără funcția completă de editare a site-ului, puteți adăuga blocul sau widgetul de căutare în bara laterală sau în orice zonă pregătită pentru widget-uri.
Pentru a face acest lucru, veți dori să accesați Aspect » Widgeturi din tabloul de bord WordPress. Apoi, puteți adăuga blocul/widgetul „Căutare” în bara laterală unde doriți să afișați formularul de căutare.
Apoi, să găsim o imagine transparentă pentru pictograma de căutare.
Pentru acest tutorial, folosim această imagine deoarece este potrivită pentru fundaluri întunecate (nu ezitați să o folosiți pe site-ul dvs.).
Dacă trebuie să creați propria pictogramă de căutare, atunci ar fi grozav să creați o imagine PNG transparentă cu dimensiuni de cel mult 50x50 pixeli.
Următorul pas este să încărcați pictograma pe site-ul dvs. Pur și simplu accesați Media » Adăugare nou și faceți clic pe „Selectați fișiere” pentru a încărca imaginea pictogramei de căutare.
Odată încărcat, veți dori să faceți clic pe butonul „Copiere URL în clipboard” și să lipiți URL-ul într-un editor de text simplu, cum ar fi Notepad sau TextEdit.
Acum că totul este la locul lui, va trebui să adăugați un CSS personalizat pe site-ul dvs. WordPress. Vă recomandăm să utilizați WPCode, cel mai bun plugin pentru fragmente de cod, pentru a salva CSS-ul personalizat.
WPCode vă permite să adăugați cu ușurință fragmente de cod personalizate în WordPress. Este ușor de utilizat, iar codul dvs. nu va fi afectat de actualizările temei sau când treceți la o altă temă.
Unele dintre mărcile noastre partenere îl folosesc pentru a adăuga și gestiona fragmentele lor personalizate. A funcționat excepțional de bine pentru ei, iar dumneavoastră puteți afla mai multe despre acest subiect în recenzia noastră detaliată despre WPCode.
Deci, să instalăm și să activăm pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
La activare, vizitați pur și simplu pagina Fragmente de cod » + Adăugați fragment din tabloul de bord de administrare WordPress.
Pe ecranul următor, veți vedea Biblioteca de fragmente WPCode.
Plasați cursorul peste opțiunea „Adăugați codul dumneavoastră personalizat (Fragment nou)” din bibliotecă și faceți clic pe butonul „Adăugați fragment personalizat” atunci când acesta apare.
După aceea, pe ecran va apărea o listă de tipuri de cod. Pentru acest tutorial, trebuie să selectați opțiunea „Fragment HTML”.
Acest lucru se datorează faptului că veți încărca CSS-ul personalizat în antetul site-ului web folosind HTML.
De acolo, trebuie să oferiți un titlu pentru acest fragment de cod.
Poate fi orice lucru care vă ajută să identificați fragmentul.
Acum, puteți lipi următorul cod în caseta „Previzualizare cod”:
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
⚠️ Important: Nu uitați să înlocuiți /url/to/search-icon.png cu URL-ul imaginii pe care l-ați copiat anterior.
După aceea, va trebui să comutați „Inactiv” la „Activ”.
Apoi, nu uita să apeși butonul „Salvează fragment”.
Și asta e tot!
Dacă vizitați site-ul dvs. web, puteți vedea formularul dvs. de căutare cu efectul de comutare în acțiune.
Depanarea efectului de comutare a formularului de căutare
Metoda de mai sus ar funcționa cu majoritatea temelor moderne de WordPress care utilizează blocuri widget. Cu toate acestea, pentru unele teme, această metodă s-ar putea să nu funcționeze.
Acest lucru s-ar putea întâmpla dacă formularul de căutare din tema dvs. WordPress nu are clasele wp-block-search__inside-wrapper și wp-block-search__input.
În acest caz, va trebui să utilizați instrumentul Inspect pentru a afla ce clase CSS sunt utilizate de tema dvs. WordPress.
De exemplu, în captura de ecran de mai jos, tema noastră demo folosește aceste clase CSS pentru formularul de căutare.
Acum, puteți modifica codul de mai jos și puteți utiliza aceste clase CSS în schimb.
Iată un exemplu:
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Iată cum arăta pe site-ul nostru de test:
Sfat bonus: Adăugați o căutare WordPress mai bună pentru site-ul dvs.
Efectul de comutare face doar ca formularul de căutare WordPress să arate frumos. Nu afectează calitatea rezultatelor căutării de pe site-ul dvs.
WordPress vine implicit cu o funcție de căutare foarte de bază. Această funcție este adesea lentă, inexactă și poate afișa rezultate goale.
Aici intervine SearchWP, cel mai bun plugin de căutare WordPress. Acesta vă permite să înlocuiți cu ușurință funcția de căutare implicită cu un motor de căutare puternic.
L-am testat pentru a explora toate funcționalitățile sale și puteți vedea recenzia noastră completă despre SearchWP pentru a afla mai multe despre acesta.
SearchWP înlocuiește automat formularele de căutare, deci nu trebuie să editați niciun fișier de temă. Caută potriviri peste tot pe site-ul dvs. și îmbunătățește drastic calitatea rezultatelor căutării.
De asemenea, vine cu o extensie de căutare live care afișează instantaneu rezultatele pe măsură ce utilizatorii introduc interogările lor. În plus, are suport complet pentru eCommerce, ceea ce vă permite să creați o experiență de căutare WooCommerce inteligentă pe magazinul dvs. online.
Pentru instrucțiuni pas cu pas, nu ezitați să consultați ghidul nostru despre cum să îmbunătățiți căutarea WordPress cu SearchWP.
Întrebări frecvente: Adăugarea unui efect de comutare a căutării în WordPress
Aveți întrebări despre cum funcționează comutatorul de căutare sau cum să îl personalizați pe site-ul dvs. WordPress? Iată câteva întrebări frecvente pe care le primim, cu răspunsuri clare pentru a vă ajuta.
Trebuie să știu codificare pentru a adăuga un efect de comutare a căutării?
Nu prea. Deși o înțelegere de bază a HTML sau CSS poate ajuta, puteți urma pașii din acest ghid fără nicio experiență de codare.
Ce se întâmplă dacă tema mea nu afișează corect efectul de comutare?
Unele teme ar putea necesita ajustări suplimentare. Dacă comutatorul nu este afișat corect, puteți utiliza instrumentul de inspectare al browserului pentru a găsi clasele CSS ale temei dvs. și a ajusta CSS-ul personalizat așa cum este arătat în tutorial.
Acest comutator de căutare va funcționa pe dispozitive mobile?
Da! Efectul de comutare este receptiv și ar trebui să funcționeze bine atât pe desktop, cât și pe mobil. Asigurați-vă doar că îl testați pe diferite dimensiuni de ecran pentru a confirma că totul arată bine.
Pot folosi orice imagine pentru pictograma de căutare?
Da, dar este cel mai bine să folosiți o pictogramă PNG transparentă care să iasă în evidență pe fundalul site-ului dvs. Vă recomandăm să o păstrați sub 50×50 pixeli, astfel încât să arate clar și să se încarce rapid.
Mai multe ghiduri pentru a îmbunătăți căutarea dvs. WordPress
Sperăm că acest articol v-a ajutat să învățați cum să adăugați un efect de comutare a căutării în WordPress. În continuare, s-ar putea să găsiți utile aceste ghiduri:
- Cum să adăugați o bară de căutare în meniul WordPress
- Cum să căutați după categorie în WordPress
- Cum să adăugați căutare multilingvă în WordPress
- Cum să incluzi tipuri de postări personalizate în rezultatele căutării WordPress
- Cum să creezi un director de membri căutabil în WordPress
- Cum să creezi o bază de date căutabilă în WordPress
- Cum să excluzi paginile din rezultatele căutării WordPress
- Cum să adăugați funcționalitatea de căutare vocală pe site-ul dvs. WordPress
- Cele mai bune pluginuri de căutare pentru utilizatorii WordPress
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Prad
Mulțumesc pentru asta.
Interfața implicită a blocului de căutare este destul de fadă. Îmi place această implementare. Totuși, atunci când este selectată opțiunea „Doar buton”, la apăsarea pictogramei de căutare, bara de căutare apare în stânga, împingând meniul și acest lucru strică interfața. Există o modalitate de a face ca bara de căutare să apară sub butonul de căutare, așa cum se întâmplă pe multe site-uri web? Această abordare pare mult mai curată, în opinia mea.
Mulțumesc.
Suport WPBeginner
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Admin
Dennis Muthomi
Am acest efect pe un site web al unui client.
Un lucru pe care ar trebui să-l luați în considerare atunci când implementați această funcționalitate este experiența pe mobil.
Pe ecrane mai mici, ar putea fi benefic să ajustați CSS-ul pentru a vă asigura că bara de căutare extinsă nu se suprapune cu alte elemente.
Jiří Vaněk
Căutam o modalitate de a economisi spațiu în meniul meu principal, unde caseta de căutare ocupa destul de mult spațiu. Sincer, nu-mi puteam da seama cum să economisesc spațiu, deoarece meniul era destul de lung. Așa că am încercat să reduc dimensiunea casetei de căutare. După ce am citit acest articol, am aplicat soluția dvs. și este exact ceea ce căutam. Căutarea pe site-ul meu nu este folosită prea des, iar aceasta este o soluție elegantă pentru a oferi spațiu meniului principal și a reduce caseta de căutare la dimensiunea necesară. Treabă excelentă.
Suport WPBeginner
Mă bucur că ai găsit-o utilă!
Admin
James Burns
Mulțumesc mult. Exact informațiile de care aveam nevoie, prezentate într-un format ușor de înțeles.
Suport WPBeginner
You’re welcome, glad you found our content helpful
Admin
Osh
Salut,
Folosesc o temă copil, ar trebui să adaug aceste coduri în fișierele temei părinte?
Am încercat să fac asta și nu funcționează, vă rog ajutați-mă!!!
Mulțumesc
Suport WPBeginner
Ar trebui să adăugați codul la tema dvs. copil
Admin
Benjamin Rutledge
Este posibil să implementați acest lucru doar pe mobil? Tema mea are o funcție de căutare animată frumoasă pe desktop, dar doar un comutator pentru a afișa/ascunde caseta de căutare în locul logo-ului meu pe mobil.
Beth Terry
Salut. Vă mulțumesc foarte mult pentru acest cod. A trebuit să mă joc cu poziționarea pentru a face butonul de căutare să apară unde vreau, iar deoarece am vrut să apară doar în versiunea mobilă, am adăugat și CSS la interogarea media pentru ecranele de peste 800px pentru a afișa câmpul de căutare complet în loc de iconiță. L-am făcut să funcționeze excelent, dar cred că este puțin complicat pentru cei care doresc doar ceva de tip plug and play.
Puteți vizualiza rezultatele aici:
Tuturor celor care se îndoiesc, JavaScript nu este absolut necesar.
Beth Terry
De asemenea, vreau să adaug că folosesc o temă copil Twenty Twelve, care vine cu codul de căutare HTML4. Adăugarea suportului HTML5 în functions.php nu a rezolvat problema, așa că am copiat și lipit codul de căutare HTML5 pe care l-ați postat mai sus în antetul temei mele, unde doream să fie caseta de căutare.
Emily G
Bună ziua – implementez acest lucru pe un website și aș dori să folosesc FontAwesome în loc de o imagine. Nu reușesc să afișez pictograma. Aveți vreun sfat? Adaug fontul și fontul de pictograme font-family: FontAwesome;
content: “\f002″; la .search-form input[type=”search”]
Mulțumesc!
Bradley
Încearcă asta:
font: normal normal normal 1em/1 FontAwesome;
Steve
Speram atât de mult că acest lucru va funcționa pentru mine. Am lipit codul în zona CSS suplimentar a temei mele (twentytwelvechild), am adăugat search-icon.png în folderul temei mele folosind FTM și am adăugat add_theme_support(‘html5’, array(‘search-form’)); în fișierul functions.php al temei mele. Nu văd nicio schimbare și mă întreb ce am omis. Sper că cineva îmi poate oferi un indiciu. Mulțumesc.
Harmandeep Singh
Nu funcționează.
Mulțime
Mulțumesc mult, funcționează ca un farmec.
Crezi că există o modalitate de a face câmpul de căutare să apară de la dreapta la stânga (spre deosebire de la stânga la dreapta ca acum)?
Marimar
Aliniați textul la dreapta
text-align: right;
Glisează pe cealaltă parte.
Tony López
Mulțumesc! Funcționează perfect.
Cato
Da... exact cum mă gândeam, asta nu funcționează deloc. Cum ar trebui să funcționeze fără JS oricum?
Cato
Hmmm, asta e cam vechi, dar... nu este necesar JavaScript aici, nu? Ce fel de magie neagră este asta?
Suport WPBeginner
În loc de JS, această tehnică folosește CSS.
Admin
SiRetu
Mulțumesc pentru cod… Este receptiv? Adică, vreau ca câmpul de căutare să fie complet afișat pe mobil. Este posibil?
Panfi
Not working for me and wonder why
Cassy
Am reușit să fac asta pe Genesis, dar formularul meu de căutare este în bara mea de navigare și, când lățimea ecranului este relativ prea mică, formularul de căutare se mută în jos.
Sohan
Funcționează!
Mulțumesc foaaaaaaaarte mult!
Anur
Nu cred că funcționează pe Genesis
Cassy
Am reușit să-l fac să funcționeze pe Genesis. Trebuie să mut fișierul search-icon.png în folderul de imagini al temei copil Genesis. Apoi, în funcție de unde plasați formularul de căutare, al meu este în bara de navigare, deci este puțin diferit, ajustați stilul CSS după placul dumneavoastră. Am fost nevoit să modific clasa ".genesis-nav-menu .search input" pentru a-l face să funcționeze.
Laura
Salut Cassy, Poți să oferi mai multe informații despre cum ai modificat clasa .genesis-nav-menu .search input? Nu reușesc să o fac să funcționeze. Mulțumesc!
Maria
Salut! Folosesc Genesis și nu pot face să funcționeze acest efect. Aveți vreun sfat de ce?
Anur
da aceeași problemă sunt pe genesis cu tema enterprise pro nu funcționează.
Oricine are o soluție pentru a face acest lucru să funcționeze pe genesis..
Roy
acest lucru este cu adevărat grozav! Este posibil ca pictograma să stea static în dreapta, în timp ce formularul se extinde spre stânga? Nu reușesc să-mi dau seama!
Joshua Farr
Salutări – Vă mulțumesc pentru acest cod grozav. Am încercat să-l inserez pe site-ul unui client la care lucrez, folosind versiunea HTML5 a codului, am plasat bucata suplimentară în functions.php și am adăugat tot CSS-ul. Am pus o pictogramă de căutare și am făcut ca formularul să apară așa cum vreau pe site – va face chiar și toată comutarea dorită – dar când introduc textul pe care vreau să-l caut pentru a-l testa, nu pot trimite căutarea pentru a vedea rezultatele căutării. Folosim o temă woocommerce, „Mystile”, care are un formular de căutare implicit (care funcționează când este introdus), dar prefer mult aspectul și funcționalitatea formularului menționat pe această pagină.
Am încercat să punem codul formularului de căutare WooCommerce unul lângă altul cu codul pe care l-ați oferit mai sus, am încercat să înlocuim bucăți pentru a „combina” cele două… dar fără succes.
Orice recomandări ar fi extrem de utile.
Mulțumesc!
-Josh
Suport WPBeginner
Pot exista multe motive pentru acest lucru, nu este posibil să vă ajutăm cu probleme de compatibilitate a temelor.
Admin
Rajeesh Nair
Acum, asta e ceva interesant. Deși sunt un simplu începător și folosesc opțiunea de căutare care vine implicit cu tema blogului, care este ca un pop-up (nu exact un pop-up, ci CSS și nu javascript) și afișează bara de căutare.
Dar ceea ce caut exact este cum să afișez căutarea Google împreună cu căutarea pe blog, așa cum se găsește pe bloguri populare precum ListVerse și altele. Vă rog să mă ghidați!
Suport WPBeginner
Aruncă o privire la ghidul nostru despre cum să adăugați căutarea Google în WordPress.
Admin
adolf witzeling
Un alt tutorial grozav. Îl voi adăuga pe site-ul meu - doar pentru că este cool.
alexisnicholson
Codul arată fabulos, apreciez eforturile tale, cu siguranță voi încerca acest lucru pentru proiectul meu de WordPress.
Codingbrains
Shahraar Khan
Un demo ar fi util.. De asemenea, ce înseamnă utilizarea atributului role=\"search\" în tag-ul form, la ce este folosit atributul \"role\"?
Susan Silver
Căutam un tutorial simplu despre asta. Mulțumesc! Ați făcut deja unul despre meniurile glisante, precum cele din aplicația mobilă Facebook? Aceste meniuri devin foarte populare, chiar și pentru aplicațiile desktop.
Suport WPBeginner
De fapt, avem, verificați cum să adăugați un meniu cu panou glisant în WordPress.
Admin