Transformer l'aspect de la page de connexion wp

Transformer l’aspect de la page de connexion wp

Dans ce petit mémo, nous allons voir comment personnaliser rapidement l’interface de connexion wordpress.

Dans notre fichier functions.php, on va d’abord faire appel à la feuille de style qui sera dédiée à l’interface de connexion de wordpress. Cette feuille de style, on va la créer et la placer au même niveau que le fichier style.css.

//fonction pour récupérer la deuxième feuille de style pour le login admin 
function my_login_stylesheet() {
    ?>
    <link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo('stylesheet_directory') . '/style_admin_login.css'; ?>" type="text/css" media="all" />
    <?php
}

add_action('login_enqueue_scripts', 'my_login_stylesheet');

Voici la feuille de style que j’appelle ici style-admin-login :

/* 
    Document   : style_admin_login
    Created on : 5 oct. 2013, 23:07:09
    Author     : yuyazz
    Description: style pour l'admin login
*/



body.login div#login p#nav a,
body.login div#login p#backtoblog a {
    color: grey!important; /* Couleur du lien */
    background-color:black;
}
body.login {
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:grey;
	background-color: black;
	
  background-image: url('img/2b.jpg');
  background-repeat: repeat; 
   background-attachment: fixed ;
   text-align: center

}

body.login div#login form#loginform  {
background-image:url('img/4.jpg');
width:300px;
height:200px;
color:grey;
}

body.login div#login p#nav {
    color:white;
}
body.login div#login p#nav a {
    font-size: 10px;
    color:blue;
}

body.login div#login p#backtoblog {
    display:none;
}

.login .message {
display:none;
}

.login h1 a{
    width:300px;
}

Et voici le rendu final de ma page de connexion

une autre:

07/06/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress