如何定制化一个WordPress博客登录界面?

下面的界面很多人都认识吧?对,就是WordPress的后台登录界面,最容易被人辨识的一个界面。

1459771133-2123-default-login-wordpress1

但同时,默认的WordPress登录界面并不一定是好的注意。有人就会问,为什么?

下面将会给你完整的答案:

为什么需要一个定制化WordPress博客登录界面?

有三个理由:

  1. 流量. 流量越多,垃圾流量也越多。这里的垃圾流量指的是脚本、爬虫、垃圾邮件和各式各样有不良企图的访客。定制化的WordPress博客登录界面在某种程度上算是一种保护。
  2. 多用户. 如果你的WordPress是由多用户进行管理-管理员或者作者/投稿人-多人同时登陆将发生。提供自定义的登录表单更好些。
  3. 品牌. 默认的登录界面其实已经非常不错,但大大的WordPress Logo,有时候看起来很不爽。如果你的WordPress博客拥有自己的品牌,换成自己的品牌logo不是更好吗?特别是,如果你的博客面对用户开放注册,做自己品牌的登录界面,还是非常有利的。

如果上述任一条件符合你,你应该考虑下是否为自己的WordPress换个登录界面了,具体教程如下:

如何创建定制化WordPress博客登录界面

我们有两种方式来创建定制化的WordPress登录界面:

  • 手动创建,
  • 插件生成.

两种方式都有其优点和缺点。手动方式让您更自由地控制最终页面的外观。插件的方式则是方便,不要求任何编码技能,但你必须按照插件的要求来做。
让我们盖上两个。

我们分别来看看,应该如何做?

手动创建定制化WordPress博客登录界面

尽管需要对主题的一些文件进行修改,但也不是很难的事情。下面以WordPress自带的主题“Twenty Fifteen”为例。

首先你要复制 page.php 文件和 content-page.php 文件。

然后分别命名为 page-login.php 和 content-login.php

打开 page-login.php

get_template_part( 'content', 'page' );

修改为:

get_template_part( 'content', 'login' );

跟着下来修改 content-login.php 增加一行 <?php the_content(); ?>:

<?php the_content(); ?>
<?php wp_login_form( array('redirect' => home_url()) ); ?>
<?php wp_link_pages( array( ...

注:在这个阶段,如果你希望,你可以执行一系列其他自定义的(如调整设计/布局,消除了侧栏),但这是非必要的。或者仅仅修改两行(代码),就能以最小的改动创建一个全新的WP登录界面。

下面,通过WordPress后台的“页面-新建页面”,创建一个页面命名为 “login”,同时确保固定链接为 “login” ,如下图所示:

1459771133-8148-login-page

这样做可以确保WordPress自动使用 page-login.php 模板文件。

如果你访问这个新页面,应该是这样的,如下图:

 

1459771133-8285-new-login-page

到这里,还要做一个非常重要的事情,设置重定向以代替WordPress默认的登录页面。你只需要在 functions.php 文件末增加下列代码:

/* Main redirection of the default login page */
function redirect_login_page() {
	$login_page  = home_url('/login/');
	$page_viewed = basename($_SERVER['REQUEST_URI']);

	if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
		wp_redirect($login_page);
		exit;
	}
}
add_action('init','redirect_login_page');

/* Where to go if a login failed */
function custom_login_failed() {
	$login_page  = home_url('/login/');
	wp_redirect($login_page . '?login=failed');
	exit;
}
add_action('wp_login_failed', 'custom_login_failed');

/* Where to go if any of the fields were empty */
function verify_user_pass($user, $username, $password) {
	$login_page  = home_url('/login/');
	if($username == "" || $password == "") {
		wp_redirect($login_page . "?login=empty");
		exit;
	}
}
add_filter('authenticate', 'verify_user_pass', 1, 3);

/* What to do on logout */
function logout_redirect() {
	$login_page  = home_url('/login/');
	wp_redirect($login_page . "?login=false");
	exit;
}
add_action('wp_logout','logout_redirect');

现在,登录页面将变成你新建的界面。访问是新创建的您。更重要的是,你现在可以随意对该页面进行修改,变成你希望的样子。

使用插件创建定制化WordPress博客登录界面

这种方法有点不同,因为它不是创建一个全新的登录页面,而是修改默认页面。

首先,我们需要安装一个插件—Custom Login Page Customizer.

 

1459771134-7236-Custom-Login-Page-Customizer

完成安装和激活后,访问你的WordPress博客后台找到Appearance(外观) > Login Customizer,进入自定义面板。

该插件的选项还是非常友好和便于使用,你可以实现:

  • 设置一个属于你自己的Logo,取代默认的WordPress Logo;
  • 设置登录界面的背景;
  • 设置表单的背景;
  • 调整窗体的样式和每个小细节(字体、大小、颜色、字段);
  • 安装一个安全插件,增加验证码字段(防止垃圾邮件登录/机器人)。

举个栗子,下面是使用该插件生成的一个WordPress博客登录界面(靓仔好多),只需要几分钟的事情:

1459771132-6311-login-demo

打赏 赞(0) 分享'
分享到...
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

标签