Завантажуємо свої стилі оформлення 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-файлів у чергу

Після реєстрації файлу іміджу потрібно поставити його в чергу, щоб завантажити вголова> Теми.

Це здійснюється за допомогою функції 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/