Ikone su zaista fascinantne!
One poseduju sposobnost brze komunikacije sa publikom, ostvarujući jaku vizuelnu vezu.
Iz tog razloga, ikone se široko koriste svuda, uključujući i WordPress web stranice.
Takođe, korišćenje jedne te iste teme na vašem sajtu tokom dužeg perioda može postati monotono. To je sasvim normalna pojava.
Tada ćete krenuti u potragu za nečim interesantnijim, a čak i to će vam s vremenom dosaditi,
I taj ciklus se neprestano ponavlja…
Dakle, kako možete preskočiti taj krug dosade?
Dashicons su odlično rešenje!
One mogu obogatiti estetiku vašeg sajta i pomoći vam da se istaknete. Takođe će vas poštedeti dodatnog truda i pretrpavanja vašeg sajta nepotrebnim slikama koje usporavaju brzinu učitavanja stranice.
Zato, hajde da istražimo Dashicons i kako ih možete efikasno koristiti na vašoj WordPress web lokaciji.
Šta su WordPress Dashicons?
Dashicons su zvanični fontovi ikona za WordPress, predstavljeni pre mnogo godina sa verzijom 3.8. Ovi fontovi su izuzetni i vizuelno dopadljivi ako ih koristite na vašoj web stranici. To su SVG datoteke visokog kvaliteta koje se mogu lako skalirati na bilo koju veličinu bez gubitka kvaliteta i pikselizacije.
S obzirom da imaju nativnu podršku za WordPress jer ih je kreirao sam WordPress tim, možete ih koristiti direktno bez potrebe za učitavanjem dodatnih skripti. Uključeno je približno 350 fontova ikona koje možete pronaći u zvaničnom dokumentu Resursi za WordPress programere.
Ove ikone su kategorizovane na osnovu tematike, a takođe možete koristiti dinamičko polje za pretragu kako biste filtrirali dostupne ikone.
Ove ikone možete koristiti na:
- WordPress kontrolnoj tabli
- Navigacionim menijima
- Stranicama i objavama
- Metapodacima
- Elementima editora
- Prilagođenim dodacima i temama
- Admin panelima
- Front-end dizajnu
Da li primećujete da više puta spominjem „ikone“?
Ovde mislim isključivo na fontove ikona.
Ne na slike u obliku ikona.
Da, postoji razlika između ta dva pojma.
Hajde da to rasvetlimo.
Razlika između slika ikona i fontova ikona?
Fontovi ikona i slike ikona su donekle slični, ali umesto slova, vektorski simboli se nalaze u fontovima ikona.
Da li je to postalo previše tehnički?
Hajde da to pojednostavimo.
U osnovi, ovi fontovi ikona izgledaju kao slike koje možete koristiti za dodavanje simbola na vašu web lokaciju, ali to nisu stvarne slike.
Oni vam nude mnoge prednosti.
Kako?
Otkrijte u sledećem odeljku.
Zašto biste ih koristili?
- Skalabilni su poput teksta koji koristite na vašoj web stranici, jer su fontovi.
- Lagani su i ne utiču na brzinu učitavanja vaše stranice, za razliku od slika.
- Možete podesiti boju ikone putem CSS-a i dodati dodatne karakteristike, kao što su gradijent boje, senka itd.
- Odlični su u štednji prevelikog broja HTTP zahteva, omogućavajući vam da učitate sve fontove odjednom, koje možete koristiti na vašim stranicama. Ako koristite veliki broj slika na sajtu, moraćete da napravite mnogo zahteva za njihovo preuzimanje, što povećava vreme učitavanja stranice.
- Jednostavni su za upotrebu i podešavanje u poređenju sa slikama. Možete dodati prepoznatljive i kreativne simbole bez potrebe da ih ponovo kreirate svaki put kada vam je potrebna ikona za video plejer, e-poštu, muziku ili bilo šta drugo.
- Veća pristupačnost, s obzirom na to da su ugrađeni direktno u WordPress.
Kako ih koristiti?
Korišćenje Dashicons nije komplikovano.
Verujte mi; upoznat sam sa oba :0
Samo pratite nekoliko koraka navedenih u nastavku kako biste počeli sa WordPress Dashicons.
Korak 1: Omogućite Dashicons na vašoj WordPress web lokaciji
Pre nego što počnete, potrebno je omogućiti Dashicons tamo gde vam je potrebno, na primer, u temi. Za to je potrebno dodati nekoliko linija koda u datoteku functions.php.
Da biste to uradili:
- Prvo idite na uređivač tema/izgleda sa vaše WordPress kontrolne table.
- Otvorite datoteku function.php.
- Pomerite se do kraja datoteke i dodajte nekoliko redova koda za postavljanje skripti u red.
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Gornji primer služi za omogućavanje Dashicons na frontendu.
Uverite se da ste kreirali podređenu temu pre uređivanja datoteke functions.php. To je zato što ako direktno uredite datoteku teme, a zatim dođe do ažuriranja za tu temu, to će zameniti sve promene koje ste napravili u datoteci.
Korak 2: Pronađite Dashicon HTML i CSS kodove
WordPress.org nudi biblioteku Dashicons, koja vam pomaže da pronađete CSS i HTML kodove koji pripadaju svakoj ikoni. Ovde idite na Resurse za programere kako biste pronašli Dashicons koje želite da koristite, a zatim:
- Kliknite na ikonu po vašem izboru.
- Izaberite između „Kopiraj CSS“ ili „Kopiraj HTML“ klikom na odgovarajuće dugme.
- Sada ćete videti iskačući prozor. Jednostavno kopirajte kod u međuspremnik.
- Odlučite gde želite da koristite ikonu, kao što su teme, metapodaci, navigacioni meni itd.
- Nalepite kopirani kod u tekstualni widget ili uređivač teksta izabrane lokacije.
- Izmenite izgled ikone pomoću prilagođenog CSS-a.
To je sve.
Osim toga, podrazumevano su sve ikone veličine 20 piksela. Možete promeniti njihovu veličinu koristeći CSS elemente iz opcija kao što su Inspect Element Google Chrome-a ili FireBug Firefox-a.
Kako maksimalno iskoristiti WordPress Dashicons?
Videli ste kako možete koristiti Dashicons na svom sajtu, a sada ćemo razmotriti njihovu upotrebu u konkretne svrhe.
1. Korišćenje u navigacionom meniju
Da biste dodali ikone u meni, sledite korake navedene u nastavku:
- Idite na Meni/Izgled sa kontrolne table
- Kopirajte HTML kodove dizajnirane za ikonu menija sa WordPress.org.
- Nalepite ih na „Navigacionu oznaku“ na kontrolnoj tabli.
- Kliknite na dugme „Sačuvaj“, a zatim učitajte početnu stranicu. Trebalo bi da prikaže lepu i oštru ikonu.
2. Korišćenje u objavama meta
Moći ćete da koristite Dashicons samo ispred datuma, imena autora, oznake ili kategorije na osnovu teme i podataka koje prikazuje.
S obzirom da ste već postavili Dashicons u red, otvorite datoteku style.css. U suprotnom, možete koristiti i prilagođeni CSS editor, koji vam omogućava da ne izgubite promene nakon ažuriranja teme. Zatim dodajte svoj CSS kod nakon što pronađete odgovarajući selektor.
3. Na pozadini WordPress-a
Ukoliko želite različite ikone za različite prilagođene naslove objava, tipove objava ili widgete, to se lako može postići.
Kratak savet: Napravite kratki kod
Da biste lako koristili Dashicons, možete kreirati kratki kod za njih. Ovo je naročito korisno kada pravite web lokaciju za svoje klijente, kojima će biti olakšano ubacivanje Dashicons bez potrebe da se petljaju sa kodovima.
Zaključak
Nadam se da su stvari sada prilično jasne u vezi sa WordPress Dashikonima. Oni ne samo da doprinose estetici vaše web stranice, već su i jednostavni za upotrebu i poboljšavaju brzinu učitavanja stranice.
A, kao što znate, ‘lepota i inteligencija’ je retka kombinacija.
Zato, požurite i iskoristite ove upečatljive Dashikone na vašoj WordPress lokaciji!