To se dešava 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 počinje da se osjeća zastarjelo. Pomalo dosadno.

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

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

Unesite Dashicons. Dashicons su ikone fontova koje su predstavljene u WordPress 3.8. To su one sjajne i cool ikone koje vidite kada se prijavite na svoju kontrolnu tablu. Zar ne bi bilo super da ih možete dodati i svojoj temi?

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

Kako možete koristiti Dashicons u svom navigacijski meni?

Počnimo s jednostavnim primjerom. Dashikoni su već uključeni u WordPress od verzije 3.8, ali i dalje ih morate uključiti da bi se pravilno prikazali na prednjoj strani vaše stranice; to jest vaša tema.

Korak 1: Pripremite Dashicons teme

Da biste svoju temu pripremili za Dashicons, prvo otvorite datoteku functions.php (nalazi se u Appearance> ;Editor – podrazumevano će otvoriti CSS fajl vaše trenutne teme. Samo napred i potražitefunctions.php datoteku i kliknite na nju da biste je učitali u Editor.)

Korak 2: Stavite skriptu u red

Skrolujte do dna i zalijepite ove redove 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 u stavke menija

Dodajmo Dashicon za vašu vezu Početna. Idite na Dashicons web stranicu i odaberite ikonu koja vam se sviđa.

Ažuriranje: Dashicons su prvobitno 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. Dat će vam skočni prozor s kodom koji vam je potreban.

Korak 5:

Vratite se na svoju WordPress kontrolnu ploču, kliknite na Izgled > ; Izbornike i zalijepite kod tačno tamo gdje piše Navigacijska oznaka.

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

Kliknite na sačuvajte i učitajte svoju početnu stranicu. Vaša početna veza bi sada trebala prikazati lijep, oštar Dashicon.

Ovo možete učiniti za sve stavke navigacijskog menija ili samo za dom. Samo ponovite gore navedene korake sa odgovarajućim ikonama. To je bilo lako, zar ne?

Kako koristite Dashicons u objavnoj meta?

Možete otići korak dalje i dodati Dashicons u svoju meta objavu, ili drugim riječima dodati Dashicons ispred autorske ime, datum, kategorija ili oznaka; zavisno odsvoju temu i informacije koje prikazuje.

Pošto ste već stavili Dashicons u svoju temu, sve što sada trebate učiniti je otvoriti svoju style.css datoteku (ili koristiti Custom CSS editor koji je uvijek bolja opcija tako da nemojte izgubiti promjene kada se vaša tema ažurira!), pronađite odgovarajući selektor i dodajte CSS kod.

Recimo da želite dodati ikonu ispred svog imena ili imena 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 sa Dashicons web stranice, 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"; }

Dodamo i malo stila, a sada završ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 šta hoće li ovo na kraju izgledati?

Nešto ovako:

Postoji toliko načina na koje možete koristiti Dashicons – pustite svoju kreativnost da uzme maha i vidite šta možete učiniti.

Sve zajedno

Osim gornjih primjera, možete koristiti Dashicons u svom backendu da odredite različiteikone za različite vrste objava, ili ih možete koristiti u naslovima svojih postova, naslovima widgeta ili ako kreirate prilagođenu odredišnu stranicu možete razlikovati između različitih stranica vaše web stranice.

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