Pri oblikovanju spletnega mesta v temah blokov WordPress ste morda opazili, da ima glavna navigacija za vaše spletno mesto omejene možnosti oblikovanja. Na primer, ko kliknete povezavo strani v glavni navigaciji, da obiščete stran na svojem spletnem mestu, povezava za aktivno stran ne spremeni barve znotraj glavne navigacije. Z drugimi besedami, za uporabnika ni nobenega podatka o tem, na kateri strani se trenutno nahaja.

Dobra uporabniška izkušnja pravi, da bi morali obiskovalci spletnega mesta vedno imeti nekakšen znak, kje na vašem spletnem mestu so – to jim pomaga, da se ne izgubijo.

V tej vadnici vam bom pokazal, kako hitro prilagodite navigacijo po spletnem mestu v blokovnih temah WordPress za prikaz barve po meri za aktivno stran. Za to predstavitev bom uporabil temo Twenty Twenty Four.

1. korak: Pomaknite se do urejevalnika blokov

Na nadzorni plošči WordPress pojdite na Videz>Urejevalnik (rdeča puščica na zgornji fotografiji). To vas bo pripeljalo do urejevalnika spletnega mesta.

Kliknite območje glavne vsebine na desni strani menija. To vas bo popeljalo v urejevalnik blokov.

2. korak: Dodajte CSS po meri

Nato kliknite ikono »Slogi« v zgornjem desnem kotu urejevalnika blokov.

Kliknite ikono »Več« (navpična ikona treh pik), nato kliknite »Dodatni CSS«.

Prilepite naslednjo kodo CSS v besedilno polje »Dodatni CSS«:

.current-menu-item {
  color: #e23f1b;
}

Zamenjajte vrednost med simboloma »#« in »;« simbol s šestnajstiško kodo za katero koli barvo, ki jo želite uporabiti (vrednosti šestnajstiške kode barv lahko dobite v WordPressu tako, da uredite vse, kar ima barvno vrednost, ali z uporabo barvnega orodja, kot je HueMint or Ohladi).

Kliknite gumb »Shrani« na vrhu urejevalnika blokov, nato znova kliknite »Shrani«.

3. korak: Ogled strani

Ko so vaše spremembe shranjene, lahko zdaj kliknete ikono »Ogled strani« za predogled spletnega mesta z novo barvo za aktivno stran v glavni navigaciji.

Odpravljanje težav

Če zgornja koda za vas ni delovala, morda uporabljate temo, ki uporablja različne razrede za aktivne elemente menija, ali pa v svojem navigacijskem bloku uporabljate povezave po meri namesto povezav strani.

Neblokirane teme ali blokirne teme tretjih oseb

Če želite rešiti prvo težavo, boste morali uporabiti orodje »pregled« v brskalniku in ugotoviti, kateri razred se uporablja za povezave aktivnih strani v vaši glavni navigaciji (lahko poskusite tudi Googlati »Kateri razred uporablja tema ____ za aktivne povezave do strani v glavni navigaciji«).

Za slednjo težavo preprosto spremenite svoje povezave po meri v povezave strani v urejevalniku spletnega mesta. Če želite to narediti v urejevalniku blokov, kliknite logotip v zgornjem levem kotu urejevalnika (to bo logotip WordPress ali logotip vašega spletnega mesta).

Nato kliknite »Navigacija«. Kliknite ikono »Uredi« poleg imena glavnega menija vašega spletnega mesta.

Kliknite na navigacijski meni, da ga uredite. Nato v stranski vrstici z nastavitvami blokov kliknite »Pojdi na nadrejeni navigacijski blok«, če ni tam privzeto.

Pod naslovom »Meni« v stranski vrstici z nastavitvami blokiranja boste videli seznam vseh svojih strani, ki so v vaši glavni navigaciji. Če imate v navigaciji strani spletnega mesta, ki so navedene kot povezava po meri (kot je spodnji vnos na vzorčni fotografiji), boste morali izbrisati vnos in ga znova dodati kot stran (če je mogoče).

Če želite to narediti, kliknite ikono »Možnosti« poleg vnosa in nato kliknite »Odstrani ____«. Nato kliknite ikono »+« na dnu seznama strani.

Nato kliknite »Povezava do strani« in poiščite stran, ki jo želite dodati. Ko dodate stran, kliknite »Shrani« in znova kliknite »Shrani«. Težavo je treba rešiti.