To se stane každému.

najdete motiv, který se vám líbí, nainstalujete jej a strávíte několik měsíců užíváním vzhledu vašeho webu. Ale pak, po několika měsících, téma začne cítit zatuchlý. Trochu nuda.

jediným problémem je, že nechcete strávit pár hodin hledáním něčeho nového. Kdyby jen existoval způsob, jak přidat trochu koření do vašeho tématu, trochu světlice, aby to vyniklo.

než hodíte ruce do zoufalství, dovolte mi, abych vám ukázal snadný způsob, jak okořenit vaše téma bez přílišného úsilí a bez přidání zbytečných obrázků, které by mohly zpomalit váš web.

Zadejte Dashicons. Dashicons jsou ikony písem, které byly zavedeny v WordPress 3.8. Jsou to ty úžasné a cool ikony, které vidíte, když se přihlásíte do řídicího panelu. Nebylo by skvělé, kdybyste je mohli přidat také do svého tématu?

No, můžete a já vám ukážu jak.

jak můžete používat Dashicony v navigačním menu?

začněme jednoduchým příkladem. Dashicons jsou již součástí WordPress od verze 3.8, ale stále je musíte zahrnout, abyste je mohli správně zobrazit na přední straně vašeho webu; to je vaše téma.

Krok 1: Udělej si svůj téma Dashicons ready

, aby se vaše téma Dashicons připraven nejprve otevřít své funkce.php soubor (nalezen ve vzhledu> Editor-ve výchozím nastavení otevře CSS soubor vašeho aktuálního motivu. Jděte do toho a podívejte se na funkce.php soubor a klikněte na něj načíst v editoru.)

Krok 2: zadejte skript

přejděte úplně dolů a vložte tyto řádky kódu na konec:

v pořádku! Nyní je vaše téma připraveno k použití Dashicons.

Krok 3: Přidání Dashiconů k položkám nabídky

přidejte Dashicon pro váš domovský odkaz. Přejděte na web Dashicons a vyberte ikonu, která se vám líbí.

Update: Dashicons byly původně k dispozici na GitHub.io, ale od té doby byly zpřístupněny na WordPress.org.

Krok 4:

klikněte na požadovanou ikonu (v tomto případě jsem vybral ikonu Domů) a poté klikněte na Kopírovat HTML. Poskytne vám vyskakovací okno s kódem, který potřebujete.

Krok 5:

Přejít zpět do vašeho WordPress palubní desky, klikněte na Vzhled > Menu a vložte kód přesně tam, kde to říká, Navigační Štítek.

Pokud si přesto chcete slovo se objeví, zadejte jej po uzavření div držáku.

Klikněte na uložit a načíst vaše domovská stránka. Váš domovský odkaz by nyní měl zobrazit pěkný, ostrý Dashicon.

můžete to udělat pro všechny položky navigačního menu nebo jen pro domácí. Opakujte výše uvedené kroky s odpovídajícími ikonami. To bylo snadné, že?

jak používat Dashicons v post meta?

můžete jít ještě o krok dále a přidat Dashicons na svůj post meta, nebo jinými slovy přidat Dashicons před jméno autora, datum, kategorie nebo tag; v závislosti na vašem motivu a informace zobrazí.

vzhledem k tomu, že jste již dotazovali Dashicons ve svém tématu, vše, co musíte udělat, je otevřít svůj styl.css soubor (nebo použít vlastní CSS editor, který je vždy lepší volbou, takže nemusíte ztrácet změny, jakmile vaše téma aktualizace!), najděte odpovídající selektor a přidejte kód CSS.

řekněme, že chcete přidat ikonu před své jméno nebo jméno autora.

Krok 1:

nejprve si vybereme ikonu, kterou bychom chtěli.

Krok 2:

poté klikněte na něj a tentokrát vyberte Kopírovat CSS. Opět vám poskytne vyskakovací okno s kódem, který musíte vložit.

Krok 3:

nyní otevřete svůj styl.css a najít odpovídající volič, v tomto případě – .vstup-autor. Přidáním: před a poté vložením kódu CSS, který jste zkopírovali z webu Dashicons, bude mít jméno autora před sebou pěknou ikonu. Musíte také určit, že používáte písmo Dashicons. Upravený kód vypadá takhle:

.entry-author:before {font-family: "dashicons";content: "\f110";}

Pojďme přidat trochu styl, stejně, a nyní úspěšně absolvováno kód vypadá takto:

výsledek

Tak co to bude vypadat na konci?

Něco jako toto:

Existuje mnoho způsobů, jak můžete použít Dashicons – nechat svou kreativitu převzít kontrolu a uvidíme, co můžete udělat.

Dát to všechno dohromady

Kromě výše uvedených příkladů, můžete použít Dashicons v backend, pokud chcete zadat různé ikony pro různé typy post, nebo je můžete použít v příspěvku tituly, widget tituly, nebo pokud vytváříte vlastní landing page lze rozlišit různé stránky vašeho webu.

skvělým příkladem je stará domovská stránka WP Superstars. Tady, můžete vidět Dashicony používané pro různé oblasti webu:

Dashicons nejsou jediný typ ikonu písma, které můžete přidat. Podívejte se na náš výukový program FontAwesome Icons pro více informací.

Zahrnuje aktualizace e-mailem. Odhlásit se kdykoli.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.