WordPress 教程：改变登录 logo 及链接

诸位 WordPress 玩友们，是否想过改变你们的 WordPress 站点的登录 logo 及 logo 链接呢？，默认情况下：

1 、使用 WordPress.org 的 logo

2. 这个 logo 的链接是 http://WordPress.org/

对于要求比较严格的玩友们来说，这显然不能接受，可能会提出修改这个 logo 以及链接。怎么做呢？其实只需要两步，添加两个函数到 functions.php 内：

一、添加修改默认登录 logo 的函数：

function my_custom_login_logo() {
     echo '<style type="text/css">                                                                   
         h1 a { background-image:url('.get_stylesheet_directory_uri().'/images/login.png) !important
; height: 120px !important; width: 410px !important; margin-left: -40px;}                            
     </style>';
}
add_action('login_head', 'my_custom_login_logo');

用 photoshop（或你熟悉的图像软件） 设计一个你喜欢的 login.png 图像，上传到主题文件夹下的 images 目录即可。 height 是高度，width 是宽度。 margin-left 是左边距。

二、添加修改链接地址的函数

function the_url( $url ) {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'the_url' );

这样就把你 logo 地址链接到了你的网站。

三、扩展

其实你除了修改这些，你还可以进一步修改登录框的样式，首先需要定义一下样式路径并添加一个样式文件到你的主题目录下：

<pre>// custom login for theme
function childtheme_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/customlogin.css" />';
}

add_action('login_head', 'childtheme_custom_login');</pre>

现在你可以添加样式到你的 customlogin.css 文件内，可以参照下面的样式修改：

.login, body.login {
 background: url('.get_bloginfo('stylesheet_directory') . '/images/login-bg.jpg) no-repeat fixed center top #222!important;
 padding-top: 0 !important;
}

#login {
 width: 400px;
}

#loginform,#lostpasswordform,#registerform {
 background: #f4f4f4;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: 1px solid #fff;
 -webkit-box-shadow: 0px 2px 1px 0px #333;
 box-shadow: 0px 2px 1px 0px #333;
}

.login form .forgetmenot {
 float: none;
}

#login form p.submit {
 margin-top: 10px;
}

.login form .input {
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background: #e4e4e4;
 border: 1px solid #fff;
 -webkit-box-shadow: inset 0px 1px 1px 0px #999999;
 box-shadow: inset 0px 1px 1px 0px #999999;

}

.login .button-primary {
 float: none;
 width: 320px;
 padding: 10px 10px;
 border: 1px solid #298cba;
 background: #0688c0;
 background: -webkit-gradient(linear, left top, left bottom, from(#1daae6), to(#0688c0));
 background: -webkit-linear-gradient(top, #1daae6, #0688c0);
 background: -moz-linear-gradient(top, #1daae6, #0688c0);
 background: -ms-linear-gradient(top, #1daae6, #0688c0);
 background: -o-linear-gradient(top, #1daae6, #0688c0);
 background-image: -ms-linear-gradient(top, #1daae6 0%, #0688c0 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 color: #ffffff;
 text-transform:uppercase;
}

.login .message {
 border: 1px solid #003309;
 background: #309903;
 background: -webkit-gradient(linear, left top, left bottom, from(#27c703), to(#309903));
 background: -webkit-linear-gradient(top, #27c703, #309903);
 background: -moz-linear-gradient(top, #27c703, #309903);
 background: -ms-linear-gradient(top, #27c703, #309903);
 background: -o-linear-gradient(top, #27c703, #309903);
 background-image: -ms-linear-gradient(top, #27c703 0%, #309903 100%);
 padding: 10.5px 21px;
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 text-shadow: #1C6B00 0 1px 0;
 color: #ffffff;
 font-size: 14px;
}

#login_error {
 border: 1px solid #600302 !important;
 background: #d80906;
 background: -webkit-gradient(linear, left top, left bottom, from(#f32a26), to(#d80906));
 background: -webkit-linear-gradient(top, #f32a26, #d80906);
 background: -moz-linear-gradient(top, #f32a26, #d80906);
 background: -ms-linear-gradient(top, #f32a26, #d80906);
 background: -o-linear-gradient(top, #f32a26, #d80906);
 background-image: -ms-linear-gradient(top, #f32a26 0%, #d80906 100%);
 padding: 10.5px 21px;
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 color: #ffffff;
 font-size: 14px;
}

#login_error a {
 color: #fcff04;
}

.login h1 a {
 background-image: url('.get_bloginfo('stylesheet_directory') . '/images/login-logo.png) !important;
 width:400px
}

.login #nav {
 font-size:14px;
 text-transform:uppercase;
 font-weight:bold;
 text-align:center;

}

.login #backtoblog{
 text-align:center;

}

.login #nav a, .login #backtoblog a {
 color: #ffffff !important;
}

.login #nav a:hover, .login #backtoblog a:hover {
 color: #ffffff !important;
}

.login #nav, .login #backtoblog {
 text-shadow: 0 1px 0 #666666 !important;
}

以上是完整的样式表。