WordPress实现前台登录功能

日期: 标签:WordPress教程
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

之前我们已经介绍了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(); ?>

代码一

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

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/wordpress-frontend-login.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

98 条留言

点此留言
1 2 556
  1. 新手

    "那麼你可以查找:get_template_part,可找到類似代碼:<?php get_template_part( 'content', 'page' ); ?>,將content-page.php中的所有代碼替換這部分代碼即可。"

    請問這段畫的意思是有找到<?php get_template_part( 'content', 'page' ); ?>
    就把代碼一的全部代碼覆蓋過去嗎?

    我是這樣做
    之後新增頁面模板的地方也有前台註冊
    可是沒有跑出表單來好填寫,請大哥救救我!!!!!

    • 露兜

      @新手 再用下面的代码替换其中的<?php the_content(); ?>

  2. 峰尚博客 峰尚博客

    博主,您好。请问如何检测输入错误密码呢?

  3. 峰尚博客 峰尚博客

    谢谢露兜了。顺便说下,代码一少加了一个</p>

  4. hong

    运行中出现错误:

    在页面中嵌入此登录代码后,在Chrome下运行正常, 但是在Safari浏览器下,用户名和密码都正确也登录不了,界面无任何反应,也没有错误提示。
    然后用WP自带的登录页面登录一次,再回到这个自定义的登录页面,就可以正常登录了。但仍然出现Safari浏览器登录不了的问题,请帮看看原因?

    • 露兜

      @hong 此功能应该不会出现浏览器差异问题。你可以试试这个插件:WP User Frontend

  5. 阿凡 阿凡

    露兜博客,我爱死你了,但是直接替换<?php get_template_part( 'content', 'page' ); ?>代码会出错,我直接新建一个文件解决了这个问题!

  6. 龙笑天 龙笑天

    有木有前台忘记密码的表单啊?

  7. haguo haguo

    @露兜我试过按上述方法新建模板可以,但加载在主页模板中会报错,为什么呢可以ajax提交就更好了

    • 露兜

      @haguo 有快速登陆AJAX的插件,自己上网搜吧

  8. David

    其实 wp_safe_redirect() 函数应该紧跟着 exit() 才更正规而且更安全。
    http://codex.wordpress.org/Function_Reference/wp_safe_redirect

    Usage

    wp_safe_redirect() does not exit automatically and should almost always be followed by exit.

    <?php
    wp_safe_redirect( $location, $status );
    exit;
    ?>

  9. wordpress初学者

    不知道为什么,新开浏览器进入网站(或清空浏览器缓存)用这个登录功能,第一次总是没有效果,提交表单后还是原样没有任何变化,再次登录才能成功。

    • yegking yegking

      @wordpress初学者 我也遇到同样的问题了,在本地,,感觉应该是force_ssl_admin()的问题吧

      • 露兜

        @yegking 请把第二段代码放到第一段代码前面

  10. luoluo

    谢谢ludou,参考了你的方法,受益匪浅。有一个问题想请教,就是请问怎么样实现登出功能?

  11. 梦想与足迹

    大师好,我使用了你的登录、注册程序,绝大部分都很不错,只是登录总提示Warning: Cannot modify header information – headers already sent by (output started at D:\servers\apachewebsits\heiyancaifu\wp-content\themes\blackrock\header.php:130) in D:\servers\apachewebsits\heiyancaifu\wp-includes\pluggable.php on line 955

    在网上查了下,看到大部分是说空格问题和编码问题,我确认这两种情况都无问题,我通过删除登录页面的 get_header();问题解决,但样式全变了,如果要加样式还是需要使用 get_header();

    请大师帮忙,看看我这问题怎么解决,多谢了!

    • 露兜

      @梦想与足迹 那你看看header.php的130行是什么代码。
      不过登陆注册好像都改不到header.php?

  12. 狼佛

    我想问一下,wordpress支持session吗?

    • 露兜

      @狼佛 参考:https://www.ludou.org/set-a-cookie-in-wordpress.html

  13. Aerry

    添加到主题里了,然后在网址后面添加/login,结果跳到了默认登陆页面

    <?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>错误<>:请输入有效的用户名。<br />';
    $user_name = '';
    }

    if( empty($user_password) ) {
    $error .= '<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;
    get_header(); ?>

    <div id="primary">
    <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
    <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!– .entry-header –>

    <div class="entry-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">登录<tton>
    </p>
    </form>
    <?php } else {
    echo '<p class="ludou-error">您已登录!(<a href="'.wp_logout_url().'" title="登出">登出?</a>)</p>';
    } ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!– .entry-content –>
    <footer class="entry-meta">
    <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!– .entry-meta –>
    </article><!– #post-<?php the_ID(); ?> –>

    <?php comments_template( '', true ); ?>

    <?php endwhile; // end of the loop. ?>

    </div><!– #content –>
    </div><!– #primary –>

    <?php get_footer(); ?>

    • 露兜

      @Aerry 请认真看文章:
      最后进入WordPress管理后台 – 页面 – 创建页面,标题为登录(可以自己起名),内容填上登录说明等,右侧可以选择模板,选择 前台登录 即可。该页面即前台登录页面。

  14. 大大大大鹿眸

    我想请教下兜哥,我想在前台实现用户上传头像功能,该如何实现,不用插件

  15. 小麦

    不错

  16. Xurry Xurry

    我想请教下兜哥,注册登录后,如何将nav中的“注册”“登录”去掉,换成当前用户名。

    • 露兜

      @Xurry 用这个判断括起来即可

      if (!is_user_logged_in()) {
      ……
      }

      • Xurry Xurry

        @露兜 这个我知道,只是如何修改菜单栏的内容呢

        • 露兜

          @Xurry 参考文章:https://www.ludou.org/wordpress-show-different-menu-for-logged-in-users-and-users-not-logged-in.html

  17. 窗里窗外

    大神您好,可以在改良一下前台登录,添加验证码功能,防止恶意注册吗??

  18. 新手

    这个wpmu多站点可以吗?

1 2

发表留言