整合wordpress和thinkphp的登录页面

我先要做一个在wp头部显示的一个登录框，如图：

这里用的是thinkphp 登录。

首先打开thinkphp的登录界面。不要去找thinkphp的模板。

模板是这样的：

[code]
<div class="userlogin">
<{ if $userinfo=="" || $userinfo.id == "" }>
<form action="/wp/wp-login.php" method="post" name="fLogin" id="ffLogin" onSubmit="return checkLogin();">
<table border="1" width="370">
<tr>
<td>Username</td><td><input type="text" name="log" id="sUsername" maxlength="30" style="width:150px;ime-mode:disabled;"></td>
</tr>
<tr>
<td>Password</td><td><input type="password" name="pwd" id="sPassword" maxlength="30" style="width:150px;ime-mode:disabled;"></td>
</tr>
<tr>
<td>Verify Code</td><td nowarp><input type="text" name="strVerifyCode" id="sVerifyCode" maxlength="4" style="width:50px;ime-mode:disabled;">
<a href="javascript:void(0);" onclick="changeVerify();">
<img src="__APP__/Public/verifyCode" id="verifyimg" style="vertical-align:middle;" border="0" alt="Get a new verify code"/>
</a></td>
</tr>
<tr>
<td><input type="checkbox" name="strKeepLogin" value="1">Remember me
<input type="hidden" name="redirect_to" value="/wp/" />
<input type="hidden" name="testcookie" value="1" />
</td>
<td align="center"><input type="submit" name="btnSubmit" value="Login" ></td>
</tr>
<tr>
<td> <a href="__APP__/User/register">Register</a> </td>
<td> <a href="__APP__/Public/forgotPassword">Forgot Password</a></td>
</tr>
</table>
</form>
<{ else }>
Hello <{$userinfo.nickname|default:$userinfo.username}>,you have logged in.
logon NO. <{$userinfo.logon_numb}>, and last logon <{$userinfo.last_logon_time|date_format:"%Y-%m-%d %H:%M:%S"}>.
You has <{$userinfo.last_balance_amt}>USD, and <{$userinfo.last_crown_amt}> game crowns.
<{ /if }>
</div>

if (sText == ‘success’) {
return true;
} else {
showError(‘Login Error’,sText);
return false;
}
}

//jquery easy slider start
$(document).ready(function(){
if ($(‘#sUsername’)!=null) $(‘#sUsername’).focus();
});
//–>
</script>
[/code]

打开登录界面后查看源文件：

得到代码：

[code]
<div class="userlogin">
<form action="/wp/wp-login.php" method="post" name="fLogin" id="ffLogin" onSubmit="return checkLogin();">
<table border="1" width="370">
<tr>
<td>Username</td><td><input type="text" name="log" id="sUsername" maxlength="30" style="width:150px;ime-mode:disabled;"></td>
</tr>

<tr>
<td>Password</td><td><input type="password" name="pwd" id="sPassword" maxlength="30" style="width:150px;ime-mode:disabled;"></td>
</tr>
<tr>
<td>Verify Code</td><td nowarp><input type="text" name="strVerifyCode" id="sVerifyCode" maxlength="4" style="width:50px;ime-mode:disabled;">
<a href="javascript:void(0);" onclick="changeVerify();">
<img src="/cityosweb/default.php/Public/verifyCode" id="verifyimg" style="vertical-align:middle;" border="0" alt="Get a new verify code"/>
</a></td>

</tr>
<tr>
<td><input type="checkbox" name="strKeepLogin" value="1">Remember me
<input type="hidden" name="redirect_to" value="/wp/" />
<input type="hidden" name="testcookie" value="1" />
</td>
<td align="center"><input type="submit" name="btnSubmit" value="Login" ></td>
</tr>
<tr>

<td> <a href="/cityosweb/default.php/User/register">Register</a> </td>
<td> <a href="/cityosweb/default.php/Public/forgotPassword">Forgot Password</a></td>
</tr>
</table>
<input type="hidden" name="__hash__" value="a1d2b736cc43bc4bf285ed310f423a8f" /></form>
</div>

if (sText == ‘success’) {
return true;
} else {
showError(‘Login Error’,sText);
return false;
}
}

//jquery easy slider start
$(document).ready(function(){
if ($(‘#sUsername’)!=null) $(‘#sUsername’).focus();
});
//–>
</script>
[/code]
把上面这窜放到wp模板里面

出现错误。点击验证码不能刷新。提交无反应。

修改js代码，确切的说是jquery代码

因为是和其他jquery代码冲突。所以我改成下面这样就可以用了！

[code lang=”js”]
<script language="javascript">
<!–
var thk=jQuery.noConflict();
function changeVerify() {
var sUrl = "/cityosweb/default.php/Public/verifyCode";
thk("#verifyimg").attr("src",sUrl+"/"+(new Date()).getTime());
}
function checkLogin() {
var fdata = "strUsername="+thk("#sUsername").val();
fdata += "&strPassword="+thk("#sPassword").val();
fdata += "&strVerifyCode="+thk("#sVerifyCode").val();
var sText = thk.ajax({
type:’post’,data:fdata,cache:false,async:false,url:’/cityosweb/default.php/Public/doLogin’,
success:function(sData) { }
}).responseText;

if (sText == ‘success’) {
return true;
} else {
showError(‘Login Error’,sText);
return false;
}
}

//jquery easy slider start
thk(document).ready(function(){
if (thk(‘#sUsername’)!=null) thk(‘#sUsername’).focus();
});
//–>
</script>

[/code]

还有一个小技巧就是，wp的一个函数应用：
[code]
<?php if (!is_user_logged_in() ) {?>

这里面就是你的登录代码了。

<?php }?>
[/code]

上面的意思就是，当登录之后不显示登录界面。OK啦。登录之后显示的界面就用：
[code]
<?php if (is_user_logged_in() ) {?>

要显示的代码

<?php }?>
[/code]

—————————————————————–此方法后来发现有bug做了下面修改————————————

这个方法我是复制固定的html登录框。忽略了很多动态的东西。比如

上面这窜是自动生成的代码。每次都会变，这是安全性的一个控件。

于是我改成了动态加载：

toplogin.load(‘/cityosweb/default.php/Index/login .wpm’,function(){});

用juqery的 load方法。加载登录url里面的.wpm div类

后来发现js被过滤了。于是我就先加载js加载html

方法如下

首先肯定先加载jquery库

[code lang=”js”]
<script>
var thk=jQuery.noConflict();
thk(document).ready(function() {
var toplogin = thk(".toplogin");
thk.getScript("/cityosweb/shanmaojs/login.js",function(){
toplogin.load(‘/cityosweb/default.php/Index/login .wpm’,function(){});
});
})
</script>
[/code]

注意这里的js要写在单独一个文件里面用getScript调用。好了

就先到这里了。