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.
Tento plugin poskytuje vektorové ikony, což znamená, že lze změnit jejich velikost bez ztráty kvality. Tyto ikony jsou vhodné pro mnoho různých účelů, jako jsou navigační menu, tlačítka sociálních sítí, ikony pro upozornění a mnoho dalšího.
Plugin lze snadno instalovatelný a použitelný. Po nainstalování a aktivaci pluginu je k dispozici sada ikon, které lze použít v různých formátech, jako jsou SVG, fonty, CSS atd. Lze je také přizpůsobit a použít na různých pozicích na webových stránkách.
Ú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í.
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í.
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.
