It bart mei elkenien.

Jo fine in tema dat jo leuk fine, jo ynstallearje it en besteegje in pear moannen oan it genietsjen fan it uterlik fan jo side. Mar dan, nei in pear moanne, begjint it tema ferâldere te fielen. In bytsje saai.

It ienige probleem is, jo wolle net in pear oeren sykje nei wat nijs. As der mar in manier wie om in bytsje krûd ta te foegjen oan jo tema, in bytsje flare om it opfallend te meitsjen.

Foardat jo jo hannen yn wanhoop opsmite, lit my jo in maklike manier sjen litte om jo te spiisjen tema sûnder al te folle muoite, en sûnder it tafoegjen fan ûnnedige ôfbyldings dy't jo side fertrage kinne.

Enter Dashicons. Dashicons binne lettertype-ikoanen dy't waarden yntrodusearre yn WordPress 3.8. Dit binne dy bjusterbaarlike en koele ikoanen dy't jo sjogge as jo ynlogge op jo dashboard. Soe it net cool wêze as jo se ek tafoegje kinne oan jo tema?

No, dat kinst en ik sil dy sjen litte hoe.

Hoe kinne jo Dashicons brûke yn jo navigaasjemenu?

Litte wy begjinne mei in ienfâldich foarbyld. Dashicons binne al opnommen yn WordPress sûnt ferzje 3.8, mar jo moatte se noch opnimme om se goed te sjen op 'e foarkant fan jo side; dat is, jo tema.

Stap 1: Meitsje jo tema Dashicons klear

Om jo tema Dashicons klear te meitsjen, iepenje earst jo functions.php-bestân (fûn yn Uterlik> ;Editor - standert sil it CSS-bestân fan jo hjoeddeistige tema iepenje. Gean fierder en sykje neifunctions.php-bestân en klikje derop om it yn bewurker te laden.)

Stap 2: Set it skript yn wachtrige

Scroll hielendal nei ûnderen en plak dizze rigels fan koade oan 'e ein:

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

Goed! No is jo tema klear om Dashicons te brûken.

Stap 3: Dashicons tafoegje oan menu-items

Litte wy in Dashicon tafoegje foar jo Thúskeppeling. Gean nei de webside fan Dashicons en selektearje it ikoan dat jo leuk fine.

Update: Dashicons wiene oarspronklik beskikber op GitHub.io, mar se binne sûnt beskikber steld op WordPress.org.

Stap 4:

Klik op it winske ikoan (yn dit gefal haw ik it thúsikoan selektearre) en klik dan op HTML kopiearje. It sil jo in pop-up-finster jaan mei de koade dy't jo nedich binne.

Stap 5:

Gean werom nei jo WordPress-dashboard, klikje op Uterlik > ; Menu's en plak de koade krekt wêr't it seit Navigaasjelabel.

As jo ​​​​it wurd noch wol werjaan wolle, typ it dan nei de ôfslutende div-beugel.

Klik op bewarje en lade jo thússide. Jo thúskeppeling moat no in moaie, skerpe Dashicon werjaan.

Jo kinne dit dwaan foar alle items fan it navigaasjemenu of gewoan foar thús. Werhelje gewoan de stappen hjirboppe mei de oerienkommende ikoanen. Dat wie maklik krekt?

Hoe brûke jo Dashicons yn postmeta?

Jo kinne in stap fierder gean en Dashicons tafoegje oan jo postmeta, of mei oare wurden Dashicons tafoegje foar de skriuwer fan namme, datum, kategory of tag; ôfhinklik fanjo tema en de ynformaasje dy't it werjûn.

Om't jo Dashicons al yn jo tema yn 'e wachtrige hawwe, hoege jo no allinich jo style.css-bestân te iepenjen (of gebrûk meitsje fan Custom CSS-bewurker dy't altyd in bettere opsje is, sadat jo ferlear de wizigingen net as jo tema bywurke binne!), fyn de oerienkommende selektor en foegje de CSS-koade ta.

Litte wy sizze dat jo in ikoan tafoegje wolle foar jo namme of jo skriuwersnamme.

Stap 1:

Earst sille wy in ikoan kieze dat wy wolle.

Stap 2:

Klikje der dan op en selektearje dizze kear CSS kopiearje. Nochris sil it jo in pop-up finster jaan mei de koade dy't jo moatte plakke.

Stap 3:

Iepenje no jo style.css en fine de oerienkommende selector, yn dit gefal - .entry-author. Troch :before ta te foegjen en dan de CSS-koade te plakjen dy't jo kopieare fan 'e Dashicons-webside, sil de namme fan' e auteur in moai ikoan foar hawwe. Jo moatte ek oanjaan dat jo it lettertype Dashicons brûke. De wizige koade sjocht der sa út:

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

Litte wy ek in bytsje styling tafoegje, en no sjocht de foltôge koade der sa ú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; } 

It einresultaat

So wat sil dit der úteinlik útsjen?

Sowat as dit:

D'r binne safolle manieren wêrop jo Dashicons kinne brûke - lit jo kreativiteit fêsthâlde en sjoch wat jo kinne dwaan.

It allegear byinoar sette

Njonken de boppesteande foarbylden kinne jo Dashicons yn jo efterkant brûke om ferskate oan te jaanikoanen foar ferskate berjochttypen, of jo kinne se brûke yn jo posttitels, widgettitels, of as jo in oanpaste lâningsside meitsje kinne jo ûnderskied meitsje tusken ferskate siden fan jo side.

Hjir is in basisfoarbyld fan wat jo kinne se brûke om te meitsjen: