Det skjer for alle.

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

det eneste problemet er at du ikke vil bruke et par timer på å lete etter noe nytt. Hvis bare det var en måte å legge til litt krydder til temaet ditt, litt bluss for å få det til å skille seg ut.Før du kaster hendene opp i fortvilelse, la meg vise deg en enkel måte å krydre temaet ditt uten for mye innsats, og uten å legge til unødvendige bilder som kan bremse nettstedet ditt.

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

Vel, du kan og jeg skal vise deg hvordan.

Hvordan kan Du bruke Dashicons i navigasjonsmenyen?

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 ditt tema Dashicons klar

for å gjøre ditt tema Dashicons klar først åpne opp dine funksjoner.php-fil (funnet i Utseende > Editor-som standard vil det åpne OPP din nåværende tema CSS-fil. Gå videre og se etter funksjoner.php-fil og klikk på den for å laste den I Editor.)

Trinn 2: Enqueue skriptet

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

Ok! Nå temaet er klar til å bruke Dashicons.

Trinn 3: Legge Dashicons til menyelementer

La oss legge Til En Dashicon For Ditt hjem link. Gå over Til Dashicons nettside 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 hjem-ikonet) 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, skriver du det inn etter den avsluttende div-braketten.

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

du kan gjøre dette for alle navigasjonsmenyelementene eller bare for hjemmet. Bare gjenta trinnene ovenfor med matchende ikoner. Det var lett rett?

Hvordan bruker Du Dashicons i post meta?

Du kan gå et skritt videre og legge Dashicons til innlegget meta, eller med andre ord legge Dashicons foran forfatterens navn, dato, kategori eller tag; avhengig av tema og informasjonen den viser.

Siden du allerede enqueued Dashicons i temaet ditt, er alt du trenger å gjøre nå, åpne stilen din.css-fil (eller bruk Tilpasset CSS editor som alltid er et bedre alternativ, slik at du ikke mister endringene når temaet oppdateres!), 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 deretter 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å stilen din.css og finne den tilsvarende velgeren, i dette tilfellet – .oppføring-forfatter. Ved å legge til: FØR OG deretter lime INN CSS-koden du kopierte fra Dashicons nettside, vil forfatterens navn ha et fint ikon foran den. Du må også angi at Du bruker Dashicons font. Den modifiserte koden ser slik ut:

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

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

sluttresultatet

Så hvordan vil dette se ut til slutt?

Noe som dette:

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

Sette det hele sammen

Bortsett fra eksemplene ovenfor, Kan Du bruke Dashicons i backend å angi ulike ikoner for ulike innleggstyper, eller du kan bruke dem i innleggstitler, widget titler, eller hvis du oppretter en egendefinert destinasjonsside du kan skille mellom ulike sider på nettstedet ditt.

et godt eksempel på dette er den gamle wp Superstars hjemmeside. Her kan Du se Dashicons i bruk for ulike områder av nettstedet:

Dashikoner er ikke den eneste typen ikonfonter du kan legge til. Sjekk Ut Vår FontAwesome Ikoner tutorial for mer.

inkluderer e-post oppdateringer. Avslutt abonnementet når som helst.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.