WordPress实现前台登录功能

前面文章介绍过在WordPress中添加前台注册功能了,下面我们接着来介绍在注册成功之后增加一个前台登录功能,具体步骤如下.

一、添加登录表单

1、首先在当前主题的目录下新建一个php文件,命名为page-login.php,然后将page.php中的所有代码复制到page-login.php中.

2、删除page-login.php开头的所有注释，即 /* 与 */ ,以及它们之间的所有内容；

3、搜索：the_content,可以查找到类似代码< ?php the_content(); ?>,将其替换成代码一(注意使用UTF-8编码保存).

如果你在page-login.php中找不到the_content,那么你可以查找:get_template_part,可找到类似代码:< ?php get_template_part( 'content', 'page' ); ?>,将content-page.php中的所有代码替换这部分代码即可。再用下面的代码替换其中的< ?php the_content(); ?>

1. < ?php the_content(); ?> 
2. < ?php if(!emptyempty($error)) { 
3. echo '<p class="mk-error">'.$error.''; 
4. } 
5. if (!is_user_logged_in()) { ?> 
6. <form name="loginform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="mk-login"> 
7.     <p> 
8.       <label for="log">用户名<br /> 
9.         <input type="text" name="log" id="log" class="input" value="<?php if(!empty($user_name)) echo $user_name; ?/>" size="20" /> 
10.       </label> 
11.     </p> 
12.     <p> 
13.       <label for="pwd">密码(至少6位)<br /> 
14.         <input id="pwd" class="input" type="password" size="25" value="" name="pwd" /> 
15.       </label> 
16.     </p> 
17.  
18.     <p class="forgetmenot"> 
19.       <label for="rememberme"> 
20.         <input name="rememberme" type="checkbox" id="rememberme" value="1" <?php checked( $rememberme ); ?/> /> 
21.         记住我 
22.       </label> 
23.     </p> 
24.  
25.     <p class="submit"> 
26.       <input type="hidden" name="redirect_to" value="<?php if(isset($_GET['r'])) echo $_GET['r']; ?/>" /> 
27.       <input type="hidden" name="mk_token" value="<?php echo $token; ?/>" />  //Vevb.com 
28.       <button class="button button-primary button-large" type="submit">登录</button> 
29.     </p> 
30. </form> 
31. < ?php } else { 
32. echo '<p class="mk-error">您已登录！（<a href="'.wp_logout_url().'" title="登出">登出？</a>）'; 
33. } ?> 

二、添加表单处理代码

在page-login.php开头处中,将第一个 < ?php 替换成代码二(注意使用UTF-8编码保存),代码二:

1. <?php 
2. /** 
3.  * Template Name: 前台登录 
4.  * 作者：MK 
5.  * 博客：http://www.Vevb.com/ 
6.  *   
7.  *  2015年4月6日 ： 
8.  *  首个版本 
9.  *   
10.  *  2015年4月6日 ： 
11.  *  防止刷新页面重复提交数据 
12.  */ 
13.  
14. if(!isset($_SESSION)) 
15.   session_start(); 
16.  
17. if( isset($_POST['mk_token']) && ($_POST['mk_token'] == $_SESSION['mk_token'])) { 
18.   $error = ''; 
19.   $secure_cookie = false; 
20.   $user_name = sanitize_user( $_POST['log'] ); 
21.   $user_password = $_POST['pwd']; 
22.   if ( emptyempty($user_name) || ! validate_username( $user_name ) ) { 
23.     $error .= '<strong>错误：请输入有效的用户名。<br />'; 
24.     $user_name = ''; 
25.   } 
26.  
27.   if( emptyempty($user_password) ) { 
28.     $error .= '<strong>错误</strong>：请输入密码。<br />'; 
29.   } 
30.  
31.   if($error == '') { 
32.     // If the user wants ssl but the session is not ssl, force a secure cookie. 
33.     if ( !emptyempty($user_name) && !force_ssl_admin() ) { 
34.       if ( $user = get_user_by('login', $user_name) ) { 
35.         if ( get_user_option('use_ssl', $user->ID) ) { 
36.           $secure_cookie = true; 
37.           force_ssl_admin(true); 
38.         } 
39.       } 
40.     } 
41.  
42.     if ( isset( $_GET['r'] ) ) { 
43.       $redirect_to = $_GET['r']; 
44.       // Redirect to https if user wants ssl 
45.       if ( $secure_cookie && false !== strpos($redirect_to, 'wp-admin') ) 
46.         $redirect_to = preg_replace('|^http://|', 'https://', $redirect_to); 
47.     } 
48.     else { 
49.       $redirect_to = admin_url(); 
50.     } 
51.  
52.     if ( !$secure_cookie && is_ssl() && force_ssl_login() && !force_ssl_admin() && ( 0 !== strpos($redirect_to, 'https') ) && ( 0 === strpos($redirect_to, 'http') ) ) 
53.       $secure_cookie = false; 
54.  
55.     $creds = array(); 
56.     $creds['user_login'] = $user_name; 
57.     $creds['user_password'] = $user_password; 
58.     $creds['remember'] = !emptyempty( $_POST['rememberme'] ); 
59.     $user = wp_signon( $creds, $secure_cookie ); 
60.     if ( is_wp_error($user) ) { 
61.       $error .= $user->get_error_message(); 
62.     } 
63.     else { 
64.       unset($_SESSION['mk_token']); 
65.       wp_safe_redirect($redirect_to); 
66.     } 
67.   } 
68.  
69.   unset($_SESSION['mk_token']); 
70. } 
71.  
72. $rememberme = !emptyempty( $_POST['rememberme'] ); 
73.  
74. $token = md5(uniqid(rand(), true)); 
75. $_SESSION['mk_token'] = $token; 
76. ?> 

最后进入WordPress管理后台 – 页面 – 创建页面，标题为登录(可以自己起名),内容填上登录说明等,右侧可以选择模板,选择 前台登录 即可,该页面即前台登录页面.

代码补充说明

1、如果想让用户登录后跳转到指定页面,可以在登录链接后面添加名为 r 的get参数,值为跳转的链接地址，如登录页面地址为http://www.mk.org/login,如果你想让用户登录后跳转到后台的文章列表页，可以把登录地址改成下面的地址再提供给用户即可:http://www.mk.org/login?r=http://www.mk.org/wp-admin/edit.php

2、如果想美化一下登录表单,可以在主题的style.css中添加以下代码:

1. <pre lang="php" line="1"> 
2. p.mk-error { 
3.   margin: 16px 0; 
4.   padding: 12px; 
5.   background-color: #ffebe8; 
6.   border: 1px solid #c00; 
7.   font-size: 12px; 
8.   line-height: 1.4em; 
9. } 
10. .mk-login label { 
11.   color: #777; 
12.   font-size: 14px; 
13.   cursor: pointer; 
14. } 
15. .mk-login .input { 
16.   margin: 0; 
17.   color: #555; 
18.   font-size: 24px; 
19.   padding: 3px; 
20.   border: 1px solid #e5e5e5; 
21.   background: #fbfbfb; 
22. }