Det sker for alle.

Du finder et tema, du kan lide, du installerer det og bruger et par måneder på at nyde udseendet af dit websted. Men så, efter et par måneder, begynder temaet at føles gammelt og lidt kedeligt.

Problemet er bare, at du ikke har lyst til at bruge et par timer på at lede efter noget nyt. Hvis bare der var en måde at krydre dit tema på, så det kunne skille sig lidt ud.

Inden du kaster hænderne i vejret i fortvivlelse, vil jeg gerne vise dig en nem måde at pifte dit tema op på uden alt for meget besvær og uden at tilføje unødvendige billeder, der kan gøre dit websted langsommere.

Dethicons er skrifttypesymboler, der blev introduceret i WordPress 3.8. Det er de fantastiske og seje ikoner, du ser, når du logger ind på dit instrumentbræt. Ville det ikke være fedt, hvis du også kunne tilføje dem til dit tema?

Det kan du, og jeg vil vise dig hvordan.

Hvordan kan du bruge Dashicons i din navigationsmenu?

Lad os starte med et simpelt eksempel: Dashikoner er allerede inkluderet i WordPress siden version 3.8, men du skal stadig inkludere dem for at få dem vist korrekt i frontenden af dit websted, dvs. dit tema.

Trin 1: Gør dit tema Dashicons klar

For at gøre dit tema Dashicons klar, skal du først åbne din functions.php-fil (findes i Appearance>Editor - som standard åbner den dit nuværende temas CSS-fil. Gå videre og kig efter functions.php-filen og klik på den for at indlæse den i Editor).

Trin 2: Sæt scriptet i kø

Rul helt ned til bunden, og indsæt disse kodelinjer i slutningen:

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

Okay, nu er dit tema klar til at bruge Dashicons.

Trin 3: Tilføjelse af Dashikoner til menupunkter

Lad os tilføje et Dashicon til dit link til Startside. Gå til Dashicons-webstedet, 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 home-ikonet) og klik derefter på Copy HTML. Du får et pop-up vindue med den kode, du har brug for.

Trin 5:

Gå tilbage til dit WordPress-dashboard, klik på Appearance> Menus og indsæt koden lige der, hvor der står Navigation Label.

Hvis du stadig vil have ordet vist, skal du skrive det efter den afsluttende div-bøjle.

Klik på Gem og indlæs din hjemmeside. Dit link til din hjemmeside bør nu vise en flot, klar Dashicon.

Du kan gøre dette for alle navigationsmenupunkterne eller kun for home. Du skal bare gentage ovenstående trin med de tilsvarende ikoner. Det var nemt, ikke?

Hvordan bruger du Dashicons i post meta?

Du kan gå et skridt videre og tilføje Dashicons til dit indlægs meta, 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 har aktiveret Dashicons i dit tema, skal du nu blot åbne din style.css-fil (eller bruge Custom CSS editor, hvilket altid er en bedre løsning, så du ikke mister ændringerne, når dit tema opdateres!), finde den matchende selector og tilføje CSS-koden.

Lad os sige, at du vil tilføje et ikon foran dit navn eller dit forfatternavn.

Trin 1:

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

Trin 2:

Klik derefter på den, og vælg denne gang Copy CSS. Igen får du et pop-up vindue med den kode, du skal indsætte.

Trin 3:

Åbn nu din style.css og find den tilsvarende selector, i dette tilfælde .entry-author. Ved at tilføje :before og derefter indsætte den CSS-kode, du kopierede fra Dashicons-webstedet, vil forfatternavnet få et flot ikon foran sig. Du skal også angive, at du bruger Dashicons-skrifttypen. Den ændrede kode ser således ud:

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

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

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

Det endelige resultat

Hvordan vil det så se ud i sidste ende?

Noget i denne retning:

Der er så mange måder at bruge Dashicons på - lad din kreativitet få frit spil og se, hvad du kan lave.

Sætte det hele sammen

Ud over ovenstående eksempler kan du bruge Dashicons i din backend til at angive forskellige ikoner for forskellige indlægstyper, eller du kan bruge dem i dine indlægstitler, widgettitler, eller hvis du opretter en brugerdefineret landingsside, kan du skelne mellem de forskellige sider på dit websted.

Her er et grundlæggende eksempel på, hvad du kan bruge dem til at skabe: