Suunnitellessasi verkkosivustoasi WordPress-lohkoteemoilla olet ehkä huomannut, että sivustosi päänavigaattorissa on rajoitetut tyylivaihtoehdot. Kun esimerkiksi napsautat sivulinkkiä päänavigaatiossasi vieraillaksesi verkkosivustosi sivulla, aktiivisen sivun linkki ei muuta väriä päänavigaattorin sisällä. Toisin sanoen käyttäjälle ei ole tietoa siitä, millä sivulla hän tällä hetkellä on.

Hyvä käyttäjäkokemus sanoo, että sivuston vierailijoilla tulee aina olla jonkinlainen osoitus siitä, missä he ovat sivustollasi – se auttaa estämään heitä eksymästä.

Tässä opetusohjelmassa näytän sinulle, kuinka voit nopeasti mukauttaa sivustosi navigointia WordPress-lohkoteemoissa näyttämään mukautetun värin aktiiviselle sivulle. Käytän tässä esittelyssä Twenty Twenty Four -teemaa.

Vaihe 1: Siirry lohkoeditoriin

Siirry WordPress-hallintapaneelissa kohtaan Ulkoasu> Muokkaus (punainen nuoli yllä olevassa kuvassa). Tämä vie sinut sivustoeditoriin.

Napsauta valikon oikealla puolella olevaa pääsisältöaluetta. Tämä vie sinut lohkoeditoriin.

Vaihe 2: Lisää mukautettu CSS

Napsauta seuraavaksi "Tyylit" -kuvaketta lohkoeditorin oikeassa yläkulmassa.

Napsauta "Lisää"-kuvaketta (kolmen pisteen pystysuuntainen kuvake) ja napsauta sitten "Additional CSS".

Liitä seuraava CSS-koodi "Additional CSS" -tekstikenttään:

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

Korvaa "#"-symbolin ja ";"-merkin välissä oleva arvo symboli minkä tahansa värin heksadesimaalikoodilla (voit saada värin heksadesimaaliarvoja WordPressissä muokkaamalla mitä tahansa väriarvoa tai käyttämällä värityökalua, kuten HueMint or Jäähdyttimet).

Napsauta "Tallenna" -painiketta lohkoeditorin yläosassa ja napsauta sitten "Tallenna" uudelleen.

Vaihe 3: Näytä sivu

Kun muutokset on tallennettu, voit nyt napsauttaa Näytä sivu -kuvaketta esikatsellaksesi sivustoasi päänavigointisi aktiivisen sivun uudella värillä.

Ongelmien karttoittaminen

Jos yllä oleva koodi ei toiminut sinulle, saatat käyttää teemaa, joka käyttää eri luokkia aktiivisille valikkokohdille, tai saatat käyttää mukautettuja linkkejä navigointilohkossasi sivulinkkien sijaan.

Ei-estoteemat tai kolmannen osapuolen lohkoteemat

Korjataksesi edellisen ongelman, sinun on käytettävä selaimesi "tarkista"-työkalua ja selvitettävä, mitä luokkaa käytetään aktiivisille sivulinkeille päänavigaatiossa (voit myös kokeilla googlaamalla "Mitä luokkaa ____ -teema käyttää aktiivisiin" sivulinkit päänavigaattorissa).

Jälkimmäisen ongelman tapauksessa muuta mukautetut linkit sivulinkeiksi sivustoeditorissa. Voit tehdä tämän lohkoeditorissa napsauttamalla editorin vasemmassa yläkulmassa olevaa logoa (on WordPress-logo tai sivustosi logo).

Napsauta sitten "Navigointi". Napsauta sivustosi päävalikon nimen vieressä olevaa Muokkaa-kuvaketta.

Napsauta navigointivalikkoa muokataksesi sitä. Napsauta sitten "Siirry vanhempien navigointilohkoon" estoasetusten sivupalkissa, jos se ei ole oletuksena siellä.

Estäasetusten sivupalkin "Valikko"-otsikon alla näet luettelon kaikista päänavigaatiossasi olevista sivuistasi. Jos navigaatiossa on sivuston sivuja, jotka on lueteltu mukautetuina linkkeinä (kuten esimerkkikuvan alin kohta), sinun on poistettava merkintä ja lisättävä se uudelleen sivuksi (jos mahdollista).

Napsauta merkinnän vieressä olevaa "Asetukset"-kuvaketta ja napsauta sitten "Poista ____". Napsauta seuraavaksi "+" -kuvaketta sivuluettelon alaosassa.

Napsauta sitten "Sivun linkki" ja etsi sitten sivu, jonka haluat lisätä. Kun olet lisännyt sivun, napsauta "Tallenna" ja napsauta "Tallenna" uudelleen. Ongelma pitäisi ratkaista.

Pin Se Pinterest