Home » 经验&资源分享 » 制作wordpress 重置密码页面

制作wordpress 重置密码页面

最近在做一个项目,用的是wordpress的系统,但是做了权限设置,部分注册用户只能访问前台,不能访问后台,于是便在前台做了一个重置密码的页面。

首先写好html的部分,代码如下:

<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">form</span> <span style="color: #ff0000;">method</span><span style="color: #0000ff;">="post"</span> <span style="color: #ff0000;">onSubmit</span><span style="color: #0000ff;">="return verify()"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum2" style="color: #606060;"> 2:</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">="revise_pass"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum3" style="color: #606060;"> 3:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">label</span> <span style="color: #ff0000;">for</span><span style="color: #0000ff;">="pass1"</span><span style="color: #0000ff;">&gt;</span>请输入新密码:<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">label</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum4" style="color: #606060;"> 4:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span> <span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width:100%;"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum5" style="color: #606060;"> 5:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="pass1"</span> <span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span> <span style="color: #ff0000;">value</span><span style="color: #0000ff;">=""</span> <span style="color: #ff0000;">tabindex</span><span style="color: #0000ff;">="20"</span> <span style="color: #ff0000;">size</span><span style="color: #0000ff;">="25"</span> <span style="color: #ff0000;">name</span><span style="color: #0000ff;">="pass1"</span> <span style="color: #0000ff;">&gt;</span>

<span id="lnum6" style="color: #606060;"> 6:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">="errors"</span> <span style="color: #ff0000;">style</span><span style="color: #0000ff;">="display:none;"</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="error1"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">&gt;</span>错误<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">&gt;</span>:<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="error1_child"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum7" style="color: #606060;"> 7:</span>         <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum8" style="color: #606060;"> 8:</span>     <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum9" style="color: #606060;"> 9:</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">="revise_pass"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum10" style="color: #606060;"> 10:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">label</span> <span style="color: #ff0000;">for</span><span style="color: #0000ff;">="pass2"</span><span style="color: #0000ff;">&gt;</span>请确认新密码:<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">label</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum11" style="color: #606060;"> 11:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span> <span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width:100%;"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum12" style="color: #606060;"> 12:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="pass2"</span> <span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span> <span style="color: #ff0000;">value</span><span style="color: #0000ff;">=""</span> <span style="color: #ff0000;">tabindex</span><span style="color: #0000ff;">="20"</span> <span style="color: #ff0000;">size</span><span style="color: #0000ff;">="25"</span> <span style="color: #ff0000;">name</span><span style="color: #0000ff;">="pass2"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum13" style="color: #606060;"> 13:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">="errors"</span> <span style="color: #ff0000;">style</span><span style="color: #0000ff;">="display:none;"</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="error2"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">&gt;</span>错误<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">&gt;</span>:<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="error2_child"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum14" style="color: #606060;"> 14:</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span> <span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width:100%;"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum15" style="color: #606060;"> 15:</span>     <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum16" style="color: #606060;"> 16:</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span> <span style="color: #ff0000;">class</span><span style="color: #0000ff;">="revise_pass"</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum17" style="color: #606060;"> 17:</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input</span> <span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span> <span style="color: #ff0000;">value</span><span style="color: #0000ff;">="提交"</span><span style="color: #0000ff;">/&gt;</span>

<span id="lnum18" style="color: #606060;"> 18:</span>     <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>

<span id="lnum19" style="color: #606060;"> 19:</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">form</span><span style="color: #0000ff;">&gt;</span>

然后设置对应的样式,代码如下:

<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #cc6633;">.errors</span>{

<span id="lnum2" style="color: #606060;"> 2:</span>     <span style="color: #0000ff;">background-color</span>: <span style="color: #006080;">#ffebe8;</span>

<span id="lnum3" style="color: #606060;"> 3:</span>     <span style="color: #0000ff;">border-color</span>: <span style="color: #006080;">#c00;</span>

<span id="lnum4" style="color: #606060;"> 4:</span>     <span style="color: #0000ff;">margin</span>: <span style="color: #006080;">0 0 16px 8px;</span>

<span id="lnum5" style="color: #606060;"> 5:</span>     <span style="color: #0000ff;">padding</span>: <span style="color: #006080;">8px 12px;</span>

<span id="lnum6" style="color: #606060;"> 6:</span>     <span style="color: #0000ff;">border</span>-radius: <span style="color: #006080;">3px;</span>

<span id="lnum7" style="color: #606060;"> 7:</span>     <span style="color: #0000ff;">border-width</span>: <span style="color: #006080;">1px;</span>

<span id="lnum8" style="color: #606060;"> 8:</span>     <span style="color: #0000ff;">border-style</span>: <span style="color: #006080;">solid;</span>

<span id="lnum9" style="color: #606060;"> 9:</span>     <span style="color: #0000ff;">font-size</span>:<span style="color: #006080;">12px;</span>

<span id="lnum10" style="color: #606060;"> 10:</span>     <span style="color: #0000ff;">color</span>: rgb(51, 51, 51);

<span id="lnum11" style="color: #606060;"> 11:</span>     <span style="color: #0000ff;">outline-color</span>: rgb(51, 51, 51);

<span id="lnum12" style="color: #606060;"> 12:</span>     <span style="color: #0000ff;">float</span>:<span style="color: #006080;">left;</span>

<span id="lnum13" style="color: #606060;"> 13:</span> }

<span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #cc6633;">.revise_pass</span>{

<span id="lnum15" style="color: #606060;"> 15:</span>     <span style="color: #0000ff;">float</span>:<span style="color: #006080;">left;</span>

<span id="lnum16" style="color: #606060;"> 16:</span>     <span style="color: #0000ff;">width</span>:<span style="color: #006080;">100%;</span>

<span id="lnum17" style="color: #606060;"> 17:</span> }

<span id="lnum18" style="color: #606060;"> 18:</span> <span style="color: #0000ff;">input</span>[type="text"],<span style="color: #0000ff;">input</span>[type="password"] {

<span id="lnum19" style="color: #606060;"> 19:</span>     <span style="color: #0000ff;">color</span>: rgb(85, 85, 85);

<span id="lnum20" style="color: #606060;"> 20:</span>     <span style="color: #0000ff;">font-weight</span>: <span style="color: #006080;">200;</span>

<span id="lnum21" style="color: #606060;"> 21:</span>     <span style="color: #0000ff;">font-size</span>: <span style="color: #006080;">24px;</span>

<span id="lnum22" style="color: #606060;"> 22:</span>     <span style="color: #0000ff;">line-height</span>: 1;

<span id="lnum23" style="color: #606060;"> 23:</span>     <span style="color: #0000ff;">padding</span>: <span style="color: #006080;">3px;</span>

<span id="lnum24" style="color: #606060;"> 24:</span>     <span style="color: #0000ff;">margin</span>-<span style="color: #0000ff;">right</span>: <span style="color: #006080;">6px;</span>

<span id="lnum25" style="color: #606060;"> 25:</span>     <span style="color: #0000ff;">margin</span>-<span style="color: #0000ff;">bottom</span>: <span style="color: #006080;">16px;</span>

<span id="lnum26" style="color: #606060;"> 26:</span>     <span style="color: #0000ff;">border</span>: 1px solid rgb(229, 229, 229);

<span id="lnum27" style="color: #606060;"> 27:</span>     <span style="color: #0000ff;">background</span>: none repeat scroll 0% 0% rgb(251, 251, 251);

<span id="lnum28" style="color: #606060;"> 28:</span>     <span style="color: #0000ff;">outline</span>: <span style="color: #006080;">0px none;</span>

<span id="lnum29" style="color: #606060;"> 29:</span>     box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2<span style="color: #006080;">) inset;</span>

<span id="lnum30" style="color: #606060;"> 30:</span>     <span style="color: #0000ff;">border</span>-radius:<span style="color: #006080;">3px;</span>

<span id="lnum31" style="color: #606060;"> 31:</span>     <span style="color: #0000ff;">float</span>:<span style="color: #006080;">left;</span>

<span id="lnum32" style="color: #606060;"> 32:</span> }

<span id="lnum33" style="color: #606060;"> 33:</span> <span style="color: #0000ff;">input</span>[type="text"]:focus, <span style="color: #0000ff;">input</span>[type="password"]:focus, <span style="color: #0000ff;">input</span>[type="search"]:focus,<span style="color: #0000ff;">select</span>:focus {

<span id="lnum34" style="color: #606060;"> 34:</span>     <span style="color: #0000ff;">border-color</span>:rgb(170, 170, 170);

<span id="lnum35" style="color: #606060;"> 35:</span> }

<span id="lnum36" style="color: #606060;"> 36:</span> <span style="color: #0000ff;">label</span>{

<span id="lnum37" style="color: #606060;"> 37:</span>     <span style="color: #0000ff;">height</span>:<span style="color: #006080;">37px;</span>

<span id="lnum38" style="color: #606060;"> 38:</span>     <span style="color: #0000ff;">line-height</span>:<span style="color: #006080;">37px;</span>

<span id="lnum39" style="color: #606060;"> 39:</span>     <span style="color: #0000ff;">display</span>:<span style="color: #006080;">block;</span>

<span id="lnum40" style="color: #606060;"> 40:</span> }

之后再用javascript对页面做一个验证,代码如下:

<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">var</span> pass1=document.getElementById(<span style="color: #006080;">"pass1"</span>);

<span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">var</span> pass2=document.getElementById(<span style="color: #006080;">"pass2"</span>);

<span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">var</span> error1=document.getElementById(<span style="color: #006080;">"error1"</span>);

<span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">var</span> error2=document.getElementById(<span style="color: #006080;">"error2"</span>);

<span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;">var</span> error1_child=document.getElementById(<span style="color: #006080;">"error1_child"</span>);

<span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">var</span> error2_child=document.getElementById(<span style="color: #006080;">"error2_child"</span>);

<span id="lnum7" style="color: #606060;"> 7:</span>

<span id="lnum8" style="color: #606060;"> 8:</span> pass1.onblur=<span style="color: #0000ff;">function</span>(){

<span id="lnum9" style="color: #606060;"> 9:</span>     <span style="color: #0000ff;">if</span>(pass1.value.length==0){

<span id="lnum10" style="color: #606060;"> 10:</span>         error1.style.display=<span style="color: #006080;">"block"</span>;

<span id="lnum11" style="color: #606060;"> 11:</span>         error1_child.innerHTML=<span style="color: #006080;">"密码不能为空"</span>;

<span id="lnum12" style="color: #606060;"> 12:</span>     }<span style="color: #0000ff;">else</span>{

<span id="lnum13" style="color: #606060;"> 13:</span>         <span style="color: #0000ff;">if</span>(pass1.value.length&lt;6){

<span id="lnum14" style="color: #606060;"> 14:</span>             error1.style.display=<span style="color: #006080;">"block"</span>;

<span id="lnum15" style="color: #606060;"> 15:</span>             error1_child.innerHTML=<span style="color: #006080;">"密码长度至少6位"</span>;

<span id="lnum16" style="color: #606060;"> 16:</span>         }<span style="color: #0000ff;">else</span>{

<span id="lnum17" style="color: #606060;"> 17:</span>             error1.style.display=<span style="color: #006080;">"none"</span>;

<span id="lnum18" style="color: #606060;"> 18:</span>         }

<span id="lnum19" style="color: #606060;"> 19:</span>     }

<span id="lnum20" style="color: #606060;"> 20:</span> }

<span id="lnum21" style="color: #606060;"> 21:</span> pass2.onblur=<span style="color: #0000ff;">function</span>(){

<span id="lnum22" style="color: #606060;"> 22:</span>     <span style="color: #0000ff;">if</span>(pass1.value!=pass2.value){

<span id="lnum23" style="color: #606060;"> 23:</span>         error2.style.display=<span style="color: #006080;">"block"</span>;

<span id="lnum24" style="color: #606060;"> 24:</span>         error2_child.innerHTML=<span style="color: #006080;">"两次输入的密码不一致"</span>;

<span id="lnum25" style="color: #606060;"> 25:</span>     }<span style="color: #0000ff;">else</span>{

<span id="lnum26" style="color: #606060;"> 26:</span>         error2.style.display=<span style="color: #006080;">"none"</span>;

<span id="lnum27" style="color: #606060;"> 27:</span>     }

<span id="lnum28" style="color: #606060;"> 28:</span> }

<span id="lnum29" style="color: #606060;"> 29:</span>

<span id="lnum30" style="color: #606060;"> 30:</span> <span style="color: #0000ff;">function</span> verify(){

<span id="lnum31" style="color: #606060;"> 31:</span>     <span style="color: #0000ff;">if</span>(pass1.value.length&gt;6&amp;&amp;pass1.value==pass2.value){

<span id="lnum32" style="color: #606060;"> 32:</span>         alert(<span style="color: #006080;">"密码修改成功"</span>);

<span id="lnum33" style="color: #606060;"> 33:</span>     }<span style="color: #0000ff;">else</span>{

<span id="lnum34" style="color: #606060;"> 34:</span>         alert(<span style="color: #006080;">"密码输入有误,请重新输入"</span>);

<span id="lnum35" style="color: #606060;"> 35:</span>         <span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span>;

<span id="lnum36" style="color: #606060;"> 36:</span>     }

<span id="lnum37" style="color: #606060;"> 37:</span> }

最后写上PHP的代码,实现修改密码的功能,两段代码分别放在页面的顶部和尾部

<span id="lnum1" style="color: #606060;"> 1:</span> global <span style="color: #006080;">$current_user;</span>

<span id="lnum2" style="color: #606060;"> 2:</span> global <span style="color: #006080;">$wpdb;</span>

<span id="lnum3" style="color: #606060;"> 3:</span> get_currentuserinfo();

<span id="lnum4" style="color: #606060;"> 4:</span> $<span style="color: #0000ff;">b</span>=$current_user-<span style="color: #006080;">&gt;</span><span style="color: #006080;">user_login;</span>

<span id="lnum1" style="color: #606060;"> 1:</span> $pass1=$_POST['pass1'];

<span id="lnum2" style="color: #606060;"> 2:</span> if($pass1){

<span id="lnum3" style="color: #606060;"> 3:</span>     $sql = "UPDATE ".$wpdb-<span style="color: #006080;">&gt;</span>users." SET user_pass = '"<span style="color: #cc6633;">.md5</span>($pass1)."' WHERE User_login = '".<span style="color: #006080;">$b."'";</span>

<span id="lnum4" style="color: #606060;"> 4:</span>     $<span style="color: #0000ff;">link</span> = $wpdb-<span style="color: #006080;">&gt;</span>query($sql);

<span id="lnum5" style="color: #606060;"> 5:</span> }

<span id="lnum6" style="color: #606060;"> 6:</span> exit();

这里我用了$wpdb这个wordpress函数进行数据库操作,当然用普通的sql语句可以做,不过据说用$wpdb更安全些。

Continue reading...
分享