Как поставить в очередь таблицы стилей дочерней темы ПОСЛЕ всех стилей родительской темы?
Я использую хорошо написанную тему Oenology от Chip Bennett в качестве родительской для моей дочерней темы.
В процессе разработки я обнаружил некоторые сложности для людей, создающих дочерние темы, когда дело доходит до управления стилями.
Я только что обнаружил, что мой основной файл style.css загружается раньше всех остальных таблиц стилей и объявлений в <head>, и это объясняет, почему у меня возникли проблемы с переопределением некоторых стилей родительской темы.
Дальнейшее изучение проблемы показывает, что различные таблицы стилей родительской темы могут быть поставлены в очередь в <head> в трех местах: add_action('wp_print_styles',
, add_action('wp_enqueue_scripts',
, и затем add_action('wp_head',
.
Чтобы упростить, я планирую создать два файла стилей. Первый основной файл 'style.css' будет содержать только команду @import url()
, необходимую для загрузки основной таблицы стилей Oenology.
Второй файл стилей будет содержать правила моей дочерней темы. Чтобы убедиться, что он загружается после всех других правил, я поставлю его в очередь используя add_action( 'wp_head',
.
Это звучит разумно? Или есть лучший (более правильный) способ сделать это?
кстати, кто-нибудь знает, что означает '/parent-theme/style.css?MRPreviewRefresh=723'?
Обновление
wp_enqueue_style() похоже не работает в wp_head().
с уважением,
Gregory

Просто к вашему сведению, этот вопрос, вероятно, находится на грани слишком специфичного, так как он относится конкретно к теме Oenology.
Тем не менее, вот где, как мне кажется, у вас возникает проблема: Oenology загружает две таблицы стилей:
style.css
, непосредственно в заголовке документа (то есть до вызоваwp_head()
){varietal}.css
, на хукеwp_enqueue_scripts
, с приоритетом11
, в файлеfunctions/dynamic-css.php
:/** * Подключение Varietal Stylesheet */ function oenology_enqueue_varietal_style() { // определение varietal stylesheet global $oenology_options; $oenology_options = oenology_get_options(); $varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet'; $varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css'; wp_enqueue_style( $varietal_handle, $varietal_stylesheet ); } // Подключение Varietal Stylesheet на wp_print_styles add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );
Таблица стилей varietal, которая применяет "скин", загружается с приоритетом 11
, чтобы гарантировать, что базовая таблица стилей style.css
загружается первой, а varietal — второй, для правильного каскадирования.
Таким образом, если вам нужно переопределить стили varietal, просто загрузите вашу вторую таблицу стилей после varietal; то есть с приоритетом не менее 12
или выше.
Редактирование
Чтобы дать более общий ответ на более общий вопрос:
Для переопределения таблицы стилей родительской темы необходимо знать две вещи:
- Хук действия, на котором загружается таблица стилей
- Приоритет, с которым колбэк добавляется к хуку
Функции загрузки (wp_enqueue_script()
/wp_enqueue_style()
) могут быть правильно выполнены в любом месте между хуком init
и хуками wp_print_scripts
/wp_print_styles
. (В настоящее время семантически правильным хуком для выполнения функций wp_enqueue_*()
является wp_enqueue_scripts
.) Этот список включает следующие действия (среди прочих; это лишь основные):
init
wp_head
wp_enqueue_scripts
wp_print_scripts
/wp_print_styles
(Обратите внимание, что wp_enqueue_scripts
, wp_print_styles
и wp_print_scripts
все срабатывают внутри wp_head
, с определенным приоритетом.
Таким образом, чтобы переопределить таблицу стилей родительской темы, необходимо выполнить одно из следующих действий:
Отменить загрузку таблицы стилей родительской темы с помощью
wp_dequeue_style( $handle )
Удалить колбэк родительской темы, который загружает стиль, с помощью
remove_action( $hook, $callback )
Использовать CSS-каскад для переопределения таблицы стилей родительской темы, подключив загрузку таблицы стилей дочерней темы
wp_enqueue_style()
на тот же хук с более низким приоритетом или на более поздний хук.Для последнего варианта, если родительская тема использует:
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority );
...то дочерняя тема должна использовать:
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} );

спасибо, Chip. Действительно, я могу использовать wp_enqueue_scripts с высоким приоритетом, чтобы мой дочерний стиль загружался последним. Однако после моего дочернего стиля всё ещё остаются 3 различных стилевых объявления. 2 из них выводятся самим WP!!!, а 1 выводится Oenology через функцию add_custom_image_header() в WP.

объявление body.custom-background выводится самим WP, но, кажется, я могу задать пользовательский цвет фона, определив 'BACKGROUND_COLOR'. Странно, что базовое CSS-правило нужно задавать через пользовательскую константу WP.

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

Проблема, которую я вижу в этом, заключается в том, что child_theme_enqueue_style загрузит стили дочерней темы с более высоким приоритетом, ниже в wp_head, НО это приведет к дублированию таблицы стилей дочерней темы - Wordpress автоматически загрузит таблицу стилей дочерней темы с обычным приоритетом, а затем загрузит ее снова, ниже, с новым приоритетом. Хотя это позволяет добиться переопределения всех других таблиц стилей, это создает дублирующую таблицу стилей на странице.

единственный способ гарантировать, что мои стили имеют последнее слово в каскаде — это подключить их в конце <head> через хук wp_head. wp_enqueue не работает внутри wp_head, поэтому пришлось выводить ссылку напрямую:
function gregory_enqueue_stylesheets() {
$base = get_stylesheet_directory_uri();
echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );
теперь я могу задавать свои стили относительно легко, без использования высоких уровней специфичности или правила !important, которое следует применять только в крайнем случае.
WordPress нуждается в лучшей системе подключения стилей. Каждый стиль, будь то ссылка на файл или инлайн-стиль, должен проходить через один и тот же хук, позволяя приоритету определять их порядок. Дополнительно, для целей отладки, было бы полезно, если бы хук также выводил значения приоритета каждого стиля, возможно, в виде комментариев.
Обновление
Мне удалось сохранить контроль над стилями в моей дочерней теме, сохранив исходный каскад родительской темы (которая использует основной таблицу стилей, дополнительную таблицу стилей и несколько стилевых объявлений), разделив мою таблицу стилей на две, как объяснено в вопросе. Теперь я не использую хук wp_head(), а вместо этого использую правильный и стандартный хук wp_enqueue_scripts() с высоким приоритетом, чтобы гарантировать, что моя таблица стилей загружается последней.
Основная таблица стилей моей дочерней темы:
/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/
@import url("/wp-content/themes/oenology/style.css");
Функция для подключения моей основной таблицы стилей:
function gregory_enqueue_stylesheets() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );
Однако есть несколько стилевых объявлений, генерируемых WordPress (т.е., не родительской темой), которые объявляются после моей таблицы стилей. Придётся либо использовать CSS-правила с высокой специфичностью, чтобы переопределить те правила, которые мне мешают, либо искать хуки для их отключения, в частности правило body.custom-background.
Спасибо всем за ваши комментарии.
С уважением,
Грегори

Вы всегда должны использовать wp_enqueue_style()
для загрузки вашей таблицы стилей, и эта функция должна быть привязана к хуку wp_enqueue_scripts, который выполняется в head. Я подозреваю, что вы не привязывали её туда, отсюда и ваша проблема. (Начиная с WP 3.3, если wp_enqueue_style()
привязана к чему-либо другому, при включённом WP_Debug будет выводиться уведомление).

Ответ @Chip лучше моего, и он, несомненно, более квалифицирован для обсуждения темы Oenology ;) Стоит ли в этом случае удалить мой ответ, даже если он в целом правильный?
