У цій публікації виникає кілька питань, з якими я стикався стосовно останніх змін навколо таблиць стилів, що приводять до цього потоку та цієї теми .
Проблеми, з якими я стикався, виникали в загальному сценарії використання, використовуючи широко використовувану та доглянуту батьківську тему, яка спеціально є дочірньою темою, готовою до встановлення WP 4.0. Тема моєї дочірні функції.php містить лише wp_enqueue_styleфункцію, детально описану в Кодексі .
Зауважте, що, хоча наведений нижче код є специфічним для цієї теми, значна частина використовує поточні умови кодування, використовувані для батьківських тем. Крім того, мої проблеми, які викликають занепокоєння, скоріш за все повторюються на велику кількість встановлених батьківських тем, що зараз є в дикій природі. Також питання, які вони піднімають, застосовні на універсальному рівні, незалежно від того, яка батьківська тема використовується.
ВИПУСК 1: Двох черговість
Рекомендована настройка:
Батьківська тема - це стимуляція стилів та сценаріїв за допомогою wp_enqueue_scriptsгачка, причому належна частина полягає в наступному:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}Тема моєї дитини functions.phpстосується стилів за останніми змінами кодексу:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}Зверніть увагу на такі ідентифікатори, які використовуються у згаданому коді:
id='dm-parent-style-css'- це таблиця стилів батьківської теми, як це стосується функції моєї дочірньої темиid='avia-style-css'- це таблиця стилів моєї дочірньої теми, яку охоплює функція батьківської темиid='dm-child-style-css'- це таблиця стилів моєї дочірньої теми, яку охоплює функція моєї дитини
Результати:
На перший погляд, все було добре, <head> показав такий порядок:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Після встановлення плагіна порядок enqueue тепер змінився таким чином:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->Зрештою, мені потрібен файл css для моєї дитини після будь-яких плагінів, тому я змушений був додати номер пріоритету до функції в моїй дочірній темі (див. Попереднє обговорення щодо пріоритетного номера) .
Оскільки моя функція запускає лише css батьківської теми, результат є те, що тепер css теми для батьківської теми переміщується до кінця, залишаючи css теми моєї дитини в ще гіршому становищі, ніж раніше.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />Тепер я змушений вдатися до того, щоб зайнятися моїм стилем теми для дитини, щоб переконатися, що він повернеться до передньої частини рядка, викликаючи вищезгадану проблему двозначного (новий термін? Lol) дочірньої теми CSS.
Застаріле налаштування:
Переглянута функція у дочірній темі:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Результати:
Виконуючи наступне замовлення у <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Навіть незважаючи на те, що включення в мою функцію дочірнього аркуша стилів призвело до його введення в дію двічі, IMHO є кращим над кодуванням з припущенням, що батьківська тема належним чином додасть нам наш дочірній таблицю стилів. Виходячи з ідентифікатора, призначеного кожному стилю, що додається, виявляється, що батьківська тема запускає його, а не що-небудь у WP Core.
Мій Шивм:
Хоча я навряд чи запропонував би це бути рекомендованим засобом (і я впевнений, що розробники з більшим досвідом кодування, ніж я буду стогнати над цим рішенням), я скасував ідентифікатор батьківської теми (використовувався для привласнення стилю моєї дитячої теми) прямо над власним записом у файлі функцій теми моєї дитини, як показано:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Результати:
Це вирішило існуючі проблеми, в результаті чого:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Звичайно, для цього потрібно знати ідентифікатор, що використовується батьківською темою - щось стандартне потрібно буде використовувати як стандартну методологію розробки дочірньої теми.
ВИПУСК 2: Таблиці стилів для переселених дітей
(Здається, важко повірити, що це не з'явилося в іншій темі, хоча я не побачив конкретних під час перегляду ... якщо я пропустив це, не соромтеся донести це до мене.)
Я ніколи не використовую за замовчуванням style.cssу кореневій темі дочірньої теми для моїх стилів тем - це, очевидно, повинно бути там, але всі мої фактичні стилі збираються з SCSS як мінімізований файл .css в / css / директорії. Хоча я усвідомлюю, що це не "очікувана норма" на універсальному рівні для розвитку дитячої тематики, більшість серйозних розробників WordPress, яких я знаю, роблять щось подібне. Звичайно, це вимагає вручну запустити цю таблицю стилів у моїй функції, незалежно від того, підкріплювала її батьківська тема чи ні.
Підсумовуючи все це ...
- Чи безпечно включати припущення про те, що батьківські теми належним чином переймають стилі дочірніх тем, з позицій дитячих стандартних тем?
- Видалення пріоритету може потенційно створити більше плутанини для частини спільноти WordPress, коли дочірні стилі теми починають перезаписувати плагін. Ми очікуємо, що теми замінять стилі, але не так з плагінами.
- Використовуючи спеціальний таблицю стилів для фактичних стилів дочірньої теми (як передбачається, розміщуючи їх заздалегідь
style.css), необхідність вручну створювати цей файл вручну. Що стосується збереження наступності для широкого кола розробників, чи не було б сенсу заохочувати вручну залучати дочірній таблицю стилів незалежно від можливого дубліката?