Dit gebeur met almal.

Jy kry 'n tema waarvan jy hou, jy installeer dit en spandeer 'n paar maande om die voorkoms van jou werf te geniet. Maar dan, na 'n paar maande, begin die tema verouderd voel. Bietjie vervelig.

Die enigste probleem is dat jy nie 'n paar uur wil spandeer om na iets nuuts te soek nie. As daar net 'n manier was om 'n bietjie speserye by jou tema te voeg, 'n bietjie opvlam om dit te laat uitstaan.

Voordat jy jou hande in wanhoop opgooi, laat ek jou 'n maklike manier wys om jou op te kikker. tema sonder te veel moeite, en sonder om onnodige beelde by te voeg wat jou werf kan vertraag.

Voer Dashicons in. Dashicons is lettertipe-ikone wat in WordPress 3.8 bekendgestel is. Dit is daardie wonderlike en oulike ikone wat jy sien wanneer jy by jou dashboard aanmeld. Sal dit nie gaaf wees as jy hulle ook by jou tema kan voeg nie?

Wel, jy kan en ek gaan jou wys hoe.

Hoe kan jy Dashicons in jou navigasiekieslys?

Kom ons begin met 'n eenvoudige voorbeeld. Dashicons is reeds sedert weergawe 3.8 by WordPress ingesluit, maar jy moet dit steeds insluit om hulle behoorlik aan die voorkant van jou werf te laat vertoon; dit wil sê jou tema.

Stap 1: Maak jou tema Dashicons gereed

Om jou tema Dashicons gereed te maak, maak eers jou functions.php-lêer oop (gevind in Voorkoms>) ;Editor – dit sal by verstek jou huidige tema se CSS-lêer oopmaak. Gaan voort en soek nafunctions.php-lêer en klik daarop om dit in Editor te laai.)

Stap 2: Stel die skrip in 'n waglys

Blaai tot onder en plak hierdie reëls van kode aan die einde:

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

Goed! Nou is jou tema gereed om Dashicons te gebruik.

Stap 3: Voeg Dashicons by spyskaartitems

Kom ons voeg 'n Dashicon by vir jou Tuis-skakel. Gaan na Dashicons-webwerf en kies die ikoon waarvan jy hou.

Opdatering: Dashicons was oorspronklik op GitHub.io beskikbaar, maar hulle is sedertdien op WordPress.org beskikbaar gestel.

Stap 4:

Klik op die verlangde ikoon (in hierdie geval het ek die tuisikoon gekies) en klik dan op Copy HTML. Dit sal vir jou 'n opspringvenster gee met die kode wat jy nodig het.

Stap 5:

Gaan terug na jou WordPress-dashboard, klik op Voorkoms > ; Spyskaarte en plak die kode reg waar dit sê Navigation Label.

As jy steeds wil hê die woord moet verskyn, tik dit na die sluiting div hakie.

Klik op stoor en laai jou tuisblad. Jou tuisskakel behoort nou 'n mooi, skerp Dashicon te vertoon.

Jy kan dit doen vir al die navigasiekieslysitems of net vir die huis. Herhaal net die stappe hierbo met die bypassende ikone. Dit was maklik, reg?

Hoe gebruik jy Dashicons in post-meta?

Jy kan 'n stap verder gaan en Dashicons by jou post-meta voeg, of met ander woorde, Dashicons byvoeg voor skrywer se naam, datum, kategorie of etiket; hang af vanjou tema en die inligting wat dit vertoon.

Aangesien jy reeds Dashicons in jou tema gestel het, is al wat jy nou moet doen om jou style.css-lêer oop te maak (of gebruik Custom CSS-redigeerder wat altyd 'n beter opsie is sodat jy moenie die veranderinge verloor sodra jou tema opgedateer is nie!), vind die bypassende keurder en voeg die CSS-kode by.

Sê jy wil 'n ikoon voor jou naam of jou skrywer se naam byvoeg.

Stap 1:

Eers gaan ons 'n ikoon kies wat ons wil hê.

Stap 2:

Klik dan daarop, en kies hierdie keer Copy CSS. Weereens, dit sal vir jou 'n opspringvenster gee met die kode wat jy moet plak.

Stap 3:

Maak nou jou style.css oop. en vind die ooreenstemmende keurder, in hierdie geval – .entry-author. Deur :before by te voeg en dan die CSS-kode wat jy van Dashicons-webwerf gekopieer het te plak, sal die skrywer se naam 'n mooi ikoon voor hê. Jy moet ook spesifiseer dat jy die Dashicons-lettertipe gebruik. Die gewysigde kode lyk soos volg:

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

Kom ons voeg 'n bietjie stilering ook by, en nou lyk die voltooide kode so:

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

Die eindresultaat

So what sal dit op die ou end lyk?

Iets soos hierdie:

Daar is soveel maniere waarop jy Dashicons kan gebruik – laat jou kreatiwiteit posvat en kyk wat jy kan doen.

Om dit alles saam te stel

Afgesien van die bogenoemde voorbeelde, kan jy Dashicons in jou agterkant gebruik om verskillendeikone vir verskillende plasingstipes, of jy kan dit in jou plasingstitels, legstuktitels gebruik, of as jy 'n pasgemaakte bestemmingsbladsy skep, kan jy tussen verskillende bladsye van jou werf onderskei.

Hier is 'n basiese voorbeeld van wat jy kan dit gebruik om te skep: