豆豆の鱼.

Life record . 记录自己的日常琐事.

wordpress 自定义登陆页面内容修改

大家可能都想要一个比较好看的登陆页面,对于原生的wordpress登陆页面,确实不感冒,想自己给弄的好看点。比如像下面这样,注册页面和登陆页面的背景修改,输入内容位置变更等。下面这个方法是针对 Vtrois开发的Kratos 主题来说,其它的主题基本都是一样,可能细微处需要自己修改。

20181205145054 1024x514 wordpress 自定义登陆页面内容修改 20181205145030 1024x514 wordpress 自定义登陆页面内容修改

下面介绍下方法:

第一:在fucntions里引入代码

function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/css/customlogin.css" type="text/css" />';}
add_action('login_head','custom_login_logo');

第二:现在customlogin.css文件,填入下面内容,用ftp或者上传工具上传到主题目录下的css文件夹内

[hide reply_to_this=”true”]

/**
* Custom Login
**/
body,textarea{
	font-size:14px;
	font-family:-apple-system,BlinkMacSystemFont,opensans,Optima,"Microsoft Yahei",sans-serif !important;
}
input{
	font-size:14px;
	font-family:-apple-system,BlinkMacSystemFont,opensans,Optima,"Microsoft Yahei",sans-serif !important;
}
body{
	background:#92C1D1 url(../images/bak.jpg) fixed center top no-repeat !important;
}
.login h1 a {
	background-image:url(../images/default-logo.png) !important;
	background-size:200px 50px;
	background-position:top center;
    background-repeat:no-repeat;
    width:170px;
    margin:auto;
	margin-top:30%;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
	padding-bottom:15px;
	display:block;
}
#login {
	width:320px;
	background:rgba(0, 0, 0, 0.2);
	padding:0 20px 100% 12px;
	margin:auto;
	top:0px;
	right:15%;
	position:fixed;
	box-shadow:0px 0px 5px 0px   #333;
}
@media screen and (max-width:1500px) {
	.login h1 a {
		margin-top:20%;
	}
}
@media screen and (max-width:470px) {
	#login {
		right:0;
		left:0;
	}
	.login h1 a {
		margin-top:5px;
	}
}
#nav,#reg_passmail,#login .description {
	color:#FFFFFF;
}
.login label {
	color:#FFFFFF;
	font-size:14px;
}
.login form {
	margin-left:8px;
	padding:26px 24px 20px;
	font-weight:normal;
	background:rgba(255, 255, 255, 0.2);
	border:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:#000 0 0px 10px -1px;
}
#loginform {
	-webkit-border-radius:0px;
	border-radius:0px;
}
.login form .input, .login input[type="text"] {
	color:#555;
	font-weight:200;
	font-size:24px;
	line-height:1.4;
	width:100%;
	padding:5px;
	margin-top:2px;
	margin-right:6px;
	margin-bottom:16px;
	border:1px solid #FFF;
	background:#FFF !important;
	outline:0;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}
.login form .input, .login input[type="text"] {
	font-size:17px;
	padding-bottom:5px;
	padding-top:5px;
	text-indent:3px;
}
.login form .input, .login input[type="text"] {
	border:2px solid #DCE4EC;
}
input.button-primary{
	margin-top:8px;
	border:#000;
	font-weight:bold;
	text-shadow:#FFF 0 0px 10px;
}
.login .button-primary {
	font-size:14px!important;
	line-height:22px;
	padding:8px 117px;
	border-radius:0px;
}
input.button-primary {
    background:rgba(255, 255, 255, 0.5);
	color:#000;
}
input.button-primary:hover,input.button-primary:focus {
    background:rgba(255, 255, 255, 0.8);
	color:#000;
}
input.button-primary:active{
    background:rgba(255, 255, 255, 0.2);
	color:#000;
}
.login form .forgetmenot {
	font-weight:normal;
	float:none;
	margin-top:-10px;
}
.login #nav, .login #backtoblog {
	text-shadow:none;
	float:right;
	margin:0 30px 0 0px;
	padding:16px 0px 0 20px;
}
.login #nav  a, .login #backtoblog  a{
	color:#FFF!important;
	text-decoration:none;
}
.login #nav  a:hover, .login #backtoblog  a:hover{
	color:rgba(91, 157, 217, 1)!important;
	text-decoration:none;
}
div.updated, .login .message {
	background-color: #E0FFE1;
	border-color: #ACE655;
}
.wumii-footer{
	display:none !important;
}

[/hide]

第三:找到自己站点的logo图片和登陆背景图片,重命名,其中logo命名为default-logo.png,背景命名为bak.jpg,同样用ftp或者上传工具上传到主题目录下的images文件夹,大功告成!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注