7. diel - Menu vo WordPresse
V predchádzajúcom cvičení, Riešené úlohy k 2.-4. lekciu základov WordPress, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V dnešnej lekcii základov WordPress si vytvoríme všetky zvyšné stránky pre náš web, pozrieme sa na menu vo WordPresse, ukážeme si aké máme vo WordPresse typy menu a skúsime si vytvoriť hlavné menu a footer menu pre náš web.
Vytvorenie stránok
Vytvoríme si ešte ďalšie stránky, ktoré budeme na našom webe potrebovať. V ľavom menu klikneme na Stránky:
Zobrazí sa nám prehľad stránok. Zatiaľ tu máme vytvorenú stránku "Domov" a "Zásady ochrany osobných údajov". Klikneme na tlačidlo pre pridanie novej stránky Add page:
Budeme vytvárať kontaktnú stránku. Do názvu teda napíšeme "Kontakt":
Stránku publikujeme kliknutím na tlačidlo Publikovať. Kliknutím na naše logo v ľavom hornom rohu prejdeme späť do prehľadu stránok.
Rovnakým spôsobom si vytvoríme ešte ďalšiu stránku s názvom "Služby". Mali by sme tak mať v prehľade stránok štyri vytvorené stránky:
Menu
Menu vo WordPresse je základný navigačný prvok každého webu, ktorý slúži na prehľadné prepojenie jednotlivých stránok, príspevkov, kategórií alebo vlastných odkazov. Pomocou menu používateľ ľahko nájde to, čo hľadá – a to bez ohľadu na to, či ide o návštevníka alebo správcu webu. Jeho tvorba je veľmi intuitívna a pritom dostatočne flexibilná aj pre pokročilých užívateľov.
Menu môže obsahovať:
- Stránky – Zobrazí zoznam všetkých existujúcich stránok na webe (napr. Domov, Kontakt, Služby). Najčastejšie používaná možnosť, pretože stránky tvoria základnú štruktúru webu.
- Príspevky – Umožňuje pridať konkrétny blogový príspevok do menu. Využíva sa skôr pri blogových alebo magazínových weboch.
- Užívateľské odkazy – Sem môžeme zadať ľubovoľný odkaz (URL) – napr. odkaz na iný web, PDF dokument alebo sekciu stránky (napr. #kontakt).
- Rubriky – Vhodné pre blogy, odkazujú na zoznam príspevkov v rámci jednej kategórie (napr. Recenzie, Tipy, Novinky). Používa sa, ak chceme, aby sa menu menilo podľa pridaného obsahu.
- zlepší orientáciu na webe,
- podporí užívateľskú skúsenosť (UX),
- pozitívne ovplyvní SEO vďaka interným odkazom,
- môže tiež zvýšiť počet konverzií (napr. kliknutie na kontakt).
Vo WordPresse máme niekoľko typov menu:
- Hlavné menu (Primary menu) - Toto je primárna navigácia, ktorá sa zobrazuje najčastejšie v hornej časti webu (v hlavičke). Je to to najdôležitejšie menu, ktoré návštevníci uvidia ako prvé. Malo by obsahovať hlavné odkazy – napr. Domov, O mne, Služby, Kontakt.
- Záložná pozícia – Väčšinou sa zobrazuje nad alebo pod hlavným menu. Môže obsahovať doplnkové odkazy, napr. Prihlásenie, Blog, FAQ.
- Sendvičové menu (hamburger menu) - Tento typ menu sa typicky zobrazuje na mobilných zariadeniach, niekedy aj na tabletoch. Ikona troch čiarok (hamburger) otvorí rozbaľovaciu ponuku s odkazmi. Umožňuje udržať web prehľadný aj pri menších obrazovkách.
- Ponuka prihlásenia do účtu - Používa sa, ak máme na webe užívateľské účty - napr. klientsku sekciu, členskú zónu alebo e-shop. Ponúka odkazy typu Prihlásiť sa, Môj účet, Odhlásiť sa a pod.
- Zapätie menu – Zobrazí sa v dolnej časti webu (tzv. footer). Používa sa pre odkazy, ktoré nemajú byť nutne viditeľné na prvý pohľad – napr. Obchodné podmienky, GDPR, Mapa stránok) umožňujú tzv. „skryté menu“, ktoré sa otvoria po kliknutí. Hodí sa pre mobilný UX alebo minimalistický design.
Vytvorenie menu
My si vytvoríme dve menu. Jedno hlavné, ktoré umiestnime do hlavičky stránky a druhé, ktoré bude v pätičke.
Hlavné menu
Pre vytvorenie nového menu prejdeme myšou v ľavom WordPress menu na položku Vzhľad az rozbaľovacej ponuky vyberieme položku Menu:
Zatiaľ tu žiadne menu vytvorené nemáme. Do poľa "Názov menu" napíšeme názov nášho menu - "Hlavné menu":
Ďalej si tu môžeme nastaviť automatické pridávanie nových stránok do tohto menu. Lepšie je ale mať všetko pod kontrolou a tak odporúčam nechať toto pole nezaškrtnuté a do hlavného menu pridávať iba stránky, ktoré tam naozaj chceme. Zaškrtneme ešte polohu zobrazenia - Hlavné menu a klikneme na tlačidlo Vytvoriť menu.
Pridanie položiek do menu
Menu máme vytvorené, zatiaľ v ňom ale nemáme žiadne položky. V ľavom stĺpčeku pre pridanie položiek do menu, v záložke stránky, si kliknutím na položku Zobraziť všetko zobrazíme všetky publikované stránky. Zaškrtneme si tu stránky "Domov", "Kontakt" a "Služby" a klikneme na tlačidlo Pridať do menu:
Takto pridané položky si ešte zoradíme. Ako prvú chceme mať stránku "Domov", druhou položkou menu bude stránka "Služby" a poslednou položkou bude "Kontakt". Zoradenie vykonáme jednoducho tak, že položku menu chytíme myšou a pretiahneme ju na príslušnú pozíciu:
Pretiahnutím položky smerom do prava môžeme určiť, že táto položka menu, bude mať podradenú pozíciu pod položkou nad ňou:
My ale chceme mať všetky položky na rovnakej úrovni, preto ju vrátime späť a klikneme na tlačidlo Aktualizovať menu:
Footer menu
Teraz si vytvoríme ešte druhé menu, ktoré neskôr umiestnime do pätičky našej stránky. Kliknite na tlačidlo Vytvoriť nové menu:
Pomenujeme ho "Footer menu", pri polohe zobrazenia zaškrtneme možnosť päty menu a klikneme na tlačidlo Vytvoriť menu:
Do tohto novo vytvoreného menu si pridáme stránky "Domov", "Služby", "Kontakt" a "Zásady ochrany osobných údajov" a následne klikneme na tlačidlo Aktualizovať menu:
Úpravy menu
Máme hotovo. Ak by sme potrebovali niektoré menu v budúcnosti upraviť, urobíme to jednoducho tak, že v rozbaľovacej ponuke zvolíme menu, ktoré budeme chcieť upraviť a klikneme na tlačidlo Vybrať:
V nasledujúcom cvičení, Riešené úlohy k 5. lekcii základov WordPress, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
