Kui kujundate oma veebisaiti WordPressi plokkide teemade järgi, olete võib-olla märganud, et teie saidi põhinavigeerimisel on piiratud stiilivalikud. Näiteks kui klõpsate oma veebisaidi lehe külastamiseks põhinavigeerimisel lehe lingil, ei muuda aktiivse lehe link põhinavigeerimisribas värvi. Teisisõnu, kasutajal pole mingit teavet selle kohta, millisel lehel ta parasjagu viibib.

Hea kasutajakogemus ütleb, et saidi külastajatel peaks alati olema mingi märge selle kohta, kus nad teie saidil asuvad – see aitab hoida neid eksimise eest.

Selles õpetuses näitan teile, kuidas WordPressi plokkide teemades saidil navigeerimist kiiresti kohandada, et kuvada aktiivse lehe jaoks kohandatud värv. Ma kasutan selle demonstratsiooni jaoks teemat Twenty Twenty Four.

Sisukord

1. samm: liikuge plokiredaktorisse

Liikuge WordPressi plokiredaktorisse välimuse> redaktori kaudu

Avage oma WordPressi juhtpaneelil Välimus> Redigeerija (ülaloleval fotol punane nool). See viib teid saidi redaktorisse.

WordPressi plokiredaktorile pääsemiseks klõpsake põhisisualal

Klõpsake menüüst paremal oleval sisualal. See viib teid plokiredaktorisse.

2. samm: lisage kohandatud CSS

Klõpsake WordPressi kohandatud CSS-i funktsiooni jaoks plokitööriistaribal stiiliikoonil

Järgmisena klõpsake plokiredaktori paremas ülanurgas ikooni "Stiilid".

Klõpsake WordPressis kolme punkti ikooni ja klõpsake nuppu Täiendav CSS

Klõpsake ikooni „Veel” (vertikaalne kolme punktiga ikoon), seejärel klõpsake „Täiendav CSS”.

Aktiivse menüü linkide värvide muutmiseks lisage WordPressile kohandatud CSS

Kleepige järgmine CSS-kood tekstikasti "Täiendav CSS":

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

Asendage väärtus sümboli "#" ja ";" vahel sümbol koos kuueteistkümnendkoodiga mis tahes värvi jaoks, mida soovite kasutada (värvi kuueteistkümnendkoodi väärtused saate WordPressis redigeerida kõike, millel on värviväärtus, või kasutades värvitööriista nagu HueMint or Coolors).

Klõpsake plokkide redaktori ülaosas nuppu "Salvesta" ja seejärel uuesti "Salvesta".

3. samm: vaadake lehte

Vaadake WordPressi menüü lingi kohanduste eelvaadet, klõpsates ikoonil Vaata lehekülge

Kui teie muudatused on salvestatud, saate nüüd klõpsata ikooni „Kuva leht”, et vaadata oma saidi põhinavigeerimisel aktiivse lehe uut värvi.

Probleemid

Kui ülaltoodud kood teie jaoks ei töötanud, võite kasutada teemat, mis kasutab aktiivsete menüüüksuste jaoks erinevaid klasse, või kasutate oma navigeerimisplokis kohandatud linke lehe linkide asemel.

Mitteblokeeritavad teemad või kolmanda osapoole plokkiteemad

Eelneva probleemi lahendamiseks peate kasutama oma brauseris kontrollitööriista ja välja selgitama, millist klassi põhinavigatsioonis aktiivsete lehelinkide jaoks kasutatakse (võite proovida ka guugeldada "Millist klassi ____ teema aktiivseks kasutab lehe lingid põhinavigeerimisribas).

Viimase probleemi puhul muutke lihtsalt oma kohandatud lingid saidiredaktoris olevate lehelinkide vastu. Selleks klõpsake plokiredaktoris oleval logol redaktori vasakus ülanurgas (see on WordPressi logo või teie saidi logo).

Seejärel klõpsake nuppu "Navigeerimine". Klõpsake oma saidi peamenüü nime kõrval ikooni „Muuda”.

Selle muutmiseks klõpsake navigeerimismenüül. Seejärel klõpsake plokkide seadete külgribal „Mine vanemanavigeerimisplokki”, kui see pole vaikimisi sinna lisatud.

Blokeerimisseadete külgriba pealkirja „Menüü” all näete kõigi põhinavigeerimisribal olevate lehtede loendit. Kui teil on navigeerimismenüüs saidilehti, mis on loetletud kohandatud lingina (nagu alumine kirje näidisfotol), peate kirje kustutama ja uuesti lehena lisama (kui võimalik).

Selleks klõpsake kirje kõrval olevat ikooni „Valikud” ja seejärel nuppu „Eemalda ____”. Järgmisena klõpsake lehtede loendi allosas ikooni „+”.

Järgmisena klõpsake valikul „Lehe link”, seejärel leidke leht, mida soovite lisada. Kui olete lehe lisanud, klõpsake "Salvesta" ja klõpsake uuesti "Salvesta". Probleem tuleks lahendada.

See on selle õpetuse jaoks! Kui teile meeldis, võite vaadata minu muud WordPressi õpetused või registreeruge minu WordPressi kursus Udemy kohta!