Cum de a adăuga un efect de căutare Toggle în WordPress

Ați văzut pictograma de căutare cu efect de comutare pe multe site-uri populare? Uitați-vă la proiectul nostru sursă List25 pentru un exemplu. Ideea este să afișați o simplă pictogramă de căutare și atunci când utilizatorul face clic pe ea, formele de căutare se afișează și sub numele de efectul de comutare. Este un efect elegant care economisește spațiu și permite utilizatorilor să se concentreze asupra conținutului. Sa nu mai vorbim, acest lucru este grozav pentru teme mobile responsabile. În acest articol, vă vom arăta cum să adăugați un efect de schimbare a căutării în teme WordPress.

Notă: Acest tutorial este pentru utilizatorii intermediare cu cunoștințe de lucru despre etichetele de șabloane WordPress, HTML și CSS. Utilizatorii de nivel începător sunt sfătuiți să practice pe serverul local mai întâi.

Afișarea formularului de căutare WordPress

WordPress adaugă clase implicite CSS la HTML generate de etichete șablon diferite într-o temă. Temele WordPress se folosesc șablon pentru a afișa formularul de căutare. Poate afișa două forme de căutare diferite, unul pentru teme HTML4 și unul pentru teme cu suport HTML5. Dacă tema ta are add_theme_support ("html5", array ("formular de căutare")) line în fișierul functions.php, atunci această etichetă șablon va afișa un formular de căutare HTML5. În caz contrar, va afișa formularul de căutare HTML4.

Un alt mod de a afla ce formă generează tema dvs. este să examinați codul sursă al formularului de căutare.

Acesta este formularul get_search_form () se va afișa atunci când tema dvs. nu are suport HTML5:

 
 Caută:     

Și aceasta este forma pe care o va genera pentru o temă cu suport HTML5.

   Caută:     

Din motive de acest tutorial, vom folosi formularul de căutare HTML5. Dacă tema dvs. generează formularul de căutare HTML4, atunci adăugați această linie de cod în fișierul functions.php al temei:

 add_theme_support ("html5", array ("formular de căutare")); 

După ce vă asigurați că formularul dvs. de căutare generează formularul HTML5, următorul pas este plasarea formularului de căutare în locul în care doriți să îl afișați cu efectul de comutare.

Adăugarea efectului Toggle în Formularul de căutare WordPress

Primul lucru de care veți avea nevoie este o pictogramă de căutare. Tema implicită Twenty Thirteen în WordPress vine cu o mică pictogramă foarte frumoasă și vom folosi asta în tutorialul nostru. Cu toate acestea, nu ezitați să creați propria dvs. în Photoshop sau să descărcați unul de pe web. Asigurați-vă că fișierul este denumit search-icon.png.

Acum trebuie să încărcați această pictogramă de căutare în dosarul pentru imagini al temei. Conectați-vă la site-ul dvs. Web folosind un client FTP, cum ar fi Filezilla, și deschideți directorul de teme.

Acum este pasul final și cel mai important. Trebuie să adăugați acest CSS în foaia de stil a temei:

 .site-header. formular de căutare position: absolute; dreapta: 200px; top: 200px; . header-site. câmp de căutare background-color: transparent; Imagine de fundal: url (imagini / search-icon.png); fundal-poziție: 5px centru; background-repeat: nu-repeta; dimensiunea fundalului: 24px 24px; frontieră: nici una; cursor: pointer; înălțime: 37px; margine: 3px 0; umplutură: 0 0 0 34px; poziție: relativă; -webkit-tranziție: lățime 400ms ușurință, fundal 400ms ușurează; tranziție: lățime 400ms ușurință, fundal 400ms ușurință; lățime: 0; . header-site. câmp de căutare: focalizare background-color: #fff; frontieră: 2px solid # c3c0ab; cursor: text; contur: 0; lățime: 230px;  .search-form .search-submit display: none;  

Cel mai important lucru pe care trebuie să-l observați despre acest CSS este efectele de tranziție CSS3 care ne permit să creăm cu ușurință efectul de comutare. De asemenea, rețineți că va trebui totuși să ajustați poziționarea pictogramei de căutare și a formularului în funcție de aspectul temei.

Sperăm că acest articol v-a ajutat să adăugați efectul de comutare a căutării în tema WordPress. Care sunt gândurile tale în formularul de căutare? Vedem tot mai multe site-uri folosind acest efect. Lăsați-vă feedback și întrebări în comentariile de mai jos sau alăturați-ne în conversația de la Google+.