Voilà une aute astuce bien pratique puisqu’elle consiste à modifier le logo WordPress affiché sur la page de connexion et d’enregistrement de votre site.

Ce logo est inséré ici via un template de page que nous ne pouvons pas éditer car il fait partie des « core files » de WordPress.

Nous allons donc utiliser un hook pour modifier le CSS du logo via l’action login_head. En fait, en ajoutant ces quelques lignes de CSS dans le header de la page login, nous allons surcharger le style de base et donc prendre la main sur l’URL de l’image, son positionnement, sa taille, etc.

Voici le snippet à coller dans votre fichier functions.php. N’oubliez pas de vérifier le chemin de votre fichier ! Ici le logo est dans le dossier « images » de votre thème.

function bweb_custom_login() {
     echo '<style type="text/css">
     h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/mon-logo.png) !important; margin-bottom: 10px; padding: 20px;}
     </style>';
}
add_action( 'login_head', 'bweb_custom_login');

Vous pouvez également ajouter le code suivant qui permet de modifier la destination du lien sur le logo. Par défaut, le lien pointe vers WordPress.org, mais ici, nous la modifions via le hook login_headerurl pour qu’il pointe vers la home du site.

function bweb_login_url(){
     return ( home_url() );
}
add_filter('login_headerurl', 'bweb_login_url');

Toujours par défaut, le title du lien (visible au survol) est « Powered by WordPress », nous allons donc le changer :

function bweb_login_title(){
    return ('Nom du site');
}
add_filter('login_headertitle', 'bweb_login_title');

Ou encore, mieux avec le nom du site :

function bweb_login_title(){
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'bweb_login_title');

Voici le résultat après quelques modification stylistiques supplémentaires…

login-bweb

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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

Afficher les 18 commentaires

18 commentaires

  1. ok remplacez vos simples quotes  » par des doubles quotes «  »

    Comme ça?

    function bweb_custom_login() {
    echo "
    h1 a { background-image:url(". get_stylesheet_directory_uri() . "/images/mon-logo.png) !important; margin-bottom: 10px; }
    padding: 20px;height: 200px;}

    body.login {
    background: url("/images/loginbg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/loginbg.jpg", sizingMethod="scale");
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/loginbg.jpg", sizingMethod="scale")";
    }

    ";
    }
    add_action( "login_head", "bweb_custom_login");

    • Non, plutôt comme ça :

      function bweb_custom_login() {
      echo '
      h1 a {
      background-image:url("' . get_stylesheet_directory_uri() . '/images/mon-logo.png") !important;
      margin-bottom: 10px;
      padding: 20px;
      height: 200px;
      }

      body.login {
      background: url("' . get_stylesheet_directory_uri() . '/images/loginbg.jpg") no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' . get_stylesheet_directory_uri() . '/images/loginbg.jpg", sizingMethod="scale");
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' . get_stylesheet_directory_uri() . '/images/loginbg.jpg", sizingMethod="scale")";
      }
      ';
      }
      add_action( 'login_head', 'bweb_custom_login' );

  2. Bonjour,

    Nous avons copier votre fonction ici

    function bweb_custom_login() {
    echo '
    h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/mon-logo.png) !important; margin-bottom: 10px; }
    padding: 20px;height: 200px;}
    ';
    }
    add_action( 'login_head', 'bweb_custom_login');

    Et ajouté ça

    body.login {
    background: url('/images/loginbg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/loginbg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/loginbg.jpg', sizingMethod='scale')";
    }

    Je ne vois pas le problème de simple ou double quotes.

    Merci

  3. Bonsoir,bonne année

    Le CSS est-il bien place?
    Page blanche j’ai du faire une erreur

    function bweb_custom_login() {
    echo '
    h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/logo.png) !important; margin-bottom: 10px; }
    padding: 20px; height: 200px;}
    body.login {
    background: url('/images/loginbg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/loginbg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/loginbg.jpg', sizingMethod='scale')";
    }
    ';
    }

    Merci

  4. Je ne suis pas du genre à commenter à tout va mais merci beaucoup! Ce tuto’ est d’une tel clarté! Quelque chose me dit qu’aujourd’hui je vais passer un peu de temps sur votre site..

  5. Une fonction pour changer le logo de la page de connexion ! Voilà une vingtaine de WordPress que je construis et j’apprends tout juste grâce à Bweb comment faire ça très simplement. Merci.

  6. Je suis vraiment entrai d’apprendre avec ton site. J’ai déjà parcouru tous ton site web. U are doing great jobs!

    Ma question now, le code CSS je le met où ? Je suis autodidacte c’est pourquoi je pose toutes ces questions.

    • Salut Abil,
      Alors pour la résolution du logo, tu fais un peu comme tu veux. Il te suffit d’ajouter du style l’afficher correctement.
      J’utilise simplement la hauteur pour que le logo ne soit pas couper :

      .login h1 a {
      height: 105px;
      }

      Pour le background, c’est pareil, comme tu le sens. De mon côté j’utilise une image de type « blur » pour pouvoir l’agrandir sans qu’on ne s’aperçoive trop qu’elle est pixelisée. Ensuite j’ajoute un petit coup de CSS pour qu’elle couvre bien tout le body.

      body.login {
      background: url('/wp-content/uploads/2014/06/loginbg.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2014/06/loginbg.jpg', sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2014/06/loginbg.jpg', sizingMethod='scale')";
      }

    • Bonjour,
      Non, le logo est bien le logo, c’est l’image qui va remplacer le logo WP, mais en effet elle est appliquée en background sur l’élément h1 a .
      Si tu veux modifier l’image d’arrière plan, il faut ajouter un background sur le body.
      Bonne journée.

  7. Bonjour et merci pour l’astuce. J’ai un souci, le logo ne s’affiche or, en passant le curseur sur la zone du logo, seul la phrase « Propulsé par WordPress.org » s’affiche. En cliquant sur cette zone vide on est bien redirigé vers la page d’accueil. Le logo est dans le dossier Upload et j’ai donc ajouté ce chemin: uploads/2014/12/mon-image-2.png

    Comment résoudre ce problème et changer la phrase de survole?

    Merci

    • Salut Brice,
      (c’est pas souvent que je la dis celle là!).
      J’ai ajouté une petite fonction plus haut dans la page pour changer le titre du lien.

      Pour ton problème d’image, c’est très simple, mets l’URL complète de l’image. Tu n’est pas dans le bon répertoir !
      Ou alors, tu peux essayer : url(‘. get_stylesheet_directory_uri() . ‘../../uploads/2014/12/mon-image-2.png)