自定义ajax脚本出粗哦,Wordpress自定义Ajax登录页面 – 十分钟课堂

演示视频：

主要步骤：

创建模板页：

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

global $user_ID;

if (!$user_ID) {

get_header();

?>

src="<?php echo get_option('siteurl'); ?>/etc/img/sign-in-loading.gif" alt="loading">

Hi, there.

get_footer();

} else {

echo 'window.location="' . site_url() . '/wp-admin/"';

}

创建新页“登录页面”

登录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中需要添加的代码

//账号登出后，重定向到登录页面

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效果图标文件: