See juhtub igaühega.

Sa leiad teema, mis sulle meeldib, installeerid selle ja naudid paar kuud oma saidi välimust. Kuid siis, mõne kuu pärast, hakkab teema tunduma iganenud. Natuke igav.

Ainus probleem on see, et te ei taha kulutada paar tundi millegi uue otsimisele. Kui oleks vaid võimalus lisada oma teemale veidi vürtsi, veidi sära, et see eristuks.

Enne, kui te käed meeleheitel üles viskate, lubage mul näidata teile lihtsat viisi, kuidas oma teemat ilma liigse vaevata ja ilma ebavajalike piltide lisamiseta, mis võivad teie saiti aeglustada, vürtsitada.

Sisestage Dashicons. Dashicons on kirjapildi ikoonid, mis võeti kasutusele WordPressis 3.8. Need on need vinged ja lahedad ikoonid, mida näete, kui logite sisse oma armatuurlauale. Kas poleks lahe, kui saaksite neid lisada ka oma teemasse?

Noh, sa saad ja ma näitan sulle, kuidas.

Kuidas saate oma navigatsioonimenüüs Dashicons'i kasutada?

Alustame lihtsast näitest. Dashikoonid on WordPressis juba alates versioonist 3.8 olemas, kuid sa pead neid siiski lisama, et neid saaks korralikult kuvada oma saidi esiotsas; see tähendab, sinu teemas.

Samm 1: Tee oma teema Dashicons valmis

Et oma teema Dashicons valmis teha, avage kõigepealt oma functions.php fail (leiate selle Appearance>Editorist - vaikimisi avab see teie praeguse teema CSS-faili. Otsige functions.php faili ja klõpsake sellel, et seda Editoris laadida).

2. samm: Skripti ooterežiimi seadistamine

Liigutage lõpuni ja kleepige need koodiread lõppu:

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

Nüüd on teie teema valmis Dashicons'i kasutamiseks.

Samm 3: Dashicons lisamine menüüelementidele

Lisame Dashicon'i oma Home lingile. Mine Dashicons'i veebilehele ja vali endale meelepärane ikoon.

Uuendus: Dashicons olid algselt saadaval GitHub.io, kuid nüüdseks on need tehtud kättesaadavaks WordPress.orgis.

4. samm:

Klõpsake soovitud ikoonil (antud juhul valisin koduikooni) ja seejärel klõpsake Copy HTML. See annab teile hüpikakna vajaliku koodi.

5. samm:

Mine tagasi oma WordPressi armatuurlauale, klõpsa Appearance> Menüüd ja kleebi kood täpselt sinna, kus on kirjas Navigation Label.

Kui soovite, et sõna ikkagi ilmuks, kirjutage see pärast sulgemisega div-sulgurit.

Klõpsake nupule Salvesta ja laadige oma koduleht. Teie kodulehe link peaks nüüd kuvama kena, teravat Dashicon'i.

Saate seda teha kõigi navigatsioonimenüü punktide või ainult kodu jaoks. Lihtsalt korrake ülaltoodud samu samu ikoone. See oli lihtne, eks?

Kuidas te kasutate Dashicons'i post metas?

Võite minna sammu edasi ja lisada Dashicons oma postituse meta, või teisisõnu lisada Dashicons ees autori nimi, kuupäev, kategooria või tag; sõltuvalt teie teema ja teavet see kuvab.

Kuna te olete oma teemas juba Dashicons'i sisse seadnud, siis tuleb teil nüüd vaid avada oma style.css fail (või kasutada kohandatud CSS redaktorit, mis on alati parem variant, et te ei kaotaks muudatusi, kui teie teema uuendatakse!), leida sobiv selektor ja lisada CSS-kood.

Oletame, et soovite lisada oma nime või autori nime ette ikooni.

1. samm:

Kõigepealt valime endale meelepärase ikooni.

2. samm:

Seejärel klõpsake sellel ja valige seekord Copy CSS. Jällegi avaneb hüpikaken, kus on kood, mille peate kleepima.

3. samm:

Nüüd avage oma style.css ja leidke vastav selektor, antud juhul - .entry-author. Lisades :before ja seejärel kleebides CSS-koodi, mille kopeerisite Dashicons'i veebilehelt, saab autori nime ette kena ikooni. Samuti peate täpsustama, et kasutate Dashicons'i kirjastiili. Muudetud kood näeb välja selline:

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

Lisame ka natuke stiili ja nüüd näeb valmis kood välja selline:

 .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; } 

Lõpptulemus

Kuidas see siis lõpuks välja näeb?

Umbes nii:

Dashicons'i saab kasutada nii mitmel viisil - laske oma loovusel vallanduda ja vaadake, mida saate teha.

Kõik kokku panna

Lisaks ülaltoodud näidetele võite kasutada Dashicons'i oma backendis, et määrata erinevaid ikoone erinevate postitustüüpide jaoks või kasutada neid oma postituste pealkirjades, vidinate pealkirjades või kui te loote kohandatud maandumislehte, saate oma saidi erinevaid lehekülgi eristada.

Siin on põhiline näide, mille loomiseks te neid kasutada võiksite: