演示视频：

主要步骤：

创建模板页：

在主题目录下创建模板页面page-sing-in.php,页面里的代码：

<?php
global $user_ID;
if (!$user_ID) {
    get_header();
    ?>
<div class="signin-page">
    <div class="login_overlay"></div>
    <form id="login" action="login" method="post" autocomplete="off">
        <div class="signin-panel">
            <p class="status login-error-notice"><span></span><img
                    src="<?php echo get_option('siteurl'); ?>/etc/img/sign-in-loading.gif" alt="loading"></p>
            <div class="panel-title">Hi, there.</div>
            <div class="user-name">
                <input autocomplete="off" type="text" id="username" name="username" placeholder="Username/Email">
            </div>
            <div class="user-password">
                <input autocomplete="off" type="password" id="password" name="password" placeholder="Password">
            </div>
            <div class="submit-btn">
                <input type="submit" value="Sign In" name="usersubmit">
            </div>
        </div>
        <?php wp_nonce_field('ajax-login-nonce', 'security');?>
    </form>
</div>
<?php
get_footer();
} else {
    echo '<script>window.location="' . site_url() . '/wp-admin/"</script>';
}

创建新页“登录页面”

登录wordpress后台，创建新的页面，页面标题可以是“登录页面”，重要的是页面别名为sign-in。这样该页面才能自动使用上面创建的页面模板。

编写相关样式

@import url('https://fonts.googleapis.com/css?family=DM+Serif+Text:400i&display=swap');

.signin-page {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-bottom: 1.5em;

    @media (max-width:450px) {
        font-size: 16px;
    }

    font-family: 'DM Serif Text',
    serif;
    font-weight: 400;
    font-style: italic;

    .login-error-notice {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        color: #333333;
        font-size: 1em;
        white-space: nowrap;

        span {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 1.2;
            background-color: #fff;
            opacity: 0;
            z-index: 2;
        }

        padding: 0.6em 1em;
        z-index: 10;

        &.error {
            //color: #ca212a;
            color: #333333;
        }

        &.success {
            color: #18af64;
        }

        img {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            display: block;
        }
    }


    .signin-panel {
        width: 280px;
        height: auto;
        background-color: #fff;
        padding: 30px 30px 20px;
        transform: translateY(10px);
        opacity: 0;
        transition-duration: 0.6s;
        transition-timing-function: cubic-bezier(.43, 1.04, .57, 1);


        .panel-title {
            font-size: 2.5em;
            font-style: italic;
            text-align: center;
            text-indent: 0.25em;
            user-select: none;
            margin: 0;
        }

        overflow: hidden;
        font-size: 1em;

        &>div {
            width: 100%;
            margin: 0.6em 0;
        }

        input {
            width: 100%;
            height: 2.2em;
            line-height: 2.2em;
            display: block;
            margin: 0;
            padding: 0;
            color: #333333;
            user-select: none;

            &[type=text],
            &[type=password] {
                background-color: #ffffff;
                border: 0px solid #e9e9e9 !important;
                border-bottom: 1px solid #333333 !important;
                color: #333333;
                font-style: italic;

                &::placeholder {
                    color: #333333;
                    opacity: 1;
                    font-style: italic;
                }

                &::-ms-input-placeholder {
                    color: #333333;
                    font-style: italic;
                }

                &::-ms-input-placeholder {
                    color: #333333;
                    font-style: italic;
                }

                text-align: center;
            }

            &[type=submit] {
                font-size: 1em;
                width: 6.6em;
                height: 2.4em;
                margin: auto;
                line-height: 2.2em;
                border: 1px solid #333333;
                border-radius: 2em;
                background-color: #333333;
                color: #ffffff;
                cursor: pointer;
                transition: 0.2s;

                &:hover {
                    color: #333333;
                    background-color: transparent;
                }

                &:active {
                    transform: translateY(1px);
                }
            }
        }

        .submit-btn {
            margin-top: 2em;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            box-shadow: 0 0 0 40px #ffffff inset !important;
            font-style: italic;
        }

        input:-webkit-autofill {
            -webkit-text-fill-color: #333333 !important;
            font-style: italic;
        }

    }

    &.do {
        .signin-panel {
            opacity: 1;
            transform: translateY(0px);
            transition-delay: 0.3s;
        }
    }
}

页面加载时，表单淡入效果的相关js脚本

function signInPanelShow() {
    if ($(".signin-page").length) {
        $(".signin-page").addClass("do");
    }
}

$(window).on("load", function () {
    signInPanelShow();
});

主题functions.php中需要添加的代码

<?php
//账号登出后，重定向到登录页面
function redirect_to_custom_login_page()
{
    wp_redirect(site_url() . '/sign-in');
    exit();
}
add_action('wp_logout', 'redirect_to_custom_login_page');
//从/admin/、/wp-admin/、/wp-login.php登录时自动跳转到登录页面
function wp_admin_redirect_to_sign_in_page()
{
    global $pagenow;
    if (($pagenow == 'wp-login.php') && ($_GET['action'] != "logout")) {
        wp_redirect(site_url() . '/sign-in');
        exit();
    }
}
add_action('init', 'wp_admin_redirect_to_sign_in_page');
//利用wordpress内置ajax功能
function ajax_login_init()
{
    //引入ajax相关的js文件
    wp_register_script('ajax-login-script', get_option('siteurl') . '/etc/js/ajax-login-script.js', array(), null, true);
    wp_enqueue_script('ajax-login-script');
    //将脚本进行本地化。例如，这里定义的变量及赋的值可以在其他js文件中使用。
    wp_localize_script('ajax-login-script', 'ajax_login_object', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'redirecturl' => home_url() . '/wp-admin',
    ));
    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' => __('Incorrect!')));
    } else {
        echo json_encode(array('loggedin' => true, 'message' => __('Success!')));
    }
    die();
}

上面定义的ajax-login-script.js文件中代码，用于结合ajax的请求结果做出不同动作

$(function () {
    if ($(".signin-page").length) {
        $('form#login').on('submit', function (e) {
            $('form#login p.status').show();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: ajax_login_object.ajaxurl,
                data: {
                    'action': 'ajaxlogin',
                    'username': $('form#login #username').val(),
                    'password': $('form#login #password').val(),
                    'security': $('form#login #security').val()
                },
                success: function (data) {
                    if (data.loggedin == true) {
                        document.location.href = ajax_login_object.redirecturl;
                    } else {
                        $('form#login p.status span').text(data.message).css({ "opacity": "1" });
                        $('form#login p.status').addClass("error");
                        setTimeout(function () {
                            $('form#login p.status').fadeOut(200);
                            setTimeout(function () {
                                $('form#login p.status').removeClass("error");
                                $('form#login p.status span').css({ "opacity": "0" });
                            }, 300);
                        }, 1000);
                    }
                }
            });
            e.preventDefault();
        });
    }
});

其他：

loading效果图标文件: