美化你的wordpress注册/登录页面

美化登录页面

WordPress后台的登录页面默认就是一个登录的表单,背景什么的都是白茫茫的一片。看久了还真有点腻。今天就分享一下美化后台登录界面的简易教程。

首先,打开你的主题的”functions.php”,拉倒最后面,在最后一行的 “?>” 前面添加如下代码:

//添加登陆美化CSS
function custom_login() {
echo '';
}
add_action('login_head', 'custom_login');

再新建一个css文件,命名为“admin-style.css”,css内容如下:

body{
font-family: "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;
width:100%;
height:100%;
background: url(http://img.infinitynewtab.com/InfinityWallpaper/2_14.jpg) no-repeat;
-moz-background-size: cover; /*背景图片拉伸以铺满全屏*/
-ms-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

/*顶部的logo*/
.login h1 a {
background-image: url(images/logo.png);
background-size: 80px 80px;
width: 80px;
height: 80px;
padding: 0;
margin: 0 auto 1em;
border: none;
-webkit-animation: dropIn 1s linear;
animation: dropIn 1s linear;
}

/*登录框表单*/
.login form, .login .message {
background: #fff;
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
border: 1px solid #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
-webkit-animation: fadeIn 1s linear;
animation: fadeIn 1s linear;
}

/*登录框输入框*/
.login label {
color: #000;
}
.login .message {
color: #000;
}
#user_login{
font-size: 18px;
line-height: 32px;
}

/* 返回博客与忘记密码链接 */
#backtoblog a, #nav a {
color: #fff !important;
display: inline-block;
-webkit-animation: rtol 1s linear;
animation: rtol 1s linear;
}

你可以自由修改第5行的背景图片(可以用图片api,来达到自动换壁纸)和第14行的logo图片(logo图片大小为80*80)。修改好后保存,并上传到当前主题的目录即可。

注:下文提到的所有代码,都是添加到主题的 funshions.php 文件的最后一个 ?> 的前面。

自定义Logo链接

将Logo的链接改为网站首页链接:
//自定义登录页面的LOGO链接为首页链接
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));

将Logo的链接改为任意链接:

//自定义登录界面LOGO链接为任意链接
function custom_loginlogo_url($url) {
return 'https://www.wpdaxue.com'; //修改URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

完了,就这么简单……

最后,想要看效果的可以直接前往本站登陆页面查看

 

点赞

发表回复

您的电子邮箱地址不会被公开。