创建没有插件的WordPress自定义登录页面

已发表: 2022-09-01

您是否对 WordPress 默认登录页面感到厌烦？

你有没有想过是否有办法让登录页面与你的网站设计保持一致？

如果是，那么您来对地方了。在本文中，我们将指导您通过不同的方法来自定义您的登录页面，而无需任何插件。

我们今天包括了什么？

WordPress 默认登录页面
为什么要创建自定义登录页面？
自定义 WordPress 默认登录页面
- 自定义登录页面徽标
- 禁用 WordPress 登录页面语言切换器
创建新的自定义登录页面

WordPress 默认登录页面

默认情况下，您可以通过将 /login/、/admin/ 或 wp-login.php 添加到站点 URL 的末尾来访问 WordPress 登录页面。

每次这样做都会得到这个登录屏幕，不是吗？

PPWP Pro：WordPress 默认登录页面

如您所见，WordPress 登录页面包含以下元素：

默认背景
WordPress 徽标
输入字段（用户名和密码）
记住我复选框
提交按钮
丢失密码链接
返回链接

如果你想用你的自定义页面替换这个通用页面，比如说，为了品牌目的？

请继续阅读我们博客的结尾。会给你一些惊喜。

为什么要创建 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 自定义登录页面。虽然第二种解决方案一开始似乎需要编码知识，但使用我们清晰的分步指南非常容易。所以完全不用担心。

您是否已设法创建自定义登录页面？

您需要任何进一步的信息吗？

在下面的评论部分让我们知道！