非插件自定义wordpress后台登陆界面美化窗口

WordPress教程 8585

似乎没有多少人喜欢wordpress的默认后台登陆界面，自定义WP的登陆界面成了不少人迫切想做的事情，前面博客吧有推荐一款WordPress登陆界面美化插件wploginpro，通过简单的设置就可以更换WP后台登陆界面。这次的教程是通过代码自定义后台登陆页面样式，适合通过纯代码实现相关功能的博主，但需要有一定的css样式基础。

效果截图预览：

非插件自定义wordpress后台登陆界面美化窗口

教程步骤：

  • 在当前主题目录创建一个文件夹，命名为login；在login文件夹中创建一个css文件，命名为login.css；然后再创建一个文件夹，命名为images。
  • 把自定义登陆界面需要用到的图片保存到images文件夹（下面的附件有）；
  • 对创建的login.css文件进行编辑，添加以下css样式代码： 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    /*The CSS code By www.boke8.net*/
* {margin:0; padding:0;}
html {background:none;}
body.login {position:relative; background:#fff url('images/loginbg.png') left top repeat-x; font-family:Tahoma, Arial, sans-serif; min-width:960px; width:expression_r(document.body.clientWidth < 960? "960px":"auto");}
img {border:0;}
#login {width:960px; margin:0 auto;}
.login h1 a {margin:126px auto 0px; background:url(images/logo.gif) no-repeat; width:185px; height:62px;}
.login form {float:none; width:70%; border:none; margin:0; box-shadow:none; background:none; margin:40px auto 0; clear:both; padding:0; overflow:hidden;}
#login form p {float:left; display:inline;}
.login form .forgetmenot  {clear:both; padding-top:5px;}
.login label {float:left; padding:5px; display:inline; margin-left:40px; font-size:13px; color:#000; margin-right:10px;}
.login form .input {border:1px solid #D3D3D3; color:#555; padding:5px; font-size:12px; width:260px; margin:4px 0 0 0; background:none; box-shadow:none; height:28px; line-height:28px;}
.login form .forgetmenot label {color:#666;}
#login form p.submit {float:right; padding:3px 10px; }
#login form p.submit .button-primary{color:#fff; font-size:12px; border:1px solid #555; display:inline; margin-right:36px; background:url(images/rep1.png) repeat-x scroll 50% 50% transparent; box-shadow:none;}
.login #nav,#backtoblog {display:inline; width:45%; text-align:center; float:left;}
.login #nav a,.login #backtoblog a {text-decoration:none;}
.login .message {width:70%; text-align:center; margin:0 auto;}
#footer {clear:both; width:960px; margin:0 auto; padding-top:60px; color:#999; font-size:11px; font-family:Arial;}
#footer a {color:#999;}
#footer .copyright {width:70%; text-align:center; margin:0 auto;}
/*The CSS code By www.boke8.net*/
  • 在当前主题的functions.php文件添加以下代码调用自定义的css样式文件： 
    1
2
3
4
5

    //www.boke8.net
function custom_login() {   
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory'). '/login/login.css" />';
}  
add_action('login_head', 'custom_login');
  • 保存文件，刷新一下登陆界面即可。

教程扩展：

  • WordPress 更换后台登陆logo图标
  • WordPress 更改后台登陆界面logo链接url
  • 更改logo图片title，默认是“基于WordPress驱动”，添加以下代码到functions.php文件： 
    1
2
3
4

    function custom_headertitle ( $title ) {
	return '欢迎来到'.get_bloginfo('name');
}
add_filter('login_headertitle','custom_headertitle');
  • 更加额外信息，添加以下代码到functions.php文件： 
    1
2
3
4

    function custom_login_message () {
	echo '<div id="footer"><div class="copyright">'.__('欢迎来到敝站，会员请登陆！！').'</div></div>';
}
add_action('login_form','custom_login_message');

附件：wordpress-login-page.zip（适用于wordpress 3.7+版本测试）

  • 对于懒得动手的博主，可以直接下载附件（博客吧制作的登陆界面，效果看上面的截图），替换login/images/logo.gif图片，上传到当前主题的目录；
  • 然后在functions.php添加调用代码： 
    1

    include_once('login/login.php');
  • 保存文件即可，logo链接及title自动调用自己网站的信息。

精品推荐：