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(); ?>

代碼一

<?php the_content(); ?>
<?php if(!empty($error)) {
 echo '<p class="ludou-error">'.$error.'</p>';
}
if (!is_user_logged_in()) { ?>
<form name="loginform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-login">
    <p>
      <label for="log">用戶名<br />
        <input type="text" name="log" id="log" class="input" value="<?php if(!empty($user_name)) echo $user_name; ?>" size="20" />
      </label>
    </p>
    <p>
      <label for="pwd">密碼(至少6位)<br />
        <input id="pwd" class="input" type="password" size="25" value="" name="pwd" />
      </label>
    </p>
    
    <p class="forgetmenot">
      <label for="rememberme">
        <input name="rememberme" type="checkbox" id="rememberme" value="1" <?php checked( $rememberme ); ?> />
        記住我
      </label>
    </p>
    
    <p class="submit">
      <input type="hidden" name="redirect_to" value="<?php if(isset($_GET['r'])) echo $_GET['r']; ?>" />
      <input type="hidden" name="ludou_token" value="<?php echo $token; ?>" />
      <button class="button button-primary button-large" type="submit">登錄</button>
    </p>
</form>
<?php } else {
 echo '<p class="ludou-error">您已登錄！（<a href="'.wp_logout_url().'" title="登出">登出？</a>）</p>';
} ?>

二、添加表單處理代碼

在page-login.php開頭處中，將第一個 <?php 替換成代碼二（注意使用UTF-8編碼保存），代碼二：

<?php
/**
 * Template Name: 前台登錄
 * 作者：露兜
 * 博客：https://www.ludou.org/
 *  
 *  2013年5月6日 ：
 *  首個版本
 *  
 *  2013年5月21日 ：
 *  防止刷新頁面重復提交數據
 */
  
if(!isset($_SESSION))
  session_start();
  
if( isset($_POST['ludou_token']) && ($_POST['ludou_token'] == $_SESSION['ludou_token'])) {
  $error = '';
  $secure_cookie = false;
  $user_name = sanitize_user( $_POST['log'] );
  $user_password = $_POST['pwd'];
  if ( empty($user_name) || ! validate_username( $user_name ) ) {
    $error .= '<strong>錯誤</strong>：請輸入有效的用戶名。<br />';
    $user_name = '';
  }
  
  if( empty($user_password) ) {
    $error .= '<strong>錯誤</strong>：請輸入密碼。<br />';
  }
  
  if($error == '') {
    // If the user wants ssl but the session is not ssl, force a secure cookie.
    if ( !empty($user_name) && !force_ssl_admin() ) {
      if ( $user = get_user_by('login', $user_name) ) {
        if ( get_user_option('use_ssl', $user->ID) ) {
          $secure_cookie = true;
          force_ssl_admin(true);
        }
      }
    }
      
    if ( isset( $_GET['r'] ) ) {
      $redirect_to = $_GET['r'];
      // Redirect to https if user wants ssl
      if ( $secure_cookie && false !== strpos($redirect_to, 'wp-admin') )
        $redirect_to = preg_replace('|^http://|', 'https://', $redirect_to);
    }
    else {
      $redirect_to = admin_url();
    }
    
    if ( !$secure_cookie && is_ssl() && force_ssl_login() && !force_ssl_admin() && ( 0 !== strpos($redirect_to, 'https') ) && ( 0 === strpos($redirect_to, 'http') ) )
      $secure_cookie = false;
    
    $creds = array();
    $creds['user_login'] = $user_name;
    $creds['user_password'] = $user_password;
    $creds['remember'] = !empty( $_POST['rememberme'] );
    $user = wp_signon( $creds, $secure_cookie );
    if ( is_wp_error($user) ) {
      $error .= $user->get_error_message();
    }
    else {
      unset($_SESSION['ludou_token']);
      wp_safe_redirect($redirect_to);
    }
  }

  unset($_SESSION['ludou_token']);
}

$rememberme = !empty( $_POST['rememberme'] );
  
$token = md5(uniqid(rand(), true));
$_SESSION['ludou_token'] = $token;

最后進入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

-- 完 --