Menu a navigace

Modul 4: Tvorba obsahu · Doba čtení: 7 minut

Cíl lekce: Po této lekci dokážete vytvořit přehledné menu, a to jak v blokové šabloně, tak v klasické šabloně, a budete vědět, co dělá menu dobrým.

Klíčové pojmy: navigační blok, Úprava webu, Vzhled > Menu, umístění menu, podnabídka, vlastní odkaz, mobilní menu, menu v patičce, text odkazu, přístupnost

Dva způsoby, podle Vaší šablony

Kde menu vytváříte, závisí na Vaší šabloně (lekce 5.1):

• Bloková šablona: menu je navigační blok v záhlaví webu. Upravujete ho v Úpravě webu (Vzhled > Editor > Navigace, nebo v šablonové části Záhlaví).
• Klasická šablona: menu vytváříte v Vzhled > Menu a tam zvolíte umístění menu, které šablona nabízí, například „Hlavní menu“ nebo „Patička“.

Nevidíte v nabídce Vzhled položku Menu, pouze Editor? Pak používáte blokovou šablonu. Jde o častý zmatek po změně šablony: „moje menu zmizelo“. Staré menu stále existuje (je uloženo v databázi jako seznam položek menu), ale nová šablona se dívá jinam. V Úpravě webu můžete u navigačního bloku importovat stávající klasické menu.

Co do něj může patřit

Položka menu může být:

• stránka nebo příspěvek z Vašeho webu;
• kategorie (pak odkazuje na archiv dané kategorie);
• vlastní odkaz: jakákoli adresa, i na jiný web, nebo kotva uvnitř stránky (/sluzby/#ceny);
• v blokové šabloně také další bloky v navigaci, jako vyhledávací pole, ikony sociálních sítí nebo tlačítko „Domluvit schůzku“.

Položky menu lze posunout pod sebe jako podnabídku: v klasické šabloně je přetáhnete trochu doprava, v navigačním bloku pomocí „Přidat podmenu“ nebo přetažením položky na jinou.

Položka menu odkazuje na stránku, ale má vlastní popisek. Když později upravíte název stránky, popisek v menu se sám automaticky nezmění (v klasickém menu nikdy, v navigačním bloku záleží na tom, jak jste položku přidali). Po změně názvu se proto vždy podívejte i do menu.

Dobré menu

Menu není obsah celého Vašeho webu. Je to ukazatel k několika místům, kam chce jít většina návštěvníků. Několik zásad:

• Málo hlavních položek: tak pět až sedm. Víc se na telefon stejně nevejde a návštěvníci to nepřečtou.
• Nejvýše jedna úroveň podnabídky. Podnabídka v podnabídce se na telefonu špatně ovládá a pro čtečky obrazovky je matoucí.
• Nadpis podnabídky je zároveň odkaz. V mnoha šablonách klik na „Služby“ otevře podnabídku, ale „Služby“ samo o sobě je také stránka. Zajistěte, aby tato stránka existovala a zobrazovala něco smysluplného, nebo aby bylo jasné, že položka slouží jen jako nadpis.
• Běžná slova, která by návštěvníci sami použili: „Ceník“, ne „Naše investiční možnosti“.
• Kontakt a nejdůležitější akce (domluvit schůzku, objednat) musí být vždy dostupné, často vpravo v menu nebo jako tlačítko.
• Právní odkazy (zásady ochrany osobních údajů, obchodní podmínky, nastavení cookies) patří do menu v patičce, ne do hlavního menu. Vždy ale musí být dohledatelné, na každé stránce (lekce 9.3).

Mobilní a přístupné menu

Na telefonu se menu obvykle sbalí do tlačítka se třemi čárkami (tzv. „hamburger menu“). U navigačního bloku nastavíte, kdy k tomu dochází (vždy, nebo jen na malých obrazovkách). Vždy to otestujte na skutečném telefonu:

• Dokážete se každé položky dotknout palcem, aniž byste omylem zasáhli sousední položku?
• Otevírají se podnabídky klepnutím a zase se zavírají?
• Zavře se menu, když zvolíte položku?

U přístupnosti (návštěvníci se čtečkou obrazovky nebo ti, kdo používají pouze klávesnici) dbejte na:

• Srozumitelné texty odkazů. „Přečíst více“ nebo „Klikněte sem“ nic neříká, pokud čtečka obrazovky přečte všechny odkazy za sebou. „Přečíst více o našich otevíracích dobách“ ano.
• Ovládání klávesnicí: klávesou Tab procházíte menu, klávesou Enter otevřete položku. Většina šablon a navigační blok to zvládají dobře; vlastní menu se skripty často ne.
• Odkaz na jiný web by se měl otevírat raději ve stejném okně. Pokud musí jít o nové okno, uveďte to u odkazu.

Další navigace

Kromě hlavního menu pomáhají návštěvníkům najít cestu i tyto prvky:

• vyhledávací pole (vyhledávací blok), zejména u webu s velkým množstvím příspěvků;
• drobečková navigace („Domů > Služby > Tvorba webu“), často poskytovaná SEO pluginem nebo šablonou;
• interní odkazy v textu na další stránky (prospívají i dohledatelnosti, lekce 9.2);
• stránka 404, která pomůže: s vyhledávacím polem a odkazy na nejdůležitější stránky místo pouhého „nenalezeno“. U blokové šablony ji upravujete jako šablonu „404“ v Úpravě webu.

V praxi: jak to vypadá v panelu

V administraci WordPressu:

• Bloková šablona: Vzhled > Editor > Navigace. Vyberte menu, přidejte položky tlačítkem plus, přetažením je seřaďte do správného pořadí a v nastavení navigačního bloku zvolte, kdy se zobrazí mobilní menu.
• Klasická šablona: Vzhled > Menu. Vytvořte menu, vlevo zaškrtněte stránky a klikněte na Přidat do menu, přetažením upravte pořadí a dole zaškrtněte umístění menu. Uložit.

Shrnutí

• V blokové šabloně vytváříte menu pomocí navigačního bloku v Úpravě webu; v klasické šabloně v Vzhled > Menu pomocí umístění menu.
• Menu ukazuje cestu k několika důležitým místům: málo položek, nejvýše jedna úroveň podnabídky.
• Právní odkazy patří do menu v patičce, vždy dohledatelné.
• Otestujte mobilní menu na skutečném telefonu a používejte texty odkazů, které samy o sobě něco říkají.
• Vyhledávací pole, interní odkazy a užitečná stránka 404 menu doplňují.

Kvíz

Úkol

Úkol D4.3: Menu, které funguje. Vytvořte (nebo vylepšete) hlavní menu svého webu s nejvýše sedmi hlavními položkami, jednou podnabídkou a jedním vlastním odkazem, a menu v patičce se zásadami ochrany osobních údajů. Otestujte mobilní menu na svém telefonu a pouze pomocí klávesnice (Tab a Enter). Zaškrtněte, co funguje, a poznamenejte si: jaký typ šablony máte (blokovou, nebo klasickou), kde jste menu vytvořili, a jaký text odkazu jste vylepšili a jak?

Doporučené zdroje

Pro práci přímo ve WordPressu zatím nemáme vlastní články; oficiální dokumentace WordPressu je ale obsáhlá.

• Navigační blok (wordpress.org, anglicky): https://wordpress.org/documentation/article/navigation-block/
• Menu v klasických šablonách (wordpress.org, anglicky): https://wordpress.org/documentation/article/appearance-menus-screen/
• Úprava webu (wordpress.org, anglicky): https://wordpress.org/documentation/article/site-editor/