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(!empty($error)) {
 3  echo '<p class="ludou-error">'.$error.'</p>';
 4 }
 5 if (!is_user_logged_in()) { ?>
 6 <form name="loginform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-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="ludou_token" value="<?php echo $token; ?>" />
28       <button class="button button-primary button-large" type="submit">登录</button>
29     </p>
30 </form>
31 <?php } else {
32  echo '<p class="ludou-error">您已登录！（<a href="'.wp_logout_url().'" title="登出">登出？</a>）</p>';
33 } ?>

View Code

二、添加表单处理代码

在page-login.php开头处中，将第一个 <?php 替换成代码二（注意使用UTF-8编码保存），代码二：

 1 <?php
 2 /**
 3  * Template Name: 前台登录
 4  * 作者：露兜
 5  * 博客：https://www.ludou.org/
 6  *  
 7  *  2013年5月6日 ：
 8  *  首个版本
 9  *  
10  *  2013年5月21日 ：
11  *  防止刷新页面重复提交数据
12  */
13   
14 if(!isset($_SESSION))
15   session_start();
16   
17 if( isset($_POST['ludou_token']) && ($_POST['ludou_token'] == $_SESSION['ludou_token'])) {
18   $error = '';
19   $secure_cookie = false;
20   $user_name = sanitize_user( $_POST['log'] );
21   $user_password = $_POST['pwd'];
22   if ( empty($user_name) || ! validate_username( $user_name ) ) {
23     $error .= '<strong>错误</strong>：请输入有效的用户名。<br />';
24     $user_name = '';
25   }
26   
27   if( empty($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 ( !empty($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'] = !empty( $_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['ludou_token']);
65       wp_safe_redirect($redirect_to);
66     }
67   }
68 
69   unset($_SESSION['ludou_token']);
70 }
71 
72 $rememberme = !empty( $_POST['rememberme'] );
73   
74 $token = md5(uniqid(rand(), true));
75 $_SESSION['ludou_token'] = $token;

View Code

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

代码补充说明

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

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

p.ludou-error {
  margin: 16px 0;
  padding: 12px;
  background-color: #ffebe8;
  border: 1px solid #c00;
  font-size: 12px;
  line-height: 1.4em;
}
.ludou-login label {
  color: #777;
  font-size: 14px;
  cursor: pointer;
}
.ludou-login .input {
  margin: 0;
  color: #555;
  font-size: 24px;
  padding: 3px;
  border: 1px solid #e5e5e5;
  background: #fbfbfb;
}

参考文章

Function Reference/validate username
Function Reference/wp signon
Function Reference/wp safe redirect

-- 完 --