La personnalisation d’un site sous WordPress à l’image du client est toujours intéressante, cela vous permet de masquer le logo de Word Press par exemple, de cacher les informations relatives au CMS ou bien de rajouter des informations utiles à l’administration wordpress.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
Aujourd’hui je vais vous présenter plus particulièrement une fonction qui permet de personnaliser la page wp-login.php de WordPress.
La fonction
Cette fonction ajoute une feuille de style uniquement pour la page de connexion à WordPress, idéal pour personnaliser le site WordPress à l’image de votre client.
// Custom Login
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/custom-login.css" />';
}
add_action('login_head', 'custom_login');
// Use your own external URL logo link
function wpc_url_login(){
$site_url = get_option( 'siteurl' );
return $site_url; // your URL here
}
add_filter('login_headerurl', 'wpc_url_login');
Le CSS se trouvera dans un dossier /css/custom-login.css de votre thème WordPress.
Le CSS
Voici le code à insérer dans votre feuille de style css dédiée à la page de connexion de votre WordPress :
body.login, html {
background:#fff url(../images/admin/background.png) repeat!important;
margin: auto;
font-weight:bold;
}
/* WordPress Logo Replacement (Don't forget to change width and height */
#login h1 a {
background:url(../images/admin/logo.png) 0 0 no-repeat;
height:100px;
margin-left: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
width:100%!important;
}
/* Lost Password Link */
.login #nav a, .login #nav a:hover {
color: #5b5e70!important;;
}
/* Back to Blog Link */
.login #backtoblog a, .login #backtoblog a:hover {
color: #5b5e70!important;
}
.login label{
font-weight:bold;
color:#000;
}
.login form {
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
}
#login {
padding: 94px 0 0;
margin: auto;
width:400px;
}
.login form .input, .login input[type="text"]{
margin-top:10px;
}
.login .button-primary {
font-size: 16px!important;
line-height: 26px;
padding: 5px 40px;
}
.login form {
margin-left: 8px;
padding: 0 0 46px 0!important;
font-weight: normal;
background: none!important;
border: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
.wp-core-ui .button-primary {
background:#5e12a4;
border:0!important;
}
Ici vous allez pouvoir personnaliser plusieurs éléments de wordpress pour votre client, à savoir, la personnalisation du logo de connexion, le fond de page de la page de connexion et la couleur des boutons, ainsi que le style de police.
Notez que les images (le logo et le fond) se trouveront dans le dossier /images/admin/ de votre thème WordPress. Mais vous pouvez modifier ses adresses si vous le souhaitez.
Personnalisation de WordPress
D’autres personnalisations sont possibles, comme la personnalisation du menu d’administration, l’ajout d’un message sur la page d’accueil de l’administration, l’ajout et la suppression des textes mentionnant WordPress dans votre thème. Je vous présenterai tout celà dans des articles à venir 😉