Проблемы, связанные с родительским и ампер. шаблоны стилей детской темы с пересмотренным методом Codex

В этом сообщении появилось несколько вопросов, которые я встречал в связи с недавними изменениями, связанными с методами переопределения стилей, представленными в этой теме и этот поток .

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

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

ВЫПУСК 1: Twoqueueing

Рекомендуемая настройка:

Родительская тема - это enqueueing styles и scripts, используя крючок 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 устанавливает значения для последних изменений codex:

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' - таблица стилей родительской темы, так как enqueued by my child theme function
  • 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' />

Теперь я вынужден прибегнуть к тому, чтобы включить мой стиль дочерних тем, чтобы убедиться, что он переместился обратно в начало строки, вызывая вышеупомянутый вопрос о двухступенчатой ​​(новый термин? 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' />

Несмотря на то, что включение дочерней таблицы стилей в мою функцию заставляло ее дважды ставить в очередь, ИМХО, которая предпочтительнее, чем кодирование в соответствии с предположением , что родительская тема будет правильно помещать нашу детскую таблицу стилей для нас. Основываясь на идентификаторах, присваиваемых каждому статическому стилю, кажется, что родительская тема ставит его в очередь, а не что-либо в 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: Пересмотренные таблицы стилей для детей

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

I никогда не используйте style.css в корневом каталоге дочерней темы для моих стилей темы - это очевидно должен быть там, но все мои фактические стили скомпилированы из SCSS как миниатюрный .css-файл в каталоге /css /. Хотя я понимаю, что это не "ожидаемая норма " на универсальном уровне для развития детской темы, самые серьезные разработчики WordPress, которые я знаю, делают что-то подобное. Это, конечно, требует вручную enqueueing этой таблицы стилей в моей функции независимо , если родительская тема закрыта или нет.

Чтобы суммировать все это ...

  1. Можно ли включить предположение, что родительские темы должным образом ставят в очередь стили дочерних тем, с точки зрения стандартов дочерних тем?
  2. Удаление приоритета потенциально может создать больше путаницы для части сообщества WordPress, когда стили дочерних тем начнут перезаписываться плагином. Мы ожидаем, что темы будут перезаписывать стили, но не так много с плагинами.
  3. При использовании пользовательской таблицы стилей для реальных стилей дочерних тем (как предполагается, чтобы помещать их в предопределенный style.css), вручную вставляя в очередь, что файл становится необходимым. С точки зрения обеспечения непрерывности в широком спектре разработчиков, не имеет смысла поощрять ручную привязку детской таблицы стилей независимо от возможного дубликата?
8 голосов | спросил dMcClintock 9 72014vEurope/Moscow11bEurope/MoscowSun, 09 Nov 2014 18:12:04 +0300 2014, 18:12:04

1 ответ


4

ВОПРОС 1

  

Можно ли включить предположение, что родительские темы должным образом задают стили дочерней темы с точки зрения стандартов дочерних тезисов?

Общее правило, да. Но , вы должны никогда не предполагать . Большинство бедствий и неудач в живом режиме обусловлены предположениями или фактами, основанными на предположении

ФАКТЫ БЕЗ ПРЕДПОЛОЖЕНИЙ

  • Сначала загружается функция functions.php дочерней темы, затем функции parent.php. Это гарантирует, что основная таблица стилей родительской темы загружается до основной таблицы стилей дочерней темы из обновленного кода в кодексе

  • Давайте рассмотрим связанную тему, двадцать четвертую. Здесь происходит волшебство wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Вот как ставится главная таблица стилей. Когда тема активна в качестве родительской темы, файл style.css будет загружен из родительской темы, поскольку get_stylesheet_uri() будет указывать на родительскую каталог style.css.

  • Когда вы переключаетесь на дочернюю тему, get_stylesheet_uri() "меняет" свой путь, чтобы указать стиль child.css , что означает, что вместо этого wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); загрузка родительского стиля style.css теперь загружает дочерний стиль style.css

  • Все остальные стили из родительской темы загружаются в соответствии с нормальным порядком, в котором они пишут

выбоины

  • Встроенные стили и таблицы стилей, которые добавляются непосредственно в шаблон заголовка. Я провел некоторое тестирование по этой проблеме. Если родительская таблица стилей не помещается в очередь с помощью wp_enqueue_scripts и непосредственно загружается в заголовок, сначала загружается основная таблица стилей дочерней темы. В качестве обходного пути я ранее рекомендовал скопировать заголовок header.php родителя на дочернюю тему и удалить эти вызовы. Затем вам нужно будет указать как стили родительской и дочерней темы, так и любые другие таблицы стилей, которые были непосредственно загружены в header.php, как описано в функции OP , обесцененной

  • Я столкнулся с этим один или два раза, когда стили (и скрипты) напрямую загружаются в заголовок, и из-за этого вызов wp_head опущен. Это заставит вас действовать в режиме ожидания, и ваши стили просто не появятся.

  • Неверные приоритеты. Нет необходимости устанавливать приоритеты как родительскими, так и дочерними действиями при подключении ваших функций enqueueu. Когда оба имеют одинаковый приоритет по умолчанию, применяется правило с первого раза, сначала поданное. Это гарантирует правильность порядка загрузки.

ПРИМЕЧАНИЕ ДЛЯ АВТОРОВ ТЕМЫ РОДИТЕЛЕЙ

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

Всегда также загружайте основную таблицу стилей следующим образом:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

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

ВАША ОТВЕТСТВЕННОСТЬ КАК ДЕТСКАЯ ТЕМА АВТОР

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

  • Всегда создавайте предупреждение автора родительской темы о любом коде, который вам не нравится. Например, если автор добавил свои стили непосредственно в заголовок, предупредите об этом и сообщите ему, что это неправильный способ сделать это, и попросите его исправить это в следующей версии

ВОПРОС2

  

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

К сожалению, для этого нет прямого метода safegaurd. Суть в том, что стили плагина никогда не должны перезаписывать стили темы по умолчанию без согласия конечного пользователя. На мой взгляд, это просто плохая практика или негритянка от автора плагина. Я бы предположил, что в таком случае свяжитесь с автором плагина и сообщите об этом

У вас также всегда есть возможность деактивировать и удалить регистрацию стиля (и скрипта), который вам не нужен, или вам нужно изменить приоритет и выполнить повторную регистрацию и перерегистрировать их, как в приведенном выше коде (что отлично ). Просто заметьте на shivm , лучше удалить dequeue и , чтобы отменить регистрацию стиля и скрипта.

ВОПРОС 3

  

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

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

Таблицы стилей недоступны для добавления функциональности, но вы можете добавить визуальный опыт для пользователя. Стили также напрямую отправляются как есть в браузере, если они обрабатываются. Wordpress не играет здесь никакой роли.

Исходя из этого факта, я действительно не вижу никаких угрожающих красных флагов при загрузке таблицы стилей дважды. Однако это может стоить несколько миллисекунд. Честно говоря, кроме этого, я не совсем уверен, как дубликаты обрабатываются через разные браузеры. Это то, что вы, как читатель, можете пройти и проверить

ИМХО, дубликаты никогда не бывают хорошими и их всегда следует избегать. Я бы предположил, что если вы действительно хотите вручную присвоить основную таблицу стилей ребенка по какой-либо причине, вы должны использовать свой код в shivm . Dequeue и отмените регистрацию дубликата, добавленного по умолчанию, а затем запросите таблицу стилей как обычно.

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

В ЗАКЛЮЧЕНИИ

После недавнего обновления кода, отзывы были потрясающими, и я хотел бы поблагодарить всех за отзывы об этом. Я хотел бы призвать всех участвовать в любых ответах на этот вопрос в частности. Если у вас есть что добавить или прокомментировать, сделайте.

ответил Pieter Goosen 10 12014vEurope/Moscow11bEurope/MoscowMon, 10 Nov 2014 09:31:20 +0300 2014, 09:31:20

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132