WordPress教程

如何自定义WordPress登录页面?

阿里云

WordPress 自带的登录页面已经可以满足基础的用户登录功能,但是可能很多人会觉得这个页面并不是很美观,想自己定义一个用户登录页面,这个是没问题的,实现的思路如下:

一、创建用户登录自定义页面模板

也想出现在这里?联系我们
创客主机

在您的主题文件夹下创建一个 page-login.php(文件的名字可以根据你的需要来决定),然后把下面的代码放到这个文件最顶部,保存。

  1. <?php 
  2. /* 
  3. *Template Name: 登录 
  4. */
  5. ?>

二、在这个文件中根据你的需要去添加 html 来布局和设计这个页面,其中登录表单的位置,不要使用自己写的 html 来做,直接使用 WordPress 自带的登录表单函数,这个函数会自动在前台为您生成登录表单(WP 默认的登录表单),这个函数中的参数如下:

  1. $args = array(
  2.     'echo'           => true,
  3.     'remember'       => true,
  4.     'redirect'       => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
  5.     'form_id'        => 'loginform',
  6.     'id_username'    => 'user_login',
  7.     'id_password'    => 'user_pass',
  8.     'id_remember'    => 'rememberme',
  9.     'id_submit'      => 'wp-submit',
  10.     'label_username' => __( 'Username' ),
  11.     'label_password' => __( 'Password' ),
  12.     'label_remember' => __( 'Remember Me' ),
  13.     'label_log_in'   => __( 'Log In' ),
  14.     'value_username' => '',
  15.     'value_remember' => false
  16. );

我们可以通过设置参数来自定义相关内容。

三、然后在后台 – 页面 – 新建页面,新建名称为 login 的页面(名字也是根据您自己的需要,但是记住你创建这个页面时的页面别名),页面属性选择登录模板,到此我们就可以通过访问这个页面进行登录了。

四、通过上面的操作并不会用你自定义的这个登录页面替代 WordPress 默认的登录页面,如果您想使用这个自定义的登录页面来替代 WordPress 默认登陆页面,将下面的代码放到您的 functions.php 文件中。

  1. function mx_redirect_login_page() {
  2.     $login_page = home_url( '/login/' );
  3.     $page_viewed = basename($_SERVER['REQUEST_URI']);
  4.     if( $page_viewed == 'wp-login.php' && $_SERVER['REQUEST_METHOD'] == 'GET') {
  5.         wp_redirect($login_page);
  6.     exit;
  7.     }
  8. }
  9. add_action('init','mx_redirect_login_page');

注意:将$login_page 变量更改为您自己的登录页面。

五、同时我们还要将下面的代码放到您的 functions.php 文件中

  1. function mx_login_failed() {
  2.     $login_page = home_url( '/login/' );
  3.     wp_redirect( $login_page . '?login=failed' );
  4.     exit;
  5. }
  6. add_action( 'wp_login_failed', 'mx_login_failed' );
  7.  
  8. function verify_username_password( $user, $username, $password ) {
  9.     $login_page = home_url( '/login/' );
  10.     if( $username == "" || $password == "" ) {
  11.         wp_redirect( $login_page . "?login=empty" );
  12.         exit;
  13.     }
  14. }
  15. add_filter( 'authenticate', 'verify_username_password', 1, 3);
  16. function logout_page() {
  17.     $login_page = home_url( '/login/' );
  18.     wp_redirect( $login_page . "?login=false" );
  19.     exit;
  20. }
  21. add_action('wp_logout','logout_page');

六、最后,还需要将下面的代码添加到您自定义的登陆页面模板中

  1. $login = (isset($_GET['login']) ) ? $_GET['login'] : 0;

上面的代码将检查 login 变量是否包含值,否则将设置为 0。然后,我们将根据的值显示不同的通知消息$error,如下所示。

  1. if ( $login === "failed" ) {
  2.     echo '错误:用户名和/或密码无效!';
  3. } elseif ( $login === "empty" ) {
  4.     echo '错误:用户名和/或密码不能为空!';
  5. } elseif ( $login === "false" ) {
  6.     echo '您已登出!';
  7. }

如何自定义 WordPress 登录页面?

已有 350 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!