WordPress教程-登录页面美化

 285 2019-10-05 11:50:06 艾奇站长网

TAG:登录页WordPress

WordPress登录的初始页面感觉非常的丑,而又不想使用主题自带的登录页面,所以把Blog的登录页面进行了美化,觉得挺好看的,于是分享给大家美化方法。


登录页面的美化效果


WordPress教程-登录页面美化(图1)


首先打开你主题的functions.php文件,在最后添加上以下代码:

/**
* WordPress 登录界面美化
**/
function custom_login_style() {
    echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admin-style.css" type="text/css" />';
}
add_action('login_head', 'custom_login_style');

在新建admin-style.css并添加以下代码,然后上传至functions.php同目录下,刷新你的登录页面看看,是不是变美了!

body {
    font-family:"Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif;
    width:100%;
    height:100%;
    background:url(https://blog.ccswust.org/images/登录背景图.jpg) no-repeat;
    -moz-background-size:cover;
    /*背景图片拉伸以铺满全屏*/
    -ms-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}
/*顶部的logo*/
.login h1 a {
    background:url(https://blog.ccswust.org/logo.png) no-repeat;
    background-size:220px 50px;
    width:220px;
    height:50px;
    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;
}
/*掉落的动画效果*/
@-webkit-keyframes dropIn {
    0% {
        -webkit-transform:translate3d(0,-100px,0)
    }
    100% {
        -webkit-transform:translate3d(0,0,0)
    }
}
@keyframes dropIn {
    0% {
        transform:translate3d(0,-100px,0)
    }
    100% {
        transform:translate3d(0,0,0)
    }
}/*逐渐出现的动画效果*/
@-webkit-keyframes fadeIn {
    from {
        opacity:0;
        -webkit-transform:scale(.8) translateY(20px)
    }
    to {
        opacity:1;
        -webkit-transform:scale(1) translateY(0)
    }
}
@keyframes fadeIn {
    from {
        opacity:0;
        transform:scale(.8) translateY(20px)
    }
    to {
        opacity:1;
        transform:scale(1) translateY(0)
    }
}
/*从右往左的动画效果*/
@-webkit-keyframes rtol {
    from {
        -webkit-transform:translate(80px,0)
    }
    to {
        -webkit-transform:translate(0,0)
    }
}
@keyframes rtol {
    from {
        transform:translate(80px,0)
    }
    to {
        transform:translate(0,0)
    }
}


猜你喜欢
使用静态站点生成器的 7 个理由

使用静态站点生成器的 7 个理由

教程资讯 159 2019-10-15

静态站点生成器变得越来越流行。下面解释一下我们所说的“静态站点生成器”到底是什么。什么是静态站点?回想一下你建立的第一个...

TAG:静态生成器

PHP实现获取url地址中顶级域名的方法示例

PHP实现获取url地址中顶级域名的方法示例

教程资讯 290 2019-09-29

本文实例讲述了PHP实现获取url地址中顶级域名的方法。分享给大家供大家参考,具体如下:parse_url()获取到的h...

TAG:顶级域名黑名单

服务器安装SG11扩展多版本详细教程

服务器安装SG11扩展多版本详细教程

教程资讯 233 2019-10-05

服务器安装SG11扩展多版本详细教程教程一、宝塔面板用户安装1、进入宝塔面板,点击软件管理,找到你网站对应的php如下图...

TAG:教程SG11扩展服务器

四种PHP生成唯一订单号的方法

四种PHP生成唯一订单号的方法

教程资讯 312 2019-09-27

利用PHP生成订单单的方法,订单号,大家都不陌生,无论从在网上购物,还是在线下转帐,汇款。而交易的依据就是订单号,当然我...

TAG:订单号PHP