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

以上是完整的樣式表。