Hur du lÀgger till en sökvÀxlingseffekt i WordPress

Har du sett vÀxlingssökningsikonen pÄ mÄnga populÀra webbplatser? Ta en titt pÄ vÄrt systerprojekt List25 för att se ett exempel. Tanken Àr att visa en enkel sökikon, och nÀr anvÀndaren klickar pÄ den glider sökformerna ut, Àven kÀnd som vÀxeleffekt. Det Àr en snygg effekt som ocksÄ sparar utrymme och gör att anvÀndare kan fokusera pÄ innehÄll. För att inte tala, detta Àr idealiskt för Àmnen som svarar pÄ mobila enheter. I den hÀr artikeln visar vi dig hur du lÀgger till en sökvÀxlingseffekt i WordPress-teman.

Leta efter vÀxlingseffekt i aktion

Notera: Denna handledning Àr för mellananvÀndare med praktisk kunskap om WordPress-, HTML- och CSS-mallar. AnvÀndare av nybörjare uppmuntras att öva först pÄ den lokala servern.

Visa WordPress sökformulÀr

WordPress lÀgger till standard CSS-klasser till HTML som genereras av olika malltaggar inom ett tema. AnvÀnd WordPress temamall för att visa sökformulÀr. Du kan generera tvÄ olika sökformer, en för HTML4-teman och en för HTML5-stödda teman. Om ditt tema har raden add_theme_support ('html5', matris ('sökformulÀr')) i filen features.php, kommer denna malltagg att generera ett HTML5-sökformulÀr. Annars genererar det HTML4-sökformulÀret.

Ett annat sÀtt att ta reda pÄ vilken form ditt Àmne genererar Àr genom att titta pÄ kÀllkoden för sökformulÀret.

Detta Àr formmalltaggen get_search_form () som kommer att visas nÀr ditt tema inte har HTML5-stöd:

  

Y esta es la forma que generarĂĄ para un tema con soporte HTML5.

  

Por el bien de este tutorial, utilizaremos el formulario de bĂșsqueda HTML5. Si su tema genera un formulario de bĂșsqueda HTML4, agregue esta lĂ­nea de cĂłdigo en el archivo functions.php de su tema:

add_theme_support('html5', array('search-form'));
 

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 visa det med vÀxeleffekten.

LÀgg till vÀxeleffekt till WordPress sökformulÀr

Det första du behöver Àr en sökikon. StandardvÀrdet Twenty Thirteen-tema i WordPress kommer med en mycket fin liten ikon, och vi kommer att anvÀnda det i vÄr handledning. KÀnn dig dock fri att skapa din i Photoshop eller ladda ner en frÄn webben. Se bara till att filen heter search-icon.png.

Nu mÄste du ladda denna sökikon i ditt temas bildermapp. Anslut till din webbplats med en FTP-klient som Filezilla och öppna din temakatalog.

Nu Àr detta det sista och viktigaste steget. Du mÄste lÀgga till denna CSS i ditt temas stilblad:

 .site-header .search-form {
 	position: absolute;
 	right: 200px;
 	top: 200px;
 }
 
 .site-header .search-field {
 	background-color: transparent;
 	background-image: url(images/search-icon.png);
 	background-position: 5px center;
 	background-repeat: no-repeat;
 	background-size: 24px 24px;
 	border: none;
 	cursor: pointer;
 	height: 37px;
 	margin: 3px 0;
 	padding: 0 0 0 34px;
 	position: relative;
 	-webkit-transition: width 400ms ease, background 400ms ease;
 	transition:         width 400ms ease, background 400ms ease;
 	width: 0;
 }
 
 .site-header .search-field:focus {
 	background-color: #fff;
 	border: 2px solid #c3c0ab;
 	cursor: text;
 	outline: 0;
 	width: 230px;
 }
 .search-form
 .search-submit { 
 display:none;
 }
 
 

Det viktiga att tÀnka pÄ med denna CSS Àr övergÄngseffekterna CSS3 som gör att vi enkelt kan skapa vÀxlingseffekten. Observera ocksÄ att du fortfarande mÄste justera positionen för sökikonen och formulÀret enligt din temadesign.

Vi hoppas att den hÀr artikeln har hjÀlpt dig att lÀgga till en sökvÀxlingseffekt till ditt WordPress-tema. Vad tycker du om vÀxlingssökningsformulÀret? 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+.