Как правильно подключать стилевые таблицы 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(), которая удаляет подключенные стилевые таблицы.
Источник