wordpress技巧:改变登录logo及链接

2012/09/22

诸位wordpress玩友们,是否想过改变你们的wordpress站点的登录logo及logo链接呢?,默认情况下:

1、使用wordpress.org的logo

wordpress登录logo

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

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

[php]
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’);
[/php]

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

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

[php]
function the_url( $url ) {
return get_bloginfo( ‘url’ );
}
add_filter( ‘login_headerurl’, ‘the_url’ );
[/php]

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

三、扩展

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

[php]
<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>
[/php]

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

[php]

.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;
}

[/php]

以上是完整的样式表。

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注