WordPress menü tuningolása ikonokkal

By ZoltánEgyéb, WordPress tippek

WordPress menü is lehet látványelem? Miért ne!

Ha már mindent beállítottunk a WordPress weboldalunkon, érdemes pár aprósággal „felturbózni” azt, így nem csak csinosabb, de felhasználóbarátabb is lesz. Ilyen jótékony „olcsó” trükk lehet az, ha a menüpontok elé (esetleg mögé) egy kis képecskét, ikont helyezünk el. Persze nem kell a WordPress menü -t agyon ikonizálni, csak azt a menüpontot amire a figyelmet akarjuk terelni…

Miről lesz szó a bejegyzésben?

  • miért jó?
  • bővítmény telepítése
  • ikon beillesztése, beállítása
  • ingyenes források
  • egyéb megoldások

Miért jó?

  • Vizuális megjelenés felturbózása a látogatóban pozitív érzéseket kelt
  • Figyelemfelkeltés
  • Segíti a felhasználót a navigációban

A menüpontok elé pici képet (ikont) helyeztünk…

Növelhetjük a konverziót, ha a menüsorban csak 1 menüpont elé (mögé, vagy helyette) teszünk ikont, így a látogató szinte garantáltan rákattint.

Bővítmény telepítése

1. WordPress vezérlőpult

2. Bővítmények / Új hozzáadása

3. Írjuk be: „menu image”

4. Telepítés

5. Bővítmény bekapcsolása!

 

A bővítmény (wordpress plugin) weboldala:

https://wordpress.org/plugins/menu-image/

Ikon beillesztése, beállítása

0. Ikon beszerzése (letöltése)

1. Vezérlőpult >> Megjelenés

2. Menük

3. Kiválasztott menü (kibontása)

4. Kép beillesztése

5. Menü mentése!

WordPress menü csinosítása ikonnal
WordPress menü csinosítása ikonnal

Ügyeljünk a kiválasztott ikon(ok) stílusára!

A választáskor olyan stílusú ikont válasszunk, amely stílusában illik az oldal sablonjához!

 

Mielőtt beállítanánk az adott menüponthoz tartozó ikont, először be kell szerezni…,

a következő lépésben konkrét tippeket kapsz majd, honnan lehet.

A letöltött ikon(ok) mérete 32X32 px legyen!

Beállíthatjuk hogy az adott ikon a menüpont (szöveg) előtt, helyette (szöveg nem látszódik), vagy utána legyen.

Lehet kombinálni pl. csak az első ikon (home) után nincs szöveg és a többi menüpontnál ikon + szöveg is legyen, de lehet hogy minden menüpont csak ikonból áll (mint pl. az okostelefonok egyes alkalmazásaiban).

Ingyenes (ikon) források

Egyéb megoldások

Ha nem szeretnénk erre bővítményt használni (pl.: weboldal betöltési sebességének javítása), más módon is elérhetjük a kívánt hatást. Két példát mutatok be, a második nem minden sablonnal működik!

1. Glyphiconok

Egyszerűen csak adjuk hozzá az adott „Glyphicon class name” (osztályát) a menüpont „Title Attribute” mezőjéhez és a többit bízzuk a WP-re. Glyphicon osztályokat itt találsz.

Hogyan tegyük látványosabbá a WordPress menüt gliyphicon-al?
Hogyan tegyük látványosabbá a WordPress menüt gliyphicon-al?

 

2. Font Awesome Iconok

Nem minden WP sablon, de pl., amelyet ehhez a weboldalhoz használtam az támogatja a „Font Awesome iconokat”  amelyet egyszerűen hozzáadhatsz a menüelemedhez, legyen akár előtte vagy utána. Kövesd az alábbi példát:

Itt találsz ilyen ikonokat.

 

The following two tabs change content below.

Zoltán

Pete Zoltánnak hívnak és már 18 éve foglalkozom az internetes technikával, honlapokat és webes alkalmazásokat fejlesztek cégeknek, intézményeknek, magánszemélyeknek. Jelenleg számos weboldal felügyeletét látom el, amelyek között vannak kkv-k, kisvállalkozások, magánszemélyek. Tartalmát tekintve, hobby oldal, céges oldal, webáruház, nonprofit oldal, intranet, extranet. Kezdetben magam kódoltam a honlapokat, azok motorját, de később áttértem a CMS-rendszerek (tartalomkezelő rendszerek) használatára, amit nem bántam meg. A CMS-k közül a WordPress a nagy kedvencem. A WordPress mellett kipróbáltam jó pár más nyílt forráskódú tartalomkezelőt is - Jomla, Drupal vagy a másik platformról SenseNet, MojoPortal, Orchard és még sok-sok mást.