Italiano
Español
RomânăПроблемы с подключением стилей родительской и дочерней темы при использовании обновленного метода из Codex
Этот пост поднимает несколько вопросов, с которыми я столкнулся относительно недавних изменений в методах подключения таблиц стилей, упомянутых в этой теме и этой теме.
Проблемы возникли в типичном сценарии использования, с широко используемой и хорошо поддерживаемой родительской темой, которая специально подготовлена для дочерних тем на WP 4.0. Файл functions.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, используемые в коде:
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' />
После установки плагина порядок подключения изменился следующим образом:
<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' />
Теперь я вынужден подключать стиль дочерней темы также, чтобы гарантировать его загрузку в начале, что приводит к упомянутой выше проблеме двойного подключения (новый термин? лол) 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' />
Несмотря на то, что включение таблицы стилей дочерней темы в мою функцию привело к ее двойному подключению, ИМХО это предпочтительнее, чем программирование с предположением, что родительская тема правильно подключит таблицу стилей дочерней темы за нас. Основываясь на ID, присвоенных каждому подключенному стилю, похоже, что родительская тема подключает его, а не что-то в ядре WP.
Мое решение:
Хотя я вряд ли предложил бы это в качестве рекомендуемого метода (и я уверен, что разработчики с большим опытом кодирования будут стонать от этого решения), я отключил ID родительской темы (используемый для подключения стиля моей дочерней темы) прямо перед моим собственным подключением в файле functions.php моей дочерней темы, как показано:
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' />
Конечно, это требовало знания ID, используемого родительской темой - что-то более универсальное потребовалось бы для использования в качестве стандартной методологии разработки дочерних тем.
ПРОБЛЕМА 2: Перемещенные таблицы стилей дочерней темы
(Кажется невероятным, что это не поднималось в другой теме, хотя я не видел конкретных при поиске... если я пропустил, пожалуйста, дайте мне знать.)
Я никогда не использую стандартный style.css в корневом каталоге дочерней темы для стилей темы - он, очевидно, должен быть там, но все мои реальные стили компилируются из SCSS как минифицированный .css файл в директории /css/. Хотя я понимаю, что это не "ожидаемая норма" на универсальном уровне для разработки дочерних тем, большинство серьезных разработчиков WordPress, которых я знаю, делают что-то подобное. Это, конечно, требует ручного подключения этой таблицы стилей в моей функции независимо от того, подключила ли ее родительская тема или нет.
Подводя итоги...
- Безопасно ли предполагать, что родительские темы правильно подключают стили дочерней темы, с точки зрения стандартов дочерних тем?
- Удаление приоритета может потенциально создать больше путаницы для части сообщества WordPress, когда стили дочерней темы начинают перезаписываться плагином. Мы ожидаем, что темы перезаписывают стили, но не так сильно с плагинами.
- При использовании пользовательской таблицы стилей для фактических стилей дочерней темы (в отличие от размещения их в предопределенном
style.css), ручное подключение этого файла становится необходимым. С точки зрения поддержания преемственности среди широкого спектра разработчиков, не имеет ли смысла поощрять ручное подключение таблицы стилей дочерней темы независимо от возможного дублирования?
Питер, спасибо за твой подробный ответ. Сегодня был очень загружен, но у меня есть несколько мыслей по поводу сказанного тобой, которые я надеюсь добавить позже вечером.
dMcClintock
Пожалуйста, сделай это. Мне действительно хотелось бы услышать другие мнения по этому поводу. Мой ответ - это мое мнение, основанное на моих тестах, так что это точно не истина в последней инстанции. С нетерпением жду твоего взгляда :-)
Pieter Goosen