Mae'n digwydd i bawb.

Rydych chi'n dod o hyd i thema rydych chi'n ei hoffi, rydych chi'n ei gosod ac yn treulio ychydig fisoedd yn mwynhau edrychiad eich gwefan. Ond wedyn, ar ôl ychydig fisoedd, mae'r thema'n dechrau teimlo'n hen. Ychydig yn ddiflas.

Yr unig broblem yw, dydych chi ddim eisiau treulio cwpl o oriau yn chwilio am rywbeth newydd. Pe bai dim ond ffordd i ychwanegu ychydig o sbeis at eich thema, ychydig o fflêr i wneud iddo sefyll allan.

Cyn i chi daflu eich dwylo i fyny mewn anobaith, gadewch i mi ddangos ffordd hawdd i chi sbeisio eich thema heb ormod o ymdrech, a heb ychwanegu delweddau diangen a allai arafu eich gwefan.

Rhowch Dashicons. Mae dashicons yn eiconau ffont a gyflwynwyd yn WordPress 3.8. Dyma'r eiconau anhygoel a chŵl hynny a welwch pan fyddwch chi'n mewngofnodi i'ch dangosfwrdd. Oni fyddai'n cŵl pe baech chi'n gallu eu hychwanegu at eich thema hefyd?

Wel, fe allwch chi ac rydw i'n mynd i ddangos i chi sut.

Sut allwch chi ddefnyddio Dashicons yn eich ddewislen llywio?

Dechrau gydag enghraifft syml. Mae dashicons eisoes wedi'u cynnwys yn WordPress ers fersiwn 3.8 ond mae angen i chi eu cynnwys o hyd i'w cael i arddangos yn iawn ar ben blaen eich gwefan; hynny yw, eich thema.

Cam 1: Gwnewch eich thema yn barod Dashicons

I wneud eich thema yn barod, agorwch eich ffeil functions.php yn gyntaf (mae i'w gael yn Appearance> ;Editor - yn ddiofyn bydd yn agor ffeil CSS eich thema gyfredol. Ewch ymlaen i chwilio amfunctions.php ffeil a chliciwch arno i'w lwytho yn y Golygydd.)

Cam 2: Rhowch y sgript mewn ciw

Sgroliwch yr holl ffordd i'r gwaelod a gludwch y llinellau hyn o god ar y diwedd:

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

iawn! Nawr mae'ch thema'n barod i ddefnyddio Dashicons.

Cam 3: Ychwanegu Dashicons at eitemau dewislen

Dewch i ni ychwanegu Dashicon ar gyfer eich dolen Cartref. Ewch draw i wefan Dashicons a dewiswch yr eicon rydych chi'n ei hoffi.

Diweddariad: Roedd Dashicons ar gael yn wreiddiol ar GitHub.io, ond maen nhw bellach ar gael ar WordPress.org.

Cam 4:

Cliciwch ar yr eicon dymunol (yn yr achos hwn dewisais yr eicon cartref) ac yna cliciwch ar Copïo HTML. Bydd yn rhoi ffenestr naid i chi gyda'r cod sydd ei angen arnoch.

Cam 5:

Ewch yn ôl i'ch dangosfwrdd WordPress, cliciwch ar Appearance > ; Dewislenni a gludwch y cod i'r dde lle mae'n dweud Label Llywio.

Os ydych chi dal eisiau i'r gair ymddangos, teipiwch ef ar ôl y braced div sy'n cau.

Cliciwch ar arbed a llwytho eich tudalen gartref. Dylai eich cyswllt cartref nawr ddangos Dashicon braf, creisionllyd.

Gallwch wneud hyn ar gyfer holl eitemau'r ddewislen llywio neu dim ond ar gyfer y cartref. Ailadroddwch y camau uchod gyda'r eiconau cyfatebol. Roedd hynny'n hawdd iawn?

Sut ydych chi'n defnyddio Dashicons yn y post meta?

Gallwch fynd gam ymhellach ac ychwanegu Dashicons at eich meta post, neu mewn geiriau eraill ychwanegu Dashicons o flaen rhai'r awdur enw, dyddiad, categori neu dag; yn dibynnu areich thema a'r wybodaeth y mae'n ei ddangos.

Gan eich bod eisoes wedi mewnciwio Dashicons yn eich thema, y ​​cyfan sy'n rhaid i chi ei wneud nawr yw agor eich ffeil style.css (neu ddefnyddio golygydd Custom CSS sydd bob amser yn opsiwn gwell i chi peidiwch â cholli'r newidiadau unwaith y bydd eich thema'n diweddaru!), dewch o hyd i'r dewisydd sy'n cyfateb ac ychwanegwch y cod CSS.

Dewch i ni ddweud eich bod am ychwanegu eicon o flaen eich enw neu enw eich awdur.

Cam 1:

Yn gyntaf, rydyn ni'n mynd i ddewis eicon yr hoffen ni.

Cam 2:

Yna cliciwch arno, a'r tro hwn dewiswch Copïo CSS. Unwaith eto, bydd yn rhoi ffenestr naid i chi gyda'r cod y mae angen i chi ei ludo.

Cam 3:

Nawr agorwch eich style.css a dod o hyd i'r dewisydd cyfatebol, yn yr achos hwn – .entry-author. Trwy ychwanegu :cyn ac yna gludo'r cod CSS y gwnaethoch ei gopïo o wefan Dashicons, bydd gan enw'r awdur eicon braf o'i flaen. Mae angen i chi hefyd nodi eich bod yn defnyddio'r ffont Dashicons. Mae'r cod wedi'i addasu yn edrych fel hyn:

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

Gadewch i ni ychwanegu ychydig o steilio hefyd, a nawr mae'r cod gorffenedig yn edrych fel hyn:

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

Y canlyniad terfynol

Felly beth a fydd hyn yn edrych fel yn y diwedd?

Rhywbeth fel hyn:

Mae cymaint o ffyrdd y gallwch chi ddefnyddio Dashicons - gadewch i'ch creadigrwydd gydio a gweld beth allwch chi ei wneud.

Wrthi'n rhoi'r cyfan at ei gilydd

Ar wahân i'r enghreifftiau uchod, gallwch ddefnyddio Dashicons yn eich ôl-wyneb i nodi gwahanoleiconau ar gyfer gwahanol fathau o bost, neu gallwch eu defnyddio yn eich teitlau post, teitlau teclyn, neu os ydych yn creu tudalen lanio wedi'i theilwra gallwch wahaniaethu rhwng gwahanol dudalennau eich gwefan.

Dyma enghraifft sylfaenol o beth gallech eu defnyddio i greu: