Det skjer med alle.

Du finner et tema du liker, du installerer det og bruker noen måneder på å nyte utseendet til nettstedet ditt. Men så, etter noen måneder, begynner temaet å føles gammelt. Litt kjedelig.

Det eneste problemet er at du ikke vil bruke et par timer på å lete etter noe nytt. Hvis det bare var en måte å tilføre litt krydder til temaet ditt, en liten flair for å få det til å skille seg ut.

Før du kaster hendene opp i fortvilelse, la meg vise deg en enkel måte å krydre opp tema uten for mye innsats, og uten å legge til unødvendige bilder som kan redusere hastigheten på nettstedet ditt.

Skriv inn Dashicons. Dashikoner er fontikoner som ble introdusert i WordPress 3.8. De er de fantastiske og kule ikonene du ser når du logger på dashbordet. Ville det ikke vært kult om du kunne legge dem til i temaet ditt også?

Vel, du kan, og jeg skal vise deg hvordan.

Hvordan kan du bruke Dashicons i din navigasjonsmeny?

La oss starte med et enkelt eksempel. Dashicons er allerede inkludert i WordPress siden versjon 3.8, men du må fortsatt inkludere dem for å få dem til å vises riktig på forsiden av nettstedet ditt; det vil si temaet ditt.

Trinn 1: Gjør temaet Dashicons klart

For å gjøre temaet Dashicons klart åpner du først functions.php-filen (finnes i Appearance> ;Editor – som standard vil den åpne CSS-filen til det gjeldende temaet. Gå videre og se etterfunctions.php-filen og klikk på den for å laste den i Editor.)

Trinn 2: Sett skriptet i kø

Rull helt til bunnen og lim inn disse linjene kode på slutten:

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

OK! Nå er temaet ditt klart til å bruke Dashicons.

Trinn 3: Legge til Dashicons til menyelementer

La oss legge til en Dashicon for Hjem-koblingen din. Gå over til Dashicons nettsted og velg ikonet du liker.

Oppdatering: Dashicons var opprinnelig tilgjengelig på GitHub.io, men de har siden blitt gjort tilgjengelig på WordPress.org.

Trinn 4:

Klikk på ønsket ikon (i dette tilfellet valgte jeg hjemikonet) og klikk deretter på Kopier HTML. Det vil gi deg et popup-vindu med koden du trenger.

Trinn 5:

Gå tilbake til WordPress-dashbordet, klikk på Utseende > ; Menyer og lim inn koden akkurat der det står Navigasjonsetikett.

Hvis du fortsatt vil at ordet skal vises, skriv det inn etter den avsluttende div-parentesen.

Klikk på lagre og last inn hjemmesiden din. Hjemlinken din skal nå vise en fin, skarp Dashicon.

Du kan gjøre dette for alle navigasjonsmenyelementene eller bare for hjemmet. Bare gjenta trinnene ovenfor med de matchende ikonene. Det var enkelt ikke sant?

Hvordan bruker du Dashicons i post-meta?

Du kan gå et skritt videre og legge til Dashicons i post-metaen din, eller med andre ord legge til Dashicons foran forfatterens navn, dato, kategori eller merke; avhengig avtemaet ditt og informasjonen det viser.

Siden du allerede har satt Dashicons i kø i temaet ditt, er alt du trenger å gjøre nå å åpne style.css-filen (eller bruk Custom CSS-editor, som alltid er et bedre alternativ slik at du ikke mist endringene når temaet ditt er oppdatert!), finn den matchende velgeren og legg til CSS-koden.

La oss si at du vil legge til et ikon foran navnet ditt eller forfatterens navn.

Trinn 1:

Først skal vi velge et ikon vi ønsker.

Trinn 2:

Klikk så på den, og denne gangen velger du Kopier CSS. Igjen vil det gi deg et popup-vindu med koden du må lime inn.

Trinn 3:

Åpne nå style.css og finn den tilsvarende velgeren, i dette tilfellet – .entry-author. Ved å legge til :before og deretter lime inn CSS-koden du kopierte fra Dashicons nettsted, vil forfatterens navn ha et fint ikon foran seg. Du må også spesifisere at du bruker Dashicons-fonten. Den modifiserte koden ser slik ut:

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

La oss legge til litt styling også, og nå ser den ferdige koden slik ut:

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

Sluttresultatet

Så hva vil dette se ut til slutt?

Noe sånt som dette:

Det er så mange måter du kan bruke Dashicons på – la kreativiteten din ta tak og se hva du kan gjøre.

Sett alt sammen

Bortsett fra eksemplene ovenfor, kan du bruke Dashicons i backend for å spesifisere forskjelligeikoner for forskjellige innleggstyper, eller du kan bruke dem i innleggstitler, widgettitler, eller hvis du lager en egendefinert landingsside, kan du skille mellom forskjellige sider på nettstedet ditt.

Her er et grunnleggende eksempel på hva du kan bruke dem til å lage: