Menu a navigácia

Modul 4: Tvorba obsahu · Čas čítania: 7 minút

Cieľ lekcie: Po tejto lekcii dokážete vytvoriť prehľadné menu, a to v blokovej aj v klasickej téme, a budete vedieť, čo robí menu dobrým.

Kľúčové pojmy: navigačný blok, Editor stránky, Vzhľad > Menu, umiestnenie menu, vnorené menu, vlastný odkaz, mobilné menu, menu v pätičke, text odkazu, prístupnosť

Dva spôsoby, podľa vašej témy

Kde menu vytvoríte, závisí od vašej témy (lekcia 5.1):

• Bloková téma: menu je navigačný blok v hlavičke webu. Upravujete ho v Editore stránky (Vzhľad > Editor > Navigácia, alebo v šablónovej časti Hlavička).
• Klasická téma: menu vytvoríte v časti Vzhľad > Menu, kde zvolíte umiestnenie menu, ktoré téma ponúka, napríklad „Hlavné menu“ alebo „Pätička“.

Nevidíte vo Vzhľade položku Menu, iba Editor? Potom používate blokovú tému. Je to bežný zdroj zmätku po zmene témy: „moje menu zmizlo“. Staré menu stále existuje (je uložené v databáze ako zoznam položiek menu), ale nová téma ho hľadá na inom mieste. V Editore stránky môžete pri navigačnom bloku importovať existujúce klasické menu.

Čo môže menu obsahovať

Položka menu môže byť:

• stránka alebo článok z vášho webu;
• kategória (vtedy odkazuje na archív danej kategórie);
• vlastný odkaz: akákoľvek adresa, aj na iný web, alebo kotva v rámci stránky (/diensten/#prijzen);
• v blokovej téme aj iné bloky v navigácii, napríklad vyhľadávacie pole, ikony sociálnych sietí alebo tlačidlo „Dohodnúť si stretnutie“.

Položky menu môžete usporiadať pod seba ako vnorené menu: v klasickej téme ich presuniete mierne doprava, v navigačnom bloku pomocou „Pridať vnorené menu“ alebo presunutím jednej položky na druhú.

Položka menu odkazuje na stránku, no má vlastný názov (label). Ak neskôr zmeníte titulok stránky, názov v menu sa automaticky nezmení (v klasickom menu nikdy, v navigačnom bloku to závisí od toho, ako ste položku pridali). Po zmene titulku teda skontrolujte aj menu.

Dobré menu

Menu nie je obsah celého webu. Je to smerovník k pár miestam, kam chce ísť väčšina návštevníkov. Niekoľko odporúčaní:

• Málo hlavných položiek: päť až sedem. Viac sa na telefón aj tak nezmestí a návštevníci to nečítajú.
• Najviac jedna úroveň vnoreného menu. Vnorené menu vo vnorenom menu sa na telefóne ťažko ovláda a pre čítačky obrazovky je mätúce.
• Nadpis vnoreného menu je zároveň odkaz. V mnohých témach klik na „Služby“ otvorí vnorené menu, ale „Služby“ je zároveň stránka. Uistite sa, že táto stránka existuje a zobrazuje niečo zmysluplné, alebo že je jasné, že ide iba o nadpis.
• Bežné slová, ktoré by použili návštevníci: „Ceny“, nie „Naše investičné možnosti“.
• Kontakt a najdôležitejšia akcia (dohodnúť stretnutie, objednať) musia byť vždy dostupné, často vpravo v menu alebo ako tlačidlo.
• Právne odkazy (zásady ochrany osobných údajov, obchodné podmienky, nastavenia cookies) patria do menu v pätičke, nie do hlavného menu. Musia byť ale vždy nájditeľné, na každej stránke (lekcia 9.3).

Mobilné a prístupné menu

Na telefóne sa menu zvyčajne zbalí do tlačidla s tromi čiarkami („hamburger menu“). Pri navigačnom bloku nastavujete, kedy k tomu dôjde (vždy, alebo iba na malých obrazovkách). Vždy to otestujte na skutočnom telefóne:

• Dokážete sa palcom dotknúť každej položky bez toho, aby ste omylom zasiahli susednú?
• Otvárajú sa vnorené menu ťuknutím a znova sa zatvárajú?
• Zatvorí sa menu po výbere položky?

Pre prístupnosť (návštevníci s čítačkou obrazovky alebo tí, čo používajú iba klávesnicu) dbajte na:

• Zrozumiteľné texty odkazov. „Čítať viac“ alebo „Kliknite sem“ nič nehovorí, keď čítačka obrazovky prečíta všetky odkazy za sebou. „Čítať viac o našich otváracích hodinách“ áno.
• Ovládanie klávesnicou: klávesom Tab po menu, klávesom Enter otvoriť položku. Väčšina tém a navigačný blok to zvládajú dobre; vlastné menu so skriptami často nie.
• Odkaz na iný web by sa mal radšej otvárať v tom istom okne. Ak sa musí otvoriť v novom okne, uveďte to pri odkaze.

Ďalšia navigácia

Okrem hlavného menu pomáhajú návštevníkom nájsť cestu aj tieto prvky:

• vyhľadávacie pole (blok vyhľadávania), najmä na webe s veľkým množstvom článkov;
• navigačné drobčeky („Domov > Služby > Webdesign“), často poskytované SEO pluginom alebo témou;
• interné odkazy vo vašich textoch na iné stránky (prospešné aj pre vyhľadateľnosť, lekcia 9.2);
• stránka 404, ktorá pomáha: s vyhľadávacím poľom a odkazmi na najdôležitejšie stránky namiesto iba „nenájdené“. Pri blokovej téme ju upravujete ako šablónu „404“ v Editore stránky.

V praxi: ako to vyzerá v paneli

V administrácii WordPress:

• Bloková téma: Vzhľad > Editor > Navigácia. Vyberte menu, pridajte položky pomocou plusu, presuňte ich do správneho poradia a v nastaveniach navigačného bloku zvoľte, kedy sa zobrazí mobilné menu.
• Klasická téma: Vzhľad > Menu. Vytvorte menu, vľavo zaškrtnite stránky a kliknite na Pridať do menu, presuňte poradie a dole zaškrtnite umiestnenie menu. Uložiť.

Zhrnutie

• V blokovej téme vytvoríte menu pomocou navigačného bloku v Editore stránky; v klasickej téme v časti Vzhľad > Menu s umiestnením menu.
• Menu ukazuje cestu k pár dôležitým miestam: málo položiek, najviac jedna úroveň vnoreného menu.
• Právne odkazy patria do menu v pätičke, vždy nájditeľné.
• Otestujte mobilné menu na skutočnom telefóne a používajte texty odkazov, ktoré sú zrozumiteľné samy osebe.
• Vyhľadávacie pole, interné odkazy a užitočná stránka 404 menu dopĺňajú.

Kvíz

Úloha

Úloha D4.3: Menu, ktoré funguje. Vytvorte (alebo vylepšite) hlavné menu vášho webu s najviac siedmimi hlavnými položkami, jedným vnoreným menu a jedným vlastným odkazom, a menu v pätičke so zásadami ochrany osobných údajov. Otestujte mobilné menu na telefóne a iba pomocou klávesnice (Tab a Enter). Zaznačte, čo funguje, a poznamenajte si: aký typ témy máte (bloková alebo klasická), kde ste menu vytvorili, a ktorý text odkazu ste vylepšili a ako?

Čítajte ďalej

Pre prácu priamo vo WordPresse zatiaľ nemáme vlastné články; oficiálna dokumentácia WordPressu je rozsiahla.

• Navigačný blok (wordpress.org, anglicky): https://wordpress.org/documentation/article/navigation-block/
• Menu v klasických témach (wordpress.org, anglicky): https://wordpress.org/documentation/article/appearance-menus-screen/
• Editor stránky (wordpress.org, anglicky): https://wordpress.org/documentation/article/site-editor/