Ĝi okazas al ĉiuj.

Vi trovas temon, kiun vi ŝatas, vi instalas ĝin kaj pasigas kelkajn monatojn ĝuante la aspekton de via retejo. Sed poste, post kelkaj monatoj, la temo komencas sentiĝi malfreŝa. Iom enuiga.

La nura problemo estas, ke vi ne volas pasigi kelkajn horojn serĉante ion novan. Se nur ekzistus maniero aldoni iom da spicaĵo al via temo, eta flamlumo por elstarigi ĝin.

Antaŭ ol vi ĵetas viajn manojn en malespero, lasu min montri al vi facilan manieron spicigi vian temo sen tro da peno, kaj sen aldoni nenecesajn bildojn, kiuj povus malrapidigi vian retejon.

Enigu Dashicons. Dashicons estas tiparaj ikonoj kiuj estis enkondukitaj en WordPress 3.8. Ili estas tiuj mirindaj kaj bonegaj ikonoj, kiujn vi vidas kiam vi ensalutas en via panelo. Ĉu ne estus bone se vi povus aldoni ilin ankaŭ al via temo?

Nu, vi povas kaj mi montros al vi kiel.

Kiel vi povas uzi Dashicons en via navigada menuo?

Ni komencu per simpla ekzemplo. Dashicons jam estas inkluzivitaj en WordPress ekde la versio 3.8 sed vi ankoraŭ devas inkluzivi ilin por ke ili aperu ĝuste sur la antaŭa parto de via retejo; tio estas via temo.

Paŝo 1: Pretigu vian temon Dashicons

Por pretigi vian temon Dashicons unue malfermu vian functions.php-dosieron (troveblan en Aspekto> ;Redaktilo – defaŭlte ĝi malfermos la CSS-dosieron de via nuna temo. Antaŭeniru kaj serĉufunctions.php-dosieron kaj alklaku ĝin por ŝargi ĝin en Redaktoro.)

Paŝo 2: Envigu la skripton

Rulumu ĝis la fundo kaj algluu ĉi tiujn liniojn. de kodo ĉe la fino:

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

Bone! Nun via temo estas preta por uzi Dashicons.

Paŝo 3: Aldono de Dashicons al menueroj

Ni aldonu Dashicons por via Hejma ligilo. Iru al la retejo de Dashicons kaj elektu la piktogramon, kiun vi ŝatas.

Ĝisdatigo: Dashicons estis origine haveblaj ĉe GitHub.io, sed de tiam ili estas disponeblaj ĉe WordPress.org.

Paŝo 4:

Alklaku la deziratan ikonon (ĉikaze mi elektis la hejman ikonon) kaj poste alklaku Kopii HTML. Ĝi donos al vi ŝprucfenestron kun la kodo, kiun vi bezonas.

Paŝo 5:

Reiru al via WordPress-panelo, alklaku Aspekto > ; Menuoj kaj algluu la kodon ĝuste kie ĝi diras Navigada Etikedo.

Se vi ankoraŭ volas, ke la vorto aperu, tajpu ĝin post la ferma div-krampo.

Alklaku sur konservu kaj ŝarĝu vian hejmpaĝon. Via hejma ligilo nun devus montri belan, klaran Dashicon.

Vi povas fari tion por ĉiuj navigaj menueroj aŭ nur por hejme. Nur ripetu la suprajn paŝojn kun la kongruaj ikonoj. Tio estis facila, ĉu ne?

Kiel vi uzas Dashicons en postmeta?

Vi povas iri paŝon plu kaj aldoni Dashicons al via afiŝo meta, aŭ alivorte aldoni Dashicons antaŭ la aŭtoro. nomo, dato, kategorio aŭ etikedo; dependante devia temo kaj la informoj, kiujn ĝi montras.

Ĉar vi jam envicigis Dashicons en via temo, vi nur devas fari nun malfermi vian style.css-dosieron (aŭ uzi Propran CSS-redaktilon, kiu ĉiam estas pli bona elekto por ke vi ne perdu la ŝanĝojn post kiam via temo ĝisdatiĝas!), trovu la kongruan elektilon kaj aldonu la CSS-kodon.

Ni diru, ke vi volas aldoni piktogramon antaŭ via nomo aŭ la nomo de via aŭtoro.

Paŝo 1:

Unue ni elektos ikonon, kiun ni ŝatus.

Paŝo 2:

Tiam alklaku ĝin, kaj ĉi-foje elektu Kopii CSS. Denove, ĝi donos al vi ŝprucfenestron kun la kodo, kiun vi bezonas alglui.

Paŝo 3:

Nun malfermu vian style.css. kaj trovu la respondan elektilon, ĉi-kaze – .entry-author. Aldonante :before kaj poste algluante la CSS-kodon, kiun vi kopiis el la retejo de Dashicons, la nomo de la aŭtoro havos belan ikonon antaŭ ĝi. Vi ankaŭ devas specifi, ke vi uzas la tiparon Dashicons. La modifita kodo aspektas jene:

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

Ni aldonu ankaŭ iom da stilado, kaj nun la kompletigita kodo aspektas jene:

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

La fina rezulto

Kio do ĉu tio aspektos kiel finfine?

Io tia:

Estas tiom da manieroj, kiujn vi povas uzi Dashicons - lasu vian kreemon ekregi kaj vidu, kion vi povas fari.

Kunmeti ĉion

Krom la supraj ekzemploj, vi povas uzi Dashicons en via backend por specifi malsamajnpiktogramoj por malsamaj afiŝo-tipoj, aŭ vi povas uzi ilin en viaj afiŝotitoloj, fenestraĵtitoloj, aŭ se vi kreas laŭmendan landpaĝon vi povas diferencigi inter malsamaj paĝoj de via retejo.

Jen baza ekzemplo de kio vi povus uzi ilin por krei: