Symboler är verkligen fascinerande!
De har en otrolig förmåga att kommunicera direkt med betraktaren genom att bygga en stark visuell relation.
Därför används symboler flitigt överallt, inklusive på WordPress-sidor.
Dessutom kan det kännas enformigt att använda samma design på sin webbplats under en längre tid. Det är helt normalt.
Och då börjar man leta efter något som känns mer inspirerande, använder det, och känner sig sedan trött på det igen.
Och så fortsätter det, om och om igen…
Så, hur kan man undvika denna tråkiga spiral?
Dashicons är ett utmärkt svar!
De kan lyfta utseendet på din webbplats och hjälpa den att sticka ut. Dessutom slipper du använda extra resurser och belasta din sida med onödiga bilder som gör att den laddar långsammare.
Låt oss nu titta närmare på Dashicons och se hur de kan användas effektivt på din WordPress-webbplats.
Vad är WordPress Dashicons?
Dashicons är WordPress officiella ikon-teckensnitt, som introducerades för flera år sedan i version 3.8. Dessa ikoner ser bra ut om de används på din webbplats. De är högkvalitativa SVG-filer som du enkelt kan ändra storlek på utan att de blir pixliga.
Eftersom de har inbyggt stöd i WordPress, tack vare att de skapats av deras eget team, kan du använda dem direkt utan att behöva ladda ner extra skript. Det finns ungefär 350 ikon-teckensnitt som du kan hitta på WordPress utvecklarresurser.
Ikonerna är indelade i kategorier efter ämne, och det finns också en sökfunktion som hjälper dig att hitta rätt ikon.
Du kan använda dessa symboler på:
- WordPress kontrollpanel
- Navigationsmenyer
- Sidor och inlägg
- Metadata
- Redigeringsverktyg
- Anpassade tillägg och teman
- Administratörspaneler
- Utseende på webbplatsen
Lägger du märke till att jag använder ordet ”ikoner” flera gånger?
Här menar jag faktiskt ikon-teckensnitt.
Inte bilder som ser ut som ikoner.
Ja, det är faktiskt skillnad.
Låt oss reda ut det.
Skillnaden mellan bildikoner och ikon-teckensnitt
Ikon-teckensnitt och bildikoner liknar varandra, men i ikon-teckensnitt finns vektorsymboler istället för bokstäver.
Blev det lite tekniskt?
Låt mig förklara det enklare.
I grunden är dessa ikon-teckensnitt som bilder som du kan använda för att lägga till symboler på din sida, men de är inte bilder i den vanliga bemärkelsen.
Det ger flera fördelar.
Hur då?
Det får du reda på i nästa avsnitt.
Varför ska du använda dem?
- De är skalbara, precis som texten på din webbplats, eftersom de är teckensnitt
- De är lätta och påverkar inte sidans laddningstid lika mycket som bilder
- Du kan ändra färgen på ikonen med CSS och lägga till effekter som färgskiftningar eller skuggor
- De hjälper till att spara många HTTP-förfrågningar eftersom du kan ladda teckensnitten på en gång, och sedan använda dem på alla dina sidor. Om du använder många bilder på webbplatsen krävs många förfrågningar för att hämta dem, vilket ökar laddningstiden.
- De är enklare att använda och justera än bilder. Du kan lägga till tydliga och kreativa symboler utan att behöva återskapa dem varje gång du behöver en ikon för en videospelare, e-post, musik eller något annat.
- De är mer lättillgängliga eftersom de är inbyggda direkt i WordPress
Hur använder man dem?
Att använda Dashicons är inte alls komplicerat.
Tro mig, jag vet vad jag pratar om :0
Följ bara stegen nedan för att börja använda Dashicons i WordPress.
Steg 1: Aktivera Dashicons på din WordPress-webbplats
Innan du börjar behöver du aktivera Dashicons på den plats där du vill använda dem, till exempel i ett tema. För att göra det måste du lägga till lite kod i filen functions.php.
Så här gör du:
- Gå först till tema-/utseende-redigeraren från din WordPress-kontrollpanel.
- Öppna filen functions.php.
- Gå till slutet av filen och lägg till kod för att lägga till skript
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Exemplet ovan visar hur du aktiverar Dashicons på webbplatsens framsida.
Se till att skapa ett barntema innan du ändrar filen functions.php. Anledningen är att om du ändrar temafilen direkt, och det sedan kommer en uppdatering för det temat, kommer alla dina ändringar att skrivas över.
Steg 2: Hitta HTML- och CSS-koder för Dashicons
WordPress.org har ett bibliotek med Dashicons som hjälper dig att hitta CSS- och HTML-koderna för varje symbol. Gå till utvecklarresurserna och hitta de Dashicons du vill använda. Sedan gör du så här:
- Klicka på ikonen du vill använda.
- Välj ”Kopiera CSS” eller ”Kopiera HTML” genom att klicka på knappen.
- Då visas ett popup-fönster. Kopiera koden till urklipp.
- Bestäm var du vill använda ikonen, till exempel i teman, metadata, navigationsmenyer, etc.
- Klistra in den kopierade koden i textwidgeten eller textredigeraren på det stället du valt.
- Ändra ikonens utseende med hjälp av anpassad CSS.
Det var allt.
Dessutom är alla ikoner som standard 20 pixlar. Du kan ändra storleken med hjälp av CSS-verktyg som ”Inspect Element” i Google Chrome eller ”FireBug” i Firefox.
Hur får man ut mesta möjliga av WordPress Dashicons?
Du har sett hur du kan använda Dashicons på din webbplats. Nu ska vi se hur de kan användas för olika specifika ändamål.
1. Använda dem i navigeringsmenyn
För att lägga till symboler i menyn, gör så här:
- Gå till Menyer/Utseende på kontrollpanelen
- Kopiera HTML-koder för menyikoner från WordPress.org
- Klistra in koden i fältet ”Navigationsetikett” på kontrollpanelen
- Klicka på ”Spara” och ladda sedan om startsidan. Nu ska den visa ikonen.
2. Använda i post-metadata
Du kan använda Dashicons framför datum, författarens namn, tagg eller kategori, beroende på temat och vilken data som visas.
Eftersom du redan har lagt till Dashicons, öppnar du filen style.css. Du kan också använda en anpassad CSS-redigerare, så att dina ändringar inte går förlorade efter en temauppdatering. Lägg sedan till din CSS-kod efter att ha hittat rätt väljare.
3. På WordPress-backend
Om du vill använda olika ikoner för olika anpassade inläggstitlar, inläggstyper eller widgets går det enkelt att ordna.
Ett snabbt tips: Skapa en kortkod
För att göra det enklare att använda Dashicons kan du skapa en kortkod. Det är praktiskt, speciellt om du skapar en webbplats åt en kund som ska kunna lägga till Dashicons utan att behöva krångla med koden.
Sammanfattning
Jag hoppas att WordPress Dashicons nu är tydligare för dig. De förskönar inte bara webbplatsens utseende, utan är även enkla att använda och bidrar till att snabba upp sidladdningen.
Och som du vet är ”skönhet och intelligens” en sällsynt kombination.
Så, passa på och använd dessa snygga Dashicons på din WordPress-webbplats!