Det händer alla.

Du hittar ett tema som du gillar, installerar det och njuter av utseendet på din webbplats i några månader. Men efter några månader börjar temat kännas gammalt och lite tråkigt.

Problemet är bara att du inte vill spendera några timmar på att leta efter något nytt. Om det bara fanns ett sätt att krydda ditt tema, en liten extra krydda för att få det att sticka ut.

Innan du kastar upp händerna i förtvivlan ska jag visa dig ett enkelt sätt att piffa upp ditt tema utan att det kräver alltför mycket ansträngning och utan att lägga till onödiga bilder som kan sakta ner din webbplats.

Dethicons är teckensnittsikoner som introducerades i WordPress 3.8. Det är de där häftiga och coola ikonerna som du ser när du loggar in på din instrumentpanel. Skulle det inte vara häftigt om du kunde lägga till dem i ditt tema också?

Men det kan du och jag ska visa dig hur.

Hur kan du använda Dashicons i din navigationsmeny?

Låt oss börja med ett enkelt exempel: Dashicons ingår redan i WordPress sedan version 3.8, men du måste fortfarande inkludera dem för att få dem att visas korrekt på din webbplats, det vill säga i ditt tema.

Steg 1: Gör ditt tema redo för Dashicons

För att göra ditt tema Dashicons redo öppnar du först filen functions.php (du hittar den i Appearance>Editor - som standard öppnas CSS-filen för ditt nuvarande tema. Gå vidare och leta efter functions.php-filen och klicka på den för att ladda den i Editor).

Steg 2: Ställ skriptet i kö

Bläddra ända ner till botten och klistra in dessa rader i slutet av koden:

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

Nu är ditt tema redo att använda Dashicons.

Steg 3: Lägga till Dashicons till menyalternativ

Nu lägger vi till en Dashicon för din hemlänk. Gå till webbplatsen Dashicons och välj den ikon du vill ha.

Uppdatering: Dashicons fanns ursprungligen tillgängliga på GitHub.io, men har sedan dess gjorts tillgängliga på WordPress.org.

Steg 4:

Klicka på den önskade ikonen (i det här fallet valde jag hemikonen) och klicka sedan på Kopiera HTML. Du får ett popup-fönster med den kod du behöver.

Steg 5:

Gå tillbaka till din WordPress-instrumentpanel, klicka på Appearance> Menus och klistra in koden precis där det står Navigation Label.

Om du fortfarande vill att ordet ska visas skriver du det efter den avslutande div-parentesen.

Klicka på spara och ladda hemsidan. Hemlänken bör nu visa en snygg och tydlig Dashicon.

Du kan göra detta för alla navigeringsmenypunkter eller bara för hem. Upprepa stegen ovan med de matchande ikonerna. Det var väl enkelt?

Hur använder du Dashicons i inläggsmeta?

Du kan gå ett steg längre och lägga till Dashicons i dina inläggsmeta, eller med andra ord lägga till Dashicons framför författarens namn, datum, kategori eller tagg, beroende på ditt tema och vilken information det visar.

Eftersom du redan har köat Dashicons i ditt tema behöver du bara öppna din style.css-fil (eller använda Custom CSS editor, vilket alltid är ett bättre alternativ så att du inte förlorar ändringarna när ditt tema uppdateras!), hitta den matchande selektorn och lägga till CSS-koden.

Låt oss säga att du vill lägga till en ikon framför ditt namn eller ditt författarnamn.

Steg 1:

Först ska vi välja en ikon som vi vill ha.

Steg 2:

Klicka sedan på den och välj denna gång Kopiera CSS. Återigen får du ett popup-fönster med koden som du ska klistra in.

Steg 3:

Öppna nu din style.css och leta upp motsvarande selector, i det här fallet .entry-author. Genom att lägga till :before och sedan klistra in CSS-koden som du kopierade från Dashicons webbplats kommer författarens namn att ha en fin ikon framför sig. Du måste också ange att du använder Dashicons typsnitt. Den modifierade koden ser ut så här:

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

Vi lägger till lite stil också, och nu ser den färdiga koden ut så här:

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

Slutresultatet

Hur kommer detta att se ut i slutändan?

Ungefär så här:

Det finns så många sätt att använda Dashicons på - låt kreativiteten flöda och se vad du kan göra.

Att sätta ihop allting

Förutom ovanstående exempel kan du använda Dashicons i din backend för att ange olika ikoner för olika typer av inlägg, eller du kan använda dem i titlarna på dina inlägg, widgettitlar eller om du skapar en anpassad landningssida för att skilja mellan olika sidor på din webbplats.

Här är ett grundläggande exempel på vad du kan skapa med dem: