J'utilise wp_login_form()
pour afficher le formulaire de connexion dans une fenêtre de dialogue jQuery.
Si l'utilisateur entre un mot de passe incorrect, il est amené au backend. Je ne veux pas ça. Existe-t-il un moyen d'avertir l'utilisateur qu'il a saisi un mot de passe incorrect et qu'il reste sur la même page?
Avant que wp_login_form()
soit venu, j'utilisais un plugin. J'espère que je peux éviter d'utiliser un plugin pour cela.
Mon code:
wp_login_form( array(
'label_remember' => __( 'Remember me' ),
'label_log_in' => __( 'Login' )
) );
wp_login_form()
crée un formulaire avec un attribut d'action de site_url/wp-login.php
. Cela signifie que lorsque vous cliquez sur le bouton d'envoi, le formulaire est posté sur site_url/wp-login.php
, ce qui ignore redirect_to sur les erreurs (comme un mot de passe incorrect). Dans votre cas, vous pouvez donc utiliser à nouveau un plugin ou recréer. l'ensemble du processus de connexion et de cette façon vous avez le contrôle sur les erreurs, jetez un oeil à Recherchez le nom d'utilisateur correct sur le formulaire de connexion personnalisé qui est une question très similaire.
Je suis venu ici de google. Mais la réponse ne m'a pas satisfait. Je cherchais depuis un moment et trouvais une meilleure solution.
Ajoutez ceci à votre functions.php :
add_action( 'wp_login_failed', 'my_front_end_login_fail' ); // hook failed login
function my_front_end_login_fail( $username ) {
$referrer = $_SERVER['HTTP_REFERER']; // where did the post submission come from?
// if there's a valid referrer, and it's not the default log-in screen
if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
wp_redirect( $referrer . '?login=failed' ); // let's append some information (login=failed) to the URL for the theme to use
exit;
}
}
La méthode actuelle que j'utilise pour traiter tous les problèmes décrits ici fonctionne très bien même avec un nom d'utilisateur/mot de passe vierge et ne repose pas sur javascript (bien que le js puisse être bon avec cela).
add_action( 'wp_login_failed', 'custom_login_failed' );
function custom_login_failed( $username )
{
$referrer = wp_get_referer();
if ( $referrer && ! strstr($referrer, 'wp-login') && ! strstr($referrer,'wp-admin') )
{
wp_redirect( add_query_arg('login', 'failed', $referrer) );
exit;
}
}
La clé est ce filtre pour changer la façon dont un nom d'utilisateur/mot de passe vide est traité:
add_filter( 'authenticate', 'custom_authenticate_username_password', 30, 3);
function custom_authenticate_username_password( $user, $username, $password )
{
if ( is_a($user, 'WP_User') ) { return $user; }
if ( empty($username) || empty($password) )
{
$error = new WP_Error();
$user = new WP_Error('authentication_failed', __('<strong>ERROR</strong>: Invalid username or incorrect password.'));
return $error;
}
}
Vous pouvez aller plus loin et remplacer complètement wp-login.php en redirigeant les utilisateurs vers votre page de connexion personnalisée et utiliser cette page également pour la redirection login_failed. Code complet:
/**
* Custom Login Page Actions
*/
// Change the login url sitewide to the custom login page
add_filter( 'login_url', 'custom_login_url', 10, 2 );
// Redirects wp-login to custom login with some custom error query vars when needed
add_action( 'login_head', 'custom_redirect_login', 10, 2 );
// Updates login failed to send user back to the custom form with a query var
add_action( 'wp_login_failed', 'custom_login_failed', 10, 2 );
// Updates authentication to return an error when one field or both are blank
add_filter( 'authenticate', 'custom_authenticate_username_password', 30, 3);
// Automatically adds the login form to "login" page
add_filter( 'the_content', 'custom_login_form_to_login_page' );
/**
* Custom Login Page Functions
*/
function custom_login_url( $login_url='', $redirect='' )
{
$page = get_page_by_path('login');
if ( $page )
{
$login_url = get_permalink($page->ID);
if (! empty($redirect) )
$login_url = add_query_arg('redirect_to', urlencode($redirect), $login_url);
}
return $login_url;
}
function custom_redirect_login( $redirect_to='', $request='' )
{
if ( 'wp-login.php' == $GLOBALS['pagenow'] )
{
$redirect_url = custom_login_url();
if (! empty($_GET['action']) )
{
if ( 'lostpassword' == $_GET['action'] )
{
return;
}
elseif ( 'register' == $_GET['action'] )
{
$register_page = get_page_by_path('register');
$redirect_url = get_permalink($register_page->ID);
}
}
elseif (! empty($_GET['loggedout']) )
{
$redirect_url = add_query_arg('action', 'loggedout', custom_login_url());
}
wp_redirect( $redirect_url );
exit;
}
}
function custom_login_failed( $username )
{
$referrer = wp_get_referer();
if ( $referrer && ! strstr($referrer, 'wp-login') && ! strstr($referrer, 'wp-admin') )
{
if ( empty($_GET['loggedout']) )
wp_redirect( add_query_arg('action', 'failed', custom_login_url()) );
else
wp_redirect( add_query_arg('action', 'loggedout', custom_login_url()) );
exit;
}
}
function custom_authenticate_username_password( $user, $username, $password )
{
if ( is_a($user, 'WP_User') ) { return $user; }
if ( empty($username) || empty($password) )
{
$error = new WP_Error();
$user = new WP_Error('authentication_failed', __('<strong>ERROR</strong>: Invalid username or incorrect password.'));
return $error;
}
}
function custom_login_form_to_login_page( $content )
{
if ( is_page('login') && in_the_loop() )
{
$output = $message = "";
if (! empty($_GET['action']) )
{
if ( 'failed' == $_GET['action'] )
$message = "There was a problem with your username or password.";
elseif ( 'loggedout' == $_GET['action'] )
$message = "You are now logged out.";
elseif ( 'recovered' == $_GET['action'] )
$message = "Check your e-mail for the confirmation link.";
}
if ( $message ) $output .= '<div class="message"><p>'. $message .'</p></div>';
$output .= wp_login_form('echo=0&redirect='. site_url());
$output .= '<a href="'. wp_lostpassword_url( add_query_arg('action', 'recovered', get_permalink()) ) .'" title="Recover Lost Password">Lost Password?</a>';
$content .= $output;
}
return $content;
}
Personnalisez-les et ajoutez-les pour ajouter votre logo à la page wp-login pour la récupération du mot de passe:
// calling it only on the login page
add_action( 'login_enqueue_scripts', 'custom_login_css', 10 );
function custom_login_css() { wp_enqueue_style( 'custom_login_css', get_template_directory_uri() .'/library/css/login.css', false ); }
// changing the logo link from wordpress.org to your site
add_filter( 'login_headerurl', 'custom_login_logo_url' );
function custom_login_logo_url() { return home_url(); }
// changing the alt text on the logo to show your site name
add_filter( 'login_headertitle', 'custom_login_title' );
function custom_login_title() { return get_option('blogname'); }
Login logo css:
.login h1 a {
background: url(../images/login-logo.png) no-repeat top center;
width: 274px;
height: 63px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
EDIT: Je viens d’implémenter cela sur un autre site, et j'ai trouvé le "pas en avant" ci-dessus plus complet, et corrigé de petites erreurs de syntaxe dans "add_actions". Ajout de commentaires et d’une méthode pour ajouter automatiquement le formulaire de connexion à la page de connexion sans fichier de modèle séparé. La méthode de formulaire de connexion devrait fonctionner dans la plupart des cas, étant donné qu’elle est attachée à "the_content", elle pourrait être problématique si vous avez plusieurs boucles sur la page de connexion, utilisez simplement un modèle page-login.php dans ce cas.
Une solution pour le point de Szczepan Hołyszewski sur les champs vides dans la solution acceptée, le jQuery suivant empêchera d'accéder à la page standard wp-login: (ajouter au modèle de page de connexion ou footer.php)
jQuery("#loginform-custom").submit(function(){
var isFormValid = true;
jQuery("input").each(function()
{
if (jQuery.trim($(this).val()).length == 0){
jQuery(this).addClass("submit_error");
isFormValid = false;
}
else {
jQuery(this).removeClass("submit_error");
}
});
return isFormValid;
});
Un ajout à la réponse d'Alexey. Vous pouvez ajouter une fonction jquery pour vérifier que l’un des champs n’est pas vide. De cette façon, le formulaire ne sera pas envoyé à moins que quelque chose ne soit vérifié, empêchant WordPress de rediriger vers /wp-login.php.
<script>
$("#wp-submit").click(function() {
var user = $("input#user_login").val();
if (user == "") {
$("input#user_login").focus();
return false;
}
});
</script>
Vous ne savez toujours pas comment résoudre le problème du mot de passe oublié?