作者：ray1980

编辑footer.php在</body>前添加如下代码:

<form id="login" action="login" method="post">
  <h1>网站登陆</h1>
  <p class="status"></p>
  <label for="username">用户名</label>
  <input id="username" type="text" name="username"><label for="password">密码</label>
  <input id="password" type="password" name="password">
  <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">忘记密码?</a>
  <input class="submit_button" type="submit" value="Login" name="submit">
  <a class="close" href="">(关闭)</a>
  <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>

在要显示登陆链接的地方，添加如下代码：

<?php if (is_user_logged_in()) { ?>
    <a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">退出</a>
<?php } else { ?>
    <a class="login_button" id="show_login" href="">登陆</a>
<?php } ?>

CSS文件，添加至style.css

form#login{
    display: none;background-color: #FFFFFF;position: fixed;top: 200px;padding: 40px 25px 25px 25px;width: 350px;z-index: 999;left: 50%;margin-left: -200px;
}

form#login p.status{
    display: none;
}

.login_overlay{
    height: 100%;width: 100%;background-color: #F6F6F6;opacity: 0.9;position: fixed;z-index: 998;
}

在funcitons.php添加如下代码：

function ajax_login_init(){
    wp_register_script('ajax-login-script', get_template_directory_uri() . '/ajax-login-script.js', array('jquery') ); 
    wp_enqueue_script('ajax-login-script');

    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),'redirecturl' => home_url(),'loadingmessage' => __('正在登陆，请稍后...')));

    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}

if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}

function ajax_login(){
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    $info = array();
    $info['user_login'] = $_POST['username'];
    $info['user_password'] = $_POST['password'];
    $info['remember'] = true;

    $user_signon = wp_signon( $info, false );if ( is_wp_error($user_signon) ){
        echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));
    } else {
        echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
    }

    die();
}

JS文件内容如下：

jQuery(document).ready(function($) {
    $('a#show_login').on('click', function(e){
        $('body').prepend('<div class="login_overlay"></div>');
        $('form#login').fadeIn(500);
        $('div.login_overlay, form#login a.close').on('click', function(){
            $('div.login_overlay').remove();
            $('form#login').hide();
        });
        e.preventDefault();
    });

    $('form#login').on('submit', function(e){
        $('form#login p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin',
                'password': $('form#login #password').val(), 
                'security': $('form#login #security').val()
            },
            success: function(data){
                $('form#login p.status').text(data.message);if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });
});