如何構建定制的 WordPress 登錄頁面

啊，是的，WordPress 登錄頁面——WordPress 中最知名的頁面之一——不是嗎？

但與此同時，在您的 WordPress 網站上以默認形式擁有此頁面並不總是最好的主意。

為什麼？ - 你問。

這是答案：

為什麼需要定制的 WordPress 登錄頁面？

這個問題有三個方面：

1. 交通。 您獲得的流量越多，您獲得的直接結果就越“糟糕”的流量。 我所說的不良流量是指惡意腳本和機器人、垃圾郵件發送者以及各種懷著惡意訪問您網站的用戶。 自定義您的 WordPress 登錄頁面可以使您的網站更加安全。
2. 多用戶站點。 如果您的網站由多個人管理——無論是管理員還是作者/博主——將發生多次登錄。 提供自定義登錄表單將使整個過程更加愉快。
3. 品牌。 默認登錄頁面很好，但中間有一個大的 WordPress 標誌。 切換它並使登錄頁面看起來更像您自己的頁面可能是一個很好的品牌接觸。 如果您正在為客戶構建網站，這一點尤其有效。 為您的客戶提供一致的體驗肯定是他們會喜歡的。

如果上述任何一項聽起來對您來說很有吸引力，您應該考慮將您的登錄頁面切換到自定義頁面。 這是如何做：

如何創建定制的 WordPress 登錄頁面

您可以通過兩種主要方式進行操作：

• 手動方式，
• 插件方式。

兩種方式各有利弊。 手動方式使您可以更好地控制最終頁面的外觀。 插件方式更容易遵循，特別是如果您沒有任何編碼技能，但您必須確定插件允許您做什麼。

讓我們同時涵蓋兩者。

手動創建自定義登錄頁面

儘管這需要您調整一些主題的源文件，但這並不難。 我將在這裡使用二十五歲作為我的例子。

樂趣從創建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並在<?php the_content(); ?>正下方添加一行<?php the_content(); ?> . 像這樣：

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

筆記。 在這個階段，如果您願意，您可以執行一系列其他自定義（例如調整設計/佈局、刪除側邊欄），但這都是可選的。 如果您要使用新的 WordPress 登錄頁面採用極簡的方法，只需更改這兩行即可。

現在，讓我們在wp-admin中創建一個新頁面，並簡單地將其稱為“登錄”。 確保永久鏈接也是“登錄”：

這樣做將確保 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');

（基於：[1][2] 構建的代碼片段。）

現在，唯一可訪問的登錄頁面是您創建的新頁面。 這裡的好處是您可以通過 WordPress 的默認頁面編輯器自由編輯它（就像您編輯任何其他頁面一樣）。

使用插件創建自定義 WordPress 登錄頁面

這種方法的工作方式有點不同，因為我們實際上是在修改默認登錄頁面，而不是創建一個全新的登錄頁面。

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

安裝並激活後，只需轉到外觀 > 登錄定制器，您可以在其中啟動定制器面板。

該插件的選項非常好，它們允許您調整以下內容：

• 設置要顯示的徽標而不是默認的 WordPress 徽標。
• 為整個登錄頁面設置背景。
• 為表單本身設置背景。
• 調整表單的樣式和有關它的每一個小細節（字體、大小、顏色、字段）。
• 安裝安全插件以在表單中獲取額外的驗證碼字段（非常適合防止垃圾郵件登錄/機器人）。

例如，只需使用插件幾分鐘，我就得到了這個結果：

另一個插件選項

另一個值得一看的自定義登錄頁面插件是：登錄設計器。 該插件旨在使自定義 WordPress 登錄頁面變得超級容易，同時仍為您提供設計靈活性。

它實現易用性的一種方法是使定製過程變得熟悉。 所有選項和工具都直接集成到 WordPress 定制器中。 因此，如果您習慣於使用定制器來更改主題選項，您會感到賓至如歸。

查看此視頻以了解該插件的工作原理。

手動還是通過插件？

你選擇的方法是什麼？ 您更喜歡手動編寫代碼還是讓所有內容都由插件處理？ 隨意分享。