Как поставить в очередь таблицы стилей дочерней темы ПОСЛЕ всех стилей родительской темы?

5 мая 2012 г., 20:18:18
Просмотры: 49.4K
Голосов: 14

Я использую хорошо написанную тему 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

0
Все ответы на вопрос 3
4
21

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

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

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

  2. {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 или выше.

Редактирование

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

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

  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, с определенным приоритетом.

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

  • Отменить загрузку таблицы стилей родительской темы с помощью 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} );
    
9 мая 2012 г. 19:27:08
Комментарии

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

Gregory Gregory
10 мая 2012 г. 05:38:03

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

Gregory Gregory
10 мая 2012 г. 05:47:39

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

Gregory Gregory
10 мая 2012 г. 05:49:49

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

php-b-grader php-b-grader
10 нояб. 2015 г. 03:56:25
0

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

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

С уважением,
Грегори

6 мая 2012 г. 05:32:29
2

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

9 мая 2012 г. 18:22:40
Комментарии

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

mrwweb mrwweb
9 мая 2012 г. 19:45:55

Нет, я бы оставил ваш ответ. Он правильный и затрагивает конкретную часть вопроса.

Chip Bennett Chip Bennett
9 мая 2012 г. 19:54:23