当前位置:秋叶网络博客 WP教程 ◊ WordPress前台异步ajax登录、注册功能的实现

WordPress前台异步ajax登录、注册功能的实现

作者:秋叶 发表时间:2015年4月16日

纯代码实现的,这就不用说了,发现有的网站也有前台自定义登录功能,但是不是ajax的,就是登录页面的代码是事先加载好了,然后通过js控制使它显示隐藏,为了一个小小的功能,完全不必要事先加载这么多代码,所以自己写了一个ajax登录、注册页面,只有点击了登录/注册才会加载登录注册的代码,并在前台暗箱显示出来,达到异步加载的目的,为了异步加载的速度,把登录和注册分开来加载,所以切换这两个功能也是异步的。
前台登录框
说是wordpress的功能,但是理论上适合任何网站的功能,只需要修改一下表单提交网址就行了。效果请看本站右上角的登录、注册。

首先新建两个php文件,把编码格式为设置成你网站的编码格式(如UTF-8),一个命名为login.php,另一个命名为register.php。

把以下代码扔到login.php中并保存上传到主题目录下:

<style>#win{-webkit-animation: bounce 1s .2s ease both;-moz-animation: bounce 1s .2s ease both;}#back{z-index:2;POSITION:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8);}</style>
<div id="win" style="display:block; POSITION:relative; margin: 0 auto;top:30%; width:400px; height:250px;max-width:100%; border:1px solid #888; background:rgb(18, 93, 151) url('http://img.mizuiren.com/lg2.jpg') no-repeat center; color: rgb(18, 126, 61);text-align: center;padding: 0px;box-shadow: rgba(0,0,0,.8) 0 0 8px;">
<div style="text-align:right;margin:8px;height:20px;"><a href="javascript:closeLogin();" style="color: #438856;cursor:pointer;height: 20px;display: block;float: right;">关闭</a></div>
<form name="loginform" id="loginform" action="/wp-login.php" method="post">
<p><div for="user_login">用户名&nbsp;&nbsp;<input type="text" name="log" id="user_login" size="20" style="height:20px;color:#A84343"" value="请输入用户名" onfocus="if (this.value == '请输入用户名') {this.value = '';}" onblur="if (this.value == '') {this.value = '请输入用户名';}"></div></p><p><div for="user_pass">密&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;<input type="password" name="pwd" id="user_pass" size="20" style="height:20px;color:#A84343" value=""></div></p>
<p class="forgetmenot"><div for="rememberme" style="margin:10px 0;padding: 0 0 0 15px;"><input name="rememberme" type="checkbox" id="rememberme" value="forever" checked> 记住登录信息&nbsp;|&nbsp;<a href="/wp-login.php?action=lostpassword">忘记密码?</a></div></p>
<p><input type="submit" name="wp-submit" id="wp-submit" style="width: 85px;height: 35px;margin: 0 0 0 60px;cursor:pointer;" value="登录"><span style="width: 85px;height: 35px;margin: 0 0 0 20px;cursor:pointer;" id="zuce">注册</span>
<input type="hidden" name="redirect_to" value="/">
<input type="hidden" name="testcookie" value="1"></p></form></div>
<script>
function openLogin(){
document.getElementById("win").style.display="";
document.getElementById("back").style.display="";}
function closeLogin(){
document.getElementById("win").style.display="none";
document.getElementById("back").style.display="none";}
$('#zuce').click(function(){$('#back').load('/wp-content/themes/QIUYE/register.php');document.getElementById("back").style.display="";});
</script>

再把一下代码扔到register.php当中并保存上传到主题目录下:

<style>#win{-webkit-animation: bounce 1s .2s ease both;-moz-animation: bounce 1s .2s ease both;}#back{z-index:2;POSITION:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8);}</style>
<div id="win" style="display:block; POSITION:relative; margin: 0 auto;top:30%; width:400px; height:250px;max-width:100%; border:1px solid #888; background:rgb(18, 93, 151) url('http://img.mizuiren.com/lg2.jpg') no-repeat center; color: rgb(18, 126, 61);text-align: center;padding: 0px;box-shadow: rgba(0,0,0,.8) 0 0 8px;">
<div style="text-align:right;margin:8px;height:20px;"><a href="javascript:closeLogin();" style="color: #438856;cursor:pointer;width: 30px;height: 20px;display: block;float: right;">关闭</a></div>
<form name="registerform" id="registerform" action="/wp-login.php?action=register" method="post" novalidate="">
<p><div for="user_login">用&nbsp;户&nbsp;名&nbsp;&nbsp;&nbsp;<input type="text" name="user_login" id="user_login" value="如:shazi" onfocus="if (this.value == '如:shazi') {this.value = '';}" onblur="if (this.value == '') {this.value = '如:shazi';}" style="height:20px;color:#A84343" size="20"></div></p><p><div for="user_email">电子邮件&nbsp;&nbsp;<input type="email" name="user_email" id="user_email" value="如:ggmme@qq.com" onfocus="if (this.value == '如:ggmme@qq.com') {this.value = '';}" onblur="if (this.value == '') {this.value = '如:ggmme@qq.com';}" style="height:20px;color:#A84343" size="20"></div></p><input type="hidden" name="redirect_to" value="">
<p class="forgetmenot">
<div for="rememberme" style="margin:10px 0;padding: 0 0 0 15px;padding-left: 70px;">密码将以电子邮件发送给你</div>
</p><p><input type="submit" name="wp-submit" id="wp-submit" style="width: 85px;height: 35px;margin: 0 0 0 60px;cursor:pointer;" value="注册"><span style="width: 85px;height: 35px;margin: 0 0 0 20px;cursor:pointer;" id="denglu">登录</span></p></form></div>
<script>
function openLogin(){
document.getElementById("win").style.display="";
document.getElementById("back").style.display="";
}function closeLogin(){
document.getElementById("win").style.display="none";
document.getElementById("back").style.display="none";
}$('#denglu').click(function(){$('#back').load('/wp-content/themes/QIUYE/login.php');document.getElementById("back").style.display="";});
</script>

最后在前台需要显示登录的地方加上以下代码:

<span class="user_logged"><a class="llogin">登录</a><span class="textline">&nbsp;</span><a class="zzuce">注册</a></span>

最最后在主题的公共js文件中加上以下的代码:

jQuery(document).ready(function($){
$('.llogin').click(function() {$('#back').load('/wp-content/themes/QIUYE/login.php');document.getElementById("back").style.display="";});
$('.zzuce').click(function() {$('#back').load('/wp-content/themes/QIUYE/register.php');document.getElementById("back").style.display="";});});

注意把红色部分改成你的主题文件夹名称。其它类型网站还需要修改蓝色部分,总之按照自身情况修改自己的url。

看似代码复杂繁多,其实它一点都不影响网站打开速度,因为它是ajax异步加载功能~不要被虚无的外壳所迷惑。

目录: WP教程 | 标签: , | 11278次阅读