logo标签列表

WordPress登录jQuery弹出窗口-如何使用jQuery Ajax验证登录？

jquerywordpressauthentication
8
我已经成功将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 如果有人能发布一个可行的解决方案，将不胜感激。
你没有通过Ajax发布你的登录信息。你只是将其发布到login.php。所引用的教程是使用ajax发布登录信息的正确方式。 - Chris_O
当我试图在空白页面上使用教程时，它可以正常运行。但是当我尝试将其与我的现有代码集成时，就会出现问题。当登录时，在“results” div中，它重新加载整个页面而不仅仅是结果，这是一个问题。我需要的只是当出现错误时，在结果div中显示错误信息，并在成功时重定向到页面。我该怎么做？ - Zach Nicodemous
这个问题应该提交到http://wordpress.stackexchange.com/。 - Olivier Pons
4个回答
1

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

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

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

0

你错过了教程的这一部分

$("#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;

});
0

如果可能的话，请勿编辑任何核心文件。否则，您以后会后悔的。

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

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

然后，您只需将大部分逻辑放在一个PHP文件中，您的AJAX脚本将向其发送帖子。如果登录失败，则从PHP文件返回的数据将发送到您的AJAX脚本，然后您就可以了。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接