修改WordPress后台的登录界面的插件很多,但大部分都有很多我用不到的功能,会浪费资源,设置也不那么直观,所以决定用写代码的方式来实现。
用代码修改WordPress后台的登录界面
代码可以放在主题的functions.php里。
class Sola_Custom_Admin_Login{
private static $instance = null;
public static function get_instance(){
if( self::$instance == null ){
self::$instance = new self();
}
return self::$instance;
}
function __construct(){
add_filter( 'login_title', [$this, 'login_title'], 10,2 );
add_filter( 'login_headerurl', [$this, 'login_headerurl'] );
add_filter( 'login_headertext', [$this, 'login_headertext'] );
add_action( 'login_head', [$this, 'login_styles'] );
}
// 浏览器标题,默认带有WordPress字样
function login_title( $login_title, $title ){
return $title .' - '. get_bloginfo( 'name' );
}
// logo的链接,默认链接到WordPress
function login_headerurl(){
return site_url();
}
// a标签里的文字,logo是a标签的背景
function login_headertext(){
return '';
}
// 通过css修改页面样式
function login_styles(){
?>
<style>
/* 定制页面背景 */
body{
background-color: #333333;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237DDD7F'/%3E%3Cstop offset='1' stop-color='%23333333'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%239FDDAF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%239FDDAF' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
/* 修改Logo */
.login h1 a{
background-image: url(http://localhost/wordpress/wp-content/uploads/2022/03/logo.svg);
height: 46px;
width: 160px;
background-size: contain;
}
/* 控制登录表单的宽度和背景 */
#login{
width: 480px;
max-width: 100%;
}
.login form{
background: rgba(255,255,255,.25);
border: none;
}
/* 控制表单字段和提交按钮的样式 */
.login label{
font-size: 16px;
color: #000;
}
.login input[type="text"],
.login input[type="password"]{
border-radius: 0;
border: none;
border: 1px solid #000;
background: none;
margin-bottom: 24px;
}
#login input[type="submit"]{
background: #507551;
border: none;
padding: 0 24px;
border-radius: 0;
}
#login input[type="submit"]:hover{
background: #3c583d;
}
/* 控制密码字段的小眼睛图标的颜色 */
#login .button.button-secondary{
color:#50575e;
}
a.privacy-policy-link{
color: #50575e;
text-decoration: none;
}
/* 语言切换器的buton样式 */
.language-switcher input[type="submit"]{
background: #507551;
border: none;
padding: 0 24px;
border-radius: 0;
color: #fff;
}
.language-switcher input[type="submit"]:hover{
background: #3c583d;
color: #fff;
}
@media (min-width: 500px){
.login #nav, .login #backtoblog{
padding-left: 0;
}
.login form{
padding: 48px;
}
}
</style>
<?php
}
}
Sola_Custom_Admin_Login::get_instance();