Версія @import батьківської теми style.css

Контекст

Я побудував дитячу тему на основі двадцяти тринадцяти, яка працює досить добре. Після оновлення батьківської теми до версії 1.3 я помітив дивну поведінку зі стилем, який був викликаний кешованою батьківською темою style.css.

Ось зміст теми моєї дитини style.css(опущення заголовків)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');

Таким чином, дочірня тема style.cssне робить нічого більше, ніж імпортує тему батьківської теми style.css.

Також у мене є ще один файл css з налаштуваннями моєї дочірньої теми, який я так додаю functions.php:

// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');

// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
    null, $themeVersion);

Це дає мені дуже приємний URL-файл css на зразок цього: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1що забезпечує оновлення таблиці стилів при оновленні дочірньої теми.

Тепер проблема

Заява @import url('../twentythirteen/style.css');повністю не залежить від основної версії основної теми. Насправді батьківську тему можна оновити без оновлення дочірньої теми, але браузери все одно використовуватимуть кешовані версії старої ../twentythirteen/style.css.

Відповідний код у двадцяти тринадцяти, який охоплює style.css:

function twentythirteen_scripts_styles() {
    // ...

    // Add Genericons font, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );

    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
    // Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css

    // Loads the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

Я можу придумати кілька способів вирішити цю проблему, але жоден із них не є задовільним:

1. Оновіть мою дочірню тему щоразу, коли батьківська тема оновлюється, щоб змінити рядок версії style.css(наприклад @import url('../twentythirteen/style.css?ver=NEW_VERSION');). Це створює непотрібний і дратівливий зв’язок між версією батьківської теми та дочірньою.

2. В мою дитину functions.php, 1) wp_dequeue_styleвключений дитина ТЕМА style.cssі 2) батьківська тема це безпосередня рядок версії. Це псує порядок черги css у батьківській темі.wp_enqueue_stylestyle.css

3. Використовуйте style_loader_tagфільтр, щоб змінити згенерований <link>тег css для style.cssта змінити шлях до вказівки безпосередньо на батьківську тему style.cssЗ рядком версії. Здається, досить незрозумілою для такої загальної потреби (перебір кешу).

4. Вивантажте батьківську тему style.cssв моїй дочірній темі style.css. Те саме, що (1) справді, але трохи швидше.

5. Зробіть так, щоб тема моєї дитини style.cssбула символічним посиланням на батьківську тему style.css. Це здається досить хакітським ...

Я щось пропустив? Будь-які пропозиції?

редагувати

Додано genericicons.cssта ie.cssтаблиці стилів у батьківській темі, щоб уточнити, чому я не можу змінити @importтвердження css на wp_enqueue_styleтему моєї дитини. Наразі, із @importзаявою в моїй дочірній темі style.css, я маю такий порядок на створених сторінках:

1. двадцять тринадцять / genericons / genericons.css -> підкріплений батьківською темою
2. child-topic / style.css -> підкріплений батьківською темою, @imports 20th /teen.css
3. двадцять тринадцять / css / ie.css -> підкріплений батьківською темою
4. child-тема / css / main.css -> підключена дочірньою темою

Якщо я заперечую батьківські style.cssзалежності як залежність main.css, це стане:

1. двадцять тринадцять / genericons / genericons.css -> підкріплений батьківською темою
2. child-topic / style.css -> порожній, зав'язаний батьківською темою
3. двадцять тринадцять / css / ie.css -> підкріплений батьківською темою
4. двадцять тридцять / style.css -> підкоряється дитячій темі як залежність від main.css
5. child-тема / css / main.css -> підключена дочірньою темою

Зауважте, що ie.css тепер включений перед початковою темою style.css. Я не хочу змінювати порядок заповнення файлів css батьківської теми, тому що не можу припустити, що це не спричинить проблем із пріоритетом правил css.

Не потрібно використовувати @import. Краще насправді не робити. Використовувати докладно підхід, мабуть, краще все навколо.

Ось відповідна частина коду двадцяти тринадцяти:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

Ось що ви робите у своєму коді:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Якщо ваш main.css повинен відповідати батьківському style.css, ви просто зробите це залежним від цього.

Тепер, якщо у вас також є B.css у дитини, тоді ви встановите залежності відповідно:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Зробіть залежність, яку ви визначаєте для кожного елемента, фактично відображаючи те, що вони є насправді. Якщо main.css повинен прийти після B.css, це залежить від цього. Якщо B.css повинен відповідати батьківському style.css, тоді B залежить від цього. Система анкей розбереться для вас.

І якщо ви насправді не використовуєте дитячий style.css ні для чого, то вам взагалі не доведеться запускати це . Це може бути просто заповнювач, щоб зберігати інформацію заголовка вашої теми. Не використовуєте його? Не завантажуйте його.

Крім того, що саме ви робите, що так залежить від замовлення тут? CSS не хвилює порядок завантаження в більшості ситуацій. CSS більше залежить від специфіки селекторів. Якщо ви хочете щось змінити, ви зробите свій вибір для цього більш конкретним. Він може прийти першим, останнім чи будь-чим серед них, завжди виграє більш конкретний селектор.

Редагувати

Читаючи ваші коментарі і придивляючись до коду, я бачу, де тут помилка. Двадцять тринадцять код викликає "get_stylesheet_uri ()", який у випадку з дочірньою темою був би файлом style.css для вашої дочірньої теми, а не файлом батьків. Ось чому @import працює і підтримує те саме замовлення (що, знову ж таки, не має значення стільки, скільки ви думаєте, що це робить).

У такому випадку, якщо ви не хочете використовувати імпорт, я рекомендую заздалегідь запустити батьківський style.css безпосередньо. Так:

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Код у дочірній темі function.php запускається першим, тому ваші власні wp_enqueue_scripts запустяться першими, і це спричинить батьківську тему style.css, яку батьківська тема не робить сама (тому що насправді залучає стиль вашої дитини.css). Якщо не робити це залежати ні від чого, як і від батьківського, він просто вставляється у висновок правильно. Зауважте, що порядок цього файлу та genericons.css не має значення, оскільки оригінальний "двадцятьнадцять-стиль" не має genericons.css як переліченої залежності.

Ваш власний дитячий style.css завантажиться, і якщо чесно, саме тут ви повинні вносити зміни до дочірньої теми, а не в окремий main.css. Нічого не заважає вам внести свої зміни туди, але немає реальної причини мати додатковий файл css.

Моя попередня відповідь надто складна і, можливо, не відповідає ланцюгу залежності батьківської теми (див. Примітку в іншій відповіді).

Ось ще один набагато простіший варіант, який повинен працювати набагато краще:

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Ідея полягає у тому, щоб просто відфільтрувати виклик get_stylesheet_uri()у батьківській темі, щоб повернути його власний таблицю стилів замість дочірньої теми. Далі таблиця стилів дочірньої теми запускається пізніше в гачок дій my_theme_styles.

увага

Це рішення не поважає залежності батьківської теми ! Зміна назви ручки батьківської теми впливає на ланцюг залежностей, встановлених у батьківській темі. Дивіться мою набагато простішу іншу відповідь .

оригінальна відповідь

Хоча відповідь Отто є досить хорошою, я закінчила це в функції своєї дитячої теми.php

function my_theme_styles() {
    global $wp_styles;
    $parentOriginalHandle = 'twentythirteen-style';
    $parentNewHandle = 'parent-style';

    // Deregister our style.css which was enqueued by the parent theme; we want
    // to control the versioning ourself.
    $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
    $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
    wp_deregister_style($parentOriginalHandle);

    // Enqueue the parent theme's style.css with whatever version it used instead
    // of @import-ing it in the child theme's style.css
    wp_register_style($parentNewHandle, get_template_directory_uri() . '/style.css',
        $parentDeps, $parentStyleVersion);

    // Enqueue our style.css with our own version
    $themeVersion = wp_get_theme()->get('Version');
    wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . '/style.css',
        [$parentNewHandle], $themeVersion);
}

// Run this action action the parent theme has enqueued its styles.
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Він підтримує style.cssвпорядкування батьківської теми та номери версій, контролюючи версію дочірньої теми style.css.