Vložení pole pro vyhledávání do headeru

Dneska jsem tak dvě hodinky trávil úpravou kódu o kterou mě požádal jiný blogger. Jednalo se o přesunutí vyhledávacího pole do headeru stránky. Už jsem to jednou řešil a nepodařilo se mi to, tak jsem si říkal, že už jsem přece jenom dál a jako laik jsem se do toho pustil.

Jedná se v podstatě o to, že obsah souboru searchform.php je potřeba vložit do souboru header.php a pak zkoušet, kde se objeví a pracovat s tím. Já jsem přímo nekopíroval obsah, ale našel jsem si kód jiný. A následovalo upravování souboru style.css, zkoušení a dobírání se nějakého výsledku.

Nakonec se vše povedlo, pro programátora se může jevit postup naprosto jednoduchý. Já jsem zase objevil pro mě spoustu nových věcí. Takže jak na to:

1. Do souboru header.php vložte následující kód (já ho použil, pokud nebude fungovat, zkopírujte vše ze souboru searchform.php a použijte jej)

<form method=“get“ id=“searchform“ action=“<?php bloginfo(‚home‘); ?>/“><div><input type=“text“ size=“put_a_size_here“ name=“s“ id=“s“ value=“Zadejte hledan&#253; v&#253;raz“ onfocus=“if(this.value==this.defaultValue)this.value=“;“ onblur=“if(this.value==“)this.value=this.defaultValue;“/><input type=“submit“ id=“searchsubmit“ value=“Hledat“ /></div></form>

2. Jukněte na web a zkoumejte kde se pole objeví. Objevit by se mělo. Ideálně přes logo, tzn. není limitováno pozicí pod headerem.

3. Pro zápis do souboru style.css a přiřazení stylů pro jednotlivé elementy bude důleživé vědět názvy elementů. V kódu výše je vidíte jako name, tzn „s“ a „searchsubmit“. Podle názvu druhého vidíte, že půjde o button potvrzení výběru.

4. Zápis v style.css u kolegy vypadal následovně:

#s{
position: absolute;
left: 800px;
top: 1px;
}

#searchsubmit{
position: absolute;
left: 735px;
top: 1px;
}

Jinak pozici nastavíte změnou údajů u left a top. Pouze zkopírujte a vložte na konec souboru.

Zkuste to tak jak je to výše uvedené. Ale upozorňuji, že ne vždy se to může povést. Každá šablona je trochu jiná. Tato byla vytvořena Artisteerem.

Práce před a po:

Tak snad to někomu pomůže.