Comment ajouter un logo personnalisé au tableau de bord dans WordPress

Chez WPBeginner, nous recevons beaucoup de questions d'utilisateurs qui veulent personnaliser WordPress. L'une des demandes les plus fréquentes ? Remplacer le logo par défaut de WordPress par un logo personnalisé pour le tableau de bord.

Remplacer le logo de WordPress par votre propre logo personnalisé est un excellent moyen de marquer votre zone d'administration et de donner à votre site une impression de véritable unicité.

Que vous gériez le site vous-même ou que vous ayez une équipe d'utilisateurs, un logo personnalisé pour le tableau de bord est une touche agréable qui rend le site plus professionnel.

Dans cet article, nous vous montrerons comment ajouter un logo personnalisé au tableau de bord dans WordPress pour le branding.

Qu'est-ce qu'un logo personnalisé pour le tableau de bord et pourquoi en ajouter un ? 

Un logo personnalisé pour le tableau de bord apparaît sur le tableau de bord d'administration de WordPress avec votre propre logo ou votre marque.

Bien que l'ajout d'un tel logo puisse sembler un détail mineur, il s'agit d'un élément essentiel de la marque de votre site Web et il est important pour plusieurs raisons :

• Branding : Il renforce l'identité de votre marque et donne à la zone d'administration de WordPress l'impression d'appartenir davantage à votre entreprise.
• Professionnalisme : Un logo personnalisé pour le tableau de bord donne à votre site WordPress un aspect plus professionnel et soigné.
• Marquage blanc : Si vous créez des sites Web pour des clients ou gérez un réseau multisite, vous pouvez utiliser des logos de tableau de bord personnalisés pour le marquage blanc de la zone d'administration de WordPress. Cela signifie que vous pouvez supprimer complètement la marque WordPress et la remplacer par la vôtre pour créer une expérience personnalisée pour vos clients.

Que vous possédiez une boutique en ligne, une petite entreprise ou un blog, un logo de tableau de bord personnalisé est important pour aider à personnaliser l'expérience backend et à établir une identité de marque interne forte.

Dans les sections suivantes, nous vous montrerons 2 méthodes différentes pour ajouter un logo de tableau de bord personnalisé dans WordPress, ainsi qu'une méthode pour simplement supprimer le logo WordPress du tableau de bord.

• Méthode 1 : Ajouter un logo de tableau de bord personnalisé dans WordPress à l'aide d'un plugin
• Méthode 2 : Ajouter manuellement un logo de tableau de bord personnalisé dans WordPress
• Alternative : Supprimer le logo WordPress du tableau de bord d'administration

Prêt ? Commençons.

Méthode 1 : Ajouter un logo de tableau de bord personnalisé dans WordPress à l'aide d'un plugin

Cette méthode est très simple et recommandée pour la plupart des débutants.

La première chose à faire est d'installer et d'activer le plugin White Label CMS. Si vous avez besoin d'aide, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devrez visiter Paramètres » White Label CMS depuis votre tableau de bord WordPress. 

Ensuite, assurons-nous que vous êtes dans l'onglet « Branding ».

À partir d'ici, vous pouvez basculer l'interrupteur de gauche à droite pour « Masquer le logo et les liens WordPress ».

Ensuite, vous devrez accéder à l'onglet « Tableau de bord ».

Sous « Icône du tableau de bord », vous téléchargerez un logo personnalisé. Cliquez simplement sur le lien « Télécharger » pour lancer le processus.

Votre logo personnalisé doit avoir des dimensions exactes de 40 x 40 pixels. Sinon, il aura l'air bizarre – soit coupé, soit étiré.

N'oubliez pas de cliquer sur le bouton « Enregistrer » en haut à droite pour sauvegarder vos modifications.

Maintenant, retournons dans la zone d'administration de WordPress et ouvrons le panneau « Tableau de bord ».

Dans ce panneau, vous devriez voir le nouveau logo personnalisé. Voici à quoi il pourrait ressembler :

Outre le logo personnalisé du tableau de bord, le plugin White Label CMS offre d'autres fonctionnalités pour relooker votre installation WordPress.

Pour plus d'informations, vous pouvez consulter notre guide sur comment relooker le tableau de bord d'administration WordPress.

Méthode 2 : Ajouter manuellement un logo de tableau de bord personnalisé dans WordPress

Cette méthode s'adresse aux utilisateurs qui sont à l'aise avec le collage d'extraits de code dans WordPress. La manière la plus simple et la plus sûre d'ajouter du code personnalisé à votre WordPress est d'utiliser un plugin comme WPCode.

La plupart des tutoriels vous apprenant comment ajouter des shortcodes à votre site WordPress vous demanderont d'ajouter le code au fichier functions.php de votre thème. Bien que cela puisse fonctionner, beaucoup de choses peuvent mal tourner.

Même une petite erreur dans le code ou dans la façon dont vous l'ajoutez peut rendre votre site WordPress inaccessible. Nous ne le recommandons donc qu'aux utilisateurs avancés.

Même pour les utilisateurs avancés, WPCode est le moyen le plus sûr de le faire.

Donc, pour commencer, vous devrez installer et activer le plugin gratuit WPCode. Pour des instructions plus détaillées, vous voudrez suivre notre guide sur comment installer un plugin WordPress.

Ensuite, assurons-nous de sauvegarder votre logo personnalisé sous le nom de fichier custom-logo.png sur votre ordinateur. Il doit avoir des dimensions exactes de 40 x 40 px.

Une fois que votre logo personnalisé est prêt, vous le téléchargerez dans le dossier /wp-content/themes/your-theme/images en utilisant FTP. Si votre thème ne possède pas de dossier images, vous devrez le créer.

À partir de là, vous pouvez vous rendre sur Extraits de code » +Ajouter un extrait.

Vous arriverez alors dans la bibliothèque WPCode, où il y a des dizaines d'extraits de code parmi lesquels choisir.

Ici, vous voudrez sélectionner « Ajouter votre code personnalisé » et cliquer sur le bouton « Utiliser l'extrait ».

Dans l'éditeur, vous donnerez un titre à l'extrait, par exemple, « Logo personnalisé du tableau de bord ».

Ensuite, vous devrez définir le « Type de code » sur « Extrait PHP ».

Après cela, ajoutez simplement ce code dans la boîte « Aperçu du code » :

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');

Cela devrait ressembler à ceci :

Avant de passer à autre chose, assurons-nous que tout le texte et la mise en forme sont exactement les mêmes que ceux indiqués ci-dessus.

si tout semble déjà correct, vous pouvez faire défiler vers le bas jusqu'à « Méthode d'insertion » et sélectionner « Insertion automatique ».

Pour vous assurer que votre logo personnalisé apparaît dans le tableau de bord, vous voudrez développer le menu déroulant « Emplacement » et choisir « Administration uniquement ».

Enfin, vous pouvez basculer le commutateur de Inactif à Actif et cliquer sur le bouton « Enregistrer ».

Ce code ajoute simplement le CSS requis pour afficher votre logo personnalisé dans la barre d'administration de WordPress.

Alternative : Supprimer le logo WordPress du tableau de bord d'administration

Si vous préférez simplement supprimer le logo WordPress du tableau de bord d'administration sans le remplacer par un logo personnalisé, cette méthode est pour vous.

Comme nous l'avons mentionné précédemment, WPCode est le meilleur plugin d'extraits de code, et il est facile de ajouter du code personnalisé à WordPress.

Encore mieux, il est livré avec une bibliothèque de plus de 1 500 extraits de code prêts à l'emploi, y compris un pour supprimer le logo de la barre d'administration WordPress, que vous pouvez utiliser pour personnaliser rapidement votre site, sans aucune expérience en codage nécessaire.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, vous pouvez suivre notre tutoriel sur comment installer un plugin WordPress.

Après l'activation, vous devrez vous rendre dans Extraits de code » Bibliothèque depuis le tableau de bord d'administration WordPress.

À partir de là, vous pouvez rechercher l'extrait « Supprimer le logo WordPress de la barre d'administration ». Une fois que vous l'avez trouvé, survolez-le simplement et cliquez sur le bouton « Utiliser l'extrait ».

WPCode ajoutera automatiquement le code pour vous.

Il sélectionnera également la méthode d'insertion appropriée et ajoutera des balises pour vous aider à suivre le code que vous utilisez sur votre site.

Il est maintenant temps d'activer l'extrait de code.

Il vous suffit de basculer l'interrupteur en haut de la page de « Inactif » à « Actif » et d'appuyer sur le bouton « Mettre à jour ».

C'est fait ; vous avez maintenant supprimé le logo WordPress du tableau de bord d'administration.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un logo personnalisé au tableau de bord dans WordPress. Ensuite, vous voudrez peut-être aussi consulter notre guide sur comment masquer les éléments inutiles de WordPress avec Adminimize ou lire notre sélection d'experts de plugins et astuces pour améliorer la zone d'administration de WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.