Slik legger du til et søk Bytt effekt i WordPress

Har du sett søkeikonet med bytteeffekt på mange populære nettsteder? Ta en titt på vårt søsters prosjekt List25 for et eksempel. Tanken er å vise et enkelt søkeikon, og når brukeren klikker på den, slettes søkeformene også kjent som bytteeffekten. Det er en fin effekt som også sparer plass og lar brukerne fokusere på innholdet. For ikke å nevne, dette er flott for mobile responsive temaer. I denne artikkelen vil vi vise deg hvordan du legger til en søkekrypseffekt i WordPress Themes.

Merk: Denne opplæringen er for mellomliggende brukere med kjennskap til WordPress-maltekoder, HTML og CSS. Begynner nivå brukere anbefales å øve på lokal server først.

Viser WordPress søkeskjema

WordPress legger til standard CSS-klasser til HTML generert av ulike malemerker i et tema. WordPress-temaer bruker mal tagg for å vise søkeskjema. Det kan sende ut to forskjellige søkeskjemaer, en for HTML4-temaer og en for temaer med HTML5-støtte. Hvis temaet ditt har add_theme_support ('html5', array ('søk-skjema')) linje i functions.php-filen, vil denne maltappen sende ut et HTML5-søknadsskjema. Ellers vil det vise HTML4 søkeformular.

En annen måte å finne ut hva skjemaet ditt genererer, er å se på søkeskjemaets kildekode.

Dette er skjemaet get_search_form () malemerken vil vises når temaet ditt ikke har HTML5-støtte:

 
 Søk etter:     

Og dette er skjemaet det vil generere for et tema med HTML5-støtte.

   Søk etter:     

For denne veiledningens skyld vil vi bruke HTML5-søknadsskjemaet. Hvis temaet ditt genererer HTML4-søk skjema, legger du til denne linjen med kode i temaets funksjoner.php-fil:

 add_theme_support ('html5', array ('søk-skjema')); 

Når du har sørget for at søkeskjemaet ditt genererer HTML5-skjema, er neste trinn å plassere søkeskjemaet der du vil vise det med bytteffekten.

Legge til vekslingseffekten til WordPress-søknadsskjemaet

Første du trenger er et søkikon. Standard Twenty Thirteen temaet i WordPress kommer med et veldig fint lite ikon, og vi vil bruke det i vår opplæringsveiledning. Men vær så snill å lage din egen i Photoshop eller last ned en fra nettet. Bare vær sikker på at filen heter search-icon.png.

Nå må du laste opp dette søkeikonet til temaets bildermappe. Koble til nettstedet ditt ved hjelp av en FTP-klient som Filezilla, og åpne temakatalogen.

Nå er dette det siste og mest avgjørende skrittet. Du må legge til dette CSS til temaets stilark:

 .site-header. search-form posisjon: absolutt; høyre: 200px; topp: 200px;  .site-header. search-field bakgrunnsfarge: gjennomsiktig; bakgrunnsbilde: url (bilder / søk-ikon.png); bakgrunnsposisjon: 5px senter; bakgrunn-gjentak: ikke-gjenta; bakgrunnsstørrelse: 24px 24px; grense: ingen; markør: pointer; høyde: 37px; margin: 3px 0; polstring: 0 0 0 34px; stilling: relativ; -webkit-overgang: bredde 400ms enkel, bakgrunn 400ms enkel; Overgang: Bredde 400ms enkel, bakgrunn 400ms enkel; bredde: 0;  .site-header. search-field: fokus bakgrunnsfarge: #fff; grense: 2px solid # c3c0ab; markør: tekst; oversikt: 0; bredde: 230px;  .search-form .search-submit display: none;  

Det viktige å merke seg om dette CSS, er CSS3 overgangseffekter som gjør det mulig for oss å skape bytteffekten med letthet. Vær også oppmerksom på at du fortsatt må justere plasseringen av søkeikonet og skjema i henhold til temaets layout.

Vi håper denne artikkelen har hjulpet deg med å legge til søkeveksjonseffekt i WordPress-temaet ditt. Hva er dine tanker på skjermbildet? Vi ser flere og flere nettsteder som bruker denne effekten. Legg igjen din tilbakemelding og spørsmål i kommentarene under, eller bli med i samtalen på Google+.