To se događa svima.

Pronađete temu koja vam se sviđa, instalirate je i provedete nekoliko mjeseci uživajući u izgledu svoje stranice. Ali onda, nakon nekoliko mjeseci, tema se počinje činiti ustajalom. Pomalo dosadno.

Jedini problem je što ne želite provesti nekoliko sati tražeći nešto novo. Kad bi samo postojao način da svojoj temi dodate malo začina, malo žara da se istakne.

Prije nego što dignete ruke u očaju, dopustite mi da vam pokažem jednostavan način da začinite svoju temu bez previše truda i bez dodavanja nepotrebnih slika koje bi mogle usporiti vašu stranicu.

Unesite Dashicons. Dashicons su ikone fontova koje su predstavljene u WordPressu 3.8. To su one sjajne i cool ikone koje vidite kada se prijavite na nadzornu ploču. Ne bi li bilo super kada biste ih također mogli dodati svojoj temi?

Pa, možete, a ja ću vam pokazati kako.

Kako možete koristiti Dashikone u svom navigacijski izbornik?

Počnimo s jednostavnim primjerom. Dashikoni su već uključeni u WordPress od verzije 3.8, ali ih i dalje morate uključiti kako bi se ispravno prikazali na prednjem dijelu vaše web-lokacije; to jest, vaša tema.

Korak 1: Pripremite svoju temu Dashicons

Da biste svoju temu pripremili Dashicons prvo otvorite svoju functions.php datoteku (koja se nalazi u Appearance> ;Uređivač – prema zadanim postavkama otvorit će CSS datoteku vaše trenutne teme. Samo naprijed i potražitefunctions.php datoteku i kliknite na nju da je učitate u Editor.)

Korak 2: Stavite skriptu u red čekanja

Skrolujte skroz do dna i zalijepite ove retke koda na kraju:

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

U redu! Sada je vaša tema spremna za korištenje Dashikona.

Korak 3: Dodavanje Dashikona stavkama izbornika

Dodajmo Dashikon za vašu početnu vezu. Idite na web stranicu Dashicons i odaberite ikonu koja vam se sviđa.

Ažuriranje: Dashicons su izvorno bili dostupni na GitHub.io, ali su od tada dostupni na WordPress.org.

Korak 4:

Kliknite na željenu ikonu (u ovom slučaju sam odabrao početnu ikonu), a zatim kliknite na Kopiraj HTML. Pojavit će vam se skočni prozor s kodom koji vam je potreban.

Korak 5:

Vratite se na nadzornu ploču WordPressa, kliknite na Izgled > ; Izbornici i zalijepite kod točno tamo gdje piše Navigacijska oznaka.

Ako i dalje želite da se riječ prikazuje, upišite je nakon završne div zagrade.

Kliknite na spremite i učitajte svoju početnu stranicu. Vaša početna veza sada bi trebala prikazivati ​​lijep, jasan Dashicon.

To možete učiniti za sve stavke navigacijskog izbornika ili samo za početnu stranicu. Samo ponovite gornje korake s odgovarajućim ikonama. To je bilo jednostavno, zar ne?

Kako koristiti Dashikone u meta posta?

Možete otići korak dalje i dodati Dashikone u svoju meta posta, ili drugim riječima, dodati Dashikone ispred autorove ime, datum, kategorija ili oznaka; ovisno osvoju temu i informacije koje ona prikazuje.

Budući da ste već stavili Dashicons u red čekanja u svojoj temi, sve što sada trebate učiniti je otvoriti svoju datoteku style.css (ili upotrijebiti prilagođeni CSS uređivač koji je uvijek bolja opcija nemojte izgubiti promjene kada se vaša tema ažurira!), pronađite odgovarajući birač i dodajte CSS kod.

Recimo da želite dodati ikonu ispred svog imena ili imena svog autora.

Korak 1:

Prvo ćemo odabrati ikonu koju želimo.

Korak 2:

Zatim kliknite na njega i ovaj put odaberite Kopiraj CSS. Opet će vam dati skočni prozor s kodom koji trebate zalijepiti.

Korak 3:

Sada otvorite svoj style.css i pronađite odgovarajući selektor, u ovom slučaju – .entry-author. Dodavanjem :before i zatim lijepljenjem CSS koda koji ste kopirali s web stranice Dashicons, ime autora će imati lijepu ikonu ispred sebe. Također morate navesti da koristite Dashicons font. Modificirani kod izgleda ovako:

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

Dodajmo i malo stila, a sada dovršeni kod izgleda ovako:

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

Krajnji rezultat

Pa što hoće li ovo izgledati na kraju?

Nešto poput ovoga:

Postoji toliko mnogo načina na koje možete koristiti Dashicons – dopustite svojoj kreativnosti da zavlada i vidite što možete učiniti.

Stavljajući sve zajedno

Osim gornjih primjera, možete koristiti Dashicons u svojoj pozadini da odredite različiteikone za različite vrste postova ili ih možete koristiti u naslovima svojih postova, naslovima widgeta ili ako stvarate prilagođenu odredišnu stranicu, možete razlikovati različite stranice svoje web-lokacije.

Evo osnovnog primjera onoga što možete ih koristiti za stvaranje: