欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

整合wordpress和thinkphp的登录页面

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

 

 

这里用的是thinkphp 登录。

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

模板是这样的:

 

<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>

<script language="javascript">
<!--
function changeVerify() {
    var sUrl = "__APP__/Public/verifyCode";
    $("#verifyimg").attr("src",sUrl+"/"+(new Date()).getTime());
}
function checkLogin() {
    var fdata = "strUsername="+$("#sUsername").val();
    fdata += "&strPassword="+$("#sPassword").val();
    fdata += "&strVerifyCode="+$("#sVerifyCode").val();
    var sText = $.ajax({
        type:'post',data:fdata,cache:false,async:false,url:'__APP__/Public/doLogin',
        success:function(sData) { }
    }).responseText;

    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>

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

得到代码:

<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>

<script language="javascript">
<!--
function changeVerify() {
    var sUrl = "/cityosweb/default.php/Public/verifyCode";
    $("#verifyimg").attr("src",sUrl+"/"+(new Date()).getTime());
}
function checkLogin() {
    var fdata = "strUsername="+$("#sUsername").val();
    fdata += "&strPassword="+$("#sPassword").val();
    fdata += "&strVerifyCode="+$("#sVerifyCode").val();
    var sText = $.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
$(document).ready(function(){   
    if ($('#sUsername')!=null) $('#sUsername').focus();
}); 
//-->
</script>

把上面这窜放到wp模板里面

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

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

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

<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>

还有一个小技巧就是,wp的一个函数应用:

<?php if (!is_user_logged_in() ) {?>

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


<?php }?>

上面的意思就是,当登录之后不显示登录界面。OK啦。登录之后显示的界面就用:

<?php if (is_user_logged_in() ) {?>

要显示的代码


<?php }?>

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

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

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

于是我改成了动态加载:

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

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

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

方法如下

首先肯定先加载jquery

<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>

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

就先到这里了。

更多

本文固定链接: http://shanmao.me/web-system/wordpress/zheng-wordpress-thinkphp-de-deng-lu-ye-mian | 山猫的博客

该日志由 admin 于2011年12月30日发表在 wordpress 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 整合wordpress和thinkphp的登录页面 | 山猫的博客
关键字: , , ,