丽水企业网站开发:如何自定义WordPress登录页

丽水网站建设 | 2019-04-03

WordPress登录是WordPress管理中最常用的页面之一。虽然简单和干净,它是沉重的品牌WordPress。但是,大多数新用户和客户端不需要知道您的站点运行的底层软件。

如果您要将站点交给客户端,或者如果您正在运行一个大多数用户都将访问登录屏幕的成员站点,那么最好在页面中添加您自己的样式,使其更具吸引力,并使其更好地与您的站点对齐。您可以通过添加自己的徽标、更改表单和背景的排版和调色板以及在表单下面添加有用的链接来做到这一点。当正确定制时,登录页面可以成为用户的一个有用的入口点,欢迎他们访问您的站点和品牌。

幸运的是,WordPress使您能够使用少量代码定制大量的登录页面。丽水企业网站开发在本文中,我们将介绍如何使用主题文件中的几个WordPress钩子自定义登录屏幕,然后介绍一些可以帮助完成任务的插件。

在主题中自定义WordPress登录

丽水企业网站开发更改WordPress登录页面的最简单方法是将一些代码直接添加到活动主题中。这些代码中的大部分将驻留在Functions.php文件中。这是一个必需的文件,所以这里使用的任何代码都可以在任何主题中工作。我建议先在测试环境中进行这些更改,然后再将其移到您的活动站点。

要做的第一件事是打开主题的目录,并在根目录中创建一个名为登录。我们将使用这个文件夹保存我们将在整篇文章中使用的图像和CSS样式表。

接下来,打开Functions.php您选择的编辑器中的主题文件。这个文件包含额外的钩子、函数和过滤器,这些都是你的主题所必需的。它将脚本和样式添加到主题中,定义自定义选项,并将额外的后端功能捆绑在其中。我们将所有代码添加到该文件的底部。对此文件所做的任何编辑只对其所属的主题生效。如果稍后选择激活另一个主题,则必须将此代码迁移到新主题的Functions.php文件中。

更改登录标志

您可以对登录屏幕所做的最简单的更改之一是将表单顶部的默认WordPress徽标替换为您自己的,这样它就符合您网站的整体外观。

首先要做的是将您的徽标图像保存在您创建的登录文件夹中。此图像的默认大小是80像素x80像素。您的图像不一定要准确的大小,但要确保它是方形的,以便它符合尺寸。这也可以更改,但需要在本文后面提供一些额外的代码。我还建议保存一个透明的PNG文件,这样图像就可以在任何背景上工作。

只需将您的徽标图像保存为logo.png到您创建的登录目录。然后,在Functions.php文件的底部添加以下代码。

function my_loginlogo() {
  echo '<style type="text/css">
    h1 a {
      background-image: url(' . get_template_directory_uri() . '/login/logo.png) !important;
    }
  </style>';
}
add_action('login_head''my_loginlogo');

我们使用的是登录头这里的WordPress操作可以将少量CSS附加到登录屏幕的HTML的部分。从此,我们将H1标签的背景图像更改为我们自己的自定义徽标。确保在CSS中包含“!重要”标志,以便覆盖默认的徽标图像。

关闭登录窗体上方的默认WordPress徽标

添加此代码后,您将看到您自己的徽标出现在页面上,就在登录表单的正上方。到目前一切尚好。

更改Logo图像URL

默认情况下,此徽标图像仍然链接到“http://wordpress.org”。很有可能,你想把这个链接指向其他地方,或者指向一些有用的文档或者你自己的网站主页。

若要更改此链接,只需将几行代码添加到Functions.php文件的底部即可。

function my_loginURL() {
    return 'https://www.elegantthemes.com';
}
add_filter('login_headerurl''my_loginURL');

这一次,我们使用的是登录头url筛选以更改徽标图像的URL。确保将“https://www.elegantthemes.com”替换为您喜欢的URL。

更改此链接的标题标记可能也很有用,这样当用户悬停在链接上时,他们就会看到一个正确的名称。默认情况下,此工具提示显示“WordPress”。若要修改此工具提示,请添加此代码块。

function my_loginURLtext() {
    return 'Elegant Themes';
}
add_filter('login_headertitle''my_loginURLtext');

再次,将“优雅的主题”更改为您网站的名称。

添加标题标记将更改悬停时的值。

添加自定义样式表

登录屏幕看起来还不错,但是还有一些样式的更改还需要添加。一方面,标志仍然相当小。我也想改变颜色的背景和形式元素,以配合优雅的主题,品牌多一点。最后,表单的排版也可以稍加调整。

为了实现这一点,我们将添加一个新的CSS样式表来容纳我们想要应用到页面上的CSS样式,然后将它排队应用到登录页面。对于这个步骤,需要一些CSS的基本知识。

丽水企业网站开发在您创建的登录文件夹中添加一个名为登录样式。然后,在您选择的编辑器中打开该文件。您可以向该文件添加任何类型的CSS,但您需要符合WordPress生成的HTML标记。有关要挂在登录页面上的类和ID的完整列表,请访问WordPress法典。为了实现我想要的增强,我将把这段代码添加到我的CSS文件中。

/* Change background color and font family */
body {
  background#f8fafa;
  font-familyArial,Verdana,sans-serif;
}

/* Change Width and Height of Logo Image + Add Custom Image File */
.login h1 a {
  background-imageurl(logo.png);
  width213px;
  height97px;
  background-size213px 97px;
}

/* Add a few changes to the color and style of form itself */
.login label {
  color#454545;
  displayblock;
  margin-bottom1em;
  font-weightbold;
}

.login form .input {
  font-weightnormal;
}

.login #backtoblog a, .login #nav a {
  color#4da28f;
}

.wp-core-ui .button-primary {
  background#4da28f;
}

让我们稍微了解一下这些样式。首先,我在Body标签中添加了一个背景色和字体系列,以更改页面的一般排版和主背景。接下来,我在第一步将函数中的代码直接添加到样式表中,但附加了宽度、高度和背景大小的其他属性。这将改变徽标图像的高宽比,并使其在页面上更大。最后,我更改了登录表单本身的颜色和样式,以粗体显示“用户名”和“密码”字段,并更改页脚链接和按钮的颜色。

为了使这些更改生效,您需要使用登录队列脚本行动。返回到Functions.php文件并添加这个小块。

function my_logincustomCSSfile() {
    wp_enqueue_style('login-styles', get_template_directory_uri() . '/login/login_styles.css');
}
add_action('login_enqueue_scripts''my_logincustomCSSfile');

您还可以删除我的LOGIN标志函数,因为这段代码现在已经合并到样式表中。

如果您想深入挖掘,可以使用自定义CSS做更多的工作,但是已经有相当多的定制已经与我们站点的样式相匹配。

现在看起来更完整了

在窗体下添加自定义链接

丽水企业网站开发在登录表单下面,有两个链接。第一个是给丢失密码的用户,另一个是返回主站点的链接。如果您有公开注册,这里也将有一个注册链接。这些都足够有用,但我希望通过添加一个链接到优雅的主题博客以快速访问来为我的用户提供更多的价值。如果您正在为客户管理一个站点,这可能是一个很好的地方,将链接到文档或支持表单。

若要将链接附加到页脚,我们将使用登录页脚在函数s.php文件中执行操作。

function my_loginfooter() { ?>
    <p style="text-align: center; margin-top: 1em;">
    <a style="color: #4da28f; text-decoration: none;"href="https://www.elegantthemes.com/blog/">If you have any questions, visit our blog
        </a>
    </p>
<?php }
add_action('login_footer','my_loginfooter');

该链接将用户引导到优雅的主题博客,但请确保将URL和相应的文本更改为与用户相关的内容。我还添加了一些自定义样式来匹配页面的其余部分。

因此,只要稍加努力,您的登录页面就可以结合您的品牌风格,并为登录用户提供一些有用的信息。但最后一个技巧我想和你分享。

登录后重定向用户

默认情况下,用户在登录后被重定向到WordPress管理。但是,如果您有一个具有开放注册的站点,或者您希望客户被重定向到的特定区域,这可能不是您想要的行为。使用登录重定向过滤器,您可以重定向用户在您的网站上的任何地方后,他们登录。

function my_loginredrect( $redirect_to$request$user ) {
  if ( isset( $user->roles ) && is_array$user->roles ) ) {
    if( in_array('administrator'$user->roles)) {
      return admin_url();
    else {
      return site_url();
    }
  else {
      return site_url();
  }
}

add_filter('login_redirect''my_loginredrect', 10, 3);

这看起来可能有点棘手,但这只是因为我为重定向添加了一些条件。首先,函数检查用户的角色。如果用户登录是管理员,它们将被重定向到管理页面(admin_url(),与正常情况一样,否则,它们将被定向到站点的主页(site_url()。作为最后的预防措施,如果其他一切都失败了,那么用户也会被引导到主页。这两个URL可以更改为指向站点上的任何页面,方法之一是WordPress目录快捷方式或者硬编码链接。

有帮助的插件

上面概述的所有代码在您安装的任何主题上都是可重用的。反过来,一些聪明的开发人员已经创建了一些插件,这些插件可以为您完成繁重的任务,如果您不想自己编写代码的话。下面的插件都针对登录页面的不同元素,它们可能正是您所需要的。

自定义登录

自定义登录

自定义登录允许您在登录屏幕上的每个元素样式,一个。您可以上传主体和登录表单的自定义背景图像,或自定义徽标以替换默认的WordPress徽标。您还可以自定义背景、文本和链接的颜色。该插件还允许您向页面中注入自定义CSS、HTML和Javascript。

优步登录标志

优步登录标志

如果您只是想更改登录屏幕上的徽标,可以使用Uber Login Logo。它允许你上传任何图片通过它的设置页面,它交换为默认的WordPress徽标。请记住,只有标志是被替换的,你必须符合默认的尺寸。

天空登录重定向

天空登录重定向

如果您正在寻找一种不同的方式重定向用户后登录,天空登录重定向采取了一个有趣的方法。与其硬编码要重定向到的用户的URL,他们将被简单地带回到登录前正在浏览的页面。因此,如果用户正在阅读您的帖子,然后登录,他们将被立即带回到那篇文章。在所有无关的情况下,用户都被引导到主页。如果您有一个成员网站,这可能是您的用户最方便的流量。

去定制

修改您的登录屏幕是一个简单的方式,以品牌的WordPress管理,并使它更容易为您的最终用户。丽水企业网站开发使用它向客户端提供有用的链接,增强登录表单,或者只是稍微美化一下页面,以使用户更适应登录过程。


上一篇:丽水公司网站开发:最好的WordPress聊天插件及其使用原因下一篇:已经没有了