Menüüd ja navigeerimine

Moodul 4: Sisu loomine · Lugemisaeg: 7 minutit

Õpieesmärk: Pärast seda õppetundi oskad luua selge menüü nii plokiteemas kui klassikalises teemas ning tead, milline on hea menüü.

Põhimõisted: navigeerimisplokk, Saidiredaktor, Välimus > Menu's, menüü asukoht, alammenüü, kohandatud link, mobiilimenüü, jaluse menüü, lingitekst, ligipääsetavus

Kaks võimalust, olenevalt teemast

Kus sa menüü loo, oleneb su teemast (õppetund 5.1):

• Plokiteema: menüü on saidi päises olev navigeerimisplokk. Seda muudad Saidiredaktoris (Välimus > Editor > Navigeerimine, või sjabloonis Päis).
• Klassikaline teema: menüü loo lehel Välimus > Menu's ja valid seal teema pakutava menüü asukoha, näiteks „Peamenüü“ või „Jalus“.

Kas sa ei näe Välimuse all Menu's valikut, vaid ainult Editor? Siis kasutad plokiteemat. See on levinud segaduse koht pärast teema vahetamist: „mu menüü on kadunud“. Vana menüü on tegelikult alles (see on andmebaasis menüükirjete loendina), kuid uus teema vaatab mujale. Saidiredaktoris saad navigeerimisplokis olemasoleva klassikalise menüü importida.

Mida menüüsse saab panna

Menüükirje võib olla:

• sinu saidi leht või postitus;
• kategooria (siis viib link selle kategooria arhiivi);
• kohandatud link: ükskõik milline aadress, ka teisele saidile, või ankur lehe sees (/diensten/#prijzen);
• plokiteemas ka teised navigeerimise plokid, näiteks otsinguväli, sotsiaalmeedia ikoonid või nupp „Broneeri aeg“.

Menüükirjeid saad lohistada üksteise alla alammenüüks: klassikalises teemas lohistades neid veidi paremale, navigeerimisplokis „Lisa alammenüü“ abil või lohistades kirje teise peale.

Menüükirje viib lehele, kuid sel on oma silt. Kui muudad hiljem lehe pealkirja, ei muutu menüü silt automaatselt kaasa (klassikalises menüüs mitte kunagi, navigeerimisplokis oleneb, kuidas kirje lisasid). Vaata seega pärast pealkirja muutmist ka menüü üle.

Hea menüü

Menüü ei ole kogu saidi sisukord. See on viide mõnele kohale, kuhu enamik külastajaid soovib minna. Mõned juhised:

• Vähe peakirjeid: umbes viis kuni seitse. Rohkem ei mahu telefoni ekraanile ja külastajad ei loe seda ikkagi.
• Maksimaalselt üks alammenüü tase. Alammenüü alammenüüs on telefonis raskesti kasutatav ja ekraanilugejatega segadust tekitav.
• Alammenüü pealkiri on ka link. Paljudes teemades avab klõps „Teenused“ peal alammenüü, kuid „Teenused“ ise on ka leht. Veendu, et see leht eksisteerib ja näitab midagi mõistlikku, või tee selgeks, et tegu on vaid pealkirjaga.
• Tavalised sõnad, mida külastajad ise kasutaksid: „Hinnad“, mitte „Meie investeerimisvõimalused“.
• Kontakt ja kõige olulisem tegevus (aja broneerimine, tellimine) alati kättesaadav, sageli menüü paremas servas või nupuna.
• Juriidilised lingid (privaatsuspoliitika, üldtingimused, küpsiste seaded) kuuluvad jaluse menüüsse, mitte peamenüüsse. Need peavad siiski olema alati leitavad, igal lehel (õppetund 9.3).

Mobiilne ja ligipääsetav

Telefonis koondub menüü tavaliselt kolme joonega nupuks („hamburgermenüü“). Navigeerimisplokis saad valida, millal see juhtub (alati, või ainult väikestel ekraanidel). Testi seda alati päris telefonil:

• Kas saad igat kirjet pöidlaga puudutada, ilma kõrvalolevat kirjet kogemata puudutamata?
• Kas alammenüüd avanevad ja sulguvad ühe puudutusega?
• Kas menüü sulgub, kui valid mõne kirje?

Ligipääsetavuse jaoks (külastajad, kes kasutavad ekraanilugejat või ainult klaviatuuri) pane tähele:

• Selged lingitekstid. „Loe edasi“ või „Kliki siia“ ei ütle midagi, kui ekraanilugeja loeb kõik lingid järjest ette. „Loe edasi meie lahtiolekuaegade kohta“ aga ütleb.
• Klaviatuuriga kasutamine: Tab-klahviga läbi menüü, Parool-klahviga kirje avamine. Enamik teemasid ja navigeerimisplokk teevad seda hästi; ise skriptidega tehtud menüüd sageli mitte.
• Link teisele saidile peaks eelistatavalt avanema samas aknas. Kui see peab avanema uues aknas, märgi see ära.

Muu navigeerimine

Lisaks peamenüüle aitavad need osad külastajatel oma teed leida:

• otsinguväli (otsinguplokk), eriti kui saidil on palju postitusi;
• pudrurajad ("Avaleht > Teenused > Veebidisain"), sageli pakub neid SEO-plugin või teema;
• sisemised lingid sinu tekstides teistele lehtedele (hea ka leitavuse jaoks, õppetund 9.2);
• 404-leht, mis aitab: otsinguvälja ja linkidega peamistele lehtedele, mitte ainult „ei leitud“. Plokiteemas muudad seda sjabloonina „404“ Saidiredaktoris.

Praktikas: nii näeb see paneelis välja

WordPressi haldusalas:

• Plokiteema: Välimus > Editor > Navigeerimine. Vali menüü, lisa kirjeid plussiga, lohista need õigesse järjekorda ja vali navigeerimisploki seadetes, millal mobiilimenüü ilmub.
• Klassikaline teema: Välimus > Menu's. Loo menüü, märgi vasakul lehed ja klõpsa Lisa menüüsse, lohista järjekord ja märgi all ära menüü asukoht. Salvesta.

Kokkuvõte

• Plokiteemas loo menüü navigeerimisplokiga Saidiredaktoris; klassikalises teemas lehel Välimus > Menu's koos menüü asukohaga.
• Menüü näitab teed mõnele olulisele kohale: vähe kirjeid, maksimaalselt üks alammenüü tase.
• Juriidilised lingid kuuluvad jaluse menüüsse, alati leitavana.
• Testi mobiilimenüüd päris telefonil ja kasuta lingiteksti, mis ütleb iseenesest midagi.
• Otsinguväli, sisemised lingid ja abivalmis 404-leht täiendavad menüüd.

Test

Ülesanne

Ülesanne D4.3: Toimiv menüü. Loo (või paranda) oma saidi peamenüü maksimaalselt seitsme peakirjega, ühe alammenüüga ja ühe kohandatud lingiga, ning jaluse menüü koos privaatsuspoliitikaga. Testi mobiilimenüüd oma telefonis ja ainult klaviatuuriga (Tab ja Parool). Märgi, mis toimib, ja kirjuta üles: millist liiki teema sul on (plokiteema või klassikaline), kus sa menüü lõid, ja millist lingiteksti parandasid ning kuidas?

Lisalugemist

WordPressi enda kasutamise kohta ei ole meil veel oma artikleid; WordPressi ametlik dokumentatsioon on põhjalik.

• Navigeerimisplokk (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/navigation-block/
• Menüüd klassikalistes teemades (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/appearance-menus-screen/
• Saidiredaktor (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/site-editor/