Customize WordPress Login Page – 如何客製化登錄頁面

2016-04-25

文章目錄

Customize WordPress Login Page

WordPress 的登錄頁面，應該說是最常被使用到的一個頁面了，長久以來這一個簡單乾淨的登錄頁面都秀著 “WordPress” 這個品牌logo。如果您專門為客戶打造的WordPress 網站，那麼建置一個專屬的登錄頁面加上客製化的式樣，有助於網站一致性的表現，這對於網站的建置將會大大的加分許多。所以這一篇文章跟大家來分享如何透過變更登錄頁面的LOGO，顯示文字，與連結網址，簡單又輕鬆的開始建置客製化的登錄頁面。

WordPress 登錄頁面

一般建置好的 WordPress 網站登錄頁面大概都如（圖一）所示，有一個大大的WordPress logo，文字顯示是”本站採用 WordPress 建置”，點選圖示後會開啟WordPress 正體中文網站。

（圖一）WordPress 網站登錄頁面

客製化登錄頁面

客製化完成後的登錄頁面，可以呈現自己設計的logo，顯示文字，連結到自己的網站等等變化（圖二），對於網站設計的一致性有很大的幫助，進一步增進客戶使用體驗感。

（圖二）WordPress 客製化登錄頁面

如何客製化登錄頁面

編輯子佈景主題的functions.php檔案，填入以下語法：

function my_loginlogo() {
  echo '<style type="text/css">
    h1 a {
      background-image: url(' . get_stylesheet_directory_uri() . '/images/logo.jpg) !important;
    }
  </style>';
}
add_action('login_head', 'my_loginlogo');

function my_loginURL() {
    return 'http://yourdomain.com';
}
add_filter('login_headerurl', 'my_loginURL');

function my_loginURLtext() {
    return 'Your Website Name';
}
add_filter('login_headertitle', 'my_loginURLtext');

function my_loginlogo() {

echo '<style type="text/css">

h1 a {

background-image: url(' . get_stylesheet_directory_uri() . '/images/logo.jpg) !important;

}

</style>';

}

add_action('login_head', 'my_loginlogo');

function my_loginURL() {

return 'http://yourdomain.com';

}

add_filter('login_headerurl', 'my_loginURL');

function my_loginURLtext() {

return 'Your Website Name';

}

add_filter('login_headertitle', 'my_loginURLtext');

/images/logo.jpg 請在子佈景主題資料夾下建置images資料夾，並上傳登錄頁面的logo圖檔（logo.jpg），建議不要小於80 x 80 pixels。
http://yourdomain.com 請換成自己WordPress網站網址，點選logo後會連到網站。
Your Website Name 請修改logo想要呈現的文字，例如網站名稱。
Customizing the Login Form 說明文件：https://codex.wordpress.org/Customizing_the_Login_Form

結論

實現WordPress客製化的目的，在於讓使用者有更好的使用體驗感，很高興這一個部分WordPress提供了很多很方便的客製化說明文件，有興趣的都可以在上面找到很多很棒的說明文件支援。所以不論是不是要為客戶打造專屬的登錄頁面，每一位WordPress使用者，也都可以透過客製化網頁的過程，找到WordPress網站建置的快樂與成就感。

文章標籤：

functions.php / Login Form / Login Logo / Login Page / logo / 佈景 / 佈景主題 / 子佈景 / 登錄