Það gerist fyrir alla.

Þú finnur þema sem þér líkar við, setur það upp og eyðir nokkrum mánuðum í að njóta útlitsins á síðunni þinni. En svo, eftir nokkra mánuði, fer þemað að finnast það gamalt. Svolítið leiðinlegt.

Eina vandamálið er að þú vilt ekki eyða nokkrum klukkustundum í að leita að einhverju nýju. Ef það væri bara leið til að bæta smá kryddi við þemað þitt, smá blossa til að láta það skera sig úr.

Áður en þú kastar upp höndunum í örvæntingu, leyfðu mér að sýna þér auðvelda leið til að krydda þína þema án of mikillar fyrirhafnar og án þess að bæta við óþarfa myndum sem gætu hægt á síðunni þinni.

Sláðu inn Dashicons. Dashicons eru leturtákn sem voru kynnt í WordPress 3.8. Þetta eru þessi frábæru og flottu tákn sem þú sérð þegar þú skráir þig inn á mælaborðið þitt. Væri ekki flott ef þú gætir bætt þeim við þemað líka?

Jæja, þú getur það og ég ætla að sýna þér hvernig.

Hvernig geturðu notað Dashicons í flakkvalmynd?

Við skulum byrja á einföldu dæmi. Dashicons eru nú þegar innifalin í WordPress síðan útgáfa 3.8 en þú þarft samt að hafa þá með til að fá þá til að birtast almennilega framan á síðunni þinni; það er þemað þitt.

Skref 1: Gerðu þema Dashicons tilbúið

Til að gera þema Dashicons tilbúið skaltu fyrst opna functions.php skrána þína (finnst í Appearance> ;Ritstjóri – sjálfgefið mun það opna CSS skrá núverandi þema þíns. Farðu á undan og leitaðu aðfunctions.php skrána og smelltu á hana til að hlaða henni í Editor.)

Skref 2: Settu handritið í röð

Skrunaðu alla leið til botns og límdu þessar línur af kóða í lokin:

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

Allt í lagi! Nú er þemað þitt tilbúið til að nota Dashicons.

Skref 3: Bæta Dashicons við valmyndaratriði

Bætum við Dashicon fyrir Home hlekkinn þinn. Farðu á vefsíðu Dashicons og veldu táknið sem þú vilt.

Uppfærsla: Dashicons voru upphaflega fáanlegir á GitHub.io, en þeir hafa síðan verið aðgengilegir á WordPress.org.

Skref 4:

Smelltu á táknið sem þú vilt (í þessu tilfelli valdi ég heimatáknið) og smelltu síðan á Copy HTML. Það mun gefa þér sprettiglugga með kóðanum sem þú þarft.

Skref 5:

Farðu aftur á WordPress mælaborðið þitt, smelltu á Útlit > ; Valmyndir og límdu kóðann rétt þar sem stendur Navigation Label.

Ef þú vilt enn að orðið birtist, sláðu það inn á eftir lokandi div sviga.

Smelltu á vista og hlaða heimasíðunni þinni. Heimatengillinn þinn ætti nú að birta fallegan, skörpinn Dashicon.

Þú getur gert þetta fyrir öll valmyndaratriðin eða bara fyrir heimilið. Endurtaktu bara skrefin hér að ofan með samsvarandi táknum. Það var auðvelt ekki satt?

Hvernig notarðu Dashicons í post meta?

Þú getur gengið skrefi lengra og bætt Dashicons við post meta, eða með öðrum orðum bætt Dashicons fyrir framan höfundar nafn, dagsetning, flokkur eða merki; það fer eftirþemað þitt og upplýsingarnar sem það sýnir.

Þar sem þú hefur þegar sett Dashicons í biðröð í þemanu þínu, þarftu bara að opna style.css skrána þína (eða nota sérsniðna CSS ritil sem er alltaf betri kostur svo þú ekki missa af breytingunum þegar þemað er uppfært!), finndu samsvarandi valmynd og bættu við CSS kóðanum.

Segjum að þú viljir setja táknmynd fyrir framan nafnið þitt eða nafn höfundarins.

Skref 1:

Fyrst ætlum við að velja tákn sem við viljum.

Skref 2:

Smelltu síðan á það og veldu að þessu sinni Copy CSS. Aftur mun það gefa þér sprettiglugga með kóðanum sem þú þarft að líma.

Skref 3:

Opnaðu nú style.css þinn og finndu samsvarandi veljara, í þessu tilviki – .entry-author. Með því að bæta við :before og líma síðan CSS kóðann sem þú afritaðir af Dashicons vefsíðunni mun nafn höfundar hafa fallegt tákn fyrir framan það. Þú þarft líka að tilgreina að þú sért að nota Dashicons leturgerðina. Breytti kóðinn lítur svona út:

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

Við skulum bæta við smá stíl líka, og nú lítur útbúinn kóðinn svona út:

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

Niðurstaðan

Svo hvað mun þetta líta út á endanum?

Eitthvað á þessa leið:

Það eru svo margar leiðir sem þú getur notað Dashicons – láttu sköpunargáfu þína ná tökum á þér og sjáðu hvað þú getur gert.

Að setja þetta allt saman

Fyrir utan ofangreind dæmi geturðu notað Dashicons í bakendanum þínum til að tilgreina mismunanditákn fyrir mismunandi færslutegundir, eða þú getur notað þau í færslutitlum þínum, græjutitlum, eða ef þú ert að búa til sérsniðna áfangasíðu geturðu greint á milli mismunandi síðna á síðunni þinni.

Hér er grundvallardæmi um hvað þú gætir notað þá til að búa til: