Så här lägger du till en sökning Växla effekt i WordPress

Har du sett sökikonen med växlande effekt på många populära webbplatser? Ta en titt på vårt systerprojekt List25 för ett exempel. Tanken är att visa en enkel sökikon, och när användaren klickar på den, släcks sökformulären också som växelverkan. Det är en snygg effekt som också sparar utrymme och låter dina användare fokusera på innehållet. För att inte nämna, det här är bra för mobila responsiva teman. I den här artikeln kommer vi att visa hur du lägger till en sökväxlande effekt i WordPress-teman.

Notera: Denna handledning är för mellanliggande användare med kunskap om WordPress-malltaggar, HTML och CSS. Nybörjarnivåanvändare rekommenderas att träna på lokal server först.

Visar WordPress-sökformulär

WordPress lägger till standard CSS-klasser till HTML som genereras av olika malltaggar inom ett tema. WordPress-teman använder malltagg för att visa sökformulär. Det kan mata ut två olika sökformulär, en för HTML4-teman och en för teman med HTML5-stöd. Om ditt tema har add_theme_support ('html5', array ('sökformulär')) linje i functions.php-filen, så kommer denna malltagare att skriva ut en HTML5-sökformulär. Annars kommer det att mata ut HTML4-sökformulär.

Ett annat sätt att ta reda på vilken form ditt tema genererar är att titta på källkoden för sökformuläret.

Detta är formen get_search_form () malltaggen visas när ditt tema inte har HTML5-stöd:

 
 Söka efter:     

Och det här är det formulär som det genererar för ett tema med HTML5-support.

   Söka efter:     

För denna handledningens skull använder vi HTML5-sökformuläret. Om ditt tema genererar HTML4-sökformulär, lägg till den här koden i ditt temas funktioner.php-fil:

 add_theme_support ('html5', array ('sökformulär')); 

När du väl har kontrollerat att ditt sökformulär genererar HTML5-formulär, är nästa steg att placera sökformuläret där du vill visa det med växelverkan.

Lägga till växlingseffekten i WordPresss sökformulär

Det första du behöver är en sökikon. Standard Twenty Thirteen-temat i WordPress kommer med en mycket fin liten ikon, och vi kommer att använda det i vår handledning. Du är dock fri att skapa din egen i Photoshop eller ladda ner en från webben. Se bara till att filen heter search-icon.png.

Nu måste du ladda upp den här sökikonen till ditt temas bildmapp. Anslut till din webbplats med en FTP-klient som Filezilla, och öppna din temakatalog.

Nu är detta det sista och mest avgörande steget. Du måste lägga till den här CSS i temat stilark:

 .site-header. search-form position: absolute; höger: 200px; topp: 200px;  .site-header. search-field bakgrundsfärg: transparent; bakgrundsbild: url (bilder / sök-ikon.png); bakgrundsställning: 5px center; background-repeat: no-repeat; bakgrundsstorlek: 24px 24px; gränsen: ingen; markör: pekare; höjd: 37px; marginal: 3px 0; vaddering: 0 0 0 34px; position: relativ; -webkit-övergång: bredd 400ms lätthet, bakgrund 400ms lätthet; övergång: bredd 400ms lätt, bakgrund 400ms lättnad; bredd: 0;  .site-header. search-field: fokus bakgrundsfärg: #fff; gränsen: 2px solid # c3c0ab; markör: text; kontur: 0; bredd: 230px;  .search-form .search-submit display: none;  

Det viktiga att notera om denna CSS, är CSS3-övergångseffekterna som gör att vi enkelt kan skapa växelverkan. Observera också att du fortfarande måste justera placeringen av sökikonen och formulera enligt ditt temas layout.

Vi hoppas att den här artikeln hjälpte dig att lägga till sökväxlande effekt i ditt WordPress-tema. Vad är dina tankar på skiftformuläret? Vi ser fler och fler webbplatser som använder denna effekt. Lämna din feedback och frågor i kommentarerna nedan eller gå med i samtalet på Google+.