• Articles
• admin

každý web WordPress je jiný. Je to proto, že každý si pro své stránky vybere jiné téma nebo „vzhled a dojem“. Vytvoření záhlaví a horní navigační nabídky ve WordPressu bude pro každý web mírně odlišným procesem.

zde používám framework Genesis theme pro WordPress, protože ho absolutně miluji. V tomto článku však budou důležité body, které pomohou komukoli s webem WordPress.

Toto je část série článků a videí, kde vytvářím webové stránky od nuly. Nejprve jsem vysvětlil, jak vytvořit dětské téma pro rámec Genesis, a pak jsem psal o tom, jak začít téma stylovat přidáním pozadí a loga.

přidání odkazu na Facebook, Twitter a dalších informací do záhlaví

po přidání loga do levého horního rohu záhlaví našeho webu nyní přidáme další informace na pravou stranu našeho záhlaví. V tomto případě přidáme odkazy na Twitter a Facebook atd., prostřednictvím widgetu.

musím přiznat, že jsem se v poslední době trochu zbláznil, protože jsem byl v minulosti trochu odmítavý. Co je widget? Jsou to samostatné kousky webových stránek, které můžete přetahovat a ovládat pomocí snadno použitelné oblasti widgetů.

jednou z mnoha krás Genesis je snadná schopnost rozšířit jakoukoli oblast webu. Takže:

• pokud chcete na postranním panelu jiné pořadí polí, můžete to udělat během několika sekund.
• pokud chcete doporučený příspěvek zde, 5 nejnovější Kategorie nadpisy s miniaturami tam na domovské stránce, můžete to udělat během několika sekund.
• pokud chcete vyhledávací panel, sociální sdílení, Twitter feed, kalendář, tag cloud atd., tady, tam nebo kdekoli, můžete to udělat během několika sekund.

tato intuitivní a snadno použitelná back-end funkce je zvláště užitečná při vytváření webových stránek pro klienty, kteří chtějí ovládat všechny oblasti webových stránek, ale nemají k tomu dovednosti.

Každopádně v tomto případě musíme vytvořit vlastní widget a děláme to přetažením textového widgetu do oblasti záhlaví vpravo ve vzhledu > widgety rozhraní v WordPress.

a v tomto textovém widgetu můžete umístit HTML. Zde je HTML jsem dal pro tento konkrétní web. Mám jen odkaz na stránku Facebook, odkaz na Twitter a telefonní číslo.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

a tady je CSS styl výše:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

zde je to, co se objeví na pravé straně hlavy jako výsledek:

Video o přidání nadpisu informace a navigační menu

v tomto videu ukážu, jak přidat widget do záhlaví a jak upravit nabídku v Genesis.

vytvoření horní navigační nabídky

horní navigační nabídky (nebo „navbars“) bývaly prokletím mé existence, ale nyní s nabídkami Genesis a WordPress jsem vyvinul opravdu snadný systém jejich vytváření, který trvá sekundy na rozdíl od hodin.

Genesis již má možnost mít primární a sekundární navigační Menu. Pro tento konkrétní příklad jsem se zbavil sekundární navigační nabídky pomocí Nastavení motivu Genesis, protože klient chtěl pouze jednu.

ve výše uvedeném videu ukazuji, jak upravím CSS, aby nabídka vypadala jako ta ve vizuálním PSD, kterou jsem udělal.

pomocí nástrojů pro vývojáře Chrome nebo doplňku Firebug pro Firefox můžete zjistit, které selektory v HTML se používají v CSS ke stylu nabídky.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

jak vidíte ve výše uvedeném videu, zvětšil jsem poloměr zaoblených rohů, přidal pozadí přechodu a změnil barvu ohraničení nabídky. Takže teď nabídka nevypadá jako nudná šedá, kterou dostanete s instalací vanilla Genesis.

přidal jsem také následující CSS pro změnu barvy textu v nabídce na bílou.

#nav li a {color: #fff; }

k dispozici je také možnost změnit styl aktuálních odkazů na stránky, odkazy na vznášení, odkazy na podstránku a odkazy na podstránku.

s Genesis, můžete snadno mít rozbalovací nabídky pro podstránky (nebo podřízené stránky) a pak létat-out odkazy na podstránky(nebo vnoučata stránky). Můžete je mít v primární i sekundární navigační nabídce.

vytváření stránek, podřízených stránek a vnoučat

zde je moje video, kde přidávám nové stránky do nabídky WordPress tak, aby se v navigačním menu zobrazovaly jako stránky, podřízené stránky (jako rozevírací nabídky) a stránky vnoučat (jako flyouts).

v editoru stránek si můžete vybrat stránku, která má být stránkou pro děti nebo vnoučata. A když se podíváte na stránky (pod stránkami > všechny stránky), stránky dítěte a vnoučete jsou odsazeny pod jejich rodičem. To jim také dá logickou adresu URL (například www.site.com/music/jazz/charlie-parker, kde stránka „Charlie Parker“ je dítětem „jazzu“, což je dítě „hudby“).

vytvoření navigační nabídky s rozevíracími a letovými výstupy

Chcete-li tyto stránky správně zobrazit v navigačním menu, stačí je přetáhnout do příslušných pozic ve vzhledu > menu. Znovu, dětské stránky jsou odsazeny pod jejich rodičem. Nezapomeňte dát menu název (například „navbar“) a nastavit jej jako primární navigační nabídku.

takže uspořádání stránek ve vzhledu WordPress > oblasti nabídek, jako je tato…

… vytvoří rozevírací nabídku s fly-outy, jako je tento:

podívejte se na video výše pro ukázku tohoto.

co si myslíte?

co si myslíte o této metodě úpravy záhlaví a navigační nabídky webové stránky? Děláte to jinak?