se tapahtuu kaikille.

löydät mieleisesi teeman, asennat sen ja vietät muutaman kuukauden nauttien sivustosi ilmeestä. Mutta sitten, muutaman kuukauden kuluttua, Teema alkaa tuntua tunkkaiselta. Vähän tylsää.

ainoa ongelma on, ettei halua käyttää paria tuntia uuden etsimiseen. Jos vain olisi tapa lisätä hieman maustetta teema, pieni leimahtaa, jotta se erottuu.

ennen kuin heität kätesi epätoivoon, näytän sinulle helpon tavan piristää teemaasi ilman liikaa vaivaa ja lisäämättä turhia kuvia, jotka voisivat hidastaa sivustoasi.

Enter Dashicons. Dashiconit ovat fonttikuvakkeita, jotka otettiin käyttöön WordPressissä 3.8. Ne ovat niitä mahtavia ja hienoja kuvakkeita, jotka näet, kun kirjaudut kojelautaan. Eikö olisi siistiä, jos voisit lisätä ne myös teemaasi?

no, sinä voit Ja minä näytän miten.

miten voit käyttää Dashiconeja navigointivalikossasi?

aloitetaan yksinkertaisella esimerkillä. Dashiconit ovat jo mukana WordPress koska versio 3.8, mutta sinun täytyy silti sisällyttää ne saada ne näyttämään kunnolla etupäässä sivustosi; eli teema.

Vaihe 1: Tee teemasi Dashiconit valmiiksi

, jotta saat teemasi Dashiconit valmiiksi ensin avaamaan toimintosi.php-tiedosto (löytyy ulkoasusta>Editor – oletuksena se avaa nykyisen teeman CSS-tiedoston. Mene eteenpäin ja etsiä toimintoja.php tiedosto ja klikkaa sitä ladata sen Editor.)

Vaihe 2: Enqueue the script

Scroll all the way to the bottom and paste these lines of code at the end:

All right! Nyt teema on valmis käyttämään Dashicons.

Vaihe 3: lisätään dashiconit valikon kohtiin

lisätään Dashicon Kotilinkkiä varten. Suuntaa dashiconsin verkkosivustolle ja valitse haluamasi kuvake.

päivitys: Dashiconit olivat alun perin saatavilla GitHub.io, mutta ne on sittemmin saatettu saataville WordPress.org.

Vaihe 4:

napsauta haluttua kuvaketta (tässä tapauksessa valitsin koti-ikonin) ja napsauta Kopioi HTML. Se antaa sinulle ponnahdusikkunan, jossa koodi tarvitset.

Vaihe 5:

palaa takaisin WordPress-kojelautaasi, klikkaa ulkonäköä > valikot ja liitä koodi juuri siihen kohtaan, jossa lukee navigaatioetiketti.

Jos haluat vielä sanan näkyvän, kirjoita se päättyvän div-kiinnikkeen jälkeen.

Tallenna ja lataa kotisivusi. Kotilinkkisi pitäisi nyt näyttää mukava, raikas Dashicon.

voit tehdä tämän kaikille navigointivalikon kohteille tai vain kotiin. Toista yllä olevat vaiheet vastaavilla kuvakkeilla. Eikö ollutkin helppoa?

miten dashiconeja käytetään post metassa?

voit mennä askeleen pidemmälle ja lisätä Dashiconeja viestiisi meta, tai toisin sanoen lisätä dashiconeja tekijän nimen, päivämäärän, luokan tai tägin eteen; riippuen teemastasi ja sen näyttämistä tiedoista.

koska kyselit jo Dashiconeita teemastasi, sinun ei tarvitse kuin avata tyyliäsi.css-tiedosto (tai käytä Custom CSS editor joka on aina parempi vaihtoehto, joten et menetä muutoksia, kun teema päivitykset!), etsi vastaava valitsin ja lisää CSS-koodi.

sanotaan, että haluat lisätä ikonin nimesi tai tekijäsi nimen eteen.

Vaihe 1:

ensin valitsemme ikonin, jonka haluaisimme.

Vaihe 2:

napsauta sitä ja valitse tällä kertaa Kopioi CSS. Jälleen, se antaa sinulle ponnahdusikkunan koodi sinun täytyy liittää.

Vaihe 3:

nyt avaa tyylisi.css ja löytää vastaava valitsin, tässä tapauksessa -.ilmoittaja. Lisäämällä: ennen ja sitten liittämällä CSS-koodi kopioitu dashicons verkkosivuilla, tekijän nimi on mukava kuvake edessä. Sinun on myös määritettävä, että käytät dashicons-kirjasinta. Muokattu koodi näyttää tältä:

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

lisätään vielä hieman stailausta, ja nyt valmis koodi näyttää tältä:

lopputulos

joten miltä tämä näyttää lopulta?

jotain tällaista:

Dashiconeja voi käyttää niin monella tavalla – anna luovuutesi vallata ja katso mihin pystyt.

Putting it all together

lukuun ottamatta edellä mainittuja esimerkkejä, voit käyttää Dashiconeja taustajärjestelmässäsi määrittääksesi erilaisia kuvakkeita eri post-tyypeille, tai voit käyttää niitä post-otsikoissa, widget-otsikoissa, tai jos luot mukautetun Aloitussivun, voit erottaa sivustosi eri sivut.

tästä hyvä esimerkki on WP Superstarsin vanha Kotisivu. Täällä, näet Dashicons käytössä eri alueilla verkkosivuilla:

dashiconit eivät ole ainoita kuvakkeiden kirjasintyyppejä, joita voi lisätä. Tutustu FontAwesome Icons opetusohjelma lisää.

sisältää sähköpostin päivitykset. Peru tilaus milloin tahansa.

Vastaa

Sähköpostiosoitettasi ei julkaista.