Un formular de căutare în format wordpress

Un formular de căutare în format wordpress

Afișăm forma căutării WordPress

WordPress adaugă clase implicite CSS la HTML generate de diverse etichete de șabloane din cadrul temei. Temele WordPress utilizează eticheta șablon pentru a afișa formularul de căutare. Această funcție poate afișa două forme de căutare diferite: una pentru teme pe HTML4 și a doua pentru teme cu suport HTML5. Dacă fișierul functions.php tema are add_theme_support string ( 'html5', array ( 'căutare formular')). atunci această etichetă șablon va afișa formularul de căutare în HTML5. În orice alt caz, formularul va fi afișat în HTML4.







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

Următorul cod va fi afișat dacă eticheta șablonului get_search_form () o imprimă în format HTML4:







Și acest cod va fi rezultatul unei teme cu suport HTML5.

În această lecție vom folosi formularul de căutare pe HTML5. Dacă tema dvs. generează un formular pe HTML4, atunci adăugați următoarea linie de cod în fișierul functions.php al temei:

După aceea, asigurați-vă că codul este acum dat ca în exemplul 2 de mai sus. Următorul pas este de a plasa formularul de căutare în locul în care tema ta cerea cel mai mult.

Adăugarea unui efect de plecare în formularul de căutare WordPress

Mai întâi avem nevoie de o imagine - o pictogramă de căutare. Tema standard WordPress Twenty Thirteen conține o mică pictogramă mică, și asta vom lua pentru articolul nostru. Cu toate acestea, nu ezitați să vă creați propria, de exemplu, în Photoshop sau să o descărcați din rețea. Doar asigurați-vă că numele fișierului este search-icon.png.

Acum trebuie să încărcați această pictogramă în dosarul imagine din tema. Conectați-vă la site-ul dvs. prin intermediul unui client FTP, cum ar fi Filezilla sau Total Commander, și deschideți directorul cu tema.

Acum - ultimul și cel mai important pas. Trebuie să adăugați următoarele stiluri CSS la foaia de stil a temei:

Este important să știm despre acest cod că conține efecte de tranziție CSS3, care ne permit să creăm un efect de plecare pentru formular. De asemenea, merită menționat că trebuie să ajustați poziția pictogramei de căutare și a formularului în funcție de marcarea temei.







Articole similare

Trimiteți-le prietenilor: