Question

我的WordPress登录表单在我网站的前端工作，允许我的用户登录而无需访问wp-login.php或离开“主题”或网站。

如果你转到http://westendmediacentre.com/dev并点击登录，你会发现我的表格出现在jQuery弹出窗口中。我的代码如下：

表格代码：

<div class="login-form">
      <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <input type="text" name="log" id="log" value="Username<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Username':this.value;"/>
        <input type="password" name="pwd" id="pwd" value="Password" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Password':this.value;"/>
        <input type="submit" name="submit" value="Login" class="login-button" />
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
      </form>
</div>

jQuery的：

$('.button-login').click(function() {
    $('.login-box').fadeIn('slow', function() {
    // Animation complete
    });
    $(".login-box").css({'z-index' : '10000'});
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").css({'z-index' : '1'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.login-box-close').click(function() {
    $('.login-box').fadeOut('fast', function() {
    // Animation complete
    });
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
});

这非常有效，但是，如果您尝试使用某些错误的凭据登录，则会重新定向到WordPress页面，从而为您提供错误。

我想做的是，我的jQuery弹出窗口中出现这些错误，因此当您尝试使用错误的凭据登录时，它会在表单上方或下方显示错误消息，而不是重定向到另一个页面显示错误。

我尝试使用本教程，但是使用现有代码无法正常运行：http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

如果有人可以发布有效的解决方案，我们将不胜感激

Answer 1

这完全是关于wordperess的结构，首先你应该知道即使你提供正确或错误的登录凭证，你的结构也会将用户重定向到wp-login.php（因为） < ?php echo get_option('home'); ?>/wp-login.php行（我的意思是你只是将你的用户名和密码发布到wp-login.php）
然后如果提供的信息是正确的，那么wordpress会再次重定向到用户主页，否则会显示错误（使用摇动效果），您可以在wp-login.php文件中找到所有这些操作。
您可以使用两种不同的选项。

你可以像w一样破解wp-login.php文件如果用户没有提供正确的用户名/密码，那么让他重定向回http://www.westendmediacentre.com/dev/
您可以使用Ajax验证构建自己的登录机制（我的意思是您准备一个用于数据库连接的php文件并从数据库中检索用户名和密码并将结果发送回您的登录系统）

如果您选择第二种方式，则可以控制this帖子。这非常有用。

Answer 2

如果可能，请勿编辑任何核心文件。你会后悔的。

如果您要编写插件并且插件正在处理您的jQuery弹出窗口 - 那么您可以这样做：

要创建登录表单，您可以查看此插件： http://wordpress.org/extend/plugins/sidebar-login/

然后，您将在您的AJAX脚本将发布到的PHP文件中拥有大部分逻辑。如果登录失败，PHP文件的返回数据将被发送到您的AJAX脚本，您就会很好。

Answer 3

你可以尝试使用下面的WordPress插件，这将使你的工作更容易

http://wordpress.org/extend/plugins/simplemodal-login/

使用一点css，你可以使它与你当前的主题相匹配

Answer 4

您缺少本教程的这一部分

$("#submitbtn").click(function() {

    $('#result').html('<img src="<?php bloginfo('
    template_url '); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
        type: "POST",
        url: "<?php echo "
        http: //" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",  
        data: input_data,
        success: function(msg) {
            $('.loader').remove();
            $(' 
<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
        }
    });
    return false;

});

WordPress登录jQuery Popup - 如何使用jQuery Ajax验证登录？

4 个答案: