Menük és navigáció

Modul 4: Tartalom készítése · Olvasási idő: 7 perc

Tanulási cél: E lecke után képes lesz áttekinthető menüt készíteni, mind blokk sablonban, mind klasszikus sablonban, és tudni fogja, milyen egy jó menü.

Kulcsfogalmak: navigációs blokk, Webhely szerkesztő, Megjelenés > Menük, menühely, almenü, egyéni link, mobilmenü, lábléc menü, linkszöveg, akadálymentesség

Két lehetőség, a sablontól függően

Hogy hol készíti el a menüt, az attól függ, milyen sablont használ (5.1. lecke):

• Blokk sablon: a menü egy navigációs blokk a weboldal fejlécében. A Webhely szerkesztőben szerkesztheti (Megjelenés > Szerkesztő > Navigáció, vagy a Fejléc sablonrészben).
• Klasszikus sablon: a menüt a Megjelenés > Menük alatt készíti el, és ott kiválaszt egy menühelyet, amelyet a sablon felkínál, például „Fő menü” vagy „Lábléc”.

Ha a Megjelenés alatt nem látja a Menük pontot, csak a Szerkesztőt? Akkor blokk sablont használ. Ez gyakori félreértés sablonváltás után: „eltűnt a menüm”. A régi menü még létezik (az adatbázisban menüelemek listájaként), de az új sablon más helyen keresi. A Webhely szerkesztőben a navigációs blokknál importálhat egy meglévő klasszikus menüt.

Mi kerülhet bele

Egy menüelem lehet:

• a weboldala egy oldala vagy bejegyzése;
• egy kategória (ekkor az adott kategória archívumára mutat);
• egy egyéni link: bármilyen cím, akár egy másik weboldalra is, vagy egy horgony egy oldalon belül (/diensten/#prijzen);
• blokk sablonban más blokkok is a navigációban, például egy keresőmező, közösségimédia-ikonok vagy egy „Időpontfoglalás” gomb.

A menüelemeket egymás alá tolhatja almenüként: klasszikus sablonban úgy, hogy kicsit jobbra húzza őket, a navigációs blokkban az „Almenü hozzáadása” lehetőséggel, vagy egy elemet egy másikra húzva.

Egy menüelem egy oldalra mutat, de saját felirata van. Ha később módosítja az oldal címét, a menüben lévő felirat nem változik automatikusan (klasszikus menüben soha, a navigációs blokkban attól függ, hogyan adta hozzá az elemet). Egy címmódosítás után tehát érdemes megnézni a menüt is.

Egy jó menü

A menü nem a teljes weboldal tartalomjegyzéke. Egy útjelző a néhány olyan helyhez, ahová a legtöbb látogató el szeretne jutni. Néhány irányelv:

• Kevés fő elem: öt-hét darab. Többet úgysem jelenít meg jól egy telefon, és a látogatók nem olvassák el.
• Legfeljebb egy szintnyi almenü. Egy almenün belüli almenüt telefonon nehéz kezelni, és a képernyőolvasók számára is zavaró.
• Egy almenü fejléce is egy link. Sok sablonban a „Szolgáltatások” elemre kattintva megnyílik az almenü, de a „Szolgáltatások” maga is egy oldal. Ügyeljen rá, hogy ez az oldal létezzen és valami hasznosat mutasson, vagy hogy egyértelmű legyen, hogy az elem csak egy fejléc.
• Hétköznapi szavak, amelyeket a látogatók használnának: „Árak”, nem „Befektetési lehetőségeink”.
• A kapcsolat és a legfontosabb cselekvés (időpontfoglalás, rendelés) mindig elérhető legyen, gyakran a menü jobb oldalán vagy gombként.
• A jogi linkek (adatkezelési tájékoztató, általános szerződési feltételek, sütibeállítások) egy lábléc menübe valók, nem a fő menübe. De mindig megtalálhatónak kell lenniük, minden oldalon (9.3. lecke).

Mobilon és akadálymentesen

Telefonon a menü általában egy három vonalból álló gombra csukódik össze (a „hamburgermenü”). A navigációs blokknál beállíthatja, mikor történjen ez (mindig, vagy csak kis képernyőn). Mindig teszteljen valódi telefonon:

• Minden elemet el tud érni a hüvelykujjával, anélkül, hogy véletlenül a mellette lévőt érintené meg?
• Az almenük egy érintésre kinyílnak, majd újra becsukódnak?
• Bezáródik a menü, ha kiválaszt egy elemet?

Az akadálymentesség érdekében (olyan látogatók esetében, akik képernyőolvasót használnak, vagy csak a billentyűzetet) ügyeljen a következőkre:

• Egyértelmű linkszövegek. A „Bővebben” vagy „Kattintson ide” semmit nem mond, ha egy képernyőolvasó az összes linket egymás után felolvassa. A „Bővebben a nyitvatartási időnkről” viszont igen.
• Billentyűzettel vezérelhető: a Tab billentyűvel lehet végigmenni a menün, az Enter billentyűvel megnyitni egy elemet. A legtöbb sablon és a navigációs blokk jól kezeli ezt; a saját készítésű, szkriptekkel épített menük gyakran nem.
• Egy másik weboldalra mutató link lehetőleg ugyanabban az ablakban nyíljon meg. Ha mégis új ablakban kell nyílnia, jelezze ezt.

Egyéb navigáció

A fő menü mellett ezek az elemek is segítenek a látogatóknak eligazodni:

• egy keresőmező (a keresőblokk), különösen sok bejegyzést tartalmazó weboldal esetén;
• morzsamenü („Home > Szolgáltatások > Webdesign”), amelyet gyakran egy SEO bővítmény vagy a sablon biztosít;
• belső linkek a szövegeiben más oldalakra (ez a kereshetőségnek is jót tesz, 9.2. lecke);
• egy segítőkész 404-es oldal: keresőmezővel és a legfontosabb oldalakra mutató linkekkel, ahelyett, hogy csak annyit írna, „nem található”. Blokk sablonnál ezt a „404” sablonként szerkesztheti a Webhely szerkesztőben.

A gyakorlatban: így néz ki egy panelen

A WordPress admin felületén:

• Blokk sablon: Megjelenés > Szerkesztő > Navigáció. Válassza ki a menüt, adjon hozzá elemeket a plusz jellel, húzza őket a megfelelő sorrendbe, és a navigációs blokk beállításainál válassza ki, mikor jelenjen meg a mobilmenü.
• Klasszikus sablon: Megjelenés > Menük. Hozzon létre egy menüt, jelölje be balra az oldalakat, kattintson a Hozzáadás a menühöz gombra, húzással állítsa be a sorrendet, alul pedig jelölje be a menühelyet. Mentés.

Összefoglalás

• Blokk sablonban a navigációs blokkal készíti a menüt a Webhely szerkesztőben; klasszikus sablonban a Megjelenés > Menük alatt, egy menühellyel.
• Egy menü néhány fontos helyre mutat: kevés elem, legfeljebb egy szintnyi almenü.
• A jogi linkek egy lábléc menübe valók, mindig megtalálhatóan.
• Tesztelje a mobilmenüt valódi telefonon, és használjon olyan linkszövegeket, amelyek önmagukban is érthetőek.
• Egy keresőmező, belső linkek és egy segítőkész 404-es oldal egészítik ki a menüt.

Kvíz

Feladat

Feladat D4.3: Egy menü, amely működik. Készítsen (vagy fejlesszen tovább) egy fő menüt a weboldalához legfeljebb hét fő elemmel, egy almenüvel és egy egyéni linkkel, valamint egy lábléc menüt az adatkezelési tájékoztatójával. Tesztelje a mobilmenüt a telefonján és csak a billentyűzettel (Tab és Enter). Pipálja ki, mi működik, és jegyezze fel: milyen típusú sablont használ (blokk vagy klasszikus), hol készítette el a menüt, és melyik linkszöveget javította, és hogyan?

További olvasnivaló

A WordPress-ben való munkához még nincs saját cikkünk; a WordPress hivatalos dokumentációja részletes.

• Navigációs blokk (wordpress.org, angol): https://wordpress.org/documentation/article/navigation-block/
• Menük klasszikus sablonokban (wordpress.org, angol): https://wordpress.org/documentation/article/appearance-menus-screen/
• Webhely szerkesztő (wordpress.org, angol): https://wordpress.org/documentation/article/site-editor/