WordPress后台登录界面半透明背景


前言

网络上找了一些修改后台界面的方法,都是在主题中functions.php里添加css代码,通过在body中添加背景链接实现。因为body中设置不透明度会使其他内容继承,最终会导致登录界面也变成半透明。在彻底修改wordpress登录界面的基础上琢磨出来一个方法,可以实现半透明背景效果。本站登录页效果见下文。

常见方法

以下是网络上修改背景图的常见方法,优点是方便,缺点是不能透明。
将以下代码复制到主题中的functions.php文件末尾。更改图片路径后上传到服务器对应目录。

function custom_loginlogobg() {
echo '<style type="text/css">
body{background: url(/images/xxx.jpg) top left no-repeat;background-size:cover;}
</style>';
}
add_action('login_head', 'custom_loginlogobg');
PHP

效果展示

以下是本站后台登录界面展示,设置方法见下文:

透明背景

修改文件

一共需要修改两个文件。
第一个:主题文件夹下的functions.php
将以下内容添加到文件末尾,修改图片路径后上传。

function custom_loginlogobg() {
echo '<style type="text/css">
.transbg1{
    background: url(/images/xxx.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
.transbg2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:rgba(255,255,255,0.7);
}
</style>';
}
add_action('login_head', 'custom_loginlogobg');
PHP

以上代码第16行

background:rgba(255,255,255,0.7);
CSS

中0.7为背景透明度,0为完全不透明,1为完全透明。

第二个:wordpress目录下的wp-login.php
找到<body>标签。找不到可以按ctrl+F搜索<body
形式如下:

<body class="login no-js <?php echo esc_attr( implode( ' ', $classes ) ); ?>">
HTML

(在wordpress5.3.2版本中这行代码在193行)

在<body>标签下一行添加以下内容:

<div class="transbg1">
	<div class="transbg2">
	</div>
</div>
HTML

更改完成后上传至服务器。

背景图片

选取一张图片,上传至主题images目录下,并修改代码中的文件名。进入后台查看效果。
*background: url();中可以搭配图片API实现随机背景。

本站代码

以下是本站登录界面在functions.php中添加的内容,包括背景与登录框样式的修改。最终效果见上文图片。

<?php
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url(logo地址) !important;background-size: 80px !important;width:80px !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

function custom_loginlogo_url($url) {
return'http://imzy.ink/'; //点击logo返回首页
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
return'http://imzy.ink/wp-log.php'; //返回登录界面
}
add_filter( 'login_registerurl', 'custom_register_url');

function custom_headertitle ( $title ) {
return __( 'Zsedczy' );
}
add_filter('login_headertitle','custom_headertitle');

function custom_loginlogobg() {
echo '<style type="text/css">
#login{position:absolute;bottom:25%;right:17%;}
.login #nav{font-size:16px;}
.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {height: 35px;width: 100%;margin: 10px auto;line-height: 32px;padding: 0 12px 2px;}
#backtoblog{display:none;}
.loginbkg{
    background: url(随机图片API) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
.loginbkg2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:rgba(255,255,255,0.7);
}
</style>';
}
add_action('login_head', 'custom_loginlogobg');
?>
PHP