Ikony jsou fascinující!
Mají schopnost rychle komunikovat s publikem vytvořením silného vizuálního spojení.
To je důvod, proč se ikony široce používají všude, včetně webových stránek WordPress.
Také používání stejného motivu na vašem webu několik měsíců může být nudné. Je to běžné.
A pak budete hledat něco zajímavějšího, používat to a zase se nudit,
A koloběh pokračuje dál a dál…
Jak tedy můžete přeskočit ten koloběh nudy?
Dashicony jsou skvělý způsob!
Může to okořenit estetiku vašeho webu a pomoci vám vyniknout. Také vám to ušetří další úsilí a zahlcení vašeho webu zbytečnými obrázky, které zpomalují rychlost stránky.
Pojďme se tedy podívat na Dashicony a na to, jak je efektivně využít na svém webu WordPress.
Table of Contents
Co je to WordPress Dashicons?
Dashicons jsou oficiální ikonová písma WordPress představená před lety ve verzi 3.8. Tato písma jsou skvělá a úžasná na pohled, pokud je používáte na svém webu. Jsou to soubory SVG nejvyšší kvality, které můžete snadno škálovat na jakoukoli velikost bez pixelizace.
Protože mají nativní podporu WordPress, protože je vytvořil jejich tým sám, můžete je používat přímo bez načítání dalších skriptů. Obsahuje asi 350 ikonových písem, které najdete uvnitř oficiálního webu Zdroje pro vývojáře WordPress.
Tyto ikony kategorizovali na základě tématu a navíc jste mohli vidět pole dynamického vyhledávání, které vám umožňuje filtrovat dostupné ikony.
Tyto ikony můžete použít na:
- Ovládací panel WordPress
- Navigační nabídky
- Stránky a příspěvky
- Metadata
- Prvky editoru
- Vlastní pluginy a motivy
- Admin panely
- Přední provedení
Všimli jste si, že opakovaně říkám „ikony“?
Zde mám na mysli pouze písma ikon.
Ne obrázky ve formě ikon.
Ano, je mezi nimi rozdíl.
Pojďme to rozluštit.
Rozdíl mezi obrázkovými ikonami a fonty ikon?
Písma ikon a ikony obrázků jsou si trochu podobné, ale místo abecedy jsou v písmech ikon vektorové symboly.
Bylo to příliš technické?
Dovolte mi to objasnit.
V zásadě tato písma ikon připomínají obrázky, které můžete použít k přidání symbolů na svůj web, ale ne skutečný obrázek.
Poskytují vám spoustu výhod.
Jak?
Zjistěte v další části.
Proč byste je měli používat?
- Škálovatelné jako texty používané na vašem webu, protože jsou to písma
- Lehký, který neovlivňuje rychlost načítání stránky ve srovnání s obrázky
- Možnost nastavení barvy ikony pomocí CSS a přidání dalších vlastností, jako je barva přechodu, stín atd.
- Skvěle ušetří příliš mnoho požadavků HTTP tím, že vám umožní načíst písma všechna najednou, která můžete použít na svých stránkách. Pokud na webu používáte velké množství obrázků, budete muset o jejich načtení vyžadovat spoustu požadavků, což prodlužuje dobu načítání stránky.
- Snadné použití a nastavení než obrázky. Můžete přidat rozpoznatelné a kreativní symboly, aniž byste je museli znovu vytvářet pokaždé, když potřebujete ikonu pro přehrávač videa, e-mail, hudbu nebo jakoukoli jinou věc.
- Větší dostupnost, protože jsou zabudovány přímo do WordPressu
Jak je používat?
Použití Dashicons není žádné raketové inženýrství.
Věř mi; Znám oba :0
Chcete-li začít s WordPress Dashicons, postupujte podle níže uvedených kroků.
Krok 1: Povolte Dashicons na svém webu WordPress
Než začnete, povolte Dashicons tam, kde potřebujete, například téma. K tomu je potřeba přidat několik kódů do souboru function.php.
Udělat to:
- Nejprve přejděte do Editoru motivu/vzhledu z řídicího panelu WordPress.
- Otevřete soubor function.php.
- Přejděte na konec souboru a přidejte několik řádků kódu 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ý příklad je povolení dashiconů na frontendu.
Před úpravou souboru functions.php se ujistěte, že jste vytvořili podřízený motiv. Je to proto, že pokud přímo upravíte soubor motivu a poté přijde aktualizace tohoto motivu, přepíše všechny změny, které v souboru provedete.
Krok 2: Najděte Dashicon HTML a CSS kódy
WordPress.org nabízí knihovnu Dashicons, která vám pomůže najít CSS a HTML kódy patřící ke každé ikoně. Zde přejděte na Zdroje pro vývojáře a vyhledejte Dashicony, které chcete použít, a poté:
- Klikněte na ikonu vašeho přání.
- Kliknutím na výběr mezi „Kopírovat CSS“ nebo „Kopírovat HTML“.
- Nyní uvidíte vyskakovací okno. Stačí zkopírovat kód do schránky.
- Rozhodněte se, kde chcete ikonu použít, například motivy, metadata, navigační nabídku atd.
- Vložte zkopírovaný kód do textového widgetu nebo textového editoru zvoleného místa.
- Upravte vzhled ikon pomocí vlastního CSS
A je to.
Kromě toho mají všechny ikony ve výchozím nastavení velikost 20 pixelů. Můžete jej změnit pomocí prvků CSS z možností, jako je Inspect Element Google Chrome nebo FireBug Firefoxu.
Jak vytěžit maximum z WordPress Dashicons?
Viděli jste, jak můžete použít Dashicons na svém webu, a nyní uvidíme jeho použití pro konkrétní účely.
1. Pomocí navigační nabídky
Chcete-li přidat ikony do nabídky, postupujte takto:
- Přejděte do nabídky/vzhled z ovládacího panelu
- Zkopírujte HTML kódy určené pro ikonu menu z WordPress.org
- Vložte jej na „Navigační štítek“ na palubní desce
- Klikněte na tlačítko „uložit“ a poté načtěte domovskou stránku. Měla by zobrazovat chladnou a ostrou ikonu.
2. Použití na post meta
Dashicony budete moci používat těsně před datem, jménem autora, značkou nebo kategorií na základě tématu a dat, která zobrazuje.
Protože jste již zařadili Dashicons, otevřete soubor style.css. Jinak můžete také použít vlastní editor CSS, který vám nedovolí ztratit změny po aktualizacích motivu. Poté po nalezení odpovídajícího selektoru přidejte svůj kód CSS.
3. Na backendu WordPressu
Pokud chcete, aby různé ikony obsahovaly různé vlastní názvy příspěvků, typy příspěvků nebo widgety, je to snadné.
Rychlý tip: Vytvořte krátký kód
Chcete-li Dashicons snadno používat, můžete pro něj vytvořit krátký kód. Je to užitečné, zvláště když vytváříte web pro své klienty, pro které by bylo snadné vkládat Dashicony, aniž by se museli potýkat s kódy.
Závěr
Doufám, že na vaší straně jsou věci ohledně WordPress Dashicons docela jasné. Pokrývají nejen estetiku vašeho webu, ale také se snadno používají a zrychlují načítání stránky.
A víte, „krása a mozek“ je vzácná kombinace.
Takže si pospěšte, použijte tyto poutavé dashicony na svém webu WordPress!