det sker for alle.

du finder et tema, du kan lide, du installerer det og bruger et par måneder på at nyde udseendet på din side. Men så efter et par måneder begynder temaet at føle sig forældet. Lidt kedeligt.

det eneste problem er, at du ikke vil bruge et par timer på at lede efter noget nyt. Hvis der kun var en måde at tilføje lidt krydderi til dit tema, en lille flare for at få det til at skille sig ud.

før du kaster dine hænder op i fortvivlelse, lad mig vise dig en nem måde at krydre dit tema uden for meget indsats, og uden at tilføje unødvendige billeder, der kan bremse din hjemmeside.

indtast Dashicons. Dashicons er skrifttypeikoner, der blev introduceret i 3.8. Det er de fantastiske og seje ikoner, du ser, når du logger ind på dit dashboard. Ville det ikke være sejt, hvis du også kunne tilføje dem til dit tema?

Nå, du kan, og jeg vil vise dig hvordan.

Hvordan kan du bruge Dashicons i din navigationsmenu?

lad os starte med et simpelt eksempel. Dashicons er allerede inkluderet i version 3.8, men du skal stadig medtage dem for at få dem til at blive vist korrekt på forsiden af din side; det vil sige dit tema.

Trin 1: Gør dit tema Dashicons klar

for at gøre dit tema Dashicons klar først åbne dine funktioner.php-fil (fundet i udseende> Editor – som standard åbner det dit nuværende temas CSS-fil. Gå videre og se efter funktioner.php-fil og klik på den for at indlæse den i Editor.)

Trin 2: Spørg scriptet

rul hele vejen til bunden og indsæt disse kodelinjer i slutningen:

okay! Nu er dit tema klar til at bruge Dashicons.

Trin 3: Tilføjelse af Dashicons til menupunkter

lad os tilføje et Dashicon til dit hjemlink. Gå over til Dashicons hjemmeside og vælg det ikon, du kan lide.

opdatering: Dashicons var oprindeligt tilgængelige på GitHub.io, men de er siden blevet gjort tilgængelige på WordPress.org.

Trin 4:

Klik på det ønskede ikon (i dette tilfælde valgte jeg hjemmeikonet) og klik derefter på Kopier HTML. Det giver dig et pop op-vindue med den kode, du har brug for.

Trin 5:

gå tilbage til dit Ordtryksdashboard, klik på udseende > menuer og indsæt koden lige der, hvor der står navigationsetiket.

Hvis du stadig vil have ordet til at dukke op, skal du skrive det efter den afsluttende div-beslag.

Klik på Gem og indlæs din startside. Dit hjem link skal nu vise en dejlig, sprød Dashicon.

Du kan gøre dette for alle navigationsmenupunkterne eller bare til hjemmet. Gentag bare ovenstående trin med de matchende ikoner. Det var nemt rigtigt?

Hvordan bruger du Dashicons i post meta?

Du kan gå et skridt videre og tilføje Dashicons til din postmeta eller med andre ord tilføje Dashicons foran forfatterens navn, dato, kategori eller tag; afhængigt af dit tema og de oplysninger, det viser.

da du allerede spurgte Dashicons i dit tema, er alt hvad du skal gøre nu at åbne din stil.css-fil (eller brug Brugerdefineret CSS-editor, som altid er en bedre mulighed, så du ikke mister ændringerne, når dit tema opdateres!), find den matchende vælger og tilføj CSS-koden.

lad os sige, at du vil tilføje et ikon foran dit navn eller din forfatters navn.

Trin 1:

først skal vi vælge et ikon, vi gerne vil have.

Trin 2:

klik derefter på det, og vælg denne gang Kopier CSS. Igen vil det give dig et pop op-vindue med den kode, du skal indsætte.

Trin 3:

åbn nu din stil.css og find den tilsvarende vælger, i dette tilfælde – .indgang-forfatter. Ved at tilføje: før og derefter indsætte CSS-koden, du kopierede fra Dashicons hjemmeside, vil forfatterens navn have et godt ikon foran det. Du skal også angive, at du bruger dashicons-skrifttypen. Den ændrede kode ser sådan ud:

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

lad os også tilføje lidt styling, og nu ser den færdige kode sådan ud:

slutresultatet

så hvordan vil det se ud i sidste ende?

noget som dette:

der er så mange måder, du kan bruge Dashicons på – lad din kreativitet tage fat og se, hvad du kan gøre.

sæt det hele sammen

bortset fra ovenstående eksempler kan du bruge Dashicons i din backend til at angive forskellige ikoner for forskellige posttyper, eller du kan bruge dem i dine posttitler, kontroltitler, eller hvis du opretter en brugerdefineret destinationsside, kan du skelne mellem forskellige sider på din side.

et godt eksempel på dette er den gamle Superstars hjemmeside. Her kan du se Dashicons i brug til forskellige områder af hjemmesiden:

Dashicons er ikke den eneste type ikon skrifttyper, du kan tilføje. Tjek vores Fontasome ikoner tutorial for mere.

inkluderer e-mail opdateringer. Afmeld når som helst.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.