如何自定义WordPress登录页面的背景？

预期的结果：添加自定义CSS, 以自定义Wordpress登录页面背景。

采取的步骤：

在主题文件夹”登录”中创建了一个新文件夹。在此, 制作了一个名为custom-login-style.css的新的自定义css文件。

在functions.php中添加了一个代码, 该代码告诉Wordpress加载在Login文件夹中找到的custom-login-style.css。

function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');

CSS工作正常, 但仅自定义了登录表单。

问题：我无法自定义登录页面的背景。

对于页面背景, 我添加了以下css

body.login {
  background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
 }

body, html {
  background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}

用于背景的CSS无法正常工作, 但用于登录表单的CSS正常工作

#1

你能否提供指向该页面的链接。你很可能有一些CSS问题。你可以打开Chrome检查器, 然后查看登录页面的结果CSS。可能是！important用于某处, 而你的CSS无法正常工作。

#2

我建议使用内联样式以确保它将覆盖默认样式：

function my_custom_login() { 
    ?>
    <style>
        /* Body style */
        body {
            background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
        }
        /* Logo style */
        .login h1 a {
          ...
        }
    </style>
    <?php
}
add_action('login_head', 'my_custom_login');

#3

好吧, functions.php代码可能存在问题, 所以我重新学习了一下, 并按照Wordpress Codex https://codex.wordpress.org/Customizing_the_Login_Form的建议进行了自定义

已变更

function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');

到法典中的内容：

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/custom-login-style.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

和body .login CSS开始工作, 并且自定义了背景。我不确定为什么以及该问题的确切解决方式, 这可能是由于插入样式表或其他原因造成的。一件事, 在Wordpress的情况下研究和实施Codex总是更好。