Override wp-login.php styles

问题:

I have a Wordpress CMS website where most labels are needed to be white. So the theme includes the below styles per form labels.

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

This above style is populated from within /wp-login.php file -- the style itself is located in the login.min.css (which is included directly within wp-login.php)

I need to override this ONLY for the forget password screen.

Luckily there are custom ID selectors for the two labels I need to be black in this instance. #pass1 #pass2

My problem is, I have NO ACCESS to /wp-login.php and login.min.css -- I have tried adding !important and declaring these two selectors within header.php but they were not read.

I need to somehow add; with current permission situation.

#pass1 { color: #000 !important; }

#pass2 { color: #000 !important; }

Could I use jQuery from header.php or footer.php to append the style? Would it be read?

回答1:

It's not best practice to edit any wp core files, so I'd advice not to touch wp-login.php anyway, since updating WordPress can reset things.

Instead, add this to your 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:

Since the login and forgot password screens are not theme dependent, your header.php file will not be read, so any styles you put in there won't affect these pages.

Add this to your template.php file

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

and then add your custom styles to style-login.css

回答3:

login_head and login_enqueue_scripts are called one after another, so it doesn't matter which one you're using...

Using wp_enqueue_style is the best practice but it can be echo '<link rel="stylesheet" ...>'; without problem.

I'm adding a solution because this isn't the kind of code that you just drop onto your theme functions.php. We want to keep the code running even if we swap themes. So a functionality plugin comes handy:

<?php
/*
    Plugin Name: Login CSS
*/
function custom_login() {
   $CSS = <<<CSS
        <style>
            .login label {}
        </style>
CSS;
    echo $CSS;
}
add_action('login_head', 'custom_login');

Check the following to learn about the Heredoc sintax used to build the $CSS string: What is the advantage of using Heredoc in PHP ?