如何自定义 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 主题设置时。

但是，当您创建客户站点时，忽略了风格——尤其是品牌——登录页面可能会被证明是一个失去的机会，当有一个自定义主题时，它可能会破坏用户的体验。

另一个为您的网站打造品牌的机会，这也会在您的用户心中留下持久的印象。