我正在使用wp_login_form()在jQuery对话框窗口中显示登录表单。

如果用户输入错误的密码,则该用户将被带到后端。我不要有没有办法通知用户他输入了错误的密码并且仍然保留在同一页面上?

wp_login_form()出现之前,我正在使用插件。我希望可以避免为此使用插件。

我的代码:

wp_login_form( array(
  'label_remember' => __( 'Remember me' ),
  'label_log_in' => __( 'Login' )
) );


#1 楼

wp_login_form()创建一个表单,其动作属性为site_url/wp-login.php,这意味着,当您单击“提交”按钮时,该表单就会发布到site_url/wp-login.php上,该表单会在出现错误(例如错误的密码)时忽略redirect_to,因此您可以返回使用插件或重新创建整个登录过程,这样您就可以控制错误,请查看自定义登录表单中的“检查用户名是否正确”,这是一个非常类似的问题。

#2 楼

我来自谷歌。但是答案并不令我满意。我寻找了一段时间,找到了更好的解决方案。

将此添加到您的函数中。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;
   }
}


评论


感谢Alexey,我将对此进行测试(因为我仍在使用插件)

–史蒂文
2012年6月19日23:29

当输入错误的凭据时,Alexey的解决方案可以工作,但不幸的是,当用户忘记输入用户名或密码时,Alexey的解决方案将失败。显然,在这种情况下,Wordpress甚至不会尝试登录用户,因此不会执行wp_login_failed操作。

– SzczepanHołyszewski
2012年9月12日7:39

我会在这里使用wp_get_referer()节省一些时间:codex.wordpress.org/Function_Reference/wp_get_referer

–杰克
13年7月3日在17:00

另外,您肯定在这里使用add_query_arg,因此wp_redirect应该是:“ wp_redirect(add_query_arg('login','failed',$ referrer));”

–杰克
13年7月3日在17:14

#3 楼

我正在使用的当前方法来处理此处概述的所有问题,即使使用空白的用户名/密码也可以很好地工作,并且不依赖javascript(尽管js可以很好地配合使用)。

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


关键是这个过滤器可以更改空白用户名/密码的处理方式:

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


您可以进一步执行此操作,通过将用户重定向到您的自定义登录页面来完全替换wp-login.php,并将该页面也用于login_failed重定向。完整代码:

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


自定义并将其添加以将徽标添加到wp登录页面以恢复密码:

// 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'); }


登录徽标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;
}


编辑:我刚刚在其他站点上从头开始实现了此目的,并且发现上述“更进一步”更加完整,并修复了“ add_actions”中的小语法错误。添加了一些注释,以及一种无需单独模板文件即可自动将登录表单添加到登录页面的方法。登录表单方法应该在大多数情况下都可以使用,因为它附加在“ the_content”上,如果登录页面上有多个循环,则可能会引起问题,在这种情况下,只需使用page-login.php模板即可。 br />

评论


谢谢,我将对此进行研究(看看是否可以使其与Twitter和FB等第三方登录一起使用)

–史蒂文
13年7月3日在21:15

杰克-这是一个很好的完整解决方案。感谢分享。 +1

– henrywright
13年9月29日在21:39

基本上,它被包装到名为Sewn In Template Login的插件中,这是一个非常完整的小型插件。 wordpress.org/plugins/sewn-in-template-login

–杰克
16年1月30日在22:05

很好,唯一的问题是它实际上并没有在前端抛出错误……。

– Siyah
19年5月9日在8:43

#4 楼

针对SzczepanHołyszewski关于已接受解决方案中的空字段的观点的解决方案,以下jQuery将阻止进入标准wp-login页面:(添加到登录页面模板或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;
});


#5 楼

以下对我有用。这两个钩子都可以在wp_authenticate中的函数wp-includes/puggabel.php中找到。

通过authenticate过滤器检查登录表单是否缺少用户名或密码。

 function wpse_15633_redirectMissingDataLoginForm($user, $username, $password)
{
    $errors = [];
    empty(trim($password)) && $errors[] = 'password_empty';
    empty(trim($username)) && $errors[] = 'username_empty';

    if (! empty($errors)) {

        $redirect_url = add_query_arg([
            'errors' => join(',', $errors),
        ], site_url('login', 'login_post'));

        if (wp_safe_redirect($redirect_url)) {
            exit;
        }
    }
    return $user;
}
add_filter('authenticate', 'wpse_15633_redirectMissingDataLoginForm', 10, 3);
 


通过wp_login_failed操作检查所提供的用户名和密码的身份验证是否失败。

 function wpse_15633_redirectFailedLoginForm($username, $error)
{
    $redirect_url = add_query_arg([
        'errors' => $error->get_error_code(),
    ], site_url('login', 'login_post'));

    if (wp_safe_redirect($redirect_url)) {
        exit;
    }
}
add_action('wp_login_failed', 'wpse_15633_redirectFailedLoginForm', 10, 2);
 


#6 楼

阿列克谢答案的一个补充。您可以添加jquery函数以检查字段之一是否为空。这样,除非进行检查,否则表单不会提交,从而阻止WordPress重定向到/wp-login.php。

  <script>
        $("#wp-submit").click(function() {
          var user = $("input#user_login").val();
            if (user == "") {
            $("input#user_login").focus();
            return false;
          }
         });
  </script>   


仍然不确定如何解决该问题。忘记密码方面

评论


请注意,WordPress以“无冲突”模式加载jQuery。 $别名无效。

– s_ha_dum
13年2月26日在5:38

您还必须考虑用户点击[输入],而不是单击登录按钮。另外,您还需要检查空白密码。

–史蒂文
13年2月26日在11:07



#7 楼

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


评论


请编辑您的答案,并添加解释:为什么这可以解决问题?

– fuxia♦
18年5月11日在13:06