Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här lägger du till en customize-logo för WordPress dashboard i WordPress

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.

Custom dashboard logo in WordPress

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.

Settings white label CMS

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.

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’.

Upload custom dashboard logo

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.

Save button

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:

Custom dashboard logo

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.

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”.

Add your custom code in WPCode

Inkludera en rubrik som gillar ”Custom logo dashboard.

Ändra sedan ”Code Type” till ”PHP Snippet”.

Php snippet in WPCode

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.

Code preview for manually adding custom dashboard logo

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”.

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.

Save snippet in WPCode

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”.

Find the snippet for removing the WordPress logo

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.

WPCode automatically adds the code

Nu behöver du bara växla omkopplaren högst upp på sidan från ”Inaktiv” till ”Aktiv” och trycka på knappen ”Uppdatera”.

Switch the code snippet to Active and click Update in WPCode

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

14 kommentarerLämna ett svar

  1. 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!

  2. 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!

    • 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

  3. 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

  4. 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?

  5. 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.

  6. 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.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.