Personnaliser la page de connexion de WordPress


Ce guide permet de connaître tous les trucs et astuces à savoir au sujet de la personnalisation de la page de connexion sur WordPress.

La page de connexion à l’administration WordPress est accessible à l’adresse nom-du-site/wp-login.php et contient un formulaire pour se connecter, le logo de WordPress et un lien permettant de retourner sur l’index du site Internet.

Pour de multiples raisons, vous avez certainement envie de personnaliser cette page à votre image ou à celle de votre client.

Par chance (ou plutôt que les développeurs de WordPress pensent à tout), il existe quelques hooks et filtres à connaître pour personnaliser la page de connexion à votre image.

Ci-dessous, un aperçu de la page proposée par défaut :

login

Lors de la personnalisation de la page, nous allons pouvoir modifier 4 paramètres :

  • le css
  • le lien sur le logo
  • l’attribut “title” du logo
  • ajouter du contenu

Attention : Toutes les modifications et ajouts de code doivent se faire dans votre fichier “functions.php” présent à la racine de votre thème.

Modifier le CSS

Pour modifier le css de cette page, nous allons surcharger les id et class présents par défaut et insérer notre fichier css à l’intérieur de la balise .

Créez un dossier « design » à la racine de votre thème et créez ensuite un fichier « style-login.css ». C’est cette feuille de style qui contiendra notre CSS qui surchargera celui d’origine. Pour stocker votre logo et vos images supplémentaires, créez un dossier « images » dans « design ».

Le code ci-dessous permet d’insérer l’appel du fichier CSS dans la balise <head> de la page de connexion.

// 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’) . ‘/design/style-login.css » />’;
}
add_action(‘login_head’, ‘custom_login_css’);

Vous trouverez ci-dessous un exemple de fichier CSS qui surcharge quelques unes des class et id :

body {
background-image: url(images/body.jpg) !important;
background-color: #003635;
}

h1 a{
background: url(images/logositeHaitisurvie-238×80.png) center no-repeat !important;
width: 300px !important;
height: 93px !important;
}

#backtoblog {
background-color: #666;
box-shadow: 0 1px 3px #666;
left: 0;
margin: 0 !important;
padding: 10px !important;
position: fixed;
text-align: left;
text-shadow: 0 0 0 !important;
top: 0;
width: 100%;
}

.login #backtoblog a {
color: #FFFFFF !important;
}
#contact{
margin:10px auto;
width:20%;
background-color: #FFFFFF;
border-left:8px solid #2EA2CC;
padding:5px;
}

Modification de l’attribut href du logo

Par défaut, si vous cliquez sur le logo WordPress, celui-ci vous renvoie à l’adresse wordpress.org. Ce détail peut être fâcheux si le site est destiné à l’un de vos clients.

Il est possible de modifier la destination du lien en modifiant le contenu du filtre login_headerurl.

// Filtre qui permet de changer l’url du logo
function custom_url_login() {
return get_bloginfo( ‘siteurl’ ); // On retourne l’index du site
}
add_filter(‘login_headerurl’, ‘custom_url_login’);

Modification de l’attribut title du logo

Un autre détail est assez gênant, il s’agit de l’attribut “title” de ce lien qui est par défaut “Propulsé par WordPress”. Cet attribut est visible lorsque vous laissez un petit instant votre souris sur l’image concernée.

Là aussi, un filtre va nous permettre de modifier le contenu de cet attribut.

// Filtre qui permet de changer l’attribut title du logo
function custom_title_login($message) {
return get_bloginfo(‘description’); // On retourne la description du site
}
add_filter(‘login_headertitle’, ‘custom_title_login’);

Ajouter du contenu

Pour ajouter du contenu après le formulaire de connexion, le hook login_footer va nous permettre d’injecter notre code juste en dessous de la balise fermante

Voici un exemple de code :

// Fonction qui permet d’ajouter du contenu juste au dessus de la balise
function add_footer_login() {
echo ‘<p id= »contact »>En cas de problème de connexion, veuillez contacter le webmaster au numéro suivant : 00.00.00.00.00 ou par adresse mail : contact@geekpress.fr</p>’;
}
add_action(‘login_footer’,'add_footer_login’);

Ci-dessous, un aperçu du résultat final de notre personnalisation :

 

Source:http://www.geekpress.fr/wordpress/guide/personnaliser-page-connexion-732/