Izbornici i navigacija

Modul 4: Izrada sadržaja · Vrijeme čitanja: 7 minuta

Cilj učenja: Nakon ove lekcije moći ćete izraditi jasan izbornik, kako u blok temi tako i u klasičnoj temi, te ćete znati što čini dobar izbornik.

Ključni pojmovi: navigacijski blok, Uređivač stranice, Izgled > Menu's, lokacija izbornika, podizbornik, prilagođena poveznica, mobilni izbornik, izbornik u podnožju, tekst poveznice, pristupačnost

Dva načina, ovisno o Vašoj temi

Gdje izrađujete izbornik, ovisi o Vašoj temi (lekcija 5.1):

• Blok tema: izbornik je navigacijski blok u zaglavlju web-stranice. Uređujete ga u Uređivaču stranice (Izgled > Editor > Navigacija, ili u predlošku Header).
• Klasična tema: izbornik izrađujete putem Izgled > Menu's i ondje odabirete lokaciju izbornika koju tema nudi, primjerice „Glavni izbornik” ili „Podnožje”.

Ne vidite li kod Izgled opciju Menu's, već samo Editor? Tada koristite blok temu. To je čest izvor zabune nakon promjene teme: „moj izbornik je nestao”. Stari izbornik i dalje postoji (nalazi se u bazi podataka kao popis stavki izbornika), ali nova tema ga traži na drugom mjestu. U Uređivaču stranice možete kod navigacijskog bloka uvesti postojeći klasični izbornik.

Što sve može sadržavati

Stavka izbornika može biti:

• stranica ili objava s Vaše web-stranice;
• kategorija (tada vodi na arhiv te kategorije);
• prilagođena poveznica: bilo koja adresa, uključujući na drugu web-stranicu, ili sidro unutar stranice (/diensten/#prijzen);
• u blok temi i drugi blokovi u navigaciji, poput polja za pretragu, ikona društvenih mreža ili gumba „Zakažite termin”.

Stavke izbornika možete postaviti jednu pod drugu kao podizbornik: u klasičnoj temi tako da ih malo povučete udesno, u navigacijskom bloku pomoću „Dodaj podizbornik” ili povlačenjem jedne stavke na drugu.

Stavka izbornika vodi na stranicu, ali ima vlastitu oznaku. Ako kasnije promijenite naslov stranice, oznaka u izborniku se ne mijenja automatski (u klasičnom izborniku ne, u navigacijskom bloku ovisno o tome kako ste dodali stavku). Stoga nakon promjene naslova svakako provjerite i izbornik.

Dobar izbornik

Izbornik nije sadržaj cijele Vaše web-stranice. On je putokaz prema nekolicini mjesta kamo većina posjetitelja želi ići. Nekoliko smjernica:

• Malo glavnih stavki: otprilike pet do sedam. Više se ionako ne uklapa na mobitel, a posjetitelji to ne čitaju.
• Najviše jedna razina podizbornika. Podizbornik unutar podizbornika teško je koristiti na mobitelu i zbunjujući je za čitače zaslona.
• Naslov podizbornika je ujedno i poveznica. U mnogim temama klik na „Usluge” otvara podizbornik, ali „Usluge” je ujedno i sama stranica. Pobrinite se da ta stranica postoji i prikazuje nešto smisleno, ili da je jasno da je stavka samo naslov.
• Obični izrazi koje bi posjetitelji koristili: „Cijene”, a ne „Naše investicijske mogućnosti”.
• Kontakt i najvažnija radnja (zakazivanje termina, naručivanje) uvijek dostupni, često desno u izborniku ili kao gumb.
• Pravne poveznice (pravila privatnosti, opći uvjeti, postavke kolačića) pripadaju u izbornik u podnožju, ne u glavni izbornik. No uvijek moraju biti dostupne, na svakoj stranici (lekcija 9.3).

Mobilno i pristupačno

Na mobitelu se izbornik obično sklapa u gumb s tri crtice (tzv. „hamburger izbornik”). Kod navigacijskog bloka postavljate kada se to događa (uvijek, ili samo na malim zaslonima). Uvijek to testirajte na pravom mobitelu:

• Možete li dotaknuti svaku stavku palcem, bez slučajnog dodira susjedne stavke?
• Otvaraju li se podizbornici dodirom, i zatvaraju li se ponovno?
• Zatvara li se izbornik kad odaberete stavku?

Za pristupačnost (posjetitelje koji koriste čitač zaslona ili samo tipkovnicu) obratite pozornost na:

• Jasne tekstove poveznica. „Pročitajte više” ili „Kliknite ovdje” ne govori ništa ako čitač zaslona redom čita sve poveznice. „Pročitajte više o našem radnom vremenu” jest smisleno.
• Upravljanje tipkovnicom: tipkom Tab kroz izbornik, tipkom Unos otvaranje stavke. Većina tema i navigacijski blok to dobro rade; samostalno izrađeni izbornici sa skriptama često ne.
• Poveznica na drugu web-stranicu najbolje se otvara u istom prozoru. Ako mora u novom prozoru, to jasno naznačite.

Druga navigacija

Osim glavnog izbornika, posjetiteljima u snalaženju pomažu i ovi elementi:

• polje za pretragu (blok za pretragu), svakako kod web-stranice s puno objava;
• mrvice (breadcrumbs) („Početna > Usluge > Web-dizajn”), često ih pruža SEO dodatak ili tema;
• unutarnje poveznice u Vašim tekstovima prema drugim stranicama (dobre i za vidljivost na tražilicama, lekcija 9.2);
• 404 stranica koja pomaže: s poljem za pretragu i poveznicama prema najvažnijim stranicama umjesto samo „nije pronađeno”. Kod blok teme tu uređujete kao predložak „404” u Uređivaču stranice.

U praksi: ovako to izgleda u ploči

U administraciji WordPressa:

• Blok tema: Izgled > Editor > Navigacija. Odaberite izbornik, dodajte stavke pomoću plusa, povucite ih u pravi redoslijed, te kod postavki navigacijskog bloka odaberite kada se prikazuje mobilni izbornik.
• Klasična tema: Izgled > Menu's. Izradite izbornik, lijevo označite stranice i kliknite na Dodaj u izbornik, povucite redoslijed, te na dnu označite lokaciju izbornika. Spremite.

Sažetak

• U blok temi izbornik izrađujete pomoću navigacijskog bloka u Uređivaču stranice; u klasičnoj temi putem Izgled > Menu's s lokacijom izbornika.
• Izbornik pokazuje put prema nekoliko važnih mjesta: malo stavki, najviše jedna razina podizbornika.
• Pravne poveznice pripadaju u izbornik u podnožju, uvijek dostupne.
• Testirajte mobilni izbornik na pravom mobitelu i koristite tekstove poveznica koji sami po sebi nešto znače.
• Polje za pretragu, unutarnje poveznice i korisna 404 stranica nadopunjuju izbornik.

Kviz

Zadatak

Zadatak D4.3: Izbornik koji funkcionira. Izradite (ili poboljšajte) glavni izbornik Vaše web-stranice s najviše sedam glavnih stavki, jednim podizbornikom i jednom prilagođenom poveznicom, te izbornikom u podnožju s Vašim pravilima privatnosti. Testirajte mobilni izbornik na svom mobitelu i koristeći samo tipkovnicu (Tab i Unos). Zabilježite što funkcionira i napišite: kakvu temu imate (blok ili klasičnu), gdje ste izradili izbornik, te koji tekst poveznice ste poboljšali i na koji način?

Dodatno čitanje

Za rad unutar samog WordPressa još nemamo vlastite članke; službena dokumentacija WordPressa vrlo je opsežna.

• Navigacijski blok (wordpress.org, engleski): https://wordpress.org/documentation/article/navigation-block/
• Izbornici u klasičnim temama (wordpress.org, engleski): https://wordpress.org/documentation/article/appearance-menus-screen/
• Uređivač stranice (wordpress.org, engleski): https://wordpress.org/documentation/article/site-editor/