Этот пост поднимает несколько вопросов, с которыми я столкнулся в связи с недавними изменениями в методах постановки таблиц стилей, поднятыми в этой теме и этой теме .
Проблемы, с которыми я столкнулся, возникли в общем сценарии использования, использующем широко используемую и хорошо поддерживаемую родительскую тему, специально предназначенную для дочерней темы и готовую для установки 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='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' />Теперь я вынужден прибегнуть к постановке в очередь моего стиля дочерней темы, чтобы убедиться, что он перемещен обратно в начало строки, что вызывает вышеупомянутую проблему двух очередей (новый термин? 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' />Хотя включение дочерней таблицы стилей в мою функцию приводило к ее двойной постановке в очередь, IMHO это предпочтительнее, чем кодирование, при условии, что родительская тема должным образом поставит в очередь нашу дочернюю таблицу стилей для нас. Исходя из идентификаторов, назначенных для каждого стиля в очереди, создается впечатление, что родительская тема ставит его в очередь, а не что-либо в WP Core.
Мой Шивм:
Хотя я вряд ли рекомендую это как рекомендуемое средство (и я уверен, что разработчики с большим опытом кодирования, чем я, будут стонать в этом решении), я удалил ID родительской темы (используемый для постановки в очередь стиля моей дочерней темы) прямо над моей собственной постановкой в очередь. в файле функций моей дочерней темы, как показано:
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: Перемещенные дочерние таблицы стилей
(Кажется, трудно поверить, что это не появилось в другой ветке, хотя я не видел каких-то конкретных, когда смотрел ... если я пропустил это, не стесняйтесь, чтобы обратить на это мое внимание.)
Я никогда не использую значение по умолчанию style.cssв корневом каталоге дочерней темы для моих стилей темы - оно, очевидно, должно быть там, но все мои настоящие стили скомпилированы из SCSS в виде уменьшенного файла .css в каталоге / css /. Хотя я понимаю, что это не «ожидаемая норма» на универсальном уровне для разработки дочерних тем, большинство серьезных разработчиков WordPress, которых я знаю, делают нечто подобное. Это, конечно, требует вручную ставить эту таблицу стилей в мою функцию независимо от того, поставила ли она в очередь родительскую тему или нет.
Подводя итог всего этого ...
- Безопасно ли включать допущение, что родительские темы должным образом ставят в очередь стили дочерних тем с точки зрения стандартов дочерних тем?
- Удаление приоритета может создать путаницу для части сообщества WordPress, когда стили дочерних тем начинают перезаписываться плагином. Мы ожидаем, что темы будут перезаписывать стили, но не так сильно с плагинами.
- При использовании пользовательской таблицы стилей для фактических стилей дочерней темы (как предполагается, чтобы поместить их в предопределенные
style.css), необходимо вручную ставить этот файл в очередь. С точки зрения поддержания преемственности среди широкого круга разработчиков, не имеет ли смысла поощрять ручную постановку в очередь дочерней таблицы стилей независимо от возможного дублирования?
источник
Ответы:
ВОПРОС 1
Общее правило, да. Но вы никогда не должны предполагать . Большинство бедствий и сбоев в жизни происходят из-за предположений или фактов, основанных на предположении
ФАКТЫ БЕЗ ПОЛОЖЕНИЙ
Сначала загружается файл functions.php дочерней темы, а затем файл functions.php родительской темы. Это гарантирует, что основная таблица стилей родительской темы загружается до обновления основной таблицы стилей дочерней темы из обновленного кода в кодексе.
Давайте посмотрим на связанную тему, двадцать двенадцать. Волшебство происходит здесь
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Вот как ставится в очередь основная таблица стилей. Когда тема активна как родительская тема, style.css будет загружен из родительской темы, какget_stylesheet_uri()будет указано на style.css родительского каталога.Когда вы переключаетесь на
get_stylesheet_uri()дочернюю тему, «меняет» свой путь, чтобы указать на style.css дочерней темы, то есть теперь, вместоwp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );загрузки родительского style.css, теперь загружается дочерний style.css.Все остальные стили из родительской темы загружаются в обычном порядке в том порядке, в котором они написаны.
выбоины
Встроенные стили и таблицы стилей, которые добавляются непосредственно в шаблон заголовка. Я провел некоторое тестирование по этому вопросу. Если родительская таблица стилей не ставится в очередь с использованием
wp_enqueue_scriptsи напрямую загружается в заголовок, то главная таблица стилей дочерней темы загружается первой. В качестве обходного пути я ранее рекомендовал скопировать header.php родительского объекта в дочернюю тему и удалить эти вызовы. Затем вы должны enqueueu оба родителя и ребенка тематические стили и любые другие таблицы стилей , которые непосредственно загружены в header.php как описано в ФП функции амортизируетсяЯ сталкивался с этим один или два раза, когда стили (и сценарии) прямо загружаются в заголовок, и из-за этого обращение к нему
wp_headопускается. Это заставит вас выполнить действие в молчании, поэтому ваши стили просто не будут отображаться.Неправильные приоритеты. При подключении функций enqueueu необязательно устанавливать приоритеты как родительских, так и дочерних действий. Когда оба имеют одинаковый приоритет по умолчанию, применяется правило «первым пришел - первым обслужен». Это обеспечит правильность порядка загрузки
ПРИМЕЧАНИЕ ДЛЯ РОДИТЕЛЕЙ ТЕМЫ АВТОРОВ
Правильный метод добавления стилей и сценариев к теме - через
wp_enqueue_scriptsловушку действия. Никогда не добавляйте стили и сценарии непосредственно в шаблон заголовка и не устанавливайте приоритет в ваших действиях при подключении вашей функции.Всегда также загружайте основную таблицу стилей следующим образом:
Это обеспечит загрузку основной таблицы стилей ребенка при использовании дочерней темы.
ВАША ОТВЕТСТВЕННОСТЬ КАК АВТОР ТЕМАТИЧЕСКОЙ РЕБЕНКИ
Не торопитесь и проработайте родительскую тему. Знайте свою родительскую тему, убедитесь, что вы знакомы со структурами темы и как функции и хуки используются в теме. Вы не можете создать успешную дочернюю тему, если у вас нет внутренних знаний о том, как работает родительская тема. Вы несете ответственность за правильную загрузку стилей и сценариев, чтобы ваш код работал должным образом.
Всегда предупреждайте автора родительской темы о любом коде, который вас не устраивает. Например, если автор добавил свои стили непосредственно в заголовок, предупредите его об этом и предупредите, что это неправильный способ, и попросите его исправить это в будущем выпуске.
ВОПРОС 2
К сожалению, нет прямого метода, чтобы защититься от этого. Дело в том, что стили плагинов никогда не должны перезаписывать стили темы по умолчанию без согласия конечного пользователя. На мой взгляд, это просто плохая практика или прыглет от автора плагина. Я бы посоветовал в таком случае связаться с автором плагина и предупредить его об этом.
У вас также всегда есть возможность удалить из очереди и отменить регистрацию стиля (и сценария), который вам не нужен, или для которого вам нужно изменить приоритет, перезапустить и перерегистрировать их, как в приведенном выше коде (что совершенно нормально). Просто отметка на вашем шивме , лучше всего исключить из очереди и отменить регистрацию стиля и сценария.
ВОПРОС 3
Я не думаю, что есть какой-либо прямой черно-белый ответ на этот вопрос. Я бы ответил, сказав, что делать то, что вам удобно, если это в рамках определенного руководства, которое регулирует действие.
Таблицы стилей предназначены не для добавления функциональности, а для визуального восприятия пользователя. Стили также напрямую отправляются в браузер «как есть», где он обрабатывается. Wordpress здесь не играет никакой роли.
Исходя из этого, я действительно не вижу угрожающих красных флагов при двойной загрузке таблицы стилей. Это может стоить несколько миллисекунд в производительности. Честно говоря, кроме этого, я не совсем уверен, как дубликаты обрабатываются в разных браузерах. Это то, что вы, как читатель, можете пойти и проверить
ИМХО, дубликаты никогда не бывают хорошими и их всегда следует избегать. Я хотел бы предложить, что если вы действительно хотите вручную ставить в очередь основную таблицу стилей ребенка по какой-либо причине, вы должны использовать свой код в shivm . Удалите из очереди и отмените регистрацию дубликата, добавленного по умолчанию, а затем перезапустите таблицу стилей в обычном режиме.
Также нужно помнить одну вещь: функции enqueue и register имеют
$dependancyпараметр, который вы также можете использовать. Таким образом, легко загрузить дополнительную таблицу стилей и сделать ее зависимой от основной таблицы стилей вашей дочерней темы.В ЗАКЛЮЧЕНИИ
После недавнего обновления кодекса отзывы были потрясающими, и я хотел бы поблагодарить всех за это. Я хотел бы призвать всех принять участие в любом типе обратной связи по этому вопросу, в частности. Если у вас есть что добавить или прокомментировать, пожалуйста, сделайте.
источник