Když už víme, jak vytvořit základní téma WordPressu od nuly, pojďme se podívat, jak vytvořit vlastní navigační menu do našeho tématu. Toto menu by mělo mít možnost ovládání z ovládacího panelu WordPressu. Jinými slovy, měli byste mít možnost přejít do ovládacího panelu a přidat nebo odebrat odkazy na libovolné stránky, příspěvky nebo kategorie, které se vám líbí. Na konci tohoto návodu přesně to budeme mít. Pustíme se do toho a podíváme se, jak tohoto cíle dosáhnout.
Otevřete soubor header.php
Pokračujte a otevřete soubor header.php z tématu, na kterém jsme pracovali. Naším cílem bude přidat menu, které se nachází nad hlavním obsahem webu, ale pod oblastí s názvem webu a sloganem. Za tímto účelem můžeme níže přidat následující kód:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Všimněte si, že využíváme speciální funkci, kterou nám poskytuje WordPress wp_nav_menu(). Tato funkce se postará o veškerou práci při vytváření vlastního menu za vás. Nemusíte sami ručně vypisovat celé html, takže je to docela užitečné. Nyní ještě nemáme mnoho stránek, ale pokud navštívíme náš testovací web, funkce již vypisuje odkaz na ukázkovou stránku, která existuje na naší instalaci.
Předávání argumentů funkci wp_nav_menu()
Stejně jako většině funkcí ve WordPressu můžete funkci wp_nav_menu() předávat volitelné argumenty. Zde nastavíme pole a nakonfigurujeme pouze jednu možnost. Pole použijeme pro případ, že bychom v budoucnu chtěli předat více možností. Takto bychom mohli přidat tento kousek kódu:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Tato možnost nám umožňuje pojmenovat určité nabídky v našem tématu. Může se stát, že budeme chtít mít více než jedno menu, a toto je způsob, kterým lze rozlišit více menu.
Zaregistrovat umístění menu v souboru functions.php
Abychom mohli využívat menu, které jsme právě vytvořili v našem souboru header.php, musíme z panelu správce WordPress zaregistrovat umístění menu v souboru functions.php tématu. Jak tedy můžeme naše nové menu zaregistrovat ve WordPressu? Můžeme to udělat pomocí funkce register_nav_menus() integrované ve WordPressu. Zaregistrujme naše menu takto:
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Nakonfigurujeme naše vlastní menu v ovládacím panelu WordPressu
Naše nové menu by nyní mělo být zaregistrováno v jádře WordPressu. WordPress nyní ví o našem menu a jeho umístění v tématu. Nyní můžeme přejít do hlavního panelu, vytvořit nové menu a spravovat jeho umístění. Konkrétně chceme, aby se zobrazovalo tam, kde jsme využili onu funkci wp_nav_menu(). Navštívíme Vzhled->Menu a poté klikneme na „vytvořit nové menu“.
Toto menu můžeme pojmenovat jakkoli. Pro jednoduchost zvolíme jen Hlavní menu a pak klikneme na ‚Vytvořit menu‘.
V tomto dalším kroku propojíme všechny naše kategorie. Můžeme tedy zvolit Kategorie, Vybrat vše, aktualizovat Umístění zobrazení na ‚Hlavní menu‘ a poté kliknout na ‚Uložit menu‘. Vyzkoušíme si to.
Navštívíme-li naše stránky, zjistíme, že se nám nyní v nově vytvořeném menu zobrazuje odkaz na každou kategorii. V tuto chvíli se jedná pouze o neuspořádaný seznam, který zatím není nejhezčí – ale funguje!“
Jaký je přínos registrace vlastního menu?
Já vím, já vím. Říkáte si, že ani nemá smysl podstupovat celý tenhle humbuk jen proto, aby se na vašich stránkách zobrazilo pár hypertextových odkazů na některé kategorie. V některých ohledech máte pravdu. Proč si některé z těchto věcí nevytvořit ručně sami. Jistě, i to lze udělat, ale když si sestavíme menu tak, jak jsme to udělali zde, máme nyní k dispozici ovládací panel WordPressu, který nám umožňuje kontrolovat kód, který jsme zahrnuli do našeho tématu. Nyní můžeme mimo jiné snadno přetahovat řazení odkazů přímo z ovládacího panelu. Změníme pořadí z WordPress, PHP, JavaScript na JavaScript, WordPress a pak PHP. Velmi snadno!“
Nyní se při návštěvě webu aktualizuje pořadí odkazů v nabídce. S tímto přístupem není třeba si zahrávat se základním kódem.
Vytvořte si vlastní menu
Ten neuspořádaný seznam prostě nebude stačit! Musíme to udělat trochu elegantněji. Strávíme trochu času aplikací vlastního CSS, abychom menu trochu vyčistili. Nejprve chceme vertikálně orientovaný neuspořádaný seznam změnit na horizontálně orientované menu. Chtěli bychom také odstranit odrážky jednotlivých prvků seznamu, přidat trochu paddingu a marginu a také odstranit podtržení u odkazů. Zde je pokus o vytvoření tohoto efektu v našem souboru style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Ve výše uvedeném souboru CSS se toho děje docela dost. Pojďme si je projít. V prvním selektoru .navigation-menu ul odstraňujeme z neuspořádaného seznamu veškerý padding a margin. Dále zajišťujeme, aby neuspořádaný seznam vymazal floaty dětí položek seznamu. V selektoru .navigation-menu ul li odstraníme ze seznamu odrážky, floatujeme položky seznamu vlevo a přidáme malý okraj vpravo. Na závěr zacílíme odkazy. Nejprve je změníme na prvky úrovně bloku s paddingem 12px vertikálně a 17px horizontálně. Přidáme pěkný efekt ohraničení a odstraníme podtržení na odkazech. Nyní si to vyzkoušíme v prohlížeči.
Pěkné! To menu vypadá mnohem lépe než na začátku.
Jak přidat do menu vlastní barvu při najetí myší
Základní stylování ins na místě. Možná by bylo hezké mít trochu hover efekt, když člověk najede myší na jednotlivé odkazy. To lze velmi snadno nakonfigurovat pomocí následujícího úryvku:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
To vypadá docela dobře!“
Jak zaměřit aktivní stav položky nabídky
Další věc, kterou bychom mohli přidat, je možnost přizpůsobit barvu aktivního odkazu. Tím se liší od jednoduchého efektu najetí na odkaz. V tomto případě chceme, aby si WordPress při návštěvě konkrétního odkazu z nabídky uvědomil, že se nyní jedná o aktivní prohlíženou stránku, a aktualizoval vizuální zobrazení tak, aby odráželo aktivní odkaz. K tomu můžeme využít speciální třídu, která je zabudována ve WordPressu a řeší právě tuto věc. Jedná se o třídu current-menu-item. Zde je uvedeno, jak ji můžeme začlenit do naší vlastní nabídky.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Pokud nyní navštívíme náš web a vyzkoušíme návštěvu různých odkazů ve vlastní nabídce, uvidíme, že to vypadá velmi pěkně. Nyní máme zvláštní vzhled pro stav při najetí myší a jiný vzhled pro aktivní stav odkazů v naší nabídce. Je to skvělý způsob, jak zajistit, aby návštěvníci vašeho webu věděli, kde se právě nacházejí, tím, že aktivní nabídka bude takříkajíc svítit.
Jak vytvořit vlastní nabídku ve WordPressu Shrnutí
V tomto návodu jsme se dobře podívali na to, jak přidat vlastní nabídku do našeho vlastního tématu ve WordPressu. Využili jsme k tomu několik funkcí WordPressu, které nám pomohly. Jako první jsme využili funkci wp_nav_menu(). Tato funkce dokáže automaticky sestavit neuspořádaný seznam a dětské prvky a vytvořit tak strukturu pro pěkné menu, na které můžete použít stylování. Této funkci můžete předat mnoho argumentů, ale my jsme se zde zaměřili jen na ty základní. Další funkcí, kterou jsme využili, byla funkce register_nav_menus(). Tato funkce nám umožňuje informovat WordPress o našem novém menu a připojit se k němu v ovládacím panelu WordPressu. Jakmile byla naše nová nabídka zaregistrována ve WordPressu, zjistili jsme, že je snadné přidat nebo odebrat z této nabídky cokoli, co se nám líbí, a to přímo z ovládacího panelu WordPressu a bez nutnosti upravovat jakýkoli kód v souborech našeho tématu. Nakonec jsme věnovali nějaký čas vylepšení vzhledu naší nabídky pomocí vlastního stylování CSS.