WordPress menüikonok: 2 módszer ikonok hozzáadásához a menühöz az egyszerű navigáció érdekében

A WordPress-webhely egyik előnye, hogy szabadon testreszabhatja, ha szükséges. Ez magában foglalja, de nem kizárólagosan, a navigációs menük megjelenésének javítását képikonokkal.

Ikonok hozzáadása a WordPress navigációs menüjéhez vonzóbbá, hozzáférhetőbbé és könnyebben felismerhetőbbé teheti. A menüikonok segítenek a menü szerkezetének a nemzetközi közönséggel való megismerésében is.

Kétféleképpen adhat hozzá ikonokat a WordPress webhelyéhez – manuálisan vagy menüikon-bővítmény használatával. Az első módszer rugalmasságot kínál az ideális terv megvalósításában, de CSS ismereteket igényel. Ha nem biztos a kódolási készségeiben, javasoljuk a második módszer használatát.

Olvassa tovább, hogy megértse, hogyan működnek az egyes módszerek, és válassza ki az Ön igényeinek leginkább megfelelőt.

1. módszer. Menüikonok hozzáadása CSS használatával

Ez a módszer magában foglalja egy ikontípus hozzáadását egy könyvtárból a WordPress webhelyéhez egyéni CSS használatával . Különféle ikontípusok állnak rendelkezésre, ami azt jelenti, hogy nem kell a semmiből megtervezni őket, mint például a Dashicons , az Elusive Icons , az Foundation Icons és a Font Awesome .

Ebben az oktatóanyagban a Font Awesome ikontárat fogjuk használni. Így adhat hozzá WordPress menüikonokat CSS használatával :

• Nyissa meg a Font Awesome kezdőlapját , és válassza az Indítás ingyen lehetőséget .

• Adja meg e-mail-címét, hogy megkapja az ingyenes Kit kódot, amellyel lekérheti a Font Awesome ikonokat a könyvtárukból. Így kell kinéznie a könyvtár Kit kódjának:

• Most, hogy megvan a könyvtár kódja, a következő lépés az, hogy megszerezze a használni kívánt Font Awesome ikonok CSS-osztályát. Nyissa meg a Font Awesome keresőoldalát , és mentse el az igényeinek megfelelőket. Ebben a példában a „ ház ” ikont fogjuk használni kezdőlapunkhoz.

• Nyissa meg a WordPress adminisztrátori irányítópultját, és lépjen a Megjelenés -> Témafájlszerkesztő menüpontra .
• Nyissa meg a header.php fájlt, és adja hozzá a Kit kódot a </head> sor fölé. Kattintson a Fájl frissítése elemre .

• Lépjen a Megjelenés -> Menük elemre , és bontsa ki a testreszabni kívánt menüpontot. Adja hozzá a harmadik lépésben kapott CSS-osztályt a Navigációs címke szövegdobozhoz a Menüszerkezet részben. Tartsa meg az aktuális menüszöveget, ha a kép ikon mellett szeretné megjeleníteni.

• Ismételje meg a harmadik és hatodik lépést, ha további ikonokat szeretne hozzáadni más menüpontokhoz, majd kattintson a Menü mentése gombra.
• Ha a folyamat sikeres, a menü így fog kinézni:

2. módszer. Menüikonok hozzáadása beépülő modul használatával

Számos bővítmény nagyszerű menüikonokkal egyszerűsíti a navigációs menü testreszabásának folyamatát. A következő bővítményeket ajánljuk:

• Menu Icons by ThemeIsle – egy ingyenes beépülő modul, amely különböző ikontípusokat támogat, beleértve a Font Awesome-ot, a Dashicons-t és az SVG-t.
• Menu Image ‒ egy freemium bővítmény, amely a menüelemeket cselekvésre ösztönző gombokká alakíthatja.
• WP Menu Icons – egy másik ingyenes bővítmény, amely többféle ikontípust támogat, és különféle testreszabási lehetőségeket kínál, beleértve az ikon helyzetét és színét.
• Max Mega Menu ‒ egy bővítmény, amely lehetővé teszi a WordPress mega menü létrehozását és ikonok hozzáadását különböző platformokról. A következő oktatóanyag megmutatja, hogyan adhat hozzá ikonokat a Menu Icons by ThemeIsle bővítmény használatával:
• Telepítse és aktiválja a WordPress bővítményt .

• Lépjen a Megjelenés -> Menük elemre , és bontsa ki a testreszabni kívánt menüpontot. Megjelenik egy új menüelem, melynek neve Ikon: Válassza a Navigációs címke szövegmező alatt .

• Kattintson a Kiválasztás gombra , és válasszon egy Dashicons ikont a felugró menüből. Testreszabhatja az új ikon láthatóságát, helyzetét, függőleges igazítását és betűméretét a jobb oldali menüikonbeállítások segítségével. Ha elkészült, nyomja meg a Select gombot.

• A kiválasztott új ikonnak meg kell jelennie a Menüszerkezet részben. Ismételje meg ugyanezt a folyamatot a többi menüelemnél, majd kattintson a Menü mentése gombra .

• Íme egy példa egy WordPress menüre, amelyhez a Dashicons alapértelmezett ikonja van hozzáadva a bővítmény segítségével:

Következtetés

Menüikonok hozzáadása a WordPress webhelyéhez kiváló módja annak, hogy javítsa a navigációt és az esztétikát. A módosítás viszonylag egyszerű, így bárki megteheti a WordPress szakértőinek segítsége nélkül.

Ebből a cikkből két módszert tanult meg, hogyan adhat hozzá menüikonokat a WordPress navigációs menüjéhez:

• Manuális kódolás – ez a módszer nagyobb rugalmasságot biztosít, de némi CSS-ismeretet igényel.
• Menüikon-bővítmény használata – kezdőbarátabb módszer, de ne feledje, hogy túl sok beépülő modul használata lelassíthatja a WordPress webhelyét.