前言

之前在一些人网站看到前端显示表单,所以有些好奇就大概的研究下。也就折腾这样不三不四的东西。

大致的效果就在本博客右侧登陆按钮吧,可以体验下~

开发

为了更好的去理解过程,所以只在Twenty Sixteen主题测试。首先打开header.php任意地方添加:

<div class="top_bar">
                    <div class="container">
                        <div class="ajax_login">
                            <form id="login" action="login" method="post">
                                <h1><?php esc_attr_e('登录') ?></h1>
                                <p class="status"></p>
                                <input id="username" type="text" name="username" placeholder="<?php esc_attr_e('登录账号') ?>">
                                <input id="password" type="password" name="password" placeholder="<?php esc_attr_e('登录密码') ?>">
                                <div class="forgotten_box">
                                    <a class="lost" href="<?php echo esc_url(wp_lostpassword_url()); ?>"><?php esc_attr_e('忘记密码?') ?></a>
                                </div>
                                <input class="submit_button" type="submit" value="登录" name="submit">
                                <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
                            </form>
                            <div class="ajax_login_overlay"></div>
                            <?php if (is_user_logged_in()):?>
                                <a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>"><?php esc_attr_e('登出') ?></a>
                            <?php else: ?>
                                <a class="login_button" id="show_login" href="#"><?php esc_attr_e('登录') ?></a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

添加样式:

/*------------------------ AJAX login -------------------------*/
.top_bar{
    text-align: right;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}

.top_bar .ajax_login{
    display: inline-block;
    margin-right: 10px;
}

.top_bar .ajax_login_overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.5);
    display: none;
    cursor: default;
    z-index: 101;
    transform: translateZ(1px);
}

#login{
    display: none;
    background-color: #FFFFFF;
    position: fixed;
    top: 50%;
    margin-top: -117px;
    z-index: 999;
    left: 50%;
    margin-left: -200px;
    cursor: default;
    padding: 0 0 20px 0;
}

#login h1{
    color: #fff;
    background: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    padding: 8px 20px;
    text-align: left;
    margin-bottom: 25px;
}

#login p.status{
    display: none;
    padding: 0 20px;
    margin-bottom: 12px;
}

#login input#username,
#login input#password{
    margin: 10px 20px;
    width: 400px;
    display: block;
    background: #f7f7f7;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #d1d1d1;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}

#login .forgotten_box{
    display: inline-block;
    padding: 3px 20px 0 20px;
}

#login .forgotten_box .lost{
    display: block;
    padding: 5px;
    padding-left: 0;
    margin-bottom: 0;
    -webkit-transition: all 180ms ease-in;
    -moz-transition: all 180ms ease-in;
    -o-transition: all 180ms ease-in;
    transition: all 180ms ease-in;
}

#login input.submit_button{
    padding: 15px;
    margin-right: 20px;
    float: right;
    cursor: pointer;
    -webkit-transition: all 180ms ease-in;
    -moz-transition: all 180ms ease-in;
    -o-transition: all 180ms ease-in;
    transition: all 180ms ease-in;
}

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

.top_bar .ajax_login .login_button{
    display: inline-block;
    color:  #0c0f0b;
    font-size: 12px;
    font-weight: 700;
    line-height: 30px;
    -webkit-transition: all 180ms ease-in;
    -moz-transition: all 180ms ease-in;
    -o-transition: all 180ms ease-in;
    transition: all 180ms ease-in;
}

.top_bar .ajax_login .login_button:hover{
    color: #d84949;
}

添加登录逻辑代码,在你的function.php添加以下代码:

/********* AJAX登录 ***********/
function ajax_login_init(){
    wp_enqueue_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login-script.js', array('jquery'),'',true );
    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => esc_html__('正在登录中...')
    ));
    //用户无权在AJAX中运行ajax_login()
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
//仅在用户未登录时才执行操作
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}
if (!function_exists('ajax_login')) {
    function ajax_login(){
        //首先检查nonce,如果失败,函数将会中断
        check_ajax_referer( 'ajax-login-nonce', 'security' );
        //检查Nonce,获取POST数据并签署用户
        $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'=> esc_html__('用户账号或者密码错误')));
        } else {
            echo json_encode(array('loggedin'=>true, 'message'=> esc_html__('登录成功,跳转中...')));
        }
        wp_die();
    }
}

根据上面的代码,在主题的目录下新建/js/ajax-login-script.js文件:

jQuery(document).ready(function($) {
    "use strict";
    //单击时显示登录对话框
    $('a#show_login').on('click', function(e){
        $('.ajax_login_overlay').fadeIn(500);
        $('form#login').fadeIn(500);
        e.preventDefault();
    });

    $('.ajax_login_overlay').on('click', function(e){
        $('form#login').fadeOut(500);
        $('.ajax_login_overlay').fadeOut(500);
        $('form#register_form').hide();
        $('.ajax_login .status').html('');
        $('#registration-error-message').html('');
        $('form#login').hide();
        $('form#register_form .field input').val('');
    });

    //在表单提交中执行AJAX登录
    $('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', //调用wp_ajax_nopriv_ajax登录
                'username': $('form#login #username').val(),
                '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();
    });

});

以上步骤满足基本需求了。

本博客所有内容采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可

转载文章请注明:WordPress新建Ajax表单 - https://iiong.com/wordpress-new-ajax-form.html

分类: 奇淫技巧

淮城一只猫

永远年轻,永远热泪盈眶

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00