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

článok na blog uverejnený: 30. júna 2021

Č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ť?

ilustračná foto k téme Ikony do menu wordpressu

Kde hľadať riešenie?

Odmyslime si riešenie, že sa chcete naučiť programovať a menu z ikon si chcete doprogramovať sami. V prípade, že máte web spravený s redakčným systémom WordPress, budeme hľadať riešenie ako zvyčajne. V oficiálnej ponuke bezplatných pluginov pre WordPress. Tam nájdeme pri kľúčovej fráze „menu icons“ v ponuke viaceré pluginy, ktoré by mohli požiadavku dostať ikony do menu splniť.

ponuka ikonových pluginov vo WordPresse

Ako vybrať plugin pre menu s ikonami

Z ponuky je podľa hviezdičiek i počtu inštalácií úspešný každý zo šiestich pluginov. Vyskúšali sme viaceré, každý má svoje pre i proti. Najznámejší s najvyšším počtom inštalácii je plugin Menu Icons by ThemeIsle. V ponuke ho nájdete pod slovenským Ikony menu od ThemeIsle 🙂
Z pohľadu variability a jednoduchosti je použiteľný aj pre neskúseného wordpressáka.

plugin Ikony menu od ThemeIsle

Prekvapivé Ikony menu od ThemeIsle

Plugin je bezplatne k dispozícii v repozitári WordPress. Nájdete ho a nainštalujete ľahko priamo v redakčnom systéme po vyhľadaní v časti Pluginy > Pridať nový. Nezabudnite ho aktivovať.

Doplnok umožňuje pridávať ikony k položkám menu tak, že menu bude vyzerať podobne ako menu redakčného systému WordPress vľavo. Prekvapenie spočíva v tom, že ho netreba primárne nastavovať (niektoré z pluginov v ponuke nastavenie mali).
Ikony fungovali so všetkými témami, na ktorých sme testovali, bez problémov.

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šeobecné nastavenie ponuky ikon menu

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:

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ť)

všeobecné nastavenie parametrov ikon, ktroé budeme vkladať do menu

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).

ponuka ikon z fontu Dashicons na tému "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.

ponuka ikon z fontu Dashicons, po označení ikony sa objaví vpravo možnosť nastavenia 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.

príklad menu s ikonami a textom

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 🙂

príklad menu pozostávajúcveho iba z ikonami (bez textu)

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í 🙂

autorom článku je: Ján Tóth
- absolvent FEI STU a FM UK. Po ukončení štúdia pracoval rok vo vydavateľstve ako vedúci IT, následne na vedúcich pozíciách súkromných firiem a tiež ako riaditeľ slovenského zastúpenia nadnárodnej spoločnosti. Autor a spoluautor kníh z oblasti IT, článkov z oblasti zdravia a kozmetiky, prekladateľ, prednášateľ, v súčasnosti pracuje ako lektor a konzultant na voľnej nohe.

Páčil sa vám článok? Pošleme vám podobné.
Aktivujte si okamžité zasielanie noviniek a článkov – už vám od nás nikdy nič neunikne. Môžeme vás okamžite informovať o aktuálnej akcii, novinke, špeciálnej kampani či zľave alebo novom článku na našom blogu. Akonáhle sa u nás v novinkách niečo zmení alebo pridá, do pár minút vám automaticky posielame email s odkazom na novinku na našu stránku. A odhlásiť sa môžete kedykoľvek. Nič neriskujete.


Nikam neodchádzajte, pozrite si naše novinky, akcie alebo si
prečítajte ďalšie podobné články:

Podobné články z kategórie
ikony, Internet marketing a reklama, WordPress