Kada dizajnirate svoje web mjesto u WordPress blok temama, možda ste primijetili da glavna navigacija za vaše web mjesto ima ograničene mogućnosti oblikovanja. Na primjer, kada kliknete vezu stranice u svojoj glavnoj navigaciji da biste posjetili stranicu na svojoj web stranici, veza za aktivnu stranicu ne mijenja boju unutar glavne navigacije. Drugim riječima, nema naznake za korisnika na kojoj se stranici trenutno nalazi.

Dobro korisničko iskustvo kaže da bi posjetitelji web-mjesta uvijek trebali imati neku vrstu indikacije gdje se nalaze na vašem web-mjestu – to im pomaže da se ne izgube.

U ovom vodiču pokazat ću vam kako brzo prilagoditi navigaciju web-mjesta u blok temama WordPressa za prikaz prilagođene boje za aktivnu stranicu. Za ovu demonstraciju koristit ću temu Twenty Twenty Four.

Korak 1: Dođite do uređivača blokova

Na nadzornoj ploči WordPressa idite na Izgled>Uređivač (crvena strelica na gornjoj fotografiji). Ovo će vas odvesti do uređivača stranice.

Pritisnite područje glavnog sadržaja s desne strane izbornika. Ovo će vas odvesti u uređivač blokova.

Korak 2: Dodajte prilagođeni CSS

Zatim kliknite na ikonu "Stilovi" u gornjem desnom kutu uređivača blokova.

Kliknite ikonu "Više" (okomite ikone s tri točke), zatim kliknite "Dodatni CSS".

Zalijepite sljedeći CSS kod u tekstni okvir "Dodatni CSS":

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

Zamijenite vrijednost između simbola “#” i “;” simbol s heksadecimalnim kodom za bilo koju boju koju želite koristiti (vrijednosti heksadecimalnog koda boja možete dobiti unutar WordPressa uređivanjem svega što ima vrijednost boje ili korištenjem alata za boje kao što je HueMint or Hladnjaci).

Kliknite gumb "Spremi" na vrhu uređivača blokova, zatim ponovno kliknite "Spremi".

Korak 3: Pregledajte stranicu

Sa spremljenim promjenama, sada možete kliknuti ikonu "Prikaži stranicu" da biste pregledali svoju stranicu s novom bojom za aktivnu stranicu u glavnoj navigaciji.

Rješavanje problema

Ako gornji kôd nije radio za vas, možda koristite temu koja koristi različite klase za aktivne stavke izbornika ili možda koristite prilagođene veze u svom navigacijskom bloku umjesto veza stranica.

Neblokirane teme ili blokirane teme trećih strana

Da biste riješili prvi problem, morat ćete upotrijebiti alat "inspect" u svom pregledniku i otkriti koja se klasa koristi za aktivne veze stranica u vašoj glavnoj navigaciji (možete također pokušati guglati "Koju klasu koristi ____ tema za aktivne poveznice stranica u glavnoj navigaciji”).

Za potonji problem jednostavno promijenite svoje prilagođene veze u veze stranica unutar uređivača web-mjesta. Da biste to učinili iz uređivača blokova, kliknite na logotip u gornjem lijevom kutu uređivača (to će biti logotip WordPressa ili logotip vaše web stranice).

Zatim kliknite "Navigacija". Kliknite ikonu "Uredi" pored naziva glavnog izbornika vaše web stranice.

Kliknite na navigacijski izbornik da biste ga uredili. Zatim kliknite "Idi na nadređeni navigacijski blok" na bočnoj traci s postavkama bloka ako se tamo ne nalazi prema zadanim postavkama.

Pod naslovom "Izbornik" na bočnoj traci postavki bloka vidjet ćete popis svih svojih stranica koje se nalaze u vašoj glavnoj navigaciji. Ako imate bilo koju stranicu web-mjesta u navigaciji koja je navedena kao prilagođena veza (poput donjeg unosa na primjeru fotografije), morat ćete izbrisati unos i ponovno ga dodati kao stranicu (ako je moguće).

Da biste to učinili, kliknite ikonu "Opcije" pored unosa, zatim kliknite "Ukloni ____." Zatim kliknite ikonu "+" na dnu popisa stranica.

Zatim kliknite "Page Link", zatim pronađite stranicu koju želite dodati. Nakon što ste dodali stranicu, kliknite “Spremi” i ponovno kliknite “Spremi”. Problem treba riješiti.