Sélectionner une page

Comment créer un page login personnalisée sans plugin WordPress

Les pré-requis nécessaires

  • Un client FTP
  • Créer un theme-enfant dans le répertoire themes

Dans le répertoire de votre thème-enfant,

  • Créer un fichier functions.php
  • Créer un fichier login.css
  • Créer un répertoire images/login

Les fichiers nécessaires

1- Syntaxe du fichier functions.php

–> Insérer la balise debut php
// Insere la feuille style du theme parent
function my_enqueue_assets() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_assets’ );

// Insere la feuille style du theme enfant
function childtheme_custom_login() {
echo  »;
}
add_action(‘login_head’, ‘childtheme_custom_login’);

// Prise en compte de la fonction
function custom_login_header_url($url) {
return get_bloginfo(‘url’);
}
function custom_login_header_title($title) {
return get_bloginfo(‘name’);
}
add_filter(‘login_headerurl’,’custom_login_header_url’);
add_filter(‘login_headertitle’,’custom_login_header_title’);
–> Insérer la balise fin php

2- Syntaxe du fichier login.css

/*
Hack: Login WP
Theme URI: http://www.taoproject.fr
Version: 1
Description: Custom Login
Author: Tao Project
Author URL: https://www.webdesign.taoproject.fr
*/
body {background: #000 url(« images/login/votre-image-de-fond ») center center no-repeat !important;background-size: cover !important;}/*image de fond*/
.login h1{text-align:center;background-color: #fff;margin-bottom: -29px;padding-top: 15px;padding-bottom: 15px;}/*relie le logo au formulaire – margin-buttom à verifier*/
#login h1 a {background-image:url(« images/login/taoproject-black.png ») !important;}/*image du logo*/
.login label{color:#313131;}/*definit login password*/
.login #nav a {color:#000!important;}/*definit mot de passe*/
.login #nav a:hover {color: #d33 !important;}/*definit mot de passe*/
.login #backtoblog a {color:#fff!important;}/*definit retour*/
.login #backtoblog a:hover {color: #d33 !important;}/*definit retour*/
.wp-core-ui .button-primary {background: #000;border-color:#000;}/*definit bouton*/
.wp-core-ui .button-primary:hover {background: #313131;border-color:#313131;}/*definit bouton*/

3- Ensuite à vous de modifier les images,couleurs….

Notes:
1- Ce formulaire de login fonctionne même si vous utilisez le plugin Clef
2- Ce formulaire fonctionne sur les sites taoprojet.fr & webdesign.taoproeject.fr…
3- Mais vous ne pourrez les visualiser car normalement interdit (Deny from all)
4- Cela fera l’objet du TIP#2 sui donnera des conseils de sécurité en utilisant le fichier .htaccess

Vous avez des commentaires/observations, n’hésitez pas à nous contacter…
D’autres TIP à venir sur la façon de paramétrer le theme Divi