Je ťažké pridať ikony do menu?

Čas po kurzoch býva zaujímavý tým, že hoci sa ľudia počas kurzu pýtajú málo (pravdepodobne aby nerušili ostatných), po oficiálnom konci kladú otázky, ktoré ich naozaj zaujímajú. Nie raz sme sa po kurze stretli s otázkou ako pridať do menu ikonu. Konkrétne – ako nahradiť v menu text Domov jednoduchou ikonou domčeka. Túto otázku najčastejšie riešia ľudia, ktorí nemajú v témach (šablónach) WordPressu klikateľné logo pre návrat na titulnú stránku. Istým benefitom je, že ikona domčeka ozvláštni menu a zachová funkcionalitu. Zopárkrát sa objavila i otázka na pridanie ikony k textovej položke menu…

Ikony vieme použiť aj na vytvorenie menu, ktoré nebude obsahovať žiadne slová. Pravdepodobne ste sa s ikonovým obrázkovým menu na webe už stretli. Minimálne v podobe menu so sociálnymi ikonami (FB, IG,…). Ako také menu vytvoriť?

Ako vložiť do menu ikonu

• po aktivácii pluginu choďte jednoducho do úpravy menu cez Vzhľad > Menu,
• stačí rozkliknúť šípkou vpravo položku menu, ktorú chcete upravovať,
• pod nastavením navigačného štítku pribudla oproti bežným voľbám položka „Vybrať“,
• vyberiete ikonu a v prípade potreby zvoľte jej parametre (ak chcete iné ako globálne),
• nezabudnite upravené menu uložiť 🙂

Vľavo dolu v časti Pridať položky menu sa nachádza meta-box Nastavenia ikón menu so záložkami (OMG, kto prekladal to ikón?).

V meta-boxe na záložke Globálne si môžete nastaviť ponuku sád ikon, ktoré chcete mať k dispozícii …môžete aj všetky. Štandardne je k dispozícii wordpressácka ikonová sada Dashicons. Všetky sady spolu obsahujú aktuálne okolo 2 300 ikon, je z čoho vyberať.

Ponuka sád ikon je široká

Plugin dáva k dispozícii znakové sady ikon:

• Dashicons (základná sada ikon WordPress)
• Elusive Icons od Aristeides Stathopoulos
• Font Awesome od Dave Gandy
• Foundation Icons od Zurb
• Genericons od Automattic

Okrem toho je v ponuke možnosť použitia obrázkov vo formáte .jpg/.png (Image), alebo .svg z vlastnej knižnice.
Prehliadnite si na bočných záložkách, aké ikony plugin ponúka a pochopíte, prečo je zo skupiny najrozšírenejší.

Ďalšie nastavenia pluginu (ak chcete nastavovať)

Okrem nastavenia ponuky sád ikon sa na druhej záložke Aktuálne menu (vľavo) nachádzajú možnosti predvolených nastavení pre aktuálne menu. Tieto nastavenia sa dedia pri novo pridaných položkách menu. Má zmysel podľa prvej odskúšanej ikony nastaviť na tejto záložke vhodnú veľkosť a ďalšie parametre – ostatné ikony budú mať pri vložení prednastavené parametre také isté.

Tretia záložka Rozšírenia obsahuje odkaz na plugin IcoMoon, ktorý nie je od 1.8.2020 aktuálny. Ikonová sada IcoMoon však stále existuje samostatne na internete k dispozícii pre vývojárov a iné použitia.

Nastavenie parametrov ikony v menu

Po kliknutí na „Vybrať“ (ikonu) pod navigačným štítkom v nastavovaní menu sa objaví sortiment ikon predvolených ikonových sád. Okrem vizuálneho vyhľadávania môžete v zobrazenej ponuke v ľavej časti vyhľadávať ikony podľa kategórií (prednastavené je zobrazenie All – všetky kategórie). Vyhľadávať je možné i napísaním konkrétneho názvu, resp. oblasti do neoznačeného políčka vpravo hore (audio).

Hľadanie podľa názvu predpokladá znalosť používaných anglických názvov, a trochu fantázie.

Po označení niektorej ikony sa na pravej strane okna objavia možnosti nastavenia jej parametrov.

Skryť štítok – Áno/Nie – v menu sa neobjaví text, iba ikona (vhodné napr. pre domček z úvodu)
Pozícia – umiestnenie pred alebo po textovom obsahu položky menu
Vertikálne zarovnanie – ponúka 8 možností, štandardne prednastavené na stred, dá sa ním dorovnať napr. pozícia atypickej ikonky
Veľkosť písma – v em – napríklad 1,2em znamená 1,2 násobok veľkosti písma použitého v menu

Po nastavení parametrov potvrdíte voľbou modrého tlačidla Vybrať vpravo dolu vloženie ikony do menu… a je to.

Pozn.: skutočný vzhľad ikon býva ovplyvnený aj štýlom použitej témy. Dodatočnú úpravu môžete spraviť niektorým CSS editorom (plugin).

Výsledok práce sa prejaví napríklad v podobe takéhoto netradičného menu s ikonkami.

A čo ďalej?

Menu s ikonami je hotové. Nepodarilo sa?
Lektori v IT Learningu na kurzoch WordPressu podrobne vysvetlia, čo potrebuje človek k založeniu web-stránok, ako ich vytvoriť od A po Z, a tiež ako ich spravovať. Ako prevádzkovať web s investíciou do 50 eur. I kde šetriť, aby to malo zmysel.
To sa im hovorí, keď majú za sebou stovky webov, projektov, konzultácií pre malé i veľké firmy, však? Oni pred rokmi tiež začínali.

…možno bude pre vás ľahšie takéto ikonové mini-menu 🙂

Ako vložiť do WordPress menu ikony? Prečo to nefunguje?

Asi treba začať od začiatku. Chcete si spraviť poriadny web? Páčilo by sa vám menu s ikonami, ale tento článok nestačí?
Možno len spravujete niekomu WordPress a nerozumiete mu… a zišlo by sa. Práve v prípade, že neviete programovať a web-stránky sú vám tak podstatou vzdialené, ne-va-dí.
Na kurzy k nám chodia mladšie i staršie dámy, ktoré nevedia programovať – pracovali ako au-pairky, modelky, letušky, marketingové konzultantky, chodia tiež mladí hokejisti, basketbalisti, pekári, účtovníci, jazykári,… Myslíte si, že sa naučili programovať weby? Všetci zvládli ako spraviť stránky pomocou WordPressu. Viac ako polovica z nich dnes prevádzkuje vlastné web-stránky, štvrtina cez ne úspešne predáva.

Ak chcete mať výsledky, treba preto niečo spraviť. Pozrite na kurzy WordPress – každý z nich vás posunie vpred. Získate nadhľad a znalosti, pomocou ktorých môžete spraviť web-stránky sebe i priateľom. Alebo si nimi privyrobiť.
Spokojný budete minimálne tak ako tí, ktorí ich už absolvovali. Neveríte? Prečítajte si referencie ku kurzu WordPress pre začiatočníkov.
No a v prípade, že máte otázky k obsahu kurzu, zavolajte, radi zodpovieme…

Pomohol vám tento článok? Myslíte, že by pomohol aj niekomu vo vašom okolí? Zdieľajte ho pokojne na FB
(tlačidlo Zdieľať pod nadpisom), IG, LI, alebo naň prepošlite svojim známym odkaz. Autor sa neurazí 🙂