Question

我正在使用自定义Wordpress主题，我使用jQuery创建了一个slideDown效果，点击后会显示登录和注册表单。我正在尝试创建一种体验，用户在登录或注册时不会离开此页面，而是最初向下滑动的div，向上滑动，按钮文本将更改为登录用户的名称。

当我单击LOGIN时，div会向上滑动，但系统似乎没有识别登录用户。

 <script type="text/javascript">
    $(document).ready(function(){

    $(".btn-slide").click(function(){
    $("#slide-panel").slideToggle("slow");

   });

 });
 </script>
 <script type="text/javascript">    
    $('.error').hide();  
        $(".button").click(function() {
      // validate and process form here
        var name = $("input#log").val();  
            if (name == "") {  
              $("label#error").show();  
              $("input#log").focus();  
              return false;  
            }

        var dataString = $("#wp_login_form").serialize();
        //alert (dataString);return false;  

        $.ajax({
            type: "POST",
            url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",  
            data: dataString,
            success: function() {
                $("#slide-panel").slideToggle("slow");
                $(".slide").html("Hello");
            }
        });
        return false;
    });
 </script>

 <?php wp_head(); ?>

 </head>

 <body <?php body_class(); ?>>

 <div id="slide-panel"><!--SLIDE PANEL STARTS-->
    <div class="loginform">
        <div class="loginformdetails equalheight"><h2>Member Login</h2>
            <div class="formrow">
                <label class="error" id="error">Please complete the entire form.</label>
            </div>
            <?php 
            global $user_ID;

            if($_POST){
            //We shall SQL escape all inputs
            $username = $wpdb->escape($_REQUEST['log']);
            $password = $wpdb->escape($_REQUEST['pwd']);
            $remember = $wpdb->escape($_REQUEST['rememberme']);

            if($remember) $remember = "true";
            else $remember = "false";
            $login_data = array();
            $login_data['user_login'] = $username;
            $login_data['user_password'] = $password;
            $login_data['remember'] = $remember;
            $user_verify = wp_signon( $login_data, false ); 

            if ( is_wp_error($user_verify) ) {
                echo $user_verify->get_error_message();  
                exit();
                } else {    
                            echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
                            $user_info = get_userdata($user_ID);
                            ?>
                            <div class="loginform">
                                <h2>Control Panel</h2><ul>
                                <li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> |
                                <li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Logout</a></li></ul>
                            </div><!--loginform ends-->
                            <?php exit();
                        }
                } else {
                ?> 
                    <form id="wp_login_form" action="" method="post">
                    <div class="formrow">
                        <div class="formLabel"><label for="log">Email  </label></div>
                        <div class="forminput"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="25" /></div>
                    </div>
                    <div class="formrow">
                        <div class="formLabel"><label for="pwd">Password  </label></div>
                        <div class="forminput"><input type="password" name="pwd" id="pwd" size="25" /></div>
                    </div>
                    <div class="formrow lowercase">
                        <label for="rememberme">
                        <input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
                    </div>
                    <div class="formrow">
                        <div class="formLabel"><input type="submit" name="submit" value="Login" class="button" /></div>
                    </div>
                    <div class="formrow">
                        <div class="forminput lowercase"><a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Forgot password?</a></div>
                    </div>    
                    </form>
                    <?php } ?>
        </div>
    </div><!--loginform ends-->

Answer 1

我建议你只使用这个插件：http://wordpress.org/extend/plugins/simplemodal-login/

它将解决您的问题并有两种样式，您可以查看它。

Answer 2

这是另一种不使用插件的解决方案：

jQuery.ajax({
  url: 'https://example.com/test-page/',
  method: 'POST',
  data: {email: 'test@example.com', password: 'PASSWORD'}
  success: function(data) {
    console.log(data);
  }
});

页 - 测试 - page.php文件

<?php
$email    = $_POST['email'];
$password = $_POST['password'];

if('' != $password && '' != $email) {
  $user = get_user_by('email', $email);
  $user_id = $user->ID;
  if ($user && wp_check_password($password, $user->data->user_pass, $user_id)) {
    clean_user_cache($user_id);
    wp_clear_auth_cookie();
    wp_set_current_user($user_id);
    wp_set_auth_cookie($user_id, true, false);
    update_user_caches($user);
    $current_user = wp_get_current_user();
    $user_info = array('email'     => $current_user->user_email,
                       'firstname' => $current_user->user_firstname,
                       'lastname'  => $current_user->user_lastname,
                      );
    echo json_encode($user_info);
  }
}

没有页面刷新的Wordpress登录

2 个答案: