Ikoner er utrolig fascinerende!
De har evnen til raskt å kommunisere med publikum ved å skape en sterk visuell forbindelse.
Dette er grunnen til at ikoner er så utbredt, også på WordPress-nettsider.
Det er helt normalt å bli lei av det samme temaet på nettstedet ditt etter en stund.
Du begynner å lete etter noe mer spennende, bruker det en periode, og så blir du lei igjen.
Og denne syklusen fortsetter i det uendelige…
Så hvordan kan du bryte ut av denne kjedsomhetssirkelen?
Dashicons er en glimrende løsning!
De kan gi nettstedet ditt et estetisk løft og hjelpe deg med å skille deg ut. De bidrar også til å unngå unødvendige bilder som kan bremse sidehastigheten.
La oss se nærmere på Dashicons og hvordan du kan bruke dem effektivt på ditt WordPress-nettsted.
Hva er WordPress Dashicons?
Dashicons er WordPress» offisielle ikonskrifter, lansert med versjon 3.8 for mange år siden. Disse skriftene er stilige og attraktive når de brukes på nettstedet ditt. De er SVG-filer av høy kvalitet som enkelt kan skaleres til alle størrelser uten å miste skarphet.
Siden de er laget av WordPress-teamet selv, har de innebygd støtte i WordPress, og du kan bruke dem direkte uten å laste inn ekstra skript. Det finnes rundt 350 ikonskrifter tilgjengelig, som du kan finne i de offisielle WordPress utviklerressursene.
Ikonene er sortert etter tema, og det finnes et dynamisk søkefelt som hjelper deg med å filtrere tilgjengelige ikoner.
Du kan bruke disse ikonene på:
- WordPress-kontrollpanel
- Navigasjonsmenyer
- Sider og innlegg
- Metadata
- Redigeringsverktøy
- Egendefinerte plugins og temaer
- Administrasjonspaneler
- Front-end design
Legger du merke til at jeg nevner «ikoner» mange ganger?
Her refererer jeg til ikonskrifter.
Ikke bilder i form av ikoner.
Ja, det er en forskjell mellom de to.
La oss se på hva den forskjellen er.
Forskjellen mellom bildeikoner og ikonskrifter?
Ikonfonter og bildeikoner kan virke like, men i stedet for bokstaver inneholder ikonskrifter vektorsymboler.
Ble det litt for teknisk?
La meg forklare det enklere.
I bunn og grunn er ikonskrifter som bilder du kan bruke for å legge til symboler på nettstedet ditt, men de er ikke faktiske bilder.
De gir deg mange fordeler.
Hvordan?
Det skal vi se nærmere på i neste avsnitt.
Hvorfor bør du bruke dem?
- De kan skaleres som tekst siden de er skrifter.
- De er lette, noe som ikke påvirker sidehastigheten like mye som bilder.
- Du kan endre fargen på ikonet med CSS og legge til egenskaper som fargegradienter, skygger osv.
- De bidrar til å redusere antall HTTP-forespørsler siden du kan laste inn alle skriftene samtidig og bruke dem på flere sider. Bruker du mange bilder på en side, må du gjøre mange forespørsler for å hente dem, noe som kan øke sidehastigheten.
- De er enklere å bruke og justere enn bilder. Du kan legge til gjenkjennelige og kreative symboler uten å måtte gjenskape dem hver gang du trenger et ikon for en videospiller, e-post, musikk eller andre ting.
- De er mer tilgjengelige fordi de er innebygd i WordPress.
Hvordan bruke dem?
Å bruke Dashicons er ikke vanskelig.
Stol på meg; jeg har peiling på begge deler :0
Bare følg trinnene nedenfor for å komme i gang med WordPress Dashicons.
Trinn 1: Aktiver Dashicons på WordPress-siden din
Før du begynner, må du aktivere Dashicons der du trenger dem, for eksempel i et tema. Dette gjør du ved å legge til noen koder i function.php-filen.
Slik gjør du det:
- Gå først til Theme/Utseende Editor fra WordPress-kontrollpanelet.
- Åpne function.php-filen.
- Rull til bunnen av filen og legg til noen linjer med kode for å sette skriptet i kø
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Eksemplet over aktiverer Dashicons i front-end av nettstedet.
Sørg for å opprette et undertema før du redigerer functions.php-filen. Hvis du redigerer temafilen direkte, vil alle endringer du gjør i filen overskrives når temaet oppdateres.
Trinn 2: Finn HTML- og CSS-koder for Dashicons
WordPress.org tilbyr et bibliotek med Dashicons, der du finner CSS- og HTML-koder for hvert ikon. Gå til utviklerressursene for å finne Dashicons du vil bruke, og gjør deretter følgende:
- Klikk på ikonet du ønsker.
- Velg mellom «Kopier CSS» eller «Kopier HTML» ved å klikke på det.
- Du vil se et popup-vindu. Kopier koden til utklippstavlen.
- Bestem hvor du vil bruke ikonet, for eksempel temaer, metadata, navigasjonsmeny osv.
- Lim inn den kopierte koden i tekstwidgeten eller tekstredigeringsverktøyet der du ønsker det.
- Endre utseendet på ikonet med tilpasset CSS
Det er det hele.
Som standard er alle ikoner 20 piksler store. Du kan endre størrelsen med CSS-elementer fra verktøy som Chrome sin «Inspiser element» eller Firefox sin «FireBug».
Hvordan få mest mulig ut av WordPress Dashicons?
Nå som du har lært hvordan du bruker Dashicons på nettstedet ditt, skal vi se på bruken til konkrete formål.
1. Bruke i navigasjonsmenyen
Følg trinnene nedenfor for å legge til ikoner i menyen:
- Gå til Menyer/Utseende fra dashbordet
- Kopier HTML-kodene for menyikoner fra WordPress.org
- Lim dem inn i feltet «Navigasjons-etikett» på kontrollpanelet
- Klikk på «Lagre»-knappen og last inn startsiden. Nå skal det kule og skarpe ikonet vises.
2. Bruk på post meta
Du kan bruke Dashicons rett foran en dato, forfatterens navn, tag eller kategori, avhengig av temaet og hvilke data som vises.
Ettersom du allerede har satt Dashicons i kø, åpner du style.css-filen. Du kan også bruke en egen CSS-editor for å unngå at endringene går tapt etter tema oppdateringer. Deretter legger du til CSS-koden din etter å ha funnet en passende velger.
3. På WordPress-backend
Hvis du vil ha egne ikoner for ulike tilpassede innleggstitler, innleggstyper eller widgets, er det enkelt å gjøre.
Et raskt tips: Lag en kortkode
For å gjøre det enklere å bruke Dashicons, kan du opprette en kortkode for dem. Dette er spesielt nyttig når du lager et nettsted for kunder som vil sette inn Dashicons uten å styre med koder.
Konklusjon
Jeg håper du nå har god oversikt over WordPress Dashicons. De gir ikke bare nettstedet ditt et estetisk løft, men er også enkle å bruke og forbedrer sidehastigheten.
Og som vi vet, «skjønnhet og hjerne» er en sjelden kombinasjon.
Så skynd deg og bruk de iøynefallende Dashicons på WordPress-siden din!