Comment personnaliser la page de connexion de WordPress ?

Comment changer le logo de la page de connexion à wordpress (espace administration) ?
Tutoriel : personnaliser page connexion wordpress 3.9.+

Comment changer le logo de la page de connexion à wordpress

  • Personnaliser page connexion WordPress en changeant le logo de la page admin (sans plugin)

La page de connexion à l’administration WordPress est accessible à l’adresse http://nom-du-site/wp-login.php (cette url de connexion peut-être différent si vous l’avez configuré ainsi par soucis de protéger votre site d’éventuelles attaques). La page de connexion à l’espace administrateur contient un formulaire pour se connecter à wordpress, le logo de WordPress avec un lien permettant de retourner sur l’index du site Internet.

Note : cette solution fonctionne à partir de la version 3.9 de WordPress. Pour personnaliser page connexion wordpress des versions antérieures vous pouvez consulter les tutoriels de Web and SEO ou Geek press par exemple.

Personnaliser page connexion wordpress

Vous avez  envie de personnaliser la page admin à votre image ou à celle de votre client. En modifiant un petit bout de code CSS nous allons voir comment personnaliser la page de connexion de WordPress en y mettant un logo personnalisé.

Le code à modifier (ou à ajouter) se trouve dans le fichier /wp-admin/css/login.min.css.
Voici le code à ajouter :

.login h1 a {
background-image: none, url('http://mon-site/adresse-du-logo.png');
background-size: 200px 100px;
height: 100px;
width: 200px;
}

Note : background-size, height et wight sont les tailles du logo à insérer.

Attention cette méthode demande de vérifier lors des mises à jour de wordpress que le fichier ne soit pas écrasé. Pour éviter cet inconvénient vous pouvez créer une feuille de style customisée grâce à la propriété @import url :

@import url("../twentyten/style.css");

 


Pour voir des exemples de blog wordpress rendez-vous sur la page des créations de la Bécane Web, création de site internet à Lyon – voir des exemples

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *