Depuis des années, nous avons utilisé WordPress mais l’écran de connexion n’a pas beaucoup changé, vous êtes d’accord avec moi ?

Pourquoi ne pas le changer pour une page de connexion totalement personnalisée ? Les possibilités sont infinies. Avec un peu de CSS et de Javascript, vous pouvez avoir une page de connexion vous ressemble et surtout adapté à votre thème.

Dans ce tutoriel, nous allons voir quelles sont les étapes pour créer une page de connexion WordPress :

  • avec un arrière-plan personnalisé,
  • des polices et des styles personnalisés,
  • ainsi que d’une fantaisie jQuery effet de fondu sur le formulaire.
Joli programme !
Avant de commencer, il est très important de créer un dossier /login/ dans le répertoire de votre thème. Nous allons y créer plusieurs fichiers et aussi stocker nos images.
Premier fichier à créer : login-styles.css
Ce fichier doit être appelé dans le fichier functions.php de votre thème.  Pour ma part, j’ai préféré créer un fichier login-functions.php qui va intégrer tous les scripts dont on aura besoin.
Il faut appeler le fichier login-functions.php dans votre fichier functions.php de votre thème.
<?php
/* Include du fichier pour la page login personalisée */
include_once "login/login-functions.php";
?>

Étape 1. Les scripts

L’appel de la feuille de style

function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
}

add_action('login_head', 'custom_login_css');

Les fonts Google
function custom_fonts() {
    echo '<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css" />';
}
add_action('login_head', 'custom_fonts');

 L’effet fade-in pour le formulaire
add_action( 'login_head', 'untame_fadein',30);

function untame_fadein() {
    echo '
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function() { jQuery("#loginform,#nav,#backtoblog").css("display", "none");          jQuery("#loginform,#nav,#backtoblog").fadeIn(3500);     
    });
    // ]]></script>';
}

 L’URL personnalisée pour le logo 
add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
    return 'URL_DE_MON_SITE';
}

Etape 2 : La feuille de style

Pour l’image d’arrière plan, la chose la plus importante à retenir est que vous aurez besoin de la prendre assez grande pour un meilleur rendu sur tous les écrans.
body.login {background: #fbfbfb url('bg.jpg') no-repeat fixed center; }

.login h1 a {
    background-image: url('../login/logo.png');
    background-size: 299px 172px;
    width: 320px;
    height: 160px;
}

#login {
    padding: 70px 0 0;
}

.login form {
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden;
}
.login form input {
    width: 240px;
    height: 48px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: block;
}

.login form input:focus,
.login form textarea:focus {
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
}
.login label {
    color: #fff;
    line-height: 26px;
}

.login form .input,
.login input[type="text"] { color: #8c8a8a;}
input#rememberme {
    height: 18px;
    width: 18px;
    display: inline;
    vertical-align: middle;
    margin: 10px 0;
}
input.button-primary {
    width: 138px;
    height: 44px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float:right;
    border: 1px solid #888888;
    background: #888888;
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#888888));
    background: -webkit-linear-gradient(top, #333333, #888888);
    background: -moz-linear-gradient(top, #333333, #888888);
    background: -ms-linear-gradient(top, #333333, #888888);
    background: -o-linear-gradient(top, #333333, #888888);
    background-image: -ms-linear-gradient(top, #333333 0%, #888888 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
}

input.button-primary:hover {
    border: 1px solid #888888;
    text-shadow: #333333 0 1px 0;
    background: #888888;
    background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#888888));
    background: -webkit-linear-gradient(top, #888888, #888888);
    background: -moz-linear-gradient(top, #888888, #888888);
    background: -ms-linear-gradient(top, #888888, #888888);
    background: -o-linear-gradient(top, #888888, #888888);
    background-image: -ms-linear-gradient(top, #888888 0%, #888888 100%);
    color: #fff;
}

input.button-primary:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #333333;
    background: #333333;
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#888888));
    background: -webkit-linear-gradient(top, #333333, #888888);
    background: -moz-linear-gradient(top, #333333, #888888);
    background: -ms-linear-gradient(top, #333333, #888888);
    background: -o-linear-gradient(top, #333333, #888888);
    background-image: -ms-linear-gradient(top, #416b68 0%, #888888 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}

.login #nav, .login #backtoblog {
    float: left;
    margin: 0 0 0 13px;
    padding-bottom: 20px;
}
.login #nav a, .login #backtoblog a {
    font-family: 'Sans ouvertes Condensé',sans-serif;
    font-size: 10px;
    color:#ffffff;
}
div.updated, .login .message {
    background-color: lightYellow;
    border-color: #E6DB55;
    font-family: 'Sans ouvertes Condensé',sans-serif;
    font-size: 16px;
    font-weight: 700;
}

div.updated,
.login .message {
    background-color: lightYellow;
    border-color: #E6DB55;
    font-family: 'Sans ouvertes Condensé', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

A vous maintenant de travailler sur votre page de login !

Démo : https://restezconnectes.fr/wp-login.php

 

Source

2 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.