Как правильно подключать стилевые таблицы CSS в WordPress

Без CSS вы сильно ограничены в способах стилизации ваших веб-страниц. И без соответствующего подключения CSS в WordPress вы значительно усложните стилизацию ваших тем для ваших пользователей. В данном руководстве вы посмотрим на то, как правильно подключить CSS в WordPress.

WordPress – самая популярная в данный момент система управления контентом, обладающая десятками миллионов пользователей по всему миру. Именно поэтому, чтобы сделать успешную тему, мы должны рассматривать все с позиций обычного пользователя WordPress, грамотно подключая CSS-файлы в нашей теме.

Неправильный способ загрузки CSS в WordPress

За прошедшие годы WordPress заметно расширилась в плане кода, что позволило сделать эту систему более гибкой, что, естественно, отразилось и на подключении CSS и JavaScript. При этом наши вредные привычки никуда не делись. Зная, что в WordPress имеется подключение CSS и JavaScript, мы продолжаем запихивать следующий код в файлы header.php:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

… либо добавляем код, который приведен ниже, в файл functions.php, думая, что это лучше:

<?php
 
function add_stylesheet_to_head() {
    echo "<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}
 
add_action( 'wp_head', 'add_stylesheet_to_head' );
 
?>

В примерах выше WordPress не сможет определить, были ли загружены CSS-файлы на странице или нет. Это является ужасной ошибкой!

Если другой плагин использует тот же CSS-файл, он не сможет проверить, был ли CSS-файл уже подключен к странице. Плагин просто загрузит тот же самый файл второй раз, что приведет к дублированному коду.

К счастью, WordPress предлагает очень простое решение проблемы: регистрацию и подключение стилевых таблиц.

Правильный способ загрузки CSS в WordPress

Как мы уже говорили ранее, система WordPress сильно выросла за эти годы, и мы должны думать обо всех пользователях в мире.

В дополнение к этому, мы должны также принять во внимание тысячи плагинов для WordPress. Однако не позволяйте этим цифрам себя запугать: WordPress обладает полезными функциями, которые помогут корректно загрузить CSS-стили.

Давайте посмотрим на них.

Регистрация CSS-файлов

Если вы хотите загрузить стилевые таблицы CSS, вы должны сначала зарегистрировать их с помощью функции wp_register_style():

 <?php
wp_register_style( $handle, $src, $deps, $ver, $media );
?>
  • $handle (string, required) – уникальное имя вашей стилевой таблицы. Другие функции будут использовать данный хэндл для подключения и печати вашей стилевой таблицы.
  • $src (string, required) – указывает на URL вашей стилевой таблицы. Вы можете использовать функции, такие как get_template_directory_uri(), чтобы получить стилевые файлы из вашего каталога темы. Даже не думайте о том, чтобы жестко прописывать путь в коде!
  • $deps (array, optional) – имена зависимых стилевых таблиц. Если ваша стилевая таблица не будет работать в случае отсутствия каких-либо других стилевых файлов, используйте данный параметр для задания зависимостей.
  • $ver (string или boolean, optional) – номер версии. Вы можете использовать номер версии вашей темы или создать свой номер, если хотите. Если вы не хотите использовать номер версии, задайте этот параметр в null. По умолчанию он задан как false, что приводит к добавлению собственного номера версии WordPress.
  • $media (string, optional) – медиа-типы CSS, такие как «screen», «handheld» или «print». Если вы не знаете, как использовать данный параметр, то лучше его просто не трогайте. По умолчанию он задан как all.

Вот пример функции wp_register_style():

<?php
 
// wp_register_style() example
wp_register_style(
    'my-bootstrap-extension', // хэндл
    get_template_directory_uri() . '/css/my-bootstrap-extension.css', // URL стилевой таблицы
    array( 'bootstrap-main' ), // массив зависимых стилей
    '1.2', // номер версии
    'screen', // CSS медиа-тип
);
 
?>

Регистрация стилей отчасти является «необязательным» действием в WordPress. Если вы считаете, что ваши стили не будут использоваться какими-либо другими плагинами, или вы не используете код, который приводит к их повторной загрузке, то в таком случае вы можете просто подключить стили без регистрации. Давайте посмотрим, как это сделать.

Подключение CSS-файлов

После регистрации стилевого файла нам нужно подключить его (поставить в очередь), чтобы сделать его готовым к загрузке в секции темы head.

Сделаем мы это с помощью функции wp_enqueue_style():

<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>

Параметры в точности те же, которые были в функции wp_register_style(), поэтому мы не будем повторяться.

Однако, как уже было отмечено, функция wp_register_style() не является обязательной, и поэтому вы можете использовать wp_enqueue_style() двумя разными способами.

<?php
 
// если мы регистрировали стили перед этим:
wp_enqueue_style( 'my-bootstrap-extension' );
 
// если мы не регистрировали их, мы должны установить параметр $src
wp_enqueue_style(
    'my-bootstrap-extension',
    get_template_directory_uri() . '/css/my-bootstrap-extension.css',
    array( 'bootstrap-main' ),
    null, // пример без номера версии...
    // ...и без CSS медиа-типа
);
 
?>

Учтите, что если плагину понадобится найти вашу стилевую таблицу или вы хотите загружать ее в разных частях вашей темы, то в таком случае вы должны непременно сначала зарегистрировать ее.

Загрузка стилей на ваш веб-сайт

Мы не можем просто использовать функцию wp_enqueue_style() в нашей теме – нам понадобится обратиться к действиям. Есть три действия, которые мы можем применять в разных целях:

  • wp_enqueue_scripts — для загрузки скриптов и стилей во фронтэнде нашего сайта
  • admin_enqueue_scripts — для загрузки скриптов и стилей на страницах нашей панели администратора
  • login_enqueue_scripts — для загрузки скриптов и стилей на странице входа в WordPress

Вот примеры этих трех действий:

<?php
 
// загружаем css во фронтэнде сайта
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// загружаем css на страницах администратора
function mytheme_enqueue_options_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
 
// загружаем css на странице входа
function mytheme_enqueue_login_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
 
?>

Важное примечание: используйте wp_enqueue_scripts(), а не wp_print_styles(). Тем самым вы сможете обойти возможную ошибку совместимости с WordPress 3.3.

Некоторые дополнительные функции

Есть некоторые дополнительные очень полезные функции, связанные с CSS в WordPress. Они позволяют нам выводить стили, проверять подключение стилевых файлов, добавлять метаданные к стилевым файлам, а также отменять регистрацию стилей.

Давайте взглянем на них.

Добавляем динамические внутренние стили: wp_add_inline_style()

Если ваша тема обладает опциями по настройке стилизации, вы можете использовать внутренние стили с помощью функции wp_add_inline_style():

<?php
 
function mytheme_custom_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
    $bold_headlines = get_theme_mod( 'headline-font-weight' ); // допустим, что значение будет "bold"
    $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
    wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );
 
?>

Очень просто. Помните: вы должны использовать имя handle подключаемой стилевой таблицы в функции wp_add_inline_style().

Проверяем подключение стилевой таблицы: wp_style_is()

В некоторых ситуациях вам может понадобиться проверить подключение стилевой таблицы: зарегистрирована ли она, подключена ли она, выведена ли она или ожидает вывода? Определить это можно с помощью функции wp_style_is():

<?php
 
/*
 * wp_style_is( $handle, $state );
 * $handle - имя стилевой таблицы
 * $state - статус таблицы: 'registered', 'enqueued', 'done' или 'to_do'. По умолчанию: 'enqueued'
 */
 
// wp_style_is() пример
function bootstrap_styles() {
 
    if( wp_style_is( 'bootstrap-main' ) {
     
        // загружаем bootstrap тему, если bootstrap уже подключен
        wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
         
    }
     
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );
 
?>

Добавляем метаданные к стилевой таблице: wp_style_add_data()

Есть прекрасная функция wp_style_add_data(), которая позволяет вам добавлять метаданные к своей стилевой таблице, включая условные комментарии, поддержку RTL и т.д.

Вот как она выглядит:

<?php
 
/*
 * wp_style_add_data( $handle, $key, $value );
 * Значения для $key и $value:
 * 'conditional' string      Comments for IE 6, lte IE 7 etc.
 * 'rtl'         bool|string To declare an RTL stylesheet.
 * 'suffix'      string      Optional suffix, used in combination with RTL.
 * 'alt'         bool        For rel="alternate stylesheet".
 * 'title'       string      For preferred/alternate stylesheets.
 */
 
// wp_style_add_data() пример
function mytheme_extra_styles() {
    wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
    wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
    /*
     * альтернативное использование:
     * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
     * хотя wp_style_add_data() понятнее
     */
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );
 
?>

Прекрасно, не правда ли?

Отменяем регистрацию стилевых файлов: wp_deregister_style()

Если вам нужно отменить регистрацию стилевой таблицы (чтобы заново зарегистрировать ее измененную версию, к примеру), вы можете воспользоваться функцией wp_deregister_style().

Давайте взглянем на пример:

<?php
 
function mytheme_load_modified_bootstrap() {
    // если bootstrap был зарегистрирован ранее...
    if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
        // ...дерегистрируем его...
        wp_deregister_style( 'bootstrap-main' );
        // ...и заново регистрируем уже новую, обновленную версию bootstrap-main.css...
        wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
        // ...и подключаем ее!
        wp_enqueue_style( 'bootstrap-main' );
    }
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );
 
?>

Пусть это и не является обязательным, но вы должны всегда заново регистрировать новую стилевую таблицу, если вы отменили регистрацию старой – иначе можно вполне что-нибудь сломать.

Также есть похожая функция wp_dequeue_style(), которая удаляет подключенные стилевые таблицы.

Источник: code.tutsplus.com

Блог про WordPress
Комментарии: 25
  1. Руслан

    Спасибо, полезная информация. У меня на сайте еще такая «проблема» ( не знаю как еще назвать) — разные стили подгружаются с разных файлов css, типа default.css, simple.css и т.д. — как то их можно в один объединить ?

    1. Дмитрий (автор)

      Есть специальные плагины и сервисы, которые позволяют объединить все CSS в один.
      Например, вот такой:

      https://wordpress.org/plugins/bwp-minify/

  2. Артём

    Давно искал эту информацию, спасибо!

  3. qqqqqqqq

    спасибо

  4. Vladimir

    Скажите, а весь этот код куда вставлять?

    1. Дмитрий (автор)

      Functions.php файл, который находится в папке с вашей темой.

  5. Vladimir

    Спасибо. =)

  6. Vladimir

    Вот зарегестрировал стиль.

    function reset_style() {
    wp_register_style( ‘reset-style’, get_stylesheet_uri() . ‘reset.css’, array(), null, ‘all’ );
    wp_enqueue_style( ‘reset_style’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘reset-style’ );

    И выдает таккую ошибку — Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘reset-style’ not found or invalid function name in site.ru/wp-includes/plugin.php on line 496

  7. Vladimir

    Разобрался. пардон. Не тот знак поставил. =)

  8. Vladimir

    Однако теперь другая проблема. Стили не применяются. Их несколько вот код —

    function reset_style() {
    wp_register_style( ‘reset_style’, get_template_directory_uri() . ‘reset.css’, array(), null, ‘all’ );
    wp_enqueue_style( ‘reset_style’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘reset_style’ );

    function main_style() {
    wp_register_style( ‘main_style’, get_template_directory_uri() . ‘style.css’, array(), null, ‘all’ );
    wp_enqueue_style( ‘main_style’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘main_style’ );

  9. Дмитрий (автор)

    Проверьте, действительно ли файлы стилей находятся по указанному вами адресу. Это касается файлов reset.css и style.css.

    1. Vladimir

      Путь я так понимаю должен быть абсолютный?

      1. Vladimir

        Нет. Не работает.

  10. Дмитрий (автор)

    Путь там формируется через get_template_directory_uri() + название файла стилей. Функция возвращает абсолютный URL папки с темой.

    1. Vladimir

      Ну в общем не работает. Ладно буду ковырять.

  11. Дмитрий

    Здравствуйте!

    Меня интересует вопрос.

    При просмотре кода элемента в браузере, в разделе HEAD отображается абсолютный путь к стилям нашего сайта.

    Пример:
    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/wp-content/themes/web-site/style.css’

    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/wp-content/themes/web-site/css/style_reset.css’

    Однако «некоторые WP сайты пути частично скрывают», приведу два варианта.

    Вариант (1):
    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’style.css’

    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’/css/style_reset.css’

    Вариант (2):
    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/style.css’

    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/css/style_reset.css’

    Если вам это известно, то, хотелось бы узнать как это реализовать?

    Думаю, остальным читателям тоже будет интересно узнать.

  12. Саня

    Спасибо!

  13. Геннадий

    Здравствуйте, уважаемый админ. !
    Помогите пожалуйста немного продвинутому пенсионеру. Сегодня я поменял тему сайта, посмотрел «редактор таблиц стилей CSS» Вот его код:
    /*
    Представляем вашему вниманию раздел,
    посвящённый пользовательским таблицам
    CSS!

    Подробную информацию о возможностях
    этого средства см. на сайте http://wp.me/PEmnE-Bt.
    */
    Добавлю ещё скрин для более понятного понимания.
    file:///C:/Users/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C/YandexDisk/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%D1%8B/%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20CSS.png

    1. Дмитрий (автор)

      Не совсем понял, в чем суть вопроса.

  14. Геннадий

    Уважаемый Дмитрий, здравствуйте ! Вам огромное спасибо за то, что обратили внимание на мою просьбу. При проверки работы моего сайта сервисом:
    https://www.cy-pr.com/a/weblavr.ru
    выдано такое замечание — «Проверка валидности CSS: К сожалению, мы обнаружили 58 ошибок»
    Поэтому я обратился к Вам, как к профессионалу и прошу помощи.

    1. Дмитрий (автор)

      Если вы ничего самостоятельно не меняли в CSS-файле, взяли его в том виде, в котором он поставлялся вместе с темой, то ничего править не нужно. Валидаторы могут выдавать сообщения об ошибках, можно это просто игнорировать. Либо второй вариант — разработчик темы плохо подошел к своей работе и недостаточно качественно прописал стили. Но тут править в любом случае не рекомендуется, поскольку при следующем обновлении темы все правки слетят и ошибки опять появятся. Потому либо не обращайте внимания на то, что выдается в валидаторе, либо смените тему на другую, желательно из официального каталога тем WordPress.

  15. Den

    Делаю по инструкции, при входе в админку появляется это:

    This page isn’t working

    Сайт f0099573.xsph.ru пока не может обработать этот запрос.
    HTTP ERROR 500

    1. Дмитрий (автор)

      Возможно, что какие-то конфликты между плагинами или темами.
      Попробуйте отключить все плагины и включать их по одному, чтобы найти конфликтующий.
      Также можно временно переименовать файл .htaccess и попробовать зайти на сайт.

  16. Wanda

    Вы, вроде, так подробно пишете, но при этом совершенно забываете отметить, КУДА вставлять эти коды:
    «Если вы хотите загрузить стилевые таблицы CSS, вы должны сначала зарегистрировать их с помощью функции wp_register_style():»
    ГДЕ зарегистрировать? Вероятно, в function.php? Но надо же это написать, причем лучше выделить жирным шрифтом. Ведь ваши читатели наверняка начинающие юзеры, которым все нужно уточнять.
    «После регистрации стилевого файла нам нужно подключить его (поставить в очередь), чтобы сделать его готовым к загрузке в секции темы head.»
    КУДА подключить?
    И т.д. :)

    1. Дмитрий (автор)

      Спасибо за рекомендации. Это обычная проф. деформация, когда кажется, что это очевидно, а на деле не совсем очевидно. Учтем ваши требования.

Добавить комментарий для Vladimir Отменить ответ

Получать новые комментарии по электронной почте.