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

云柯 57 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文件的最后一行之后插入以下代码,然后将首选徽标文件名放在目录路径中。

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

更改图标的链接

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

function login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'login_logo_url' );

更改登录屏幕的设计

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

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

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

function login_custom_stylesheet() { ?>
	<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" />
<?php }
add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' );

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

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

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

.login form {
	background: #f3f3f3;
}

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

.login form .input,.login input[type=text],.login form input[type=checkbox] {
	background: #fff;
	border: 1px solid #b7b7b7;
            	padding: 5px;
}
.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 {
	background: #fff;
	outline: none;
}

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

body.login div#login form#loginform p.submit input#wp-submit {
	border-radius: 0;
	background: #ffab00;
	outline: none;
	border: none;
	padding: 0 25px;
	text-align: center;
	font-size: 13px;
}

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

body.login div#login p#nav {
	margin: 20px auto;
	text-align: center;
}

body.login div#login p#backtoblog {
	margin: 0 auto;
	text-align: center;
}
.login #nav a:hover,.login #backtoblog a:hover {
	color: #ffab00;
}

最后的话

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

打赏
发表评论 取消回复
表情 图片 链接 代码

  1. 紫苏
    紫苏 Lv 1

    测试mail

    Google Chrome 73 Google Chrome 73 Windows 7 Windows 7
  2. 紫苏
    紫苏 Lv 1

    就这样直接扒了,

    Google Chrome 73 Google Chrome 73 Windows 7 Windows 7
分享
微信
微博
QQ