Modifier la page de login

Posté le 11 décembre 2018 dans Wordpress par Julien.

Customiser la page de connection wp-admin

Pensez à créer un THEME-CHILD.
Placer l’un des bouts de code ci-dessous dans votre fichier /wp-content/themes/THEME-CHILD/functions.php.
Sinon vous pouvez l’ajouter dans un fichier qui est inclus par fonction.php, ou créer un module.

/*=====================================
   CUSTOM LOGIN PAGE
=====================================*/

// INIT
add_action( 'login_init', function() {
   wp_deregister_style( 'login' );
} );


// BEFORE
function judev_customize_before_login() {
   ?>
   <!-- MY CUSTOM STYLE (before) -->
   <style type="text/css">
      body { background-color:white!important; }
      #login { padding:0px!important; margin-top:50px; margin-bottom:100px; }
      #login h1 { display:none; }
      #login form { background:none!important; box-shadow:none!important; max-width:500px; }
      .submit i { background-color:rgb(70,155,210); margin-top:20px; }
      .submit i:hover { background-color:rgb(70,155,210); }
      .submit input { color:white; cursor:pointer; }
      .description-container { margin-top:30px!important; }
      .mon_compte-description { font-family:"poppins-light"; font-size:16px; color:rgb(70,155,210); }
      #rememberme { position:initial; opacity:1; pointer-events:all; }
      #backtoblog { display:none; }
      .privacy-policy-page-link { display:none; }
   </style>
   <?php
   // MY CUSTOM PHP (before)
   // ...
   ?>
   <!-- MY CUSTOM HTML (before) -->
   <div class="container description-container">
      <span class="mon_compte-description">Retrouvez l'historique de vos commandes, factures, modules, backups, etc...</span>
   </div>
   <?php
}
add_action( 'login_enqueue_scripts', 'judev_customize_before_login' );


// AFTER
function judev_customize_after_login() {
   ?>
   <!-- MY CUSTOM SCRIPTS (after) -->
   <script>
      document.getElementById("login").classList.add("container");
      document.getElementById("wp-submit").classList.add("btn");
      document.getElementById("wp-submit").classList.add("waves-effect");
      document.getElementById("wp-submit").classList.add("waves-light");
   </script>
   <?php
}
add_action( 'login_footer', 'judev_customize_after_login' );