Вопрос или проблема
У меня в файле theme.json моей темы FSE есть следующие строки кода:
"version": 2,
"settings": {
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
}
}
}
Если я сейчас вставлю следующий блок в мой index.html, он будет сжат до ширины ContentSize:
<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:query -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<div class="wp-block-query-pagination">
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
</div>
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
Теперь, когда я хочу сделать то же самое в нижнем колонтитуле, контент не сжимается до ContentSize:
<!-- wp:group {"layout":{"inherit":true}} -->
<div class=""> Сделано Reto Ulrich Mediendesign AG, <a href="https://www.rumede.ch" class="link-primary" target="_blank">www.rumede.ch</a> </div>
<!-- /wp:group -->
Может кто-нибудь сказать мне, когда именно работает layout:inherit, или что нужно учитывать для этого? И есть ли возможность масштабироваться до wideSize вместо ContentSize?
Чтобы масштабироваться до wideSize, необходимо включить широкое выравнивание для дочернего блока(ов).
– Второй пример кода неполный, возможно поэтому ширина была неверной для нижнего колонтитула.
Вы можете использовать редактор сайтов, чтобы визуально создать свой нижний колонтитул (установить его на контентную или широкую ширину и т. д.).
Затем переключитесь на редактор кода в редакторе сайтов и скопируйте коды блоков.
Наконец, вставьте скопированный код в часть шаблона footer.html.
Ответ или решение
Проблемы с наследованием макета в theme.json
Ваша проблема связана с определением параметров макета в файле theme.json и тем, как они применяются к различным блокам в вашем шаблоне. Давайте подробнее разберёмся с этим вопросом.
Правильная настройка theme.json
В вашем theme.json в разделе "settings" определены два важных параметра:
"contentSize": 840px"wideSize": 1100px
Эти параметры отвечают за ширину содержимого и ширину для широких элементов. Тем не менее, правильное применение этих параметров зависит от того, как вы используете блоки и их настройки.
Проблема с блоком Group в Footer и неизменяемая ширина
При добавлении блока Group с параметром {"inherit":true} он, как вы отметили, сохраняет ширину контента, что может не соответствовать вашим ожиданиям. Это происходит потому, что для наследуемых блоков layout применяется логика, основанная на контексте родительского блока.
Почему это происходит?
-
Темы и наследование: Нередко для различных компонентов темы используются разные правила применения ширины. Когда блок находится внутри другого блока с фиксированной шириной, он может унаследовать эту ширину, если у него не указано иное.
-
Неполный код блока: Обратите внимание на структуру вашего кода. Например, вы использовали:
<!-- wp:group {"layout":{"inherit":true}} --> <div class=""> Сделано Reto Ulrich Mediendesign AG, <a href="https://www.rumede.ch" class="link-primary" target="_blank">www.rumede.ch</a> </div> <!-- /wp:group -->Убедитесь, что вы корректно структурируете блоки и добавляете все необходимые параметры.
Как сделать так, чтобы блоки могли занимать широкую ширину?
Чтобы ваши блоки корректно отображались с шириной wideSize, вам необходимо удостовериться, что все дочерние блоки имеют активированное широкое выравнивание (wide alignment). Это можно сделать, добавив соответствующие настройки для каждого блока внутри родительского Group и задав нужные параметры.
Предложения по улучшению
-
Использование редактора сайтов: Эффективным способом построения футера будет использование визуального редактора сайтов, где вы сможете установить ширину на уровне содержимого или широкой ширины. После того как вы настроите футер, переключитесь в кодовый редактор и скопируйте сгенерированный код. Это упростит процесс реализации и избежит ошибок.
-
Тестирование с различными блоками: Попробуйте использовать другие блоки (например, контент с изображениями) для проверки, как ведёт себя каждый из них в рамках вашей темы. Понять правильность работы системного наследования можно только через практическое тестирование, применяя разные комбинации.
-
Внимание к структуре кода: Убедитесь, что вы прописываете все блоки внимательно и следите за тем, чтобы не было пропускаемых параметров, что может негативно сказаться на их ширине.
Заключение
Проблемы с макетом в theme.json могут быть комплексными и зависят от множества факторов, включая статью кода, наследование блоков и настройки демократии. Следуя предложенным рекомендациям и учитывая правильное оформление блоков, вы сможете справиться с ситуацией и добиться желаемого результата.