Site icon Vavik96

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

admin

Без 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 );
?>

Вот пример функции 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() в нашей теме – нам понадобится обратиться к действиям. Есть три действия, которые мы можем применять в разных целях:

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

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

Exit mobile version