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

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

Har du sett sökikonen med vÀxlingseffekt 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 glider sökformulÀret ut, Àven kÀnt som vÀxlingseffekten. 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 visar vi dig hur du lÀgger till en sökvÀxlingseffekt i WordPress-teman.

Notera: Denna handledning Àr för mellananvÀndare med kunskap om WordPress-malltaggar, HTML och CSS. NybörjarnivÄanvÀndare rekommenderas att trÀna pÄ den lokala servern först.

Visar WordPress-sökformulÀr

WordPress lĂ€gger till standard CSS-klasser i HTML som genereras av olika malltaggar i ett tema. WordPress-teman anvĂ€nder malltagg för att visa sökformulĂ€ret. 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 (‘search-form’)) rad i functions.php-filen, kommer den hĂ€r malltaggen att mata ut ett HTML5-sökformulĂ€r. Annars skickas 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 formulÀret som get_search_form () -malltaggen visas nÀr ditt tema inte har HTML5-stöd:


<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Och det hÀr Àr den form det kommer att generera för ett tema med HTML5-stöd.


<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search 
" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

För denna handledning kommer vi att anvÀnda HTML5-sökformulÀret. Om ditt tema genererar HTML4-sökformulÀr lÀgger du till den hÀr raden kod i temas funktioner.php-fil:


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

NÀr du vÀl har sÀkerstÀllt 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Àxlingseffekten.

LÀgga till vÀxlingseffekten i WordPress-sökformulÀret

Det första du behöver Àr en sökikon. Standard Twenty Thirteen-temat i WordPress kommer med en mycket trevlig liten ikon, och det kommer vi att anvÀnda i vÄr handledning. Skapa dock 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 stilformat:



.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 notera om denna CSS Àr CSS3-övergÄngseffekterna som gör att vi enkelt kan skapa vÀxlingseffekten. Observera ocksÄ att du fortfarande mÄste justera sökikonen och formulÀret enligt ditt temas layout.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till sökvÀxlingseffekt i ditt WordPress-tema. Vad tycker du om vÀxlingssökningsformulÀret? Vi ser fler och fler webbplatser som anvÀnder den hÀr effekten. LÀmna dina kommentarer och frÄgor i kommentarerna nedan eller gÄ med i samtalet pÄ Google+.