如何自定義 WordPress 登錄頁面

已發表: 2022-01-02

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

  • 您的用戶將使用默認的 WordPress 登錄屏幕進行註冊和登錄，因為 WordPress 不提供任何內置選項來添加您自己的徽標或更改整體外觀以匹配您網站上的任何自定義主題或品牌。
  • 這可能適用於小型網站。 但是，如果您正在運營一個商業網站或一個繁忙的在線社區，那麼您可能希望展示自己的品牌而不是 WordPress。

以下是您可以通過的兩種方式：

如有任何問題，您可以聯繫來自美國流行的WordPress 開發公司的專家。

讓我們繼續閱讀以下解決方案！

1. 使用現有的 WordPress 佈局。

  • 自定義現有的實際上很容易。
  • 如果只是更改徽標或為其提供完全不同的佈局，則可以從 login_enqueue_scripts 操作開始。
  • 在這裡，您可以決定是輸出一個普通的、簡單的 CSS 片段，還是提供指向完整 CSS 文件的鏈接。 您還可以將您選擇的任何 JavaScript 排入隊列，以便使用。
  • 在函數.php
 add_action('login_head', 'my_custom_login');
函數 my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' .get_bloginfo('stylesheet_directory') .'/your_login_styles.css" />';}
  • your_login_styles.css 是為自定義登錄頁面而創建的 css 文件的名稱。
  • 這裡要小心，確保您使用非常具體的選擇器，以確保您覆蓋基本樣式。
  • 默認情況下，徽標將任何人鏈接到地址：wordpress.org。 可以使用functions.php文件中的以下代碼將其更改為您的站點網址：
 add_filter('login_headerurl', 'my_login_logo_url');
函數 my_login_logo_url() {
返回 get_bloginfo('url');
}
add_filter('login_headertitle', 'my_login_logo_url_title');
函數 my_login_logo_url_title() {
返回“您的站點名稱和信息”；}

更改錯誤消息最方便的方法是在您的 functions.php 中使用以下代碼：

 add_filter('login_errors', 'login_error_override');
函數 login_error_override()
{
返回'錯誤的登錄信息。';
}

相關：WordPress 與 Adob​​e Business Catalyst：哪種 CMS 最適合開發？

2. 創建新佈局。

  • 首先，要創建登錄頁面的自定義頁面模板。
  • 為此，您可以選擇創建一個新的頁面模板並為其命名。 例如：頁面登錄.php。
  • 此後，從 WP Admin 創建一個新頁面。 設置永久鏈接以登錄。 因此，默認情況下，WordPress 將為此頁面採用 page-login.php 模板。
  • 在 page-login.php 頁面模板中保留 wp_login_form 標籤以顯示登錄表單

一家全球信息技術解決方案機構，為希望在線發展的企業提供新鮮、創意的數字服務。 專注於結果，我們利用我們的技術技能和行業洞察力來幫助您實現數字目標。 無論是通過交互式網頁設計降低您的跳出率，還是為您的網站帶來全新的流量和收入流。 <a href=”www.elsner.com/contact-us”>與我們聯繫</a>談談您的項目以開始……

  </p>
</div>
<div class="登錄表單">
<?php
$args = 數組(
'重定向' => home_url(),
'id_username' => '用戶',
'id_password' => 'pass',
);
?>
<?php wp_login_form( $args ); ?>
</div>
  • 可以根據您的個人要求製作 CSS。 登錄頁面已經在運行。
  • 我們可以嘗試登錄，如果成功，我們將重定向到上面重定向參數中指定的地址。 然而，有一些事情需要解決。
 add_action('init','redirect_login_page'); 

函數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);
    出口;
}
}

– 登錄後的登錄頁面可能會按預期運行。如果出現錯誤，例如提交無效的id和密碼組合，或提交空格，我們將被重定向到wp-login.php。 為了解決這個問題，你可以在你的functions.php中添加以下函數：

 add_action('wp_login_failed', 'login_failed');

函數登錄失敗（）{
$login_page = home_url('/login/');
wp_redirect( $login_page . '?login=failed' );
出口;
}
 add_filter( '認證', 'verify_username_password', 1, 3);

函數 verify_username_password( $user, $username, $password ) {
$login_page = home_url('/login/');
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "?login=empty" );
出口;
}
}

– 最後一個問題是，當我們退出站點時，我們也會被重定向到 wp-login.php。 因此，我們還需要在註銷時指定重定向 URL。

 add_action('wp_logout','logout_page');
函數 logout_page() {
$login_page = home_url('/login/');
wp_redirect( $login_page . "?login=false" );
出口;
}
  • 可以採取許多措施來改進登錄頁面，例如添加丟失的密碼鏈接、註冊鏈接，甚至是個性化的錯誤消息。 然而，在這個時刻，它現在可以很好地讓用戶登錄和註銷。 創建更高級的登錄頁面可能是一個很好的開始。

嗯是的！ 這就對了。
通過一些簡單的調整，您可以輕鬆地個性化您的登錄頁面，以匹配您網站的外觀和感覺。

許多主題設計師避免對登錄頁面進行樣式設置，因為他們認為沒有必要，尤其是當它超出 WordPress 主題設置時。

但是，當您創建客戶站點時，忽略了風格——尤其是品牌——登錄頁面可能會被證明是一個失去的機會，當有一個自定義主題時，它可能會破壞用戶的體驗。

另一個為您的網站打造品牌的機會，這也會在您的用戶心中留下持久的印象。