Hur man lägger till sökövergångar i WordPress

Har du sett enhetssökningsikonen på många populära webbplatser? Ta en titt på våra List25-systerprojekt för att se ett exempel. Tanken är att visa en enkel sökikon, och när användaren klickar på den kommer sökformulären att glida ut, även känd som en övergångseffekt. Det är en snygg effekt som också sparar utrymme och låter användaren fokusera på innehållet. För att inte nämna, detta är idealiskt för mobila responsiva teman. I den här artikeln kommer vi att visa dig hur du lägger till sökövergångar till WordPress-teman.

Notera: Den här handledningen är avsedd för medelstora användare med praktiska kunskaper om WordPress-, HTML- och CSS-mallar. Nybörjare uppmuntras att öva först på den lokala servern.

Se WordPress sökformulär

WordPress lägger till standard CSS-klasser till HTML som genereras av olika malltaggar i ett tema. Använd WordPress-temamallen för att visa sökformulär. Du kan skapa två olika sökformulär, en för HTML4-teman och en för HTML5-stödda teman. Om ditt tema har raden add_theme_support(‘html5’, matrix(‘search pattern’)) i filen features.php, kommer denna malltagg att generera en HTML5-sökmall. Annars genererar det HTML4-sökformulär.

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

Här är ett exempel på get_search_form() som visas när ditt tema inte har HTML5-stöd:

Detta är en generisk form för ett tema med HTML5.

För den bästa handledningen, använd HTML5-exemplet nedan. De har ett gemensamt tema i HTML4-form, aggregat och en enda rad kod och arkivfunktioner. Ämne:

add_theme_support(‘html5’, array(‘sökmall’));

När du har sett till att ditt sökformulär genererar ett HTML5-formulär är nästa steg att placera sökformuläret där du vill att det ska visas med övergången.

Lägg till enhetseffekt i WordPress sökformulär

Det första du behöver är en sökikon. Standardtemat Twenty Thirteen i WordPress kommer med en mycket trevlig liten ikon och vi kommer att använda den i vår handledning. Men skapa gärna ditt foto i Photoshop eller ladda ner det från webben. Se bara till att filen heter search-icon.png.

Nu måste du ladda denna sökikon i ditt temas bildmapp. Anslut till din webbplats med en FTP-klient som Filezilla och öppna mappen teman.

Nu är detta det sista och viktigaste steget. Du måste lägga till denna CSS till ditt temas stilmall:

title .site .search-form {
Absolut position;
höger: 200px;
topp: 200px;
}

.site-header .search-field {
bakgrundsfärg: transparent;
bakgrundsbild: url (image/search-icon.png);
bakgrundsposition: mitten 5px;
bakgrundsupprepning: ingen upprepning;
bakgrundsstorlek: 24px 24px;
gräns: ingen;
pekare: pekare;
höjd: 37px;
marginal: 3px 0;
stoppning: 0 0 0 34px;
Relativ position;
-webkit-transition: enkel bredd 400ms, enkel bakgrund 400ms;
övergångar: lätt bredd 400ms, bakgrund 400ms lätt;
bredd: 0;
}

.site-header .search-field: focus {
bakgrundsfärg: #fff;
kantlinje: 2px fast #c3c0ab;
markör: text;
Kontur: 0;
bredd: 230px;
}
.Formulärsökning
.search-submit {
inte på displayen;
}

Det viktiga att tänka på med denna CSS är att CSS3-övergångar gör att vi enkelt kan skapa övergångar. Observera också att du fortfarande behöver justera positionen för sök- och formulärikonerna enligt din temadesign.

Vi hoppas att den här artikeln hjälpte dig att lägga till sökbyteseffekten till ditt WordPress-tema. Vad tycker du om utbytessökformulär? Vi ser fler och fler webbplatser som använder denna effekt. Lämna dina kommentarer och frågor i kommentarerna nedan eller gå med i konversationen på Google+.