如何自定義WordPress的登錄頁面（Logo/鏈接/文本）

本文目錄1方法概要2自定義Logo圖片3自定義Logo鏈接4自定義Logo提示信息(tltle)5自定義登錄框內容6自定義底部內容7自定義CSS8本文小結

出於個性化要求，你可能需要自定義WordPress的登錄頁面的顯示效果。貌似有不少這方面的WordPress外掛，但是我們完全沒有必要安裝外掛，隻需要簡單的添加一些代碼即可。

方法概要

通過WordPress內置的掛鉤(Hook)，在主題的 functions.php 添加一些簡單的代碼，即可完成自定義修改，所有的操作都不需要修改WordPress核心文件，即使升級WordPress版本，也不會丟失效果。

wpdaxue.com-201302344

註：下文提到的所有代碼，都是添加到主題的 funshions.php 文件的最後一個 ?> 的前面。

自定義Logo圖片

制作一個名為 login_logo.png 的圖片，放在主題下的images文件夾裡（也可以根據自己的實際修改，隻要下面的代碼引用的Logo地址正確即可）。

//自定義登錄頁面的LOGO圖片
function my_custom_login_logo() {
    echo '<style type="text/css">
        .login h1 a {
            background-image:url("這裡添加logo圖片網址") !important;
        height: 60px; //修改為圖片的高度
        width: 250px; //修改為圖標的寬度
        -webkit-background-size: 250px; //修改為圖標的寬度
        background-size: 250px; //修改為圖標的寬度
        }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

//自定義登錄頁面的LOGO圖片
function my_custom_login_logo() {
echo ‘<style type="text/css">
.login h1 a {
background-image:url("這裡添加logo圖片網址") !important;
height: 60px; //修改為圖片的高度
width: 250px; //修改為圖標的寬度
-webkit-background-size: 250px; //修改為圖標的寬度
background-size: 250px; //修改為圖標的寬度
}
</style>’;
}
add_action(‘login_head’, ‘my_custom_login_logo’);

自定義Logo鏈接

將Logo的鏈接改為網站首頁鏈接：

1 2	//自定義登錄頁面的LOGO鏈接為首頁鏈接 add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));

//自定義登錄頁面的LOGO鏈接為首頁鏈接
add_filter(‘login_headerurl’, create_function(false,"return get_bloginfo(‘url’);"));

將Logo的鏈接改為任意鏈接：

//自定義登錄界面LOGO鏈接為任意鏈接
function custom_loginlogo_url($url) {
	return 'https://www.wpdaxue.com'; //修改URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

//自定義登錄界面LOGO鏈接為任意鏈接
function custom_loginlogo_url($url) {
return ‘https://www.wpdaxue.com’; //修改URL地址
}
add_filter( ‘login_headerurl’, ‘custom_loginlogo_url’ );

自定義Logo提示信息(tltle)

自定義為網站名稱：

1 2	//自定義登錄頁面的LOGO提示為網站名稱 add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

//自定義登錄頁面的LOGO提示為網站名稱
add_filter(‘login_headertitle’, create_function(false,"return get_bloginfo(‘name’);"));

自定義為其他任何文本：

//自定義登錄頁面LOGO提示為任意文本
function custom_loginlogo_desc($url) {
    return 'WordPress大學'; //修改文本信息
}
add_filter( 'login_headertitle', 'custom_loginlogo_desc' );

//自定義登錄頁面LOGO提示為任意文本
function custom_loginlogo_desc($url) {
return ‘WordPress大學’; //修改文本信息
}
add_filter( ‘login_headertitle’, ‘custom_loginlogo_desc’ );

自定義登錄框內容

//在登錄框添加額外的信息
function custom_login_message() {
    echo '<p>歡迎來到'.get_bloginfo('name').'，請登錄後下載本站資源</p><br />';
}
add_action('login_form', 'custom_login_message');

//在登錄框添加額外的信息
function custom_login_message() {
echo ‘<p>歡迎來到’.get_bloginfo(‘name’).’，請登錄後下載本站資源</p><br />’;
}
add_action(‘login_form’, ‘custom_login_message’);

自定義底部內容

//自定義底部信息
function custom_html() {
    echo '<p style="text-align:center">© ' . get_bloginfo(url).'</p>';
}
add_action('login_footer', 'custom_html');

//自定義底部信息
function custom_html() {
echo ‘<p style="text-align:center">© ‘ . get_bloginfo(url).'</p>’;
}
add_action(‘login_footer’, ‘custom_html’);

自定義CSS

要更加靈活地修改登錄頁面的顯示樣式，建議添加一個自定義的CSS文件，然後查看登錄頁面的源代碼的html結構，撰寫自己的CSS樣式。你可以使用下面的代碼引入自己的CSS，註意修改代碼中的css地址，以下調用的是主題根目錄下的login_style.css：

//添加自定義CSS
function custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login_style.css" />';
}
add_action('login_head', 'custom_login');

//添加自定義CSS
function custom_login() {
echo ‘<link rel="stylesheet" type="text/css" href="’ . get_bloginfo(‘template_directory’) . ‘/login_style.css" />’;
}
add_action(‘login_head’, ‘custom_login’);

本文小結

通過WordPress的掛鉤(hook)，可以做很多自定義修改，不僅僅是登錄頁面哦。對於WordPress主題或外掛開發者來說，掌握WordPress的各種掛鉤，你就可以很自由地自定義WordPress啦！