Каталог в блочной теме
Блочная тема описывает страницы сочетанием блоков и общих настроек. Каталог товаров при этом должен получать актуальные данные WooCommerce, а не содержать вручную написанные карточки с ценами. Для «Полки» подготовим небольшую тему, где Product Collection показывает ассортимент, а отдельные Product blocks отвечают за изображение, название, цену и действие.
После урока структура витрины будет храниться в theme files, а содержание товара — в Product records. Эти уровни можно изменять независимо, сохраняя связь через динамические блоки. Тема не запускалась, поэтому её совместимость и визуальные результаты требуют будущего локального открытия в выбранной версии WordPress/WooCommerce.
Файловая тема и настройки редактора
Папка theme/ содержит style.css с заголовком темы, theme.json, functions.php, templates и parts. Наличие templates/index.html делает тему блочной. Header и footer выделены в template parts, чтобы общая шапка не копировалась вручную в каждую страницу. Название сайта и Mini Cart являются динамическими блоками: они получают текущее состояние WordPress и корзины.
В Appearance → Themes активируйте Polka Lab. Затем откройте Editor и найдите шаблон Product Catalog. Его файловый источник — templates/archive-product.html. После изменения через Site Editor WordPress может сохранить пользовательскую версию шаблона в базе. Поэтому исправление файла на диске не всегда сразу меняет страницу: редакторская настройка способна иметь приоритет.
Для учебного сравнения сначала используйте файловый template без дополнительных правок в Editor. Если позже нужно вернуться к файлу, выясните действие reset/clear customizations текущего интерфейса. Не удаляйте случайные database records вручную: редактор должен управлять своими изменениями штатным способом. Файлы и пользовательские overrides следует учитывать в backup отдельно.
Правила template override и стандартные Woo block templates описаны в Theming Woo Blocks. Это primary reference для механизма, а вид нашей «Полки» является авторским учебным решением.
Product Collection сохраняет связь с каталогом
Полный archive-product.html представлен ниже. Его можно сопоставить с блоками в List View, а не воспринимать как обычный статический HTML с готовыми товарами.
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Цифровая Полка</h1>
<!-- /wp:heading -->
<!-- wp:woocommerce/store-notices /-->
<!-- wp:woocommerce/product-collection {"queryId":1,"query":{"perPage":6,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","inherit":true},"displayLayout":{"type":"flex","columns":3,"shrinkColumns":true}} -->
<!-- wp:woocommerce/product-template -->
<!-- wp:woocommerce/product-image /-->
<!-- wp:post-title {"level":2,"isLink":true} /-->
<!-- wp:woocommerce/product-price /-->
<!-- wp:woocommerce/product-button /-->
<!-- /wp:woocommerce/product-template -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- /wp:woocommerce/product-collection -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->Product Collection содержит query и Product Template. Внутренний template повторяется для найденных товаров. Post title получает title текущего Product, product-price — его цену, product-button — допустимое действие. Если GRID-PDF изменит regular price, карточка должна получить новое значение из данных, не требуя ручной замены цифры в HTML.
inherit: true важно на архивной странице: коллекция использует текущий контекст каталога. Поэтому category archive может получить свою выборку, если тема не определила более конкретный template. Если отключить наследование и жёстко задать одни товары, страница категории может показывать чужой ассортимент. Нужный контекст нельзя определить только по одинаковому заголовку «Цифровая Полка».
perPage шесть ограничивает число карточек в порции, а displayLayout описывает расположение. Три columns — учебный вариант для широкой области. Responsive поведение зависит от блоков и их CSS; оно не подтверждено рисунком в статье. При будущей проверке уменьшите окно и убедитесь, что карточки и кнопки остаются понятными без горизонтальной прокрутки.
В коде есть query-pagination. Если четыре родительских Product помещаются на первой странице, ссылки следующей страницы могут не понадобиться. Не добавляйте вымышленные номера ради декоративной полосы: пагинация должна отражать реальный набор данных. Для проверки можно временно уменьшить количество на странице в собственной лаборатории, сохранив ассортимент.
Общие styles не заменяют содержание
Theme.json задаёт contentSize, wideSize, палитру и базовую типографику. Цвет «Бумага» используется для фона, «Чернила» — для текста, акцент — для ссылок. Выбранные значения делают пример спокойным, но не являются полной проверкой контраста каждого возможного состояния кнопки. При локальном запуске проверьте link, focus, disabled и error states отдельно.
В style.css предусмотрен видимый focus outline. Он помогает посетителю, который перемещается клавиатурой, видеть текущий элемент. Не удаляйте его ради более «чистого» снимка интерфейса. Если меняете цвет акцента, оцените outline на фоне карточки и за пределами неё, а не только ссылку в обычном состоянии.
Description Product не должен содержать правила расположения колонок. Содержание говорит о файле и лицензии, тема — о presentation. Если смешать их, смена темы потребует редактировать каждую позицию. Удобнее сохранить понятные semantic fields и использовать динамические блоки, которые показывают их в подходящих местах.
Store Notices в каталоге нужен для уведомлений магазина. Не создавайте отдельное статическое сообщение «Добавлено в корзину» прямо в template: оно останется видимым даже без действия. Динамический блок показывает актуальные notices, связанные с операцией. Это маленький пример того, почему блок — поведение и данные, а не только нарисованная область.
Карточка ведёт к подходящему действию
У простого GRID-PDF кнопка может добавлять позицию, у variable HTML-LAB — предлагать выбрать options. Один статический текст «Купить» для всех карточек скрывает это различие. Product button получает семантику от типа товара. Если покупателю нужен выбор Basic/Extended, каталог должен направить его к странице с этим выбором.
При будущем открытии витрины ожидаются три simple products и родитель «Практикума HTML», а не отдельные случайные карточки детей. Variation принадлежит parent и обычно выбирается на его странице. Если видите дубли родителя, проверьте импорт и SKU; проблема данных не исправляется удалением одной HTML-карточки.
Каталог показывает предложение до выбора конкретного комплекта. Поэтому карточка HTML-LAB может иметь диапазон цен, а карточка GRID-PDF — одну цену 12.00. Это различие полезно сохранить в динамическом выводе: статическая подпись «15.00» у практикума создаст обещание, которое не соответствует Extended за 24.00. Перейдите от карточки к товару и проследите одну цепочку: заголовок, доступные варианты, выбранная цена. Ожидаемый результат — человек понимает источник диапазона, а данные остаются согласованными при будущей правке цены в Products.
Для самостоятельного опыта измените short description FORM-ZIP в Products и оставьте theme file прежним. Затем измените число columns, сохранив Product records. Первый шаг меняет содержание, второй — оформление. Различие результата объясняет архитектуру блочной витрины. В следующем уроке тот же принцип перейдёт на single product: общая структура страницы будет показывать конкретное обещание и параметры выбранного материала.