如何自定義WordPress登陸頁面？

WordPress預設的登陸介面真的千年不變，許多WordPress的站長都想著將登陸介面做得更加個性化一些，下面這篇教程將會詳細講解如何實現WordPress登陸頁面個性化呢？

為什麼要做自定義WordPress登陸頁面？

我認為有三個原因：

1. 安全。 你的網站隨著發展流量越多，自然一些“異常的”流量也隨即降臨。 異常的流量指的是惡意指令碼和機器人，垃圾郵件傳送者以及各種使用者以惡意進入您的網站等流量。 自定義WordPress登入頁面在一定程度上可以使您的網站更安全。
2. 多使用者站點。 如果您的網站由多個人管理 – 無論是管理員還是作者/博主，都會發生多次登入。 提供自定義登入表單將使整個登陸過程更加輕鬆簡單。
3. 品牌。 預設的登入頁面不是不好，但中間有一個很大的WordPress Logo。 換掉預設的做一個屬於你自己品牌的登入頁面，是不是很酷。 如果您正在為客戶構建網站，這尤其有效。 為您的客戶提供一致的體驗肯定是他們會欣賞的。

如果上述任何其中一個對你吸引力，您應該考慮將WordPress登入頁面切換為自定義頁面。 這是如何做：

如何建立自定義的WordPress登入頁面？

有兩種方案：

• 手工定製,
• 藉助外掛.

兩種方式各有利弊。 手動方式使您可以更好地控制最終頁面的外觀。 外掛方式則簡單粗暴，特別是如果您沒有任何編碼知識時，你就必須藉助外掛。

下面我們將兩種方式都列出，任君選擇。

手動定製WordPress登陸頁面

雖然這需要你調整一些主題的原始檔，但這並不困難。 下面以官方主題Twenty Fifteen為例。

首先讓我們來建立 page.php 檔案和 content-page.php 檔案的副本。

將這些新副本分別重新命名為 page-login.php 和 content-login.php 。

開啟 page-login.php 並只更改下列行：

get_template_part( \'content\', \'page\' );

修改為：

get_template_part( \'content\', \'login\' );

現在，讓我們編輯 content-login.php 並在下面新增下列行：

這樣做可以確保WordPress自動呼叫 page-login.php 模板檔案。

如果您現在訪問新登陸頁面，它應該是長這樣的：

在這個階段，唯一要做的就是設定重定向以取消WordPress的預設登入頁面。 將下列行程式碼新增到 functions.php 檔案的末尾來實現：

/* Main redirection of the default login page */
function redirect_login_page() {
  $login_page  = home_url(\'/login/\');
  $page_viewed = basename($_SERVER[\'REQUEST_URI\']);

  if($page_viewed == "wp-login.php" && $_SERVER[\'REQUEST_METHOD\'] == \'GET\') {
    wp_redirect($login_page);
    exit;
  }
}
add_action(\'init\',\'redirect_login_page\');

/* Where to go if a login failed */
function custom_login_failed() {
  $login_page  = home_url(\'/login/\');
  wp_redirect($login_page . \'?login=failed\');
  exit;
}
add_action(\'wp_login_failed\', \'custom_login_failed\');

/* Where to go if any of the fields were empty */
function verify_user_pass($user, $username, $password) {
  $login_page  = home_url(\'/login/\');
  if($username == "" || $password == "") {
    wp_redirect($login_page . "?login=empty");
    exit;
  }
}
add_filter(\'authenticate\', \'verify_user_pass\', 1, 3);

/* What to do on logout */
function logout_redirect() {
  $login_page  = home_url(\'/login/\');
  wp_redirect($login_page . "?login=false");
  exit;
}
add_action(\'wp_logout\',\'logout_redirect\');

(Code snippets built based on: [1][2].)

現在，唯一可訪問的WordPress登入頁面是您建立的新登入頁面。 但如果你需要更美觀的WordPress自定義登陸頁面，你還需要對頁面的佈局和樣式進行一些調整，比如新增你自己的Logo，新增動態頁面背景等等。

使用外掛建立WordPress自定義登入頁面

這種方法有點不同，因為我們實際上修改了預設的登入頁面，而不是建立一個全新的登入頁面。

首先，我們將要使用的外掛是：Custom Login Page Customizer。

安裝並啟用後，只需轉到“外觀”>“Login Customizer”，即進入自定義登陸頁面設定介面。

這個外掛的選項非常簡單易用，如：

• 設定自定義Logo取代預設的WordPress Logo。
• 設定登入頁面的背景。
• 為表單設定背景。
• 調整表單的樣式和每個細節（字型，大小，顏色，欄位）。
• 安裝安全載入項以在表單中獲取額外的驗證碼欄位（非常適合防止垃圾郵件登入/殭屍程式）。

下面是使用該外掛生成一個自定義WordPress登陸頁面的示例，整個過程也就幾分鐘的事情，非常簡單：

另一個外掛選項

另一個值得推薦的WordPress自定義登入頁面外掛是： Login Designer。 相比Custom Login Page Customizer，此外掛更加傻瓜易用，使用該外掛定製WordPress登入頁面過程更加簡單和設計更加靈活。

Login Designer的易用性主要體現在將WordPress自定義登陸頁面的所有選項和工具都整合在WordPress主題外觀自定義中。 因此，如果您習慣使用WordPress自帶的主題自定義功能來更改主題選項，那麼這個外掛的使用你會很快上手的。

觀看下方外掛教程視訊：