Stáva sa to každému.

Nájdete si tému, ktorá sa vám páči, nainštalujete si ju a niekoľko mesiacov sa tešíte zo vzhľadu svojich stránok. Ale po niekoľkých mesiacoch sa vám téma začne zdať zastaraná. Trochu nudná.

Jediný problém je, že nechcete stráviť niekoľko hodín hľadaním niečoho nového. Keby len existoval spôsob, ako svojmu motívu dodať trochu korenia, trochu šmrncu, aby vynikol.

Skôr než zúfalo zdvihnete ruky, ukážem vám jednoduchý spôsob, ako si tému spestriť bez väčšej námahy a bez pridávania zbytočných obrázkov, ktoré by mohli spomaliť vašu stránku.

Dashicons. Dashicons sú ikony písma, ktoré boli zavedené vo WordPress 3.8. Sú to tie úžasné a cool ikony, ktoré vidíte, keď sa prihlásite do svojho ovládacieho panela. Nebolo by super, keby ste ich mohli pridať aj do svojej témy?

No môžete a ja vám ukážem, ako na to.

Ako môžete v navigačnej ponuke používať ikony Dashicons?

Začnime jednoduchým príkladom. Dashicons sú už súčasťou WordPress od verzie 3.8, ale stále ich musíte zahrnúť, aby sa správne zobrazovali na prednej strane vášho webu, teda vo vašej téme.

Krok 1: Pripravte si tému Dashicons

Ak chcete, aby vaša téma Dashicons pripravený najprv otvoriť súbor functions.php (nájdete v Vzhľad> Editor - v predvolenom nastavení sa otvorí súbor CSS vašej aktuálnej témy. Pokračujte a hľadať súbor functions.php a kliknite na neho načítať v Editore.)

Krok 2: Uloženie skriptu

Prejdite až na koniec a na koniec vložte tieto riadky kódu:

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

Dobre! Teraz je vaša téma pripravená na používanie Dashicons.

Krok 3: Pridanie pomlčiek do položiek menu

Pridajme ikonu Dashicon pre váš odkaz Domov. Prejdite na webovú lokalitu Dashicons a vyberte ikonu, ktorá sa vám páči.

Aktualizácia: Dashicons boli pôvodne k dispozícii na GitHub.io, ale odvtedy sú k dispozícii na WordPress.org.

Krok 4:

Kliknite na požadovanú ikonu (v tomto prípade som vybral ikonu Domov) a potom kliknite na Kopírovať HTML. Zobrazí sa vyskakovacie okno s potrebným kódom.

Krok 5:

Vráťte sa na ovládací panel WordPress, kliknite na Appearance> Menu a vložte kód priamo tam, kde sa píše Navigation Label.

Ak chcete, aby sa slovo stále zobrazovalo, napíšte ho za uzatváraciu zátvorku.

Kliknite na uložiť a načítajte domovskú stránku. Váš domovský odkaz by teraz mal zobrazovať peknú, ostrú ikonu Dashicon.

Môžete to urobiť pre všetky položky navigačného menu alebo len pre domovskú stránku. Stačí zopakovať vyššie uvedené kroky so zodpovedajúcimi ikonami. Bolo to jednoduché, že?

Ako používate pomlčky v meta príspevku?

Môžete ísť o krok ďalej a pridať Dashicons do meta príspevku, alebo inými slovami pridať Dashicons pred meno autora, dátum, kategóriu alebo tag; v závislosti od vašej témy a informácií, ktoré zobrazuje.

Keďže ste si už v téme vytvorili Dashicons, stačí teraz otvoriť súbor style.css (alebo použiť vlastný editor CSS, čo je vždy lepšia možnosť, aby ste nestratili zmeny po aktualizácii témy!), nájsť zodpovedajúci selektor a pridať kód CSS.

Povedzme, že chcete pridať ikonu pred svoje meno alebo meno autora.

Krok 1:

Najprv si vyberieme ikonu, ktorá sa nám páči.

Krok 2:

Potom naň kliknite a tentoraz vyberte možnosť Kopírovať CSS. Opäť sa zobrazí vyskakovacie okno s kódom, ktorý musíte vložiť.

Krok 3:

Teraz otvorte svoj súbor style.css a nájdite príslušný selektor, v tomto prípade - .entry-author. Pridaním :before a následným vložením kódu CSS, ktorý ste skopírovali z webovej stránky Dashicons, bude mať meno autora pred sebou peknú ikonu. Musíte tiež určiť, že používate písmo Dashicons. Upravený kód vyzerá takto:

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

Pridajme aj trochu štýlovania a teraz bude dokončený kód vyzerať 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ýsledok

Ako to teda bude nakoniec vyzerať?

Niečo také:

Existuje veľa spôsobov, ako môžete používať Dashicons - nechajte sa uniesť svojou kreativitou a zistite, čo všetko môžete urobiť.

Všetko dohromady

Okrem vyššie uvedených príkladov môžete pomocou Dashicons v backende určiť rôzne ikony pre rôzne typy príspevkov alebo ich môžete použiť v názvoch príspevkov, widgetov alebo ak vytvárate vlastnú vstupnú stránku, môžete nimi odlíšiť rôzne stránky svojho webu.

Tu je základný príklad toho, čo môžete pomocou nich vytvoriť: