Stává se to každému.

Najdete téma, které se vám líbí, nainstalujete si ho a několik měsíců se těšíte ze vzhledu svých stránek. Ale po několika měsících vám téma začne připadat ohrané. Trochu nudné.

Jediný problém je, že nechcete strávit několik hodin hledáním něčeho nového. Kdyby tak existoval způsob, jak svému tématu dodat trochu koření, trochu šmrncu, aby vyniklo.

Dříve než v zoufalství zvednete ruce nad hlavu, ukážu vám snadný způsob, jak si téma ozvláštnit bez větší námahy a bez přidávání zbytečných obrázků, které by mohly zpomalit váš web.

Dashicons. Dashicons jsou ikony písma, které byly zavedeny ve WordPressu 3.8. Jsou to ty úžasné a cool ikony, které vidíte, když se přihlásíte do svého ovládacího panelu. Nebylo by skvělé, kdybyste je mohli přidat i do svého tématu?

Můžete a já vám ukážu, jak na to.

Jak můžete v navigační nabídce používat pomlčky?

Začněme jednoduchým příkladem. Dashicony jsou již součástí WordPressu od verze 3.8, ale přesto je musíte začlenit, aby se správně zobrazovaly na přední straně webu, tedy ve vašem tématu.

Krok 1: Připravte si téma Dashicons

Chcete-li připravit své téma Dashicons nejprve otevřete soubor functions.php (najdete ho v Editoru vzhledu - ve výchozím nastavení se otevře soubor CSS vašeho aktuálního tématu. Pokračujte a vyhledejte soubor functions.php a klikněte na něj, abyste ho načetli v Editoru).

Krok 2: Vyvolání skriptu

Přejděte až na konec a na konec vložte tyto řádky kódu:

 //Enqueue skript Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Nyní je vaše téma připraveno k použití Dashicons.

Krok 3: Přidání pomlček k položkám nabídky

Přidejme ikonu Dashicon pro váš odkaz Domů. Přejděte na webovou stránku Dashicons a vyberte ikonu, která se vám líbí.

Aktualizace: Dashicons byly původně k dispozici na GitHub.io, ale od té doby jsou k dispozici 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. Zobrazí se vyskakovací okno s potřebným kódem.

Krok 5:

Vraťte se na ovládací panel WordPressu, klikněte na Vzhled> Nabídky a vložte kód přímo tam, kde je napsáno Navigation Label.

Pokud chcete, aby se slovo přesto zobrazilo, napište ho za uzavírací dělicí závorku.

Klikněte na tlačítko uložit a načtěte domovskou stránku. Váš domovský odkaz by nyní měl zobrazovat pěknou a výraznou ikonu Dashicon.

Můžete to udělat pro všechny položky navigačního menu nebo jen pro domovskou stránku. Stačí zopakovat výše uvedené kroky s odpovídajícími ikonami. Bylo to snadné, že?

Jak používáte pomlčky v příspěvku meta?

Můžete jít o krok dál a přidat Dashicons do meta příspěvku, nebo jinými slovy přidat Dashicons před jméno autora, datum, kategorie nebo tag; v závislosti na vašem tématu a informacích, které zobrazuje.

Protože jste již v šabloně zařadili Dashicons, stačí nyní otevřít soubor style.css (nebo použít vlastní editor CSS, což je vždy lepší volba, abyste o změny nepřišli po aktualizaci šablony!), najít odpovídající selektor a přidat 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, která se nám bude líbit.

Krok 2:

Poté na něj klikněte a tentokrát vyberte možnost Kopírovat CSS. Opět se zobrazí vyskakovací okno s kódem, který je třeba vložit.

Krok 3:

Nyní otevřete svůj soubor style.css a najděte příslušný selektor, v tomto případě - .entry-author. Přidáním :before a následným vložením kódu CSS, který jste zkopírovali z webové stránky Dashicons, bude mít jméno autora před sebou pěknou ikonu. Je také třeba určit, že používáte písmo Dashicons. Upravený kód vypadá takto:

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

Přidejme také trochu stylování a nyní bude hotový kód vypadat takto:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Konečný výsledek

Jak to bude nakonec vypadat?

Něco takového:

Dashicons můžete použít mnoha způsoby - dejte průchod své kreativitě a zjistěte, co všechno můžete udělat.

Dát to všechno dohromady

Kromě výše uvedených příkladů můžete pomocí Dashicons v backendu zadat různé ikony pro různé typy příspěvků, nebo je můžete použít v názvech příspěvků, v názvech widgetů, nebo pokud vytváříte vlastní vstupní stránku, můžete odlišit různé stránky svého webu.

Zde je základní příklad toho, co byste z nich mohli vytvořit: