Блог

Ожидаемые результаты: Добавьте пользовательский css для настройки фона страницы входа в WordPress.

Предпринятые шаги:

Создал новую папку в папке моей темы под названием Login. При этом был создан новый пользовательский css-файл под названием custom-login-style.css.

Добавлен код в functions.php , который сообщает WordPress загрузить файл custom-login-style.css, найденный в папке Login.

 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, предназначенный для формы входа, работает

Можете ли вы дать ссылку на эту страницу. Скорее всего, у вас какие-то проблемы с CSS. Вы можете открыть Chrome inspector и посмотреть, каков результат css для вашей страницы входа. Возможно, !important где-то используется и ваш css не работает.

Я бы рекомендовал использовать встроенный стиль, чтобы убедиться, что он переопределит стиль по умолчанию:

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

  

Ну, возможно, возникла проблема с functions.php код, поэтому я немного изучил и выполнил настройку, рекомендованную Кодексом WordPresshttps://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');
  

аналогично тому, что содержится в codex:

 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 начал работать, и фон был настроен. Я не уверен, почему и что именно решило проблему, это может быть связано с запросом таблицы стилей или может быть чем-то другим. Во-первых, всегда лучше исследовать и внедрять Codex в случае WordPress.