Det finns något märkligt tillfredsställande med att få WordPress adminområde att känna sig mer som ditt eget. När vi arbetar med klientwebbplatser eller långsiktiga projekt kan även små ändringar som anpassade ikoner göra instrumentpanelen mer polerad och personlig.
Standard WordPress-ikoner gör sitt jobb, men de är generiska. Om du har lagt till egna inläggstyper eller byggt en skräddarsydd adminupplevelse, återspeglar dessa samma ikoner förmodligen inte ditt varumärke eller syftet med din webbplats.
Vi har använt olika metoder genom åren för att ändra adminikoner – vissa enkla, vissa lite mer avancerade. Oavsett om du vill ha en snabb plugin-lösning eller ett sätt att byta ikoner med lite kod, visar vi dig båda alternativen steg för steg.
Den här handledningen är perfekt för webbplatsägare, utvecklare och frilansare som vill att deras WordPress-instrumentpanel ska se lika anpassad ut som webbplatsens framsida.
Vad är adminikoner i WordPress?
Adminikoner är de små bilderna som visas bredvid varje objekt i WordPress-instrumentpanelens meny. De hjälper dig att snabbt känna igen olika områden på din webbplats, som Inlägg, Sidor, Plugins och Inställningar.
Som standard använder WordPress ett ikon-typsnitt som heter Dashicons. Det har funnits sedan 2013 och har inte haft många uppdateringar sedan dess. Även om det fungerar bra, kan det kännas lite föråldrat eller generiskt, särskilt om du bygger en anpassad webbplats.
Att anpassa dessa ikoner ger adminområdet ett fräscht utseende. Du kan ändra dem för att matcha ditt varumärke, förenkla menyn för kunder, eller bara lägga till lite personlighet på din webbplats.
Om du bygger en webbplats för någon som är ny inom WordPress kan det till och med hjälpa dem att hitta saker snabbare genom att ändra ikonerna. Det är en liten justering som gör stor skillnad för hur instrumentpanelen känns.
Nu ska vi titta på två enkla sätt att ändra adminikoner – ett med ett plugin och ett med lite kod.
- Metod 1: Ändra adminikoner i WordPress admin med ett plugin
- Metod 2: Ändra adminmenyikoner manuellt med ett kodavsnitt
- Bonus: Lägg till ikoner för anpassade inläggstyper i WordPress
- Fler sätt att anpassa ditt WordPress-adminområde 🎁
Metod 1: Ändra adminikoner i WordPress admin med ett plugin
För den här metoden kommer vi att använda pluginet Admin Menu Editor. Som namnet antyder, låter det dig enkelt anpassa WordPress adminmenyer.
Först måste du installera och aktivera pluginet Admin Menu Editor. För mer information, se vår handledning om hur man installerar ett WordPress-plugin.
Efter att du har aktiverat pluginet, gå till sidan Inställningar » Menyredigerare. Här ser du din WordPress-adminmeny i ett snyggt användargränssnitt (UI) där du kan anpassa den.
Gränssnittet har en verktygsfält högst upp, som låter dig lägga till eller ta bort menyalternativ, lägga till avdelare, kopiera och klistra in objekt, och mer.
Nedanför det kan du klicka på ett menyalternativ för att expandera och se dess inställningar. Här har vi expanderat menyalternativet Inlägg.
När du expanderar ett menyalternativ ser du fler alternativ. Om det är en föräldrameny, kommer du också att se eventuella barnmenyalternativ i den högra kolumnen.
För att lägga till, ersätta eller ta bort en menyikon, klicka på länken ‘Show advanced options’ längst ner.
Klicka nu på knappen bredvid fältet ‘Icon URL’.
Detta kommer att visa ett popup-fönster där du kan se alla tillgängliga Dashicons. Alternativt kan du klicka på knappen 'Mediebibliotek' för att ladda upp din egen bildikon.
Om du vill ladda upp din egen bildikon rekommenderar vi att du använder en 32×32 bild, helst i transparent PNG-format.
Efter att ha valt din ikon klickar du på knappen ‘Spara ändringar’ för att lagra dina inställningar.
Du kommer nu att se din anpassade menyikon använd i adminmenyn.
Metod 2: Ändra adminmenyikoner manuellt med ett kodavsnitt
Denna nästa metod kräver att du lägger till lite anpassad kod för att ändra ikoner.
Om du inte har gjort det tidigare rekommenderar vi att du snabbt tittar på vår handledning om att lägga till anpassad kod i WordPress.
Det enklaste och säkraste sättet att lägga till anpassad kod i WordPress är att använda WPCode. Det är det bästa pluginet för kodsnuttar i WordPress. Det låter dig säkert lägga till anpassad kod, CSS och HTML på din WordPress-webbplats utan att av misstag förstöra något.
Notera: Pluginet har också en gratisversion som heter WPCode Lite, som gör jobbet. Pro-versionen ger dig dock extra funktioner som kan vara användbara.
Exempel 1. Ersätta en ikon med standard Dashicons
För detta exempel kommer vi att använda standard Dashicons för att ersätta en ikon från den befintliga ikonuppsättningen.
Det är viktigt att notera att WordPress redan laddar Dashicons, som är högoptimerade för prestanda. Att använda dem kommer därför inte att påverka sidans laddningshastighet.
Med det sagt, innan du kör koden måste du notera följande:
- URL:en för menyalternativet du vill ändra
- Ikonnamnet du vill använda
Först måste du hitta sidans URL för menyalternativet du vill anpassa. Låt oss till exempel säga att du vill ändra ikonen för menyn ‘Inlägg’.
Håll muspekaren över menyn Inlägg, så ser du URL:en den länkar till i webbläsarens statusfält längst ner på sidan. Du behöver bara den sista delen av URL:en, som i det här fallet skulle vara edit.php.
Gå sedan till Dashicons webbplats och klicka på ikonen du vill använda.
Genom att klicka på en ikon visas dess namn och slug högst upp. Vid det här laget behöver du kopiera sluggen eftersom du kommer att behöva den i nästa steg.
När du har gjort det, gå till sidan Kodavsnitt » + Lägg till avsnitt och för muspekaren över rutan 'Lägg till din anpassade kod (nytt avsnitt)'.
Klicka sedan helt enkelt på knappen ‘+ Add Custom Snippet’ som visas.
På nästa skärm anger du en titel för ditt kodavsnitt och väljer PHP Snippet under alternativet Kodtyp.
Därefter kan du kopiera och klistra in följande kod i kodredigeringsrutan:
function change_post_menu_icon() {
global $menu;
// Loop through the menu items
foreach ($menu as $key => $menu_item) {
// Find the "Posts" menu item (default URL is 'edit.php')
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
// Change the icon to a different Dashicon class
$menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
}
}
}
add_action('admin_menu', 'change_post_menu_icon');
Glöm inte att ändra dashicons-format-aside till den slug du kopierade tidigare.
Din kod kommer att visas så här i redigeraren:
Därefter måste du tala om för WordPress var koden ska köras.
Adminmenyikoner visas i WordPress adminområde. På samma sida, scrolla till avsnittet Infogning och välj 'Endast admin' under alternativet Plats.
Slutligen, byt din snippet till Aktiv och klicka på knappen 'Spara snippet' för att spara dina ändringar.
WordPress kommer nu att börja använda ikonen du valde för Inlägg-sidan.
Exempel 2. Använd Font Awesome-ikon för ett menyalternativ i WordPress adminområde
Standardbiblioteket Dashicon har en begränsad uppsättning ikoner. De goda nyheterna är att du kan använda ett font- och ikonbibliotek som Font Awesome, som har en mycket större uppsättning ikoner.
Detta innebär dock att du måste ladda Font Awesome, vilket kan sakta ner ditt WordPress-adminområde något (bara några millisekunder).
Innan du lägger till någon kod måste du först hitta ikonen du vill använda. Gå till Font Awesome-webbplatsen och byt till gratisbiblioteket.
Du kommer att se alla ikoner som är tillgängliga gratis.
Klicka på ikonen du vill använda, så öppnas den i ett popup-fönster. Härifrån behöver du kopiera ikonens Unicode-värde.
Gå sedan till sidan Kodavsnitt » + Lägg till kodavsnitt i din WordPress-instrumentpanel.
Klicka på knappen ' + Lägg till anpassat kodavsnitt' i rutan 'Lägg till din anpassade kod (nytt kodavsnitt)'.
På nästa skärm anger du en titel för ditt avsnitt och väljer PHP-avsnitt som alternativ för kodtyp.
Därefter kan du kopiera och klistra in följande kod i kodredigeringsrutan:
// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
global $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
$menu[$key][4] .= ' custom-post-menu-class';
}
}
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
echo '<style>
.custom-post-menu-class .wp-menu-image:before {
font-family: "Font Awesome 5 Free" !important;
content: "\f015"; /* Unicode for the Font Awesome icon */
font-weight: 900; /* Needed for solid icons */
}
</style>';
}
add_action('admin_head', 'custom_admin_menu_icon');
Glöm inte att ersätta \f015 med Unicode-värdet du kopierade tidigare.
Din kod kommer att visas så här i redigeraren:
Därefter måste du tala om för WordPress var koden ska köras.
Adminmenyikoner visas inuti WordPress adminområde, så du kan skrolla till avsnittet Infogning och välja 'Endast admin' som alternativ för plats.
Slutligen, växla ditt avsnitt till Aktiv och klicka på knappen 'Spara avsnitt' för att spara dina ändringar.
WordPress kommer nu att börja använda ikonen du valde för Inlägg-sidan.
Bonus: Lägg till ikoner för anpassade inläggstyper i WordPress
Anpassade inläggstyper låter dig skapa unika typer av innehåll för din WordPress-webbplats. Dessa är inte standardinlägg eller sidor utan något helt originellt för din webbplats.
Om du använder en anpassad inläggstyp på din WordPress-webbplats, kanske du vill ändra dess ikon så att du enkelt kan identifiera den.
I så fall, kolla in vår detaljerade handledning om ämnet, som visar flera sätt att ändra eller lägga till ikoner för dina anpassade inläggstyper.
Fler sätt att anpassa ditt WordPress-adminområde 🎁
Att ändra adminikoner är bara ett sätt att få WordPress-instrumentpanelen att känna sig mer anpassad till din webbplats eller dina kunder. Om du vill gå ännu längre, här är några andra handledningar som kan hjälpa dig att anpassa och förbättra adminupplevelsen:
- Hur man lägger till och anpassar admin-kolumner i WordPress
- Hur man anpassar WordPress adminpanel (Tips)
- Bästa WordPress Admin Dashboard Plugins (jämförda)
- Plugins och tips för att förbättra WordPress adminområde
- Hur du ändrar sidfoten i ditt WordPress adminpanel
Vi hoppas att den här artikeln hjälpte dig att ändra eller lägga till adminikoner i WordPress. Du kanske också vill kolla in hur du vitmärker WordPress adminpanel eller se dessa experttips om att anpassa WordPress adminområde för bättre arbetsflöden.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.