覆盖 wp-login.php 样式

Posted 2023-03-06

【中文标题】覆盖 wp-login.php 样式

【英文标题】：Override wp-login.php styles

【发布时间】：2015-03-21 20:27:09

【问题描述】：

我有一个 Wordpress CMS 网站，其中大多数标签都需要是白色的。所以主题包括每个表单标签的以下样式。

.login label 
    color: #fff;
    font-size: 14px;

上面的样式是从 /wp-login.php 文件中填充的——样式本身位于 login.min.css 中（直接包含在 wp-login.php 中）

我只需要在忘记密码屏幕上覆盖它。

幸运的是，在这种情况下，我需要为黑色的两个标签提供自定义 ID 选择器。 #pass1 #pass2

我的问题是，我无法访问 /wp-login.php 和 login.min.css -- 我尝试添加 !important 并在 header.php 中声明这两个选择器，但它们没有被读取。

我需要以某种方式添加；以目前的许可情况。

#pass1 color: #000 !important;

#pass2  color: #000 !important; 

我可以使用来自header.php 或footer.php 的jQuery 来附加样式吗？会读吗？

【问题讨论】：

正如其他人所说，您不应该修改 /wp-admin/ 或 /wp-includes/ 中的任何文件。当 Wordpress 更新时，它们都会被覆盖。您希望将所有更改保留在 /wp-content/ 中。很可能在您的主题目录中。

【参考方案1】：

编辑任何 wp 核心文件不是最佳做法，所以我建议不要碰 wp-login.php，因为更新 WordPress 会重置。

相反，将其添加到您的functions.php：

 // Custom login
function custom_login() 
        $files = '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" />';
        echo $files;

add_action('login_head', 'custom_login');

【参考方案2】：

由于登录和忘记密码屏幕与主题无关，您的header.php 文件将不会被读取，因此您在其中放置的任何样式都不会影响这些页面。

将此添加到您的 template.php 文件中

function my_login_stylesheet() 
    wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );

add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

然后将您的自定义样式添加到style-login.css

【参考方案3】：

login_head 和login_enqueue_scripts 是called one after another，所以不管你用的是哪一个...

使用wp_enqueue_style 是最佳做法，但也可以使用echo '<link rel="stylesheet" ...>'; 没有问题。

我正在添加一个解决方案，因为这不是您直接放到主题 functions.php 上的那种代码。即使我们交换主题，我们也希望保持代码运行。所以functionality plugin 就派上用场了：

<?php
/*
    Plugin Name: Login CSS
*/
function custom_login() 
   $CSS = <<<CSS
        <style>
            .login label 
        </style>
CSS;
    echo $CSS;

add_action('login_head', 'custom_login');

检查以下内容以了解用于构建 $CSS 字符串的 Heredoc 语法：What is the advantage of using Heredoc in PHP ?