På WPBeginner får vi många frågor från användare som vill göra WordPress till sin egen. En av de vanligaste förfrågningarna? Att ändra standardlogotypen för WordPress till en anpassad logotyp för instrumentpanelen.
Att ersätta WordPress-logotypen med din egen anpassade logotyp är ett utmärkt sätt att skapa ett varumärke för ditt adminområde och få din webbplats att kännas helt unik.
Oavsett om du hanterar webbplatsen själv eller har ett team av användare är en anpassad logotyp för instrumentpanelen en fin touch som gör att webbplatsen känns mer professionell.
I den här artikeln visar vi dig hur du lägger till en anpassad dashboard-logotyp i WordPress för branding.
Vad är en Customize Dashboard logga och varför add to en?
A custom dashboard logo appears on the WordPress admin dashboard with your own custom logo or branding.
Även om det kan gillas som en liten detail är det en viktig del av din websites varumärke och viktigt av flera anledningar:
- Varumärkesbyggande: Det förstärker din varumärkesidentitet och gör att WordPress admin area känns mer som en del av ditt företag.
- Professionalism: En custom dashboard-logotyp ger din WordPress site ett mer professionellt och polerat utseende.
- Vit märkning: Om du bygger webbplatser för kunder eller runar ett multisite network, kan du använda custom dashboard loggor för att white-labela WordPress admin area. Detta innebär att du kan ta bort WordPress-varumärket helt och ersätta det med ditt eget för att skapa en customize-upplevelse för dina kunder.
Om du äger ett litet företag, en online-butik eller en blogg är det viktigt att ha en personlig logga för dashboarden för att göra back-end-upplevelsen mer personlig och skapa en stark intern varumärkesidentitet.
Vi kommer att visa dig två olika metoder för att lägga till en anpassad logotyp för instrumentpanelen i WordPress, samt en metod för att helt enkelt ta bort WordPress-logotypen från instrumentpanelen.
Metod 1: Lägga till en custom dashboard logga i WordPress med hjälp av ett plugin
Den här metoden är superenkel och rekommenderas för de flesta Beginnare.
Det första du behöver göra är att installera och aktivera pluginet White Label CMS. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Efter aktivering måste du besöka Settings ” White Label CMS page.
Sedan väljer du helt enkelt tabben ”Branding”.
Toggle omkopplaren från vänster till höger för att ”Hide WordPress Logo and Links.
Därefter vill du gå till tabben ”Dashboard”.
Här kommer du att uploada en custom logga där det står ’Dashboard Icon’.
Den customize-logotypen ska vara exakt 40 x 40 pixlar i dimensionerna.
Glöm inte att klicka på knappen ”Save” högst upp i högra hörnet för att spara dina settings.
Nu kan du heada tillbaka till WordPress admin area.
Du bör se loggan i din dashpanel. Så här skulle den gilla att se ut:
Notis: Förutom den customiserade logotypen för WordPress dashboard erbjuder White Label CMS även andra utvalda funktioner för att rebranda din WordPress-installation.
Se vår guide om hur du white-labelar WordPress dashboard för detaljerade instruktioner.
Metod 2: Manuellt lägga till custom dashboard logga i WordPress
Den här metoden är för användare som är bekväma med att klistra in code snippets i WordPress. Det enklaste och säkraste sättet att add to custom code till din WordPress är med ett plugin som gillar WPCode.
De flesta tutorials som lär dig hur du lägger till shortcodes på din WordPress site kommer att få dig att lägga till koden i ditt temas functions.php-fil. Även om det kan fungera, finns det mycket som kan gå fel.
Redan ett litet misstag i koden eller hur du addar den kan göra din WordPress site otillgänglig. Därför rekommenderar vi detta endast för avancerade användare.
Även för avancerade användare är WPCode det säkraste sättet att göra detta, så till att börja med måste du installera och aktivera det gratis WPCode-pluginet. För mer detaljerade instruktioner, följ vår guide om hur du installerar ett plugin för WordPress.
Se sedan till att du sparar din anpassade logga 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 customize logga klar måste du uploada den till /wp-content/themes/your-theme/images
folder med hjälp av FTP. Om ditt theme inte har en images folder, måste you skapa den.
Därifrån går du över till Code Snippets ” +Add Snippet.
Du kommer att landa i WPCode-biblioteket, där det finns dussintals code snippets att välja mellan.
I det här fallet väljer du ”Add Your Custom Code” och klickar på knappen ”Use snippet”.
Inkludera en rubrik som gillar ”Custom logo dashboard.
Ändra sedan ”Code Type” till ”PHP Snippet”.
Därefter lägger du bara till den här koden i rutan ”Code Preview”:
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 ska se ut ungefär så här.
Se till att all text och alla format är exakt likadana som ovan.
Rulla ner till ”Insert Method” och välj ”Auto Insert”.
För att se till att din custom logga visas i dashpanelen, förstora dropdown-menyn Location och välj ”Admin Only”.
Till sist toggle switch från Inaktiverad till Aktiv och click the ”Save” button.
Den här koden addar helt enkelt den CSS som är obligatorisk för att visa din customize-logotyp i WordPress admin bar.
Alternativ: Ta bort WordPress-logotypen från Admin Dashboard
Om du hellre bara vill ta bort WordPress-logotypen från adminpanelen helt och hållet, utan att ersätta den med en anpassad logotyp, är den här metoden något för dig.
Som vi nämnde tidigare är WPCode det bästa kodsnippets-pluginet som gör det enkelt att lägga till anpassad kod i WordPress.
Ännu bättre är att det levereras med ett bibliotek med över 1 500 färdiga kodsnuttar, inklusive en för att ta bort WordPress admin bar-logotyp, som du kan använda för att snabbt anpassa din webbplats, utan kodningserfarenhet.
För att komma igång behöver du installera och aktivera det kostnadsfria insticksprogrammet WPCode. Om du behöver hjälp kan du följa vår handledning om hur du installerar ett WordPress-plugin.
Efter aktivering går du till Code Snippets ” Library från WordPress adminpanel.
Därifrån söker du efter utdraget ”Ta bort WordPress-logotypen från adminfältet”. När du har hittat det, håll muspekaren över det och klicka på knappen ”Använd snippet”.
Därefter kommer WPCode automatiskt att lägga till koden åt dig.
Den väljer också rätt infogningsmetod och lägger till taggar för att hjälpa dig att hålla reda på koden du använder på din webbplats.
Nu behöver du bara växla omkopplaren högst upp på sidan från ”Inaktiv” till ”Aktiv” och trycka på knappen ”Uppdatera”.
Nu har du tagit bort WordPress-logotypen från adminpanelen.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en anpassad instrumentpanelslogotyp i WordPress. Du kanske också vill se vår guide om hur du döljer onödiga objekt från WordPress med Adminimize eller läsa vårt blogginlägg om de bästa WordPress-tipsen, -trixen och -hacken för att bättre anpassa din webbplats .
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
this is why I love WordPress opens source nature,the freedom to change/customize it to my liking
I really appreciated the clear step-by-step instructions for both the plugin method and manual code. I’ll go with the plugin method…it seems easier
Great post!
Dwight says
Thank you! This worked.
WPBeginner Support says
Glad our recommendation worked for you!
Administratör
Justin says
Does this code also apply to plugins?
WPBeginner Support says
If you wanted to override a plugin’s logo then you would want to reach out to the support for that specific plugin and they may have an option.
Administratör
Hanif says
thank you very much, it works very well
WPBeginner Support says
Glad our article was helpful
Administratör
mazhar says
i change the wordpress custom logo with the help of white label CMS plugin but i dont know how to find this code to your theme’s functions.php file or a site-specific plugin. where it is please help me
thank you
Bjornen says
Where is the file located?
I mean, the logo itself must be a png (transparent picture) of the WP-logo, placed somewhere in WP.
So, would it not be better to just switch that with another file with the same name?
james says
Nope, the icon is part of the WordPress custom font face, it is added to with CSS content
chad says
This does’nt wok for me. I made the 16×16 png and put it in my themes images folder and pasted the function to my functions.php file.
Sanjeev Beekeeper says
change the file path to your image path.
David Cornish says
A great article information with some great tips sharing that I will be implementing on my own website as well as clients.