det händer för alla.

Du hittar ett tema du gillar, du installerar det och spenderar några månader på att njuta av utseendet på din webbplats. Men sedan, efter några månader, börjar temat känna sig gammalt. Lite tråkigt.

det enda problemet är att du inte vill spendera ett par timmar på att leta efter något nytt. Om det bara fanns ett sätt att lägga till lite krydda till ditt tema, lite flare för att få det att sticka ut.

innan du kastar upp dina händer i förtvivlan, låt mig visa dig ett enkelt sätt att krydda ditt tema utan för mycket ansträngning och utan att lägga till onödiga bilder som kan sakta ner din webbplats.

Ange Dashicons. Dashicons är teckensnittsikoner som introducerades i WordPress 3.8. De är de fantastiska och coola ikonerna du ser när du loggar in på din instrumentpanel. Skulle det inte vara coolt om du också kunde lägga till dem i ditt tema?

Tja, du kan och jag ska visa dig hur.

Hur kan du använda Dashicons i navigeringsmenyn?

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å framsidan av din webbplats; det vill säga ditt tema.

Steg 1: Gör ditt tema Dashicons redo

för att göra ditt tema Dashicons redo först öppna upp dina funktioner.php-fil (finns i utseende>Editor – som standard öppnar det ditt nuvarande temas CSS-fil. Gå vidare och leta efter funktioner.php-fil och klicka på den för att ladda den i redigeraren.)

steg 2: Fråga skriptet

Bläddra hela vägen till botten och klistra in dessa kodrader i slutet:

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

steg 3: Lägga till Dashicons till menyalternativ

Låt oss lägga till en Dashicon för din hemlänk. Gå över till Dashicons webbplats och välj den ikon du vill ha.

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

steg 4:

klicka på önskad ikon (i det här fallet valde jag hemikonen) och klicka sedan på Kopiera HTML. Det ger dig ett popup-fönster med den kod du behöver.

Steg 5:

gå tillbaka till din WordPress-instrumentpanel, klicka på utseende > menyer och klistra in koden precis där det står navigationsetikett.

om du fortfarande vill att ordet ska visas skriver du det efter den avslutande Div-konsolen.

klicka på Spara och ladda din hemsida. Din hemlänk ska nu visa en fin, skarp Dashicon.

Du kan göra detta för alla navigeringsmenyalternativ eller bara för hemmet. Upprepa bara stegen ovan med matchande ikoner. Det var lätt rätt?

Hur använder du Dashicons i post meta?

Du kan gå ett steg längre och lägga till Dashicons till ditt inlägg meta, eller med andra ord lägga till Dashicons framför författarens namn, datum, kategori eller tagg; beroende på ditt tema och den information Den visar.

eftersom du redan har frågat Dashicons i ditt tema är allt du behöver göra nu att öppna din stil.css-fil (eller använd Anpassad CSS-redigerare som alltid är ett bättre alternativ så att du inte förlorar ändringarna när ditt tema uppdateras!), hitta matchande väljare och Lägg till CSS-koden.

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

Steg 1:

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

steg 2:

Klicka sedan på den och välj den här gången kopiera CSS. Återigen kommer det att ge dig ett popup-fönster med koden du behöver klistra in.

steg 3:

Öppna nu din stil.css och hitta motsvarande väljare, i det här fallet – .entry-författare. Genom att lägga till: innan och sedan klistra in CSS-koden 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-teckensnittet. Den modifierade koden ser ut så här:

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

Låt oss också lägga till lite styling, och nu ser den färdiga koden ut så här:

slutresultatet

Så hur kommer det att se ut i slutet?

något så här:

det finns så många sätt du kan använda Dashicons – låt din kreativitet ta tag och se vad du kan göra.

att sätta ihop allt

förutom ovanstående exempel kan du använda Dashicons i din backend för att ange olika ikoner för olika posttyper, eller du kan använda dem i dina inläggstitlar, widgettitlar eller om du skapar en anpassad målsida kan du skilja mellan olika sidor på din webbplats.

ett bra exempel på detta är den gamla WP Superstars hemsida. Här kan du se Dashicons som används för olika delar av webbplatsen:

Dashicons är inte den enda typen av ikonteckensnitt du kan lägga till. Kolla in vår FontAwesome ikoner handledning för mer.

inkluderar e-post uppdateringar. Avsluta prenumerationen när som helst.

Lämna ett svar

Din e-postadress kommer inte publiceras.