无需插件即可创建 WordPress 自定义登录页面

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

您有没有想过是否有办法使登录页面与您的网站设计保持一致?

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

我们今天包括了什么?

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

WordPress 默认登录页面

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

你每次这样做都会得到这个登录屏幕,不是吗?

ppwp-wordpress-default-login-page

如您所见,WordPress 登录页面包含以下元素:

  1. 默认背景
  2. WordPress 徽标
  3. 输入字段(用户名和密码)
  4. 记住我复选框
  5. 提交按钮
  6. 忘记密码链接
  7. 返回链接

如果您想用您的自定义页面替换此通用页面,比方说,出于品牌目的,该怎么办?

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

为什么要创建 WordPress 自定义登录页面?

首先,自定义登录页面带来更好的用户体验。如果您经营的是一家只有少数用户登录您网站的小型企业,您绝对可以使用 WordPress 默认登录页面。

但是,假设您的网站是一家在线商店,让客户通过无聊且无品牌的网关登录您的网站并不是一个好主意。

最佳做法是使登录页面与您的网站风格保持一致。

拥有 WordPress 自定义登录页面的另一个好处是增强您网站的安全性。通过更改默认的 WordPress 登录 URL,不受欢迎的用户无法轻松访问您的管理员登录页面。这有助于避免对您的站点进行不必要的攻击。

现在,让我们转到下一节,我们将指导您完成创建自己的登录页面的详细步骤。

自定义 WordPress 默认登录页面

您知道您可以用自己的徽标和链接替换 ​​WordPress 默认登录页面上的徽标和链接吗?

要替换 WordPress 徽标,只需将以下代码片段添加到您的(子)主题的 functions.php 文件中。

函数 ppwp_custom_login_logo() { ?>
    <样式类型="文本/CSS">
        #login h1 a, .login h1 a {
背景图片:网址(https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png);
        高度:100px
        宽度:300px
        背景大小:300px 100px
        背景重复:不重复
        填充底部:10px
        }
    </样式>
<?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 或代码片段插件中。

函数 redirect_login_page() {
    $login_url = home_url( '/login' );
    $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 文件中。

函数 error_handler() {
    $login_page = home_url( '/login' );
    全局$错误;
    $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;
    如果( $err_codes !== 0 ){
        echo display_error_message( $err_codes );
}
函数显示错误消息($err_code){
    // 无效的用户名。
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>错误</strong>:用户名无效。';
    }
    // 密码错误。
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = '<strong>错误</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>错误</strong>:用户名和密码为空。';
    }
返回$错误;
}

第 3 步:创建新页面并将创建的模板分配给自定义页面

现在,导航到管理仪表板下的“页面”部分并创建一个新页面。

在页面属性部分下的模板下拉菜单下,选择您创建的模板。

ppwp-create-custom-login-pages

保存页面。

现在您有了自己的登录页面。

您是否成功创建了自定义登录页面?

我们已引导您完成自定义管理员登录页面的详细步骤。

您可以在 WordPress 默认登录表单中更改徽标和关联的 URL。

或者,您可以通过创建新的页面模板来创建自己的 WordPress 自定义登录页面。虽然第二个解决方案一开始似乎需要编码知识,但通过我们清晰的分步指南,它非常容易。所以完全不用担心。

原文 https://passwordprotectwp.com/wordpress-custom-login-page/

订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论
阅读110次
0
希望看到您的想法,请您发表评论x