Question

预期结果：添加自定义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正常工作

Answer 1

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

Answer 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');

Answer 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总是更好。

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

3 个答案: