wordpress后台登录界面美化代码以及调用bing每日一图作为背景图片

将下面的代码加入到functions.php中即可。

//自定义登录页面的LOGO链接为首页链接
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));
//自定义登录页面的LOGO提示为网站名称
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

//去除 WordPress 登录标题中的“- WordPress”
add_filter('login_title', 'zm_custom_login_title', 10, 2);
    function zm_custom_login_title($login_title, $title){
        return $title.' ‹ '.get_bloginfo('name');
}

//添加自定义CSS
function lerm_login_style() {
    $url = 'https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=';
    $resolution = '1920x1080';
    $request = wp_remote_get( $url );
    $data = wp_remote_retrieve_body( $request );
    $json = json_decode( trim( $data ), true );
    if ( $json ) {
        $images = $json['images'];
        foreach ($images as $image) {
            $urlbase = $image['urlbase'];
            $image_url = 'https://www.bing.com' . $urlbase . '_' . $resolution . '.jpg';
        }
    } ?>
    


<style type="text/css">
        .login {
            background:rgba(255,255,255,0.6) url(<?php echo $image_url ?>) no-repeat center;
            height:auto;
            /*filter: blur(1px);*/
        }
        #login {
            background-color:rgba(255,255,255,0.6);
            margin:10% auto 0;
            padding:2.5rem 2rem;
            box-shadow:0 0 5px 1px rgba(0,0,0,0.5);
            -moz-box-shadow:0 0 5px 1px rgba(0,0,0,0.5);
            -webkit-box-shadow:0 0 5px 1px rgba(0,0,0,0.5)
        }
        .login form {
            padding:0;
            box-shadow:none;
            background-color: initial;
        }
        .login h1 a {
            font-size:inherit;
            background-image:url("http://www.qiushiying.com/wp-content/themes/Kratos-master/images/13592.png");
			background-size:135px;
			width:135px;
			height:92px;
        }
        .login label{
            color: #000;
            font-weight: 800;
        }
        .login #nav a,.login #backtoblog a{
            color: #000;
        }
        .login #nav,.login #backtoblog {
            display:inline-block
        }
    </style></pre>
 

<?php } add_action('login_head', 'lerm_login_style');

效果如下图:

说明:代码出自智慧宫www.hanost.com,本人只是稍作修改以适应自己的主题。



发表评论