Hur man lägger till en anpassad instrumentpanelslogotyp i WordPress

På WPBeginner får vi många frågor från användare som vill göra WordPress till sitt eget. En av de vanligaste förfrågningarna? Att ändra standard WordPress-logotypen till en anpassad instrumentpanelslogotyp.

Att ersätta WordPress-logotypen med din egen anpassade logotyp är ett utmärkt sätt att varumärkesanpassa ditt adminområde och få din webbplats att känna sig verkligt unik.

Oavsett om du hanterar webbplatsen själv eller har ett team av användare, är en anpassad instrumentpanelslogotyp en fin touch som får webbplatsen att känna sig mer professionell.

I den här artikeln visar vi hur du lägger till en anpassad instrumentpanelslogotyp i WordPress för varumärkesbyggande.

Vad är en anpassad logotyp för instrumentpanelen och varför lägga till en? 

En anpassad logotyp för instrumentpanelen visas på WordPress admin-instrumentpanelen med din egen anpassade logotyp eller varumärkesprofil.

Även om det kan verka som en liten detalj att lägga till en, är det en vital del av ditt webbplatsvarumärke och viktigt av flera skäl:

• Branding: Det förstärker din varumärkesidentitet och får WordPress adminområde att känna sig mer som en del av din verksamhet.
• Professionalism: En anpassad instrumentpanel-logotyp ger din WordPress-webbplats ett mer professionellt och polerat utseende.
• White Labeling: Om du bygger webbplatser för kunder eller driver ett multisite-nätverk, kan du använda anpassade administrationslogotyper för att vitmärka WordPress administrationsområde. Detta innebär att du helt kan ta bort WordPress-varumärket och ersätta det med ditt eget för att skapa en anpassad upplevelse för dina kunder.

Oavsett om du äger en webbutik, ett litet företag eller en blogg, är en anpassad instrumentpanel-logotyp viktig för att hjälpa till att anpassa backend-upplevelsen och etablera en stark intern varumärkesidentitet.

I följande avsnitt visar vi 2 olika metoder för att lägga till en anpassad instrumentpanelslogotyp i WordPress, samt en metod för att helt enkelt ta bort WordPress-logotypen från instrumentpanelen.

• Metod 1: Lägga till en anpassad adminpanel-logotyp i WordPress med ett plugin
• Metod 2: Lägga till anpassad logotyp i WordPress adminpanel manuellt
• Alternativ: Ta bort WordPress-logotypen från adminpanelen

Redo? Låt oss börja.

Metod 1: Lägga till en anpassad adminpanel-logotyp i WordPress med ett plugin

Den här metoden är superenkel och rekommenderas för de flesta nybörjare.

Det första du behöver göra är att installera och aktivera pluginet White Label CMS. Om du behöver hjälp kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka Inställningar » White Label CMS från din WordPress-instrumentpanel. 

Låt oss sedan se till att du är under fliken ‘Branding’.

Härifrån kan du växla omkopplaren från vänster till höger för att 'Dölj WordPress-logotyp och länkar'.

Därefter vill du gå till fliken 'Instrumentpanel'.

Under 'Instrumentpanelsikon' laddar du upp en anpassad logotyp. Klicka helt enkelt på länken 'Ladda upp' för att starta processen.

Din anpassade logotyp bör vara exakt 40 x 40 pixlar i storlek. Annars kommer den att se konstig ut – antingen beskuren eller förvrängd.

Glöm inte att klicka på knappen ‘Spara’ längst upp till höger för att spara dina ändringar.

Nu går vi tillbaka till WordPress-administrationsområdet och öppnar panelen 'Instrumentpanel'.

I den här panelen bör du se den nya anpassade logotypen. Så här kan den se ut:

Förutom logotypen för anpassad instrumentpanel erbjuder White Label CMS-pluginet även andra funktioner för att varumärkesanpassa din WordPress-installation.

För mer information kan du hänvisa till vår guide om hur man vitmärker WordPress adminpanel.

Metod 2: Lägga till anpassad logotyp i WordPress adminpanel manuellt

Den här metoden är för användare som är bekväma med att klistra in kodavsnitt i WordPress. Det enklaste och säkraste sättet att lägga till anpassad kod i din WordPress är med ett plugin som WPCode.

De flesta handledningar som lär dig hur du lägger till kortkoder på din WordPress-webbplats kommer att få dig att lägga till koden i din temas functions.php-fil. Även om det kan fungera, finns det mycket som kan gå fel.

Även ett litet misstag i koden eller hur du lägger till den kan bryta din WordPress-webbplats och göra den otillgänglig. Så vi rekommenderar det bara för avancerade användare.

Även för avancerade användare är WPCode det säkraste sättet att göra detta.

Så, för att börja med, behöver du installera och aktivera gratis WPCode-pluginet. För mer detaljerade instruktioner vill du följa vår guide om hur man installerar ett WordPress-plugin.

Spara sedan din anpassade logotyp som en custom-logo.png-fil på din dator. Den måste vara exakt 40 x 40 px i dimensioner.

När du har din anpassade logotyp redo, laddar du upp den till mappen /wp-content/themes/your-theme/images med FTP. Om ditt tema inte har en bildermapp, måste du skapa den.

Därifrån kan du gå till Kodavsnitt » +Lägg till avsnitt.

Du kommer sedan till WPCode-biblioteket, där det finns dussintals kodavsnitt att välja mellan.

Här vill du välja 'Lägg till din anpassade kod' och klicka på knappen 'Använd kodavsnitt'.

I redigeraren ger du kodavsnittet en titel, till exempel 'Anpassad logotyp för instrumentpanelen'.

Sedan behöver du ställa in ‘Kodtyp’ till ‘PHP-utdrag’.

Därefter lägger du helt enkelt till den här koden i rutan 'Kodförhandsgranskning':

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

Det bör se ut ungefär så här:

Innan vi går vidare, låt oss se till att all text och formatering är exakt densamma som visas ovan.

Om allt ser bra ut kan du skrolla ner till 'Infogningsmetod' och välja 'Automatisk infogning'.

För att säkerställa att din anpassade logotyp visas i instrumentpanelen vill du expandera rullgardinsmenyn 'Plats' och välja 'Endast admin'.

Slutligen kan du växla omkopplaren från Inaktiv till Aktiv och klicka på knappen 'Spara'.

Den här koden lägger helt enkelt till den CSS som krävs för att visa din anpassade logotyp i WordPress adminfält.

Alternativ: Ta bort WordPress-logotypen från adminpanelen

Om du hellre bara vill ta bort WordPress-logotypen från adminpanelen helt utan att ersätta den med en anpassad logotyp, är den här metoden för dig.

Som vi nämnde tidigare är WPCode det bästa pluginet för kodavsnitt, och det gör det enkelt att lägga till anpassad kod i WordPress.

Ännu bättre, det kommer med ett bibliotek med över 1 500 färdiga kodavsnitt, inklusive ett för att ta bort WordPress adminfältets logotyp, som du kan använda för att snabbt anpassa din webbplats, ingen kodningserfarenhet krävs.

För att komma igång måste du installera och aktivera den kostnadsfria WPCode-pluginen. Om du behöver hjälp kan du följa vår handledning om hur man installerar en WordPress-plugin.

När du har aktiverat det vill du gå till Kodavsnitt » Bibliotek från WordPress adminpanel.

Därifrån kan du söka efter kodavsnittet 'Ta bort WordPress-logotypen från adminfältet'. När du hittar det, för muspekaren över det och klicka på knappen 'Använd kodavsnitt'.

WPCode kommer automatiskt att lägga till koden åt dig.

Det kommer också att välja rätt infogningsmetod och lägga till taggar för att hjälpa dig att hålla reda på koden du använder på din webbplats.

Nu är det dags att aktivera kodavsnittet.

Allt du behöver göra är att växla omkopplaren högst upp på sidan från 'Inaktiv' till 'Aktiv' och trycka på 'Uppdatera'-knappen.

Det var allt; du har nu tagit bort WordPress-logotypen från administrationspanelen.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en anpassad adminpanel-logotyp i WordPress. Därefter kanske du också vill se vår guide om hur man döljer onödiga objekt från WordPress med Adminimize eller läsa våra experttips om plugins och tips för att förbättra WordPress adminområde.

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.