如何轻松自定义WordPress登录页面

许都 336 2

Ø版本的WordPress的多年发展中,默认的登录屏幕设计没有改变,仍然是简单和干净是在不同屏幕尺寸的作品。但是,在为特定客户(特别是公司)构建网站时,如果您可以更改登录屏幕的颜色方案以及与网站主题相匹配的徽标,那会很好看,对吗?


好的,它可以轻松完成。关于WordPress的好处是后端的每个部分都可以通过使用php 函数进行自定义。

在今天的教程中,我将向您展示如何以您希望的方式自定义WordPress登录屏幕。首先,我们将更改徽标,然后更改配色方案和其他一些元素。让我们开始吧。

默认的WordPress登录屏幕

如何轻松自定义WordPress登录页面

我们要建立什么

如何轻松自定义WordPress登录页面

更改徽标

WordPress使用CSS来显示背景图像。它通常插在H1和锚标签之间。但是,对于本教程,我们将在二十四个WordPress默认主题中使用functions.php文件。

如何轻松自定义WordPress登录页面

首先,将您喜欢的徽标(png文件格式)放在图像文件夹中的二十四个WordPress默认主题目录中(对于本教程,我使用了custom-login-logo.png徽标)。请注意,徽标的最大尺寸应为80 x 80px; 但是,您也可以更改自定义CSS文件中的维度。

如何轻松自定义WordPress登录页面

接下来,打开二十四个WordPress默认主题里面的functions.php文件。我们将使用login_enqueue_scripts钩子将CSS插入我们的登录页面的头部以加载我们的首选徽标。在functions.php文件的最后一行之后插入以下代码,然后将首选徽标文件名放在目录路径中。

  1. function login_logo() { ?>
  2. 	<style type="text/css">
  3.     	body.login div#login h1 a {
  4.         	background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png);
  5.     	}
  6. 	</style>
  7. <?php }
  8. add_action( 'login_enqueue_scripts', 'login_logo' );

更改图标的链接

默认情况下,图标链接到WordPress.org网站。您还可以将此链接更改为首选图标,并将其重定向到您自己的网站。为此,请使用下面的挂钩并在登录图标挂钩后立即将其粘贴到functions.php中

  1. function login_logo_url() {
  2. 	return get_bloginfo( 'url' );
  3. }
  4. add_filter( 'login_headerurl', 'login_logo_url' );

更改登录屏幕的设计

要自定义默认WordPress登录屏幕的样式,我们需要添加登录页面的样式。为此,我们需要为我们自己的CSS文件使用钩子。这将覆盖默认登录屏幕的样式。

如何轻松自定义WordPress登录页面

首先,我们需要在二十四个WordPress默认主题的CSS文件夹中创建样式表(对于本教程,我将样式表命名为custom-login-styles.css),然后在functions.php文件中添加以下钩子。

  1. function login_custom_stylesheet() { ?>
  2. 	<link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?>" type="text/css" media="all" />
  3. <?php }
  4. add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' );

接下来,打开您在默认的二十四个WordPress主题的CSS文件夹下创建的CSS文件。我们首先使用以下代码自定义登录屏幕的背景颜色和字体。

  1. body.login {
  2. 	background-color: #3d3d3d;
  3. 	font-family: Helvetica;
  4. }

现在我们已经更改了登录屏幕的背景颜色和字体,让我们在登录表单的持有者上放置一个漂亮的灰色背景。

  1. .login form {
  2. 	background: #f3f3f3;
  3. }

接下来,为正常,焦点和悬停状态自定义表单文本框的外观。

  1. .login form .input,.login input[type=text],.login form input[type=checkbox] {
  2. 	background: #fff;
  3. 	border: 1px solid #b7b7b7;
  4.             	padding: 5px;
  5. }
  6. .login form .input:hover,.login form .input:focus,.login input[type=text]:hover,.login input[type=text]:focus,.login form input[type=checkbox]:hover,.login form input[type=checkbox]:focus {
  7. 	background: #fff;
  8. 	outline: none;
  9. }

然后,更改登录按钮的背景颜色,并在左侧和右侧给它一些填充。我还将字体大小设置为13px,使其看起来像一个平面按钮。

  1. body.login div#login form#loginform p.submit input#wp-submit {
  2. 	border-radius: 0;
  3. 	background: #ffab00;
  4. 	outline: none;
  5. 	border: none;
  6. 	padding: 0 25px;
  7. 	text-align: center;
  8. 	font-size: 13px;
  9. }

最后,让我们更改正常和悬停状态的链接文本(忘记密码返回登录链接),然后将两者都定位到屏幕中心。

  1. body.login div#login p#nav {
  2. 	margin: 20px auto;
  3. 	text-align: center;
  4. }
  5.  
  6. body.login div#login p#backtoblog {
  7. 	margin: 0 auto;
  8. 	text-align: center;
  9. }
  10. .login #nav a:hover,.login #backtoblog a:hover {
  11. 	color: #ffab00;
  12. }

最后的话

我们希望现在您可以看到WordPress的巨大优势以及使用它的可能性。我们同意,它可能不适合您想要构建的每个可能的项目,但对于大多数项目而言。欢迎在下方分享你的意见。

发表评论 取消回复
表情 图片 链接

  1. 紫苏 Lv 1

    测试mail

  2. 紫苏 Lv 1

    就这样直接扒了,

分享