как поставить в очередь свои дочерние таблицы стилей / s * после * каждой родительской таблицы стилей / операторов?

11

Я использую хорошо написанную тему «Энология» Чипа Беннетта как Родителя для своей собственной темы «Ребенок».

В процессе разработки я обнаружил, что людям, пишущим дочерние темы, приходится сталкиваться с некоторыми трудностями при управлении стилями.

Я только что обнаружил, что мой основной файл 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 ().

ура,
Грегори

child-theme  css  parent-theme 
— Грегори
источник

Ответы:

21

Просто к вашему сведению, этот вопрос, вероятно, граничит со слишком локализованным , поскольку он специфичен для темы энологии.

Тем не менее, вот где я думаю, что у вас возникли проблемы: Энология ставит в очередь две таблицы стилей:

  1. style.css, прямо в заголовке документа (при этом раньше wp_head() срабатывает)

  2. {varietal}.css, В wp_enqueue_scripts, с приоритетом 11в functions/dynamic-css.php:

    /**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define 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 );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

Сортовая таблица стилей, которая применяет «скин», ставит в очередь приоритет 11, чтобы гарантировать, что базовая таблица стилей style.cssзагружается первой , а сортовая таблица стилей загружается второй , чтобы вызвать правильный каскад.

Итак, если вам нужно переопределить таблицу стилей сорта , просто поставьте вашу вторую таблицу стилей в очередь после таблицы стилей сорта; т.е. с приоритетом не менее 12или выше.

редактировать

Чтобы дать более общий ответ, на более общий вопрос:

Чтобы переопределить очередь таблиц стилей родительской темы, вам необходимо знать две вещи:

  1. Крюк действие , при котором таблица стилей помещён
  2. Приоритет , при котором обратный вызов добавляется к крюку

Функции постановки в очередь ( 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, в определенной очередности .

Итак, чтобы переопределить таблицу стилей Parent-Theme, вам необходимо выполнить одно из следующих действий:

  • Очистите таблицу стилей Parent-Theme с помощьюwp_dequeue_style( $handle )
  • Удалите колбэк Parent Theme, который ставит в очередь стиль, черезremove_action( $hook, $callback )

  • Используйте CSS-каскад, чтобы переопределить таблицу стилей Parent-Theme, зацепив wp_enqueue_style()вызов таблицы стилей Child-Theme в тот же хук с более низким приоритетом или в последующий хук .

    Для этого последнего варианта, если родительская тема использует:

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... тогда тема ребенка будет использовать:

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
— Чип Беннетт
источник
спасибо чип. Я действительно могу использовать wp_enqueue_scripts и высокий порядковый номер, чтобы моя дочерняя таблица стилей загружалась последней. однако после моего дочернего оператора таблицы стилей есть еще 3 различных стиля. 2 из них выводятся самой WP !!!, а 1 выводится энологией через функцию wp add_custom_image_header ().
— Грегори
инструкция стиля body.custom-background выводится самой WP, но кажется, что я могу указать собственный цвет фона, определив 'BACKGROUND_COLOR'. странно, что базовое правило CSS должно быть установлено через пользовательскую константу WP.
— Грегори
1
Последний комментарий Чип. этот вопрос не слишком локализован. во многих темах используются все доступные хуки для постановки в очередь или печати стилей, и разработчики дочерних тем должны знать, как переопределить эти стили, не отключая их обязательно. веселит.
— Грегори
Проблема, которую я вижу с этим, состоит в том, что child_theme_enqueue_style будет загружать дочерний стиль с более высоким приоритетом, далее вниз по wp_head, НО он будет дублировать дочернюю таблицу стилей - Wordpress автоматически загрузит дочернюю таблицу стилей с обычным приоритетом, а затем загрузит ее снова, дальше вниз с новым приоритетом. Хотя он достигает результата переопределения всех других таблиц стилей, он создает дубликат таблицы стилей на странице.
— php-b-grader
2

единственный способ гарантировать, что у моих стилей было последнее слово в каскаде, было включить их в конец <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, которое следует использовать только в качестве крайней меры.

WP нужна лучшая система оформления стилей. каждый стиль, будь то ссылка на файл или встроенный стиль, должен передаваться через один и тот же хук, позволяющий Приоритету определять их порядок. необязательно для целей отладки, было бы полезно, если бы ловушка также выводила значения Приоритета каждого стиля, возможно, в закомментированной форме.

Обновить

Мне удалось сохранить контроль над стилями в моей дочерней теме, сохраняя при этом исходный каскад родительской темы (в которой используется основная таблица стилей, вспомогательная таблица стилей и несколько операторов стилей), разделив мою таблицу стилей на две части, как описано в разделе вопрос. Я больше не использую хук 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 );

Тем не менее, есть несколько сгенерированных WP инструкций стиля (т.е. не родительская тема), которые указаны после моей таблицы стилей, и мне нужно будет либо использовать правила css высокой специфичности, чтобы переопределить правила, которые меня интересуют, либо искать перехватывает их отключение, в частности правило body.custom-background.

Спасибо всем за ваши комментарии.

ура,
Грегори

— Грегори
источник
1

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

— mrwweb
источник
Ответ @ Чипа лучше моего, и он, возможно, более квалифицирован для обсуждения темы энологии;) Это тот случай, когда я должен удалить свой ответ, даже если он прав?
— mrwweb
Нет, я бы оставил ваш ответ. Это правильно и затрагивает конкретную часть вопроса.
— Чип Беннетт
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.