Fűszerezze a WordPress menüt Webtimiser ikonokkal
- Utolsó frissítés: 2020. szeptember 18
- Sonia Rieder
- Wordpress - Tippek és oktatóanyagok
- 1
A navigáció egy webhely nagyon fontos része, és könnyen adaptálható a WordPress-ben. A betűtípus vagy szín mellett ikonok is felhasználhatók az egyes menüpontok megtervezéséhez. Lépésről lépésre elmagyarázom, hogyan gyűjtheti WordPress menüt ikonokkal, a Húsz Tizenöt témát használva példaként.
1. Hozzon létre egy gyermek témát
Annak érdekében, hogy a stíluslap változásai ne vesszenek el egy téma frissítésekor, először létre kell hoznia egy gyermek témát.
Ennek részletes leírását a WordPress gyermek téma létrehozása című cikkemben találja meg.
Alternatív megoldásként természetesen használhat plugint vagy testreszabót is a saját CSS-hez a WordPress programban.
2. Vegyen fel ikonokat a menübe
A Húsz Tizenöt téma magában foglalja a Ikon Betűtípus Genericons, amelyet ebben az útmutatóban fogok használni. Ha a WordPress menüt egy másik betűtípus-könyvtár ikonjaival szeretné használni, előfordulhat, hogy azokat előzetesen integrálnia kell.
Itt van egy rövid részlet a Font Awesome integrálásához. Több mint 500 ikonnal ez az ikontípus sokkal átfogóbb és gyorsan beépül a WordPressbe. Ehhez egyszerűen adja hozzá a következő kódrészletet a functions.php fájlhoz:
Ezután a Font Awesome ikonokat is használhatja a menüpontokhoz. Ezután csak a CSS stílusokat kell eltérően adaptálni, mint az utasítások.
1. lépés: Aktiválja a speciális menüopciókat
A WordPress programban külön menüpontokhoz rendelhet külön CSS osztályt. Ehhez először aktiválnia kell a speciális menü tulajdonságait.
Ehhez először lépjen az irányítópultra Tervezés> Menük.
Ott találja a speciális menü tulajdonságait, amelyek kissé el vannak rejtve a panelen Lehetőségek a csúcson.
Most jelölje be a négyzetet CSS osztályok. Ezután minden navigációs ponthoz külön CSS osztályt rendelhet. És így egyedileg is stílusozhatja.
2. lépés: helyezzen be CSS osztályt
A Genericons ikontípusú könyvtár már integrálva van a WordPress húsz tizenöt témájába. Ezért használom ezeket az ikonokat a menüpontok kiemelésére.
A Home menüponthoz a generalic-home ikont választom. Tehát belépek a CSS osztályokba az új mezőbe: genericon genericon-home
A többi menüpont megtekintheti az elérhető ikonokat a genericons.com webhelyen.
Egyszerűen kattintson a kívánt ikonra, majd tovább HTML másolása. Ezután egy előugró ablakban megkapja az ikon kódját.
A példa menüjéhez a következő ikonokat választottam:
- Főoldal: genericon genericon-home
- Kapcsolat: genericon genericon-mail
- Blog: genericon genericon-image
3. lépés: adaptálja a stíluslapot
Annak érdekében, hogy az ikonok helyesen legyenek elhelyezve a menüpontok előtt, néhány CSS-utasítást be kell illeszteni.
A fájl a következő CSS stílusokat tartalmazza stílus.css.
Ízlésétől függően megadhatja az ikonok színét és méretét is.
Kész a WordPress menü ikonokkal
Adja hozzá a WordPress menü ikonjait a plugin/theme segítségével
Ikonok vagy képek természetesen beépíthetők a WordPress menükbe is! Van néhány plugin ehhez, például a menü ikonjai. Ezzel CSS nélkül fűszerezheti a menüt.
De néhány téma az ikonok integrálását is lehetővé teszi. Az OceanWP témát használom, és itt egy ikont vagy képet egy kattintással beszúrhatok a menübe.
OceanWP: Egy kattintással vegyen fel ikonokat a menübe
Yoast SEO for WordPress: Utasítások és tippek