創建沒有插件的WordPress自定義登錄頁面

已發表: 2022-09-01

您是否對 WordPress 默認登錄頁面感到厭煩？

你有沒有想過是否有辦法讓登錄頁面與你的網站設計保持一致？

如果是，那麼您來對地方了。 在本文中，我們將指導您通過不同的方法來自定義您的登錄頁面，而無需任何插件。

我們今天包括了什麼？

  • WordPress 默認登錄頁面
  • 為什麼要創建自定義登錄頁面？
  • 自定義 WordPress 默認登錄頁面
    • 自定義登錄頁面徽標
    • 禁用 WordPress 登錄頁面語言切換器
  • 創建新的自定義登錄頁面

WordPress 默認登錄頁面

默認情況下，您可以通過將 /login/、/admin/ 或 wp-login.php 添加到站點 URL 的末尾來訪問 WordPress 登錄頁面。

每次這樣做都會得到這個登錄屏幕，不是嗎？

PPWP Pro：WordPress 默認登錄頁面

如您所見，WordPress 登錄頁麵包含以下元素：

  1. 默認背景
  2. WordPress 徽標
  3. 輸入字段（用戶名和密碼）
  4. 記住我複選框
  5. 提交按鈕
  6. 丟失密碼鏈接
  7. 返回鏈接

如果你想用你的自定義頁面替換這個通用頁面，比如說，為了品牌目的？

請繼續閱讀我們博客的結尾。 會給你一些驚喜。

為什麼要創建 WordPress 自定義登錄頁面？

首先，自定義登錄頁面帶來了更好的用戶體驗。 如果您經營的小型企業有幾個用戶登錄您的網​​站，您絕對可以使用 WordPress 默認登錄頁面。

但是，假設您的網站是一個在線商店，讓客戶通過無聊且非品牌化的網關登錄到您的網站並不是一個好主意。

最佳做法是使登錄頁面與您的網站樣式一致。

擁有 WordPress 自定義登錄頁面的另一個好處是增強您網站的安全性。 通過更改默認的 WordPress 登錄 URL，不受歡迎的用戶無法輕鬆訪問您的管理員登錄頁面。 這有助於避免對您的網站進行不必要的攻擊。

現在，讓我們轉到下一部分，我們將指導您完成創建自己的登錄頁面的詳細步驟。

自定義 WordPress 默認登錄頁面

您知道您可以將 WordPress 默認登錄頁面上的徽標和鏈接替換為您自己的嗎？

自定義登錄頁面徽標

要替換 WordPress 徽標，只需將以下代碼片段添加到您的（子）主題的 functions.php 文件中。

 功能 ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
背景圖片：網址（ https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png ）；
        高度： 100 像素；
        寬度： 300 像素；
        背景尺寸： 300px 100px ;
        背景重複：不重複；
        padding-bottom: 10px ;
        }
    </style>
<?php }
add_action('login_enqueue_scripts', 'ppwp_custom_login_logo');

此操作僅幫助您替換徽標。 單擊您的徽標時，您仍會被重定向到 WordPress 頁面。

如何將用戶重定向到您的網站？

使用以下代碼片段只是小菜一碟。

 功能 ppwp_custom_login_url() {
    返回 home_url();
}
add_filter('login_headerurl', 'ppwp_custom_login_url');
功能 ppwp_login_logo_url_redirect() {
    返回“ https://passwordprotectwp.com/ ”；
}
add_filter('login_headertitle', 'ppwp_login_logo_url_redirect');

不要忘記將站點 URL 替換為您站點的實際名稱。 您登錄屏幕上的自定義徽標現在指向您網站的主頁。

禁用 WordPress 登錄頁面語言切換器

WordPress 5.9 包含一項功能，供用戶在登錄您的網​​站時選擇語言。

當您運行多語言網站時，它會派上用場。 如果您的網站以單一語言提供，您可能希望禁用該功能以簡化您的登錄表單。

你怎麼能那樣做？

只需將以下代碼片段添加到您的（子）主題的 functions.php 文件或代碼片段插件。

 add_filter('login_display_language_dropdown', '__return_false');

創建一個新的 WordPress 自定義登錄頁面

如果您想做的不僅僅是更改徽標和鏈接怎麼辦？

WordPress 是否允許您創建自己的登錄頁面並將 WordPress 默認頁面替換為您的登錄頁面？

是的！ 你絕對可以！

只需按照以下步驟操作即可。 請注意，本指南需要一點編碼知識。 如果您不熟悉代碼，請改用插件。

請記住在開始之前備份您的網站。

步驟 1：創建新模板文件

為此，請轉到外觀 > 主題文件編輯器。

在template-parts 部分下，添加一個新的.php 文件並將其命名為您喜歡的名稱，例如custom-login-page.php。

首先，將此行添加到您的自定義模板文件中：

 <?php /* 模板名稱：自定義登錄頁面*/ ?>

此操作將使您創建的 PHP 文件成為頁面模板。 因此，您將在後端編輯頁面時看到模板名稱。

第 2 步：自定義您創建的模板文件

下一步是添加 PHP 代碼以創建完整的登錄表單。

添加登錄表單

<?php
/**
* 模板名稱：自定義登錄頁面
*/
get_header();
如果（！is_user_logged_in（））{
    $args = 數組
        'redirect' => admin_url(), // 重定向到管理儀表板。
        'form_id' => 'custom_loginform',
        'label_username' => __('用戶名: '),
        'label_password' => __('密碼： '),
        'label_remember' => __('記住我'),
        'label_log_in' => __('讓我登錄'),
         '記住' => 真的
    );
wp_login_form($args);
}
get_footer();

將 wp-login.php 重定向到自定義登錄頁面

您已成功創建自定義登錄頁面。 但是，用戶仍然可以通過在站點 URL 後輸入 wp-admin 或 wp-login.php 直接進入 WordPress 默認登錄頁面。

為避免這種情況發生，您需要將用戶從 WordPress 默認登錄 URL 重定向到您的自定義 URL。

為此，請將以下自定義代碼添加到您的（子）主題的 functions.php 或 Code Snippets 插件中。

 功能重定向登錄頁面（）{
    $login_url = home_url('/登錄');
    $url = basename($_SERVER['REQUEST_URI']); // 獲取請求的 URL
    isset（$_REQUEST['redirect_to']）？ ( $url = "wp-login.php" ): 0; // 如果用戶向 wp-admin 發送請求
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_url);
        出口;
    }
}
add_action('init','redirect_login_page');

登錄錯誤處理

創建自定義登錄頁面後，輸入正確登錄詳細信息的用戶將進入儀表板。 失敗的登錄請求將被重定向到 WordPress 默認請求。

要處理失敗的登錄嘗試，請將以下代碼添加到您的（子）主題的 functions.php 文件中。

 功能錯誤處理程序（）{
    $login_page = home_url('/登錄');
    全局$錯誤；
    $err_codes = $errors->get_error_codes(); // 獲取 WordPress 內置錯誤代碼
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect($login_page); // 讓用戶保持在同一頁面上
    出口;
}
add_filter('login_errors', 'error_handler');

接下來，將以下代碼添加到 custom_login_page.php。

 $err_codes = isset($_SESSION["err_codes"])? $_SESSION["err_codes"] : 0;
    if( $err_codes !== 0 ){
        回顯顯示錯誤消息（$err_codes）；
}
函數 display_error_message( $err_code ){
    // 無效的用戶名。
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>錯誤</strong>：用戶名無效。';
    }
    // 密碼錯誤。
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>：您輸入的密碼不正確。';
    }
    // 空的用戶名。
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>錯誤</strong>：用戶名字段為空。';
    }
    // 空密碼。
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = '<strong>錯誤</strong>：密碼字段為空。';
    }
    // 空的用戶名和空的密碼。
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>ERROR</strong>：用戶名和密碼為空。';
    }
返回$錯誤；
}

第 3 步：創建新頁面並將創建的模板分配給自定義頁面

現在，導航到管理儀表板下的頁面部分並創建一個新頁面。

在頁面屬性部分下的模板下拉列表中，選擇您創建的模板。

PPWP Pro：創建自定義登錄頁面

保存頁面。

現在您有了自己的登錄頁面。

您是否已成功創建自定義登錄頁面？

我們已引導您完成自定義管理員登錄頁面的詳細步驟。

您可以在 WordPress 默認登錄表單中更改徽標和關聯的 URL。

或者，您可以通過創建新頁面模板來創建自己的 WordPress 自定義登錄頁面。 雖然第二種解決方案一開始似乎需要編碼知識，但使用我們清晰的分步指南非常容易。 所以完全不用擔心。

您是否已設法創建自定義登錄頁面？

您需要任何進一步的信息嗎？

在下面的評論部分讓我們知道！