Amikor webhelyét WordPress blokktémákban tervezi, észrevehette, hogy a webhely fő navigációja korlátozott stílussal rendelkezik. Ha például a fő navigációs menüben egy oldalhivatkozásra kattint, hogy felkeressen egy oldalt a webhelyén, az aktív oldal hivatkozása nem változtatja meg a színét a fő navigáción belül. Más szóval, a felhasználó számára nincs jelzés arra vonatkozóan, hogy éppen melyik oldalon tartózkodik.

A jó felhasználói tapasztalat azt mutatja, hogy a webhely látogatóinak mindig rendelkezniük kell valamilyen jelzéssel, hogy hol tartózkodnak a webhelyen – ez segít elkerülni, hogy eltévedjenek.

Ebben az oktatóanyagban megmutatom, hogyan szabhatja gyorsan testre a webhely navigációját a WordPress blokktémáiban, hogy egyéni színt jelenítsen meg az aktív oldalhoz. A bemutatóhoz a Huszonnégy témát fogom használni.

1. lépés: Keresse meg a Blokkszerkesztőt

A WordPress irányítópultjáról lépjen a Megjelenés>Szerkesztő elemre (piros nyíl a fenti képen). Ezzel a Webhelyszerkesztőbe kerül.

Kattintson a fő tartalomterületre a menü jobb oldalán. Ezzel bejut a Blokkszerkesztőbe.

2. lépés: Adjon hozzá egyéni CSS-t

Ezután kattintson a „Stílusok” ikonra a Blokkszerkesztő jobb felső sarkában.

Kattintson a „Továbbiak” ikonra (a függőleges hárompontos ikonra), majd kattintson a „További CSS” elemre.

Illessze be a következő CSS-kódot a „További CSS” szövegmezőbe:

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

Cserélje ki a „#” szimbólum és a „;” közötti értéket szimbólumot a használni kívánt szín hexadecimális kódjával (szín hexadecimális kódértékeket kaphat a WordPress-en belül, ha bármit szerkeszt, aminek színértéke van, vagy olyan színeszköz használatával, mint pl. HueMint or Hűtők).

Kattintson a „Mentés” gombra a Blokkszerkesztő tetején, majd kattintson ismét a „Mentés” gombra.

3. lépés: Oldal megtekintése

Miután elmentette a változtatásokat, most az „Oldal megtekintése” ikonra kattintva megtekintheti a webhely előnézetét az aktív oldal új színével a fő navigációs menüben.

Hibaelhárítás

Ha a fenti kód nem működött az Ön számára, akkor előfordulhat, hogy olyan témát használ, amely különböző osztályokat használ az aktív menüelemekhez, vagy lehet, hogy oldalhivatkozások helyett egyéni hivatkozásokat használ a navigációs blokkban.

Nem blokkolt témák vagy harmadik féltől származó blokkotémák

Az előbbi probléma megoldásához használnia kell a böngésző „ellenőrző” eszközét, és ki kell találnia, hogy a fő navigációban melyik osztályt használják az aktív oldalhivatkozásokhoz (megpróbálhatja a Google keresést is: „Milyen osztályt használ a ____ téma az aktívhoz oldalhivatkozások a fő navigációban”).

Az utóbbi probléma esetén egyszerűen módosítsa az egyéni hivatkozásokat oldalhivatkozásokra a Webhelyszerkesztőben. Ehhez a Blokkszerkesztőből kattintson a szerkesztő bal felső sarkában lévő logóra (ez lesz a WordPress logó vagy a webhely logója).

Ezután kattintson a „Navigáció” gombra. Kattintson a webhelye főmenüjének neve melletti „Szerkesztés” ikonra.

Kattintson a navigációs menüre a szerkesztéshez. Ezután kattintson az „Ugrás a szülő navigációs blokkra” lehetőségre a Letiltás beállításai oldalsávon, ha alapértelmezés szerint nincs ott.

A Blokkbeállítások oldalsáv „Menü” címsora alatt láthatja a fő navigációs menüben található összes oldal listáját. Ha a navigációban olyan webhelyoldalak vannak, amelyek egyéni hivatkozásként szerepelnek (például a példakép alsó bejegyzése), törölnie kell a bejegyzést, és újból hozzá kell adnia oldalként (ha lehetséges).

Ehhez kattintson a bejegyzés melletti „Opciók” ikonra, majd kattintson a „____ eltávolítása” gombra. Ezután kattintson a „+” ikonra az oldallista alján.

Ezután kattintson az „Oldalhivatkozás” elemre, majd keresse meg a hozzáadni kívánt oldalt. Miután hozzáadta az oldalt, kattintson a „Mentés” gombra, majd ismét a „Mentés” gombra. A kérdést meg kell oldani.