On ne saurait expliquer pourquoi mais beaucoup d’entre-nous avons tôt ou tard l’envie de personnaliser sa page de connexion WordPress (pourtant non visible). Nous allons vous indiquer la procédure la plus simple et efficace à suivre.
Voilà comment nous allons procéder :
- Ajout de quelques lignes de code dans le fichier functions.php
- Création d’un nouveau fichier CSS
Et rien d’autre à ajouter.
Ouvrir le fichier functions.php
Ouvrir le fichier functions.php disponible à la racine de votre thème (par exemple : wp-content/themes/votreTheme/functions.php).
Copier et coller simplement le code ci-dessous en bas de page par exemple.
// Fonction qui insere le lien vers le css qui surchargera celui d'origine
function custom_login_css()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/style-login.css" />';
}
add_action('login_head', 'custom_login_css');Nous appelons ici le fichier style-login.css dans lequel nous allons spécifier toutes nos modifications pour notre page login de WordPress. Il ne reste donc plus qu’à créer ce fichier dans le répertoire CSS (s’il existe).
Créer un fichier CSS puis le modifier
Vous pouvez commencer par intégrer les quelques lignes suivantes dans votre fichier CSS :
/* Background de la page */
body.login, html {
background: #EEE url("../images/bg-admin.png") repeat left top !important;
}
/* Panel de connexion */
.login form, form {
background: url("../images/bg-panel.png") repeat center transparent;
border: 1px solid #CFE1EA;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px 0 rgba(205, 205, 205, 0.7);
opacity: 0.85;
}
/* Styles des liens */
#nav a, #backtoblog a {
background: none;
}
Nous pouvons aller un peu plus loin dans la personnalisation en modifiant le fichier wp-login disponible à la racine du WordPress.
Ainsi, pour les plus initiés en matière de code, vous pourrez ajouter quelques div ou balises supplémentaires qu’il ne faudra pas oublier de personnaliser dans le fichier style-login.css créé précédemment.