Jak přidat ikony do hlavního menu WordPressu

Upraveno 6 prosince, 2023 05:52

Možná jste již také viděli hlavní menu WordPressu vytvořené tak, že autor webu umístil před jednotlivé položky menu ikony. Koneckonců, stejně tak, jako to mám i já zde, na blogu. Jelikož jsem se chtěl vyhnout pluginům pro tvorbu menu, a jelikož běžně jako plugin pro ikony používám Font Awesome, ukáži Vám dnes, jak přidat ikony do hlavního menu WordPressu. Jednoduše a rychle.

Co je to vlastně hlavní menu ve WordPressu?

Hlavní menu ve WordPressu je nezbytnou součástí webových stránek, protože umožňuje návštěvníkům rychle najít to, co hledají. Typicky se nachází v horní části stránky (říkáme mu hlavička webu, nebo také header) a obsahuje odkazy na hlavní kategorie webu. To je například stránka “O nás”, “Kontakt” nebo “Produkty a služby”.

Aby uživatelé mohli upravovat hlavní menu, musí mít samozřejmě přístup k administrativnímu rozhraní WordPressu a patřičná práva. V administraci pak lze snadno přidat, nebo odebrat položky z hlavního menu. Menu se nachází v kategorii vzhledu.

Můžete také vytvářet “pod navigační” položky. Například v sekci “O nás” může být navigační struktura na sociální sítě a pod.

Jak přidat ikony do hlavního menu WordPressu

Pokud budete chtít do menu jednoduše a rychle přidat i ikony, lze využít např. již zmíněného pluginu Font Awesome. Ten nainstalujete přes položku “Pluginy” v levém menu. Zde kliknete na instalaci a do vyhledávání pomocí klíčových slov zadáte jméno pluginu. Následně jej nainstalujte a aktivujte.

Úprava menu

Předpokládám, že strukturu menu již máte hotovou a potřebujete přidat pouze ikony. Nyní se tedy přesuňte na web pluginu Font Awesome (https://fontawesome.com/). Zde zvolte v horním menu položku “Icons” a poté vyberte “free and open-source icons“. Web Vám vylistuje základní ikony, které jsou poskytovány zdarma. Pomocí vyhledávání si najděte ikonu, která Vám bude vyhovovat. Např. pro odkaz domů můžete ve vyhledávání ikon zadat výraz “home“, nebo “house“.

Nyní ta “složitější” část. Web pluginu Vám po kliknutí na vybranou ikonu ukáže její HTML kód. Ten vypadá takto:

				
					<i class="fa-solid fa-house"></i>
				
			

Tento kód si zkopírujte do schránky, protože jej budeme potřebovat.

Jakmile si HTML kód zkopírujete, přejděte do nastavení menu:

  • v levém menu zvolte položku “Vzhled
  • v podmenu vyberte položku “Menu
  • v nabídce zvolte vytvořené menu, kam chcete ikony přidat

Jednotlivé položky menu jsou editovatelné. Pokud si přejete dostat ikonu před název odkazu v menu, stačí, když před tento název vložíte před malou chvílí zkopírovaný HTML kód. Menu má tu výhodu, že reflektuje HTML značky a vložený kód díky pluginu Font Awesome převede na ikonu.

Závěr

Jak můžete dle návodu sami dobře vidět, přidání ikon do menu není opravdu nic složitého. Jde jen o tři kroky. Nainstalovat plugin, zkopírovat HTML kód z webu a vložit jej do menu před popis odkazu. To je celá věda, která se za tím skrývá. Výhoda je, že menu nemusí být těžkopádné, ale naopak lehké a rychlé. Díky ikonám v SVG formátu je i velice dobře použitelné pro mobilní zobrazení.

Více článků o WordPressu

Celá kategorie je zde

Web je vytvářen s pečlivostí k obsaženým informacím. Snažím se poskytovat kvalitní a užitečný obsah, který ostatním pomáhá, nebo je inspiruje. Pokud jste spokojeni s mou prací a chtěli byste mě podpořit, můžete to udělat prostřednictvím jednoduchých možností.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

newsletter

Odebírejte Newsletter

Buďte v obraze! Připojte se k odběru newsletteru a buďte první, kdo získá nejnovější informace přímo do vaší e-mailové schránky. Sledujte aktuality, exkluzivní události a inspirativní obsah, přímo na Vašem e-mailu.  

Odebírat
Upozornit na
guest
0 Komentáře/ů
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje