Ikony jsou skutečně fascinující!
Mají výjimečnou schopnost okamžitě komunikovat s diváky, vytvářejíc silné vizuální propojení.
Právě proto se ikony hojně využívají všude, včetně webových stránek postavených na platformě WordPress.
Ovšem, používání stále stejného designu na vašem webu po dlouhé měsíce může vést k nudě, což je zcela běžné.
Následně začnete hledat něco nového a poutavějšího, abyste ho po čase opět nahradili dalším a tak dále.
A tento cyklus se může opakovat donekonečna…
Jak tedy tento nekonečný koloběh nudy zastavit?
Dashicony představují skvělé řešení!
Mohou osvěžit vzhled vašeho webu a pomoci vám vyniknout. Navíc ušetří práci a zabrání zahlcení webu nepotřebnými obrázky, které negativně ovlivňují rychlost načítání stránek.
Pojďme se tedy podívat blíže na Dashicony a na to, jak je efektivně využít na vašem webu WordPress.
Co jsou to WordPress Dashicons?
Dashicons jsou oficiální sadou ikonových písem pro WordPress, které byly poprvé představeny ve verzi 3.8. Tato písma vypadají skvěle a působivě, pokud je aplikujete na svůj web. Jedná se o vysoce kvalitní SVG soubory, které lze snadno škálovat do libovolné velikosti bez ztráty kvality.
Díky tomu, že jsou nativně podporovány systémem WordPress a byly vytvořeny přímo jeho týmem, můžete je používat bez nutnosti načítání dalších skriptů. Sada obsahuje zhruba 350 ikonových písem, které naleznete na oficiálních stránkách WordPress Developer Resources.
Tyto ikony jsou rozděleny do kategorií podle tématu. Navíc, stránka disponuje dynamickým vyhledávacím polem, které vám umožňuje filtrovat dostupné ikony.
Tyto ikony můžete využít v následujících oblastech:
- Administrační panel WordPress
- Navigační menu
- Stránky a příspěvky
- Metadata
- Prvky editoru
- Vlastní pluginy a šablony
- Administrační rozhraní
- Frontendové zobrazení
Všimli jste si, že opakovaně používám slovo „ikony“?
V tomto kontextu mám na mysli výhradně ikonová písma.
Nikoliv obrázky ve formě ikon.
Ano, je mezi nimi rozdíl.
Pojďme si to objasnit.
Jaký je rozdíl mezi obrázkovými ikonami a ikonami ve formě písma?
Ikonová písma a obrázkové ikony se zdají být podobné, avšak namísto písmen obsahují ikonová písma vektorové symboly.
Bylo to příliš technické?
Dovolte mi to vysvětlit.
Tyto ikonové fonty fungují jako obrázky, které můžete používat k přidávání symbolů na váš web, ale nejsou to skutečné obrázky.
Nabízejí vám řadu výhod.
Jakých?
To se dozvíte v následující sekci.
Proč byste je měli používat?
- Škálovatelné jako texty na vašem webu, protože se jedná o písma.
- Mají malou velikost, což neovlivňuje rychlost načítání stránek, na rozdíl od obrázků.
- Umožňují snadné nastavení barev ikon pomocí CSS a přidání dalších vlastností, jako jsou barevné přechody, stíny atd.
- Šetří zbytečné HTTP požadavky tím, že umožňují načtení všech písem najednou, které následně můžete využívat na různých stránkách. Při použití velkého počtu obrázků je nutné zasílat pro každý z nich zvláštní požadavek, což prodlužuje načítání stránky.
- Jsou snadnější na použití a nastavení než obrázky. Můžete snadno přidávat rozpoznatelné a kreativní symboly, aniž byste je museli pokaždé znovu vytvářet, ať už se jedná o ikonu přehrávače videa, e-mailu, hudby nebo cokoli jiného.
- Jsou snadno dostupné, protože jsou integrovány přímo do WordPressu.
Jak je používat?
Používání Dashicons není nic složitého.
Věřte mi; mám s tím zkušenosti :0
Chcete-li začít s WordPress Dashicons, postupujte podle následujících kroků.
Krok 1: Aktivace Dashicons na vašem webu WordPress
Než začnete, je nutné aktivovat Dashicons v požadované oblasti, například v šabloně. To vyžaduje přidání několika řádků kódu do souboru function.php.
Postup:
- Nejprve přejděte do sekce Editor šablon v administraci WordPress.
- Otevřete soubor function.php.
- Na konec souboru přidejte následující kód pro zařazení skriptů do fronty.
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Výše uvedený kód aktivuje Dashicony ve frontendové části webu.
Před úpravou souboru functions.php doporučuji vytvořit dceřinou šablonu. Důvodem je skutečnost, že pokud budete upravovat přímo soubor hlavní šablony a následně dojde k její aktualizaci, veškeré vaše provedené změny budou přepsány.
Krok 2: Vyhledání HTML a CSS kódu Dashicon
WordPress.org nabízí knihovnu Dashicons, která vám pomůže najít HTML a CSS kód patřící ke každé ikoně. Přejděte do sekce Zdroje pro vývojáře, vyhledejte požadovanou Dashicon a postupujte takto:
- Klikněte na vybranou ikonu.
- Zvolte „Kopírovat CSS“ nebo „Kopírovat HTML“.
- Zobrazí se vyskakovací okno. Jednoduše zkopírujte kód do schránky.
- Rozhodněte se, kde chcete ikonu umístit, například v šablonách, metadatech, navigační nabídce atd.
- Vložte zkopírovaný kód do textového widgetu nebo textového editoru v daném místě.
- Upravte vzhled ikon pomocí vlastního CSS kódu.
A to je vše.
Ve výchozím nastavení mají všechny ikony velikost 20 pixelů. Můžete ji změnit pomocí CSS vlastností, například pomocí nástroje Inspect Element v prohlížeči Google Chrome nebo FireBug ve Firefoxu.
Jak co nejlépe využít WordPress Dashicons?
Viděli jste, jak můžete používat Dashicons na svém webu. Nyní si ukážeme jejich praktické využití pro konkrétní účely.
1. V navigačním menu
Pro přidání ikon do menu postupujte následovně:
- V administraci webu přejděte do sekce Menu.
- Zkopírujte HTML kód vybrané ikony z WordPress.org.
- Vložte jej do pole „Navigační štítek“ v administraci.
- Klikněte na tlačítko „Uložit“ a poté načtěte hlavní stránku. Měla by se zobrazit vybraná ikona.
2. V metadatech příspěvků
Dashicony můžete používat před datem, jménem autora, štítkem nebo kategorií, v závislosti na použité šabloně a zobrazených datech.
Protože jste již Dashicony aktivovali, otevřete soubor style.css. Alternativně můžete použít vlastní CSS editor, který vám umožní zachovat změny i po aktualizaci šablony. Po nalezení příslušného selektoru přidejte vlastní CSS kód.
3. V administraci WordPress
Pokud si přejete, aby se různé ikony zobrazovaly u různých typů příspěvků, vlastních typů příspěvků nebo widgetů, je to velmi snadné.
Rychlý tip: Vytvoření shortcode
Pro snadné používání Dashicons můžete vytvořit shortcode. Toto je zvláště užitečné, pokud vytváříte web pro své klienty, kteří by tak snadno mohli vkládat Dashicony, aniž by se museli zabývat kódem.
Závěr
Doufám, že nyní máte ve WordPress Dashicons zcela jasno. Nejenže vylepšují estetiku vašeho webu, ale jsou také snadno použitelné a zrychlují načítání stránek.
A jak víte, „krása a inteligence“ je vzácná kombinace.
Tak neváhejte a začněte používat tyto poutavé dashicony na svém webu WordPress!