wordpress网站后台登录页面美化/wordpress主题后台登录背景图片设置

使用WordPress主题的朋友们一定对默认的WP后台非常了解了，其实就是一个非常简单的登录表单，白茫茫的一片荒芜，每天面对这样的后台登陆背景实在是有点腻烦了。今天精品资源网给大家分享一下如何美化您的WP后台登录界面，给后台登录添加非常漂亮的背景。

首先，找到您的wordpress网站主题文件夹，在下面找到”functions.php”文件打开,最后面添加下面的代码：

/** * WordPress 登录界面美化 **/

function custom_login_style() {undefined

echo ”;

}

add_action(‘login_head’, ‘custom_login_style’);

第二步，在你网站主题的根目录下新建一个css文件，命名为“admin-style.css”，把下面的代码复制，放进css文件中：

body{undefined

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 {undefined

background:url(images/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 {undefined

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 {undefined

color: #000;

}

.login .message {undefined

color: #000;

}

#user_login{undefined

font-size: 18px;

line-height: 32px;

}

/* 返回博客与忘记密码链接 */

#backtoblog a, #nav a {undefined

color: #fff !important;

display: inline-block;

-webkit-animation: rtol 1s linear;

animation: rtol 1s linear;

}

/*掉落的动画效果*/

@-webkit-keyframes dropIn {undefined

0% {undefined

-webkit-transform: translate3d(0, -100px, 0)

}

100% {undefined

-webkit-transform: translate3d(0, 0, 0)

}

}

@keyframes dropIn {undefined

0% {undefined

transform: translate3d(0, -100px, 0)

}

100% {undefined

transform: translate3d(0, 0, 0)

}

}

/*逐渐出现的动画效果*/

@-webkit-keyframes fadeIn {undefined

from {undefined

opacity: 0;

-webkit-transform: scale(.8) translateY(20px)

}

to {undefined

opacity: 1;

-webkit-transform: scale(1) translateY(0)

}

}

@keyframes fadeIn {undefined

from {undefined

opacity: 0;

transform: scale(.8) translateY(20px)

}

to {undefined

opacity: 1;

transform: scale(1) translateY(0)

}

}

/*从右往左的动画效果*/

@-webkit-keyframes rtol {undefined

from {undefined

-webkit-transform: translate(80px, 0)

}

to {undefined

-webkit-transform: translate(0, 0)

}

}

@keyframes rtol {undefined

from {undefined

transform: translate(80px, 0)

}

to {undefined

transform: translate(0, 0)

}

}

说明：如果要修改背景图片和LOGO图片，你可以在上面代码修改第5行的背景图片和第14行的logo图片。替换修改完之后保存，然后上传主题根目录就可以了哦。

另一种修改方法：

把以下代码复制到当前主题的 functions.php 文件中：

//调用bing美图作为登录页背景图
function custom_login_head(){
    $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
    if (preg_match("/\/(.+?).jpg/", $str, $matches)) {
        $imgurl='http://s.cn.bing.net'.$matches[0];
    }
    echo'<style type="text/css">body{background: url('.$imgurl.');background-image:url('.$imgurl.');-moz-border-image: url('.$imgurl.');}</style>';
}
add_action('login_head', 'custom_login_head');

图片会每日自动更新，手动想更新图片的话，可以修改代码中 idx=0 的参数 0 为其他数字即可；