Vyatka Shop

Тема WordPress для интернет-магазина, сверстанная по макету Figma. Каталог, карточка товара, корзина, оформление заказа и блог — на WooCommerce, весь контент правится из админки.

Стек: WordPress, WooCommerce, PHP 8.2+, vanilla CSS и JS. Сборщика нет, зависимостей нет — тема кладётся в wp-content/themes/ и работает.

Установка

1. Скопировать папку темы в wp-content/themes/vyatka-shop.
2. Установить и активировать WooCommerce.
3. Активировать тему в «Внешний вид → Темы».

Дальше WooCommerce сам предложит создать страницы магазина. Меню задаётся в «Внешний вид → Меню», заголовок и подзаголовок первого экрана — в «Внешний вид → Настроить → Главная страница».

Доступ в админку

Адрес:  /wp-admin/
Логин:  demo
Пароль: VyatkaDemo2026

Как устроено

Стили разбиты на слои и подключаются строго по порядку — каждый следующий опирается на предыдущие и не лезет обратно:

tokens      переменные из Figma: цвета, типографика, радиусы, отступы
base        шрифт, ресет, типографическая шкала
components  кнопки, поля, чекбоксы, радио, селекты, счётчик количества
layout      шапка, общие блоки страницы, подвал
home        главная: hero, карточки товаров, категорий, новостей
catalog     категория: фильтры, тулбар, пагинация
product     карточка товара: галерея, характеристики, табы
blog        блог и статья
responsive  брейкпоинты — идёт после всех слоёв, которые правит
misc        разделители, состояния наведения, мобильный лист фильтров

style.css содержит только заголовок темы для WordPress, стилей в нём нет.

Значения не подбирались на глаз: цвета, размеры шрифтов, межстрочные, трекинг, радиусы и отступы взяты из Variables и текстовых стилей Figma и вынесены в assets/css/tokens.css. Ниже по слоям хардкода цветов и размеров нет — всё через переменные.

PHP так же разложен по зонам ответственности, functions.php только подключает модули:

inc/icons.php          инлайн-SVG иконки
inc/setup.php          theme supports, меню, кастомайзер
inc/urls.php           ссылки под текущий хост
inc/template-tags.php  общие хелперы вывода
inc/assets.php         подключение стилей и скриптов
inc/woocommerce.php    каталог, оформление заказа, AJAX-корзина

Иконки — набор Phosphor, лежат как обычные .svg в assets/icons/ и вставляются в разметку инлайном через vyatka_shop_icon(). Символами или шрифтом иконок в теме не рисуется ничего, поэтому они наследуют currentColor и масштабируются из CSS.

Стили WooCommerce отключены — вся вёрстка своя, чужие правила перебивать не приходится, и !important в теме нет.

Заметки

• Тема не привязана к домену. Если сайт открывается ещё под каким-то именем помимо того, что записано в настройках WordPress (например, за прокси), это имя объявляется в wp-config.php:

  define( 'VYATKA_SHOP_HOSTS', 'shop.example.com' );
  

• Реализована светлая тема — та, в которой нарисованы экраны. Тёмная палитра в макете есть, но экранов под неё нет, поэтому она не версталась.