Sitä tapahtuu kaikille.

Löydät teeman, josta pidät, asennat sen ja nautit muutaman kuukauden ajan sivustosi ulkoasusta. Sitten muutaman kuukauden kuluttua teema alkaa tuntua vanhanaikaiselta ja tylsältä.

Ongelmana on vain se, ettet halua viettää paria tuntia etsimällä jotain uutta. Kunpa vain olisi olemassa keino lisätä teemaan pientä maustetta, pientä piristystä, joka saa sen erottumaan muista.

Ennen kuin nostat kädet epätoivoon, näytän sinulle helpon tavan piristää teemaa ilman suurempia ponnisteluja ja lisäämättä tarpeettomia kuvia, jotka voivat hidastaa sivustosi toimintaa.

Esittelyssä Dashicons. Dashicons ovat fontti-kuvakkeita, jotka otettiin käyttöön WordPress 3.8:ssa. Ne ovat niitä mahtavia ja siistejä kuvakkeita, jotka näet, kun kirjaudut kojelautaasi. Eikö olisi siistiä, jos voisit lisätä niitä myös teemaan?

No, voit, ja minä näytän sinulle miten.

Miten voit käyttää Dashiconeja navigointivalikossa?

Aloitetaan yksinkertaisesta esimerkistä. Dashicons on jo sisällytetty WordPressiin versiosta 3.8 lähtien, mutta sinun on silti sisällytettävä ne, jotta ne näkyvät kunnolla sivustosi etupäässä, eli teemassasi.

Vaihe 1: Tee teemasi Dashicons valmiiksi

Jotta teema Dashicons valmis ensin avata functions.php tiedosto (löytyy Appearance> Editor - oletuksena se avaa nykyisen teeman CSS-tiedoston. Mene eteenpäin ja etsiä functions.php tiedosto ja klikkaa sitä ladata sen Editor).)

Vaihe 2: Käsikirjoituksen asettaminen jonoon

Selaa loppuun asti ja liitä nämä koodirivit loppuun:

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

Nyt teemasi on valmis käyttämään Dashiconsia.

Vaihe 3: Dashiconsin lisääminen valikkokohteisiin

Lisäämme Dashicon-kuvakkeen Home-linkkiin. Siirry Dashicons-sivustolle ja valitse haluamasi kuvake.

Päivitys: Dashicons oli alun perin saatavilla GitHub.io-sivustolla, mutta ne on sittemmin julkaistu WordPress.orgissa.

Vaihe 4:

Napsauta haluamaasi kuvaketta (tässä tapauksessa valitsin kotikuvakkeen) ja napsauta sitten Kopioi HTML. Saat ponnahdusikkunan, jossa on tarvitsemasi koodi.

Vaihe 5:

Mene takaisin WordPress kojelautaan, klikkaa Appearance> Menus ja liitä koodi oikealle kohtaan, jossa lukee Navigation Label.

Jos haluat, että sana näkyy edelleen, kirjoita se sulkevan div-sulkeen jälkeen.

Napsauta Tallenna ja lataa etusivusi. Kotisivulinkkisi pitäisi nyt näyttää kauniin ja selkeän Dashicon-kuvakkeen.

Voit tehdä tämän kaikille navigointivalikon kohdille tai vain aloitusvalikolle. Toista yllä olevat vaiheet vastaavilla kuvakkeilla. Eikö ollutkin helppoa?

Miten käytät Dashiconeja postauksen metatiedoissa?

Voit mennä askeleen pidemmälle ja lisätä Dashiconeja postauksen metatietoihin tai toisin sanoen lisätä Dashiconeja kirjoittajan nimen, päivämäärän, kategorian tai tunnisteen eteen; riippuen teemastasi ja sen näyttämistä tiedoista.

Koska olet jo asettanut Dashicons-kuvakkeet teemassasi, sinun tarvitsee vain avata style.css-tiedostosi (tai käyttää Custom CSS editoria, joka on aina parempi vaihtoehto, jotta et menetä muutoksia, kun teemasi päivittyy!), etsiä sopiva valitsija ja lisätä CSS-koodi.

Oletetaan, että haluat lisätä kuvakkeen nimesi tai kirjoittajasi nimen eteen.

Vaihe 1:

Ensin valitsemme haluamamme kuvakkeen.

Vaihe 2:

Napsauta sitten sitä ja valitse tällä kertaa Copy CSS. Saat jälleen ponnahdusikkunan, jossa on lisättävä koodi.

Vaihe 3:

Avaa nyt style.css ja etsi vastaava valitsija, tässä tapauksessa .entry-author. Lisää :before ja liitä sitten Dashiconsin verkkosivuilta kopioimasi CSS-koodi, niin kirjoittajan nimen eteen tulee kiva kuvake. Sinun on myös määritettävä, että käytät Dashiconsin fonttia. Muutettu koodi näyttää tältä:

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

Lisätään myös hieman muotoilua, ja nyt valmis koodi näyttää tältä:

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

Lopputulos

Miltä tämä sitten lopulta näyttää?

Jotain tällaista:

Dashicons-kuvakkeita voi käyttää niin monella tavalla - anna luovuutesi tarttua ja katso, mitä voit tehdä.

Kaiken yhdistäminen

Yllä olevien esimerkkien lisäksi voit käyttää Dashiconsia backendissäsi määrittääksesi erilaisia kuvakkeita eri post-tyypeille, tai voit käyttää niitä postin otsikoissa, widgetin otsikoissa, tai jos luot mukautetun laskeutumissivun, voit erottaa sivustosi eri sivut toisistaan.

Tässä on perusesimerkki siitä, mitä voit luoda niiden avulla: