自定义WordPress登录界面

是否有想过修改WordPress的登录页面？其实WordPress登录页面的自定义是非常容易的。通过这篇文章的代码，你就可以添加个性化的登录页面，而且这篇文章的自定义方法都是在主题文件里完成的，这样当更新WordPress版本时就不用担心这次更改会消失。

1 – 编辑Functions.php文件

先检查下当前主题是否有functions.php这个文件，如果有的话就直接将下面的代码粘贴到该文件的最下方。如果没有这个文件，只要用记事本新建一个空白的文件粘贴下面的代码并将它命名为functions.php

<?php  function custom_login() {   echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';}  add_action('login_head', 'custom_login');  ?>

2 –编辑主题文件

我们需要一个可以保存新CSS式样以及可能使用到图片的地方，考虑到这些东西并不是主站的组成部分，所以建议你新建个文件夹。

在主题文件夹里创建一个新的文件夹，并将它命名 为“custom-login“。

接着，在这个文件夹里创建一个新的样式文件并命名为 “custom-login.css”。

3 – 添加新的CSS规则

每次加载登录页面时，custom-login.css文件都会被加载，这意味着在此添加的任何css规则都将运用到登录页面。

如果需要添加新的图片，你可以将它们保存在custom-login文件夹里。

而如果你想要再次使用主题中的图片，你只要用下面的CSS规则就可以调用主题图片文件夹中的图片。(这样一来，浏览器就不要再次加载该图片，因为它已经对图片进行了缓存)。

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

一个简单的模板示例

下面就是我用来创建新的登录表单样式，非常简单也非常实用。我都有注释，欢迎大家在自己的网站上使用。

/* 自定义登录样式*/    
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}/* 页面背景，这个不能使用body标签 */ 
h1 a { /* 标题图片 ( "WordPress Logo")。记得根据实际图片尺寸更改高度和宽度 */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}  

body.login {border-top-color:#dff4fc;} /* 顶栏背景颜色*/
.login p#backtoblog a:link,
.login p#backtoblog a:visited {color:#17272d;} /* 顶栏链接效果*/
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* 顶栏翻转链接效果 */

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠