前言
网络上找了一些修改后台界面的方法,都是在主题中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