Personnaliser la page de connexion de WordPress

posté le 5 janvier 2012 par Jonathan | 14 commentaires | 2240 vues | Ajouter à mes favoris

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 :

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 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;
}

h1 a{
	background: url(images/logo.png) no-repeat !important;
	width: 325px !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;
}

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 :

2 plugins indispensables pour personnaliser votre page de connexion

Pour les personnes qui n’ont pas ou très peu de connaissances en PHP ou qui ont peur d’aller faire un tour dans le code, j’ai recueilli 2 plugins qui permettent de réaliser les astuces que nous venons d’apprendre.

Uber Login Logo

Uber Login Logo est THE plugin si vous souhaitez modifier le logo de votre page de connexion sans vous prendre la tête avec d’autres options inutiles. Il est tellement facile à utiliser qu’il possède uniquement un bouton pour télécharger votre logo.

Le plugin utilise le gestionnaire de média de WordPress et une fois que vous avez cliquer sur « Insérer dans l’article », on vous propose de voir un aperçu du logo. Le résultat sur la page de connexion est instantané !

Uber Login Logo est le plugin pour installer son logo sur la page de connexion en 10 secondes top chrono !

Aperçu de l'administration d'Uber Login Logo

Télécharger Uber Login Logo

Custom Login Screen

Custom Login Screen est THE plugin à avoir si on souhaite personnaliser sa page de connexion de WordPress à partir de l’interface d’administration. Ce plugin permet tout simplement de modifier l’intégralité des éléments qui compose la page de connexion. C’est-à-dire que vous avez la possibilité de modifier le fond, le lien de retour, le logo, le formulaire, les messages d’informations et d’erreurs. Que ce soir le fond ou encore le lien de retour vers votre site, vous allez pouvoir personnaliser votre page avec une facilité déconcertante.

Custom Login Screen est divisé en plusieurs onglets. Chacun d’entre eux est réservé à un élément précis de la page et vous disposez d’une multitude d’options pour par exemple le positionner ou colorer comme bon vous semble.

Aperçu de l'administration de Custom Login Screen

Télécharger Custom Login Screen

Si vous avez aimé cet article, n'oubliez pas de vous abonner à notre flux RSS ou à notre newsletter au contenu exclusif.