Most kicsit a WordPress keresővel fogunk megismerni, mely mint tudjuk, segít nekünk megtalálni kulcsszavak által egy adott bejegyzést, vagy csak a kifejezésekhez tartozó összes cikket az oldalon. Eddig maximum annyit hallhattatok erről a keresőről, hogy a widget sávba be lehet illeszteni. Na de mi van akkor, ha nincs widget sávunk, vagy mondjuk a fejlécre szeretnénk beilleszteni a keresőt? Most mindenre választ adok.

 

Először is, a következő kódot bárhova beillesztve megkapjuk az alap kereső sávot, mindenféle stíluskészlet nélkül:

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

Ekkor még így néz ki a kereső sáv:

Ezt még CSS-el megformálhatjuk. Magát a kereső sávot ezzel a kóddal formálhatod:

#s{
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #7d5f75;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: solid 1px #5e4056;
width: 300px;
height: 25px;
}

Ezzel még csak a csíkot formáztuk meg, hiszen még ott van maga a kereső gomb is. Ennek ez a CSS meghatározása:

#searchsubmit{
background-color: #;
font-size: 11px;
text-transform: uppercase;
font-family: calibri;
}

Ezen kódok által így néz ki az én keresőm:

Természetesen az már rajtatok múlik, hogy ti hogyan formázzátok meg a keresőt. De ha esetleg bármilyen kérdésetek maradnak ezzel kapcsolatban, akkor csak írjatok.


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *