Загружаем свои стили оформления CSS на WordPress правильно

Использование CSS (Cascading Style Sheets — каскадные таблицы стилей) дает намного больше возможностей для оформления страниц на сайте WordPress. И если не загрузить таблицу стилей на WordPress правильно, то пользователям сайта будет чрезвычайно трудно настроить стиль темы.

Сегодня речь пойдет о том, как все же правильно загрузить CSS на WordPress.

Смотрите также:

• Как добавить JavaScript и CSS в WordPress тему или плагин
• 5 правок в CSS, которые помогут новичку улучшить внешний вид своего блога

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

Как неправильно загружать CSS на WordPress

За годы своего существования WordPress увеличил масштабы кода, чтобы сделать его более гибким. Но прошлые привычки, все же, оставили свой след. Учитывая тот факт, что на 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='https://fonts.bunny.net/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 все же есть полезные функции, которые помогут правильно и качественно добавить таблицы стилей.

Давайте рассмотрим несколько способов, как это можно сделать.

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

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

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

• $handle (обязательное) — это уникальное название таблицы стилей. В других функциях оно будет употребляться для постановки в очередь и печати таблицы стилей.
• $src (обязательное) — относится к URL вашей таблицы стилей. Можно использовать функцию get_template_directory_uri() для поиска CSS-файлов в вашей теме. И не вздумайте даже применить жесткое кодирование!
• $deps (необязательное) — управляет названиями зависимых стилей. Если ваша таблица стилей не будет работать при отсутствии CSS-файла, используйте эти параметры для установки «зависимых стилей».
• $ver (обязательное) — это номер версии. Можно использовать номер версии вашей темы или, по желанию, создать его. Если вы не хотите использовать какой-либо другой номер версии, установите null, по умолчанию — false, и WordPress добавит свой собственный номер версии.
• $media (необязательное) — медиа-типы CSS, например, «ручное управление» или «печать». Если вы не уверенны, нужна ли вам эта опция, не используйте ее.

Вот пример регистрации с помощью функции wp_register_style():

<?php
 
// wp_register_style() example
wp_register_style(
    'my-bootstrap-extension', // handle name
    get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet
    array( 'bootstrap-main' ), // an array of dependent styles
    '1.2', // version number
    'screen', // CSS media type
);
 
?>

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

2. Добавление CSS-файлов в очередь

После регистрации файла стиля необходимо поставить его в очередь, чтоб загрузить в <head> темы.

Это осуществляется с помощью функции wp_enqueue_style():

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

Ее параметры в точности совпадают с параметрами функции wp_register_style(), поэтому нет необходимости снова о них упоминать.

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

<?php
 
// if we registered the style before:
wp_enqueue_style( 'my-bootstrap-extension' );
 
// if we didn't register it, we HAVE to set the $src parameter!
wp_enqueue_style(
    'my-bootstrap-extension',
    get_template_directory_uri() . '/css/my-bootstrap-extension.css',
    array( 'bootstrap-main' ),
    null, // example of no version number...
    // ...and no CSS media type
);
 
?>

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

3. Загрузка стилей на сайт

Мы не можем использовать функцию wp_enqueue_style() везде в применяемой нами теме, нам следует использовать «действия». Следующие три действия могут помочь для достижения различных целей:

• wp_enqueue_scripts — для загрузки скриптов и стилей в «front-end» сайта;
• admin_enqueue_scripts — для загрузки скриптов и стилей на страницах или же в административной панели сайта;
• login_enqueue_scripts — для загрузки скриптов и стилей для страницы входа на сайт.

Пример:

<?php
 
// load css into the website's front-end
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// load css into the admin pages
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' );
 
// load css into the login page
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' );
 
?>

Дополнительные функции

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

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

1. Добавление встроенных стилей: wp_add_inline_style()

Если в используемой вами теме на WordPress есть опции, позволяющие настроить стили темы, вы можете печатать встроенные стили с помощью функции 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' ); // let's say its value is "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' );
 
?>

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

2. Проверка статуса очереди таблицы стилей: wp_style_is()

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

<?php
 
/*
 * wp_style_is( $handle, $state );
 * $handle - name of the stylesheet
 * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
 */
 
// wp_style_is() example
function bootstrap_styles() {
 
    if( wp_style_is( 'bootstrap-main' ) {
     
        // enqueue the bootstrap theme if bootstrap is already enqueued
        wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
         
    }
     
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );
 
?>

3. Добавление метаданных в стили: wp_style_add_data()

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

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

<?php
 
/*
 * wp_style_add_data( $handle, $key, $value );
 * Possible values for $key and $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() example
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' );
    /*
     * alternate usage:
     * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
     * wp_style_add_data() is cleaner, though.
     */
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );
 
?>

4. Вычеркивание стилей из списка с помощью wp_deregister_style()

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

Смотрите пример:

<?php
 
function mytheme_load_modified_bootstrap() {
    // if bootstrap is registered before...
    if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
        // ...deregister it first...
        wp_deregister_style( 'bootstrap-main' );
        // ...and re-register it with our own, modified bootstrap-main.css...
        wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
        // ...and enqueue it!
        wp_enqueue_style( 'bootstrap-main' );
    }
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );
 
?>

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

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

Заключение

Подведем итоги всего вышесказанного.

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

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

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/