Comment personnaliser la page de connexion WordPress

Pourquoi avez-vous besoin d'une page de connexion personnalisée pour WordPress ?

• Vos utilisateurs s'enregistreront et se connecteront à l'aide de l'écran de connexion WordPress par défaut, car WordPress ne fournit aucune option intégrée pour ajouter votre propre logo ou modifier l'apparence générale pour correspondre au thème ou à la marque personnalisé que vous avez sur votre site.

• Cela peut fonctionner correctement pour les petits sites Web. Cependant, si vous exploitez un site Web d'entreprise ou une communauté en ligne très active, vous souhaiterez peut-être afficher votre propre marque au lieu de WordPress.

Voici les deux voies par lesquelles vous pouvez passer :

Vous pouvez contacter les experts de la populaire société de développement WordPress des États-Unis pour toute question.

Continuons à lire les solutions ci-dessous !

1. Utilisez la mise en page WordPress existante.

• Il est en fait assez simple de personnaliser l'existant.
• S'il s'agit simplement de changer le logo ou de lui donner une mise en page complètement différente, le point de départ est l'action login_enqueue_scripts.
• C'est là que vous pouvez prendre la décision de sortir un simple morceau de CSS normal ou de donner un lien vers un fichier CSS complet. Vous pouvez également mettre en file d'attente n'importe quel JavaScript de votre choix, que vous souhaitez utiliser.
• Dans fonction.php

 add_action('login_head', 'my_custom_login');
fonction my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/your_login_styles.css" />';}

• your_login_styles.css est le nom du fichier css qui est créé pour personnaliser la page de connexion.
• Des précautions doivent être prises ici, assurez-vous que vous utilisez des sélecteurs extrêmement spécifiques, afin de vous assurer de remplacer le style de base.
• Par défaut, le logo relie n'importe qui à l'adresse : wordpress.org. Cela peut être modifié pour l'URL de votre site en utilisant le code ci-dessous dans votre fichier functions.php :

 add_filter( 'login_headerurl', 'my_login_logo_url' );
fonction my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
fonction my_login_logo_url_title() {
return 'Votre nom de site et informations';}

Le moyen le plus pratique de modifier le message d'erreur est d'utiliser le code ci-dessous dans votre functions.php :

 add_filter('login_errors', 'login_error_override');
fonction login_error_override()
{
renvoie 'Identifiants de connexion incorrects.';
}

Connexe : WordPress vs Adobe Business Catalyst : quel CMS est le meilleur pour le développement ?

2. Créez une nouvelle mise en page.

• Pour commencer, un modèle de page personnalisé pour la page de connexion doit être créé.
• Pour ce faire, vous pouvez choisir de créer un nouveau modèle de page et de lui donner un nom. par exemple : page-login.php.
• Par la suite, créez une nouvelle page à partir de WP Admin. Configurez le lien permanent pour vous connecter. Ainsi, WordPress prendra par défaut le modèle page-login.php pour cette page.
• Conservez la balise wp_login_form dans le modèle de page page-login.php afin d'afficher le formulaire de connexion

Une agence mondiale de solutions informatiques proposant des services numériques innovants et créatifs aux entreprises qui souhaitent se développer en ligne. En nous concentrant sur les résultats, nous utilisons nos compétences techniques et notre connaissance du secteur pour vous aider à atteindre vos objectifs numériques. Qu'il s'agisse de réduire votre taux de rebond avec une conception Web interactive ou d'apporter de nouveaux flux de trafic et de revenus à votre site Web. <a href="www.elsner.com/contact-us">Parlez-nous</a> de votre projet pour commencer…

  </p>
</div>
<div class="formulaire de connexion">
<?php
$args = tableau(
'redirect' => home_url(),
'id_username' => 'utilisateur',
'id_password' => 'passer',
);
?>
<?php wp_login_form( $args ); ?>
</div>

• Un CSS selon vos besoins personnels peut être fait. La page de connexion est déjà en fonction.
• Nous pouvons essayer de nous connecter, si c'est un succès, nous obtiendrons redirigé l'adresse qui a été spécifiée dans le paramètre de redirection ci-dessus. Cependant, il y a quelque chose à régler.

 add_action('init','redirect_login_page'); 

fonction redirect_login_page() {
$page_connexion = home_url( '/login/' );
$page_viewed = basename($_SERVER['REQUEST_URI']);
if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET')
{
    wp_redirect($page_connexion);
    sortir;
}
}

– La page de connexion peut fonctionner comme prévu une fois que nous sommes connectés. En cas d'erreur, comme lors de la soumission d'une combinaison d'identifiant et de mot de passe invalide, ou lors de la soumission d'espaces vides, nous serons redirigés vers wp-login.php. Afin de résoudre ce problème, vous pouvez ajouter la fonction suivante dans votre functions.php :

 add_action( 'wp_login_failed', 'login_failed' );

fonction login_failed() {
$page_connexion = home_url( '/login/' );
wp_redirect( $page_login . '?login=failed' );
sortir;
}

 add_filter( 'authentifier', 'verify_username_password', 1, 3);

function verify_username_password( $user, $username, $password ) {
$page_connexion = home_url( '/login/' );
if( $username == "" || $password == "" ) {
wp_redirect( $page_login . "?login=empty" );
sortir;
}
}

– Le problème final est que nous serons également redirigés vers wp-login.php lorsque nous serons déconnectés du site. Par conséquent, nous devons également spécifier l'URL de redirection lors de la déconnexion.

 add_action('wp_logout','logout_page');
fonction logout_page() {
$page_connexion = home_url( '/login/' );
wp_redirect( $page_login . "?login=false" );
sortir;
}

• Il existe un certain nombre de choses qui pourraient être faites pour améliorer la page de connexion, telles que l'ajout du lien de mot de passe perdu, le lien d'enregistrement et même un message d'erreur personnalisé. Cependant, à ce stade, il fonctionne maintenant suffisamment bien pour que les utilisateurs puissent se connecter et se déconnecter. Cela pourrait être un bon début pour créer une page de connexion plus avancée.

Donc voilà! C'est ça.
Avec quelques ajustements simples, vous pouvez très confortablement personnaliser votre page de connexion pour qu'elle corresponde à l'apparence et à la convivialité de votre site.

De nombreux concepteurs de thèmes s'abstiennent de styliser la page de connexion car ils la jugent inutile, en particulier lorsqu'elle est en dehors de la configuration du thème WordPress.

Cependant, lorsque vous créez un site client, en négligeant le style – et surtout la marque – la page de connexion peut s'avérer être une opportunité perdue qui pourrait casser l'expérience de l'utilisateur lorsqu'un thème personnalisé est en place.

L'autre opportunité de marquer votre site, qui laisse également une impression durable dans l'esprit de votre utilisateur.