Tours Bashkiria Core

UI Kit — Style Guide

Живой гайд по всем компонентам и секциям темы «Наш Край». Всего 24 компонента.

1. Hero — Блок героя

includes/blocks/class-block-hero.php

Шорткод: tours-bashkiria-core/hero

Главный экран страницы. Большое фоновое изображение с градиентным наложением, логотип, заголовок H1, подзаголовок, CTA-кнопка и кнопка календаря. Поддерживает parallax-эффект.

Атрибуты / Параметры

Атрибут	Тип	По умолчанию	Описание
`title`	string	Экскурсии по Уфе и туры выходного дня	Заголовок H1
`subtitle`	string	Групповые, индивидуальные…	Подзаголовок/описание
`backgroundImage`	number	0	ID фонового изображения (WP media)
`buttonText`	string	Подобрать тур	Текст основной CTA кнопки
`buttonUrl`	string	/tury/	Ссылка CTA кнопки
`showLogo`	boolean	true	Показывать логотип в герое

Стили (наследуются от Block_Style_Utils): bgColor, textColor, padding, maxWidth, titleFontSize, titleFontWeight, textFontSize, textAlign, paddingTop/Bottom/Left/Right, marginTop/Bottom, borderRadius, borderWidth/Color/Style, boxShadow, bgGradient, bgOverlay, hoverEffect, hoverColor, fullWidth.

Предпросмотр: Тёмно-зелёный градиент на фоновом изображении. Логотип (горы) слева вверху, H1 крупным шрифтом по центру, подзаголовок, две кнопки — «Подобрать тур» (primary) и «Календарь выездов» (ghost). Флаг Башкортостана (сине-бело-зелёный) декоративным элементом внизу.

2. Категории туров

includes/blocks/class-block-categories.php

Шорткод: tours-bashkiria-core/categories

Сетка из 6 карточек-категорий туров. Каждая карточка — ссылка на страницу с фильтром по типу тура. Фоновые изображения с тёмным градиентом, заголовок и описание.

Атрибуты / Параметры

Атрибут	Тип	Описание
`cards`	array	Массив объектов card: title, description, link, backgroundImage
`cards[].title`	string	Название категории
`cards[].description`	string	Краткое описание с количеством туров
`cards[].link`	string	Ссылка на страницу с фильтром
`cards[].backgroundImage`	number	ID фонового изображения

По умолчанию: Однодневные, Экскурсии, Экскурсии по Уфе, Джип-туры, Туры по России, SPA.

Предпросмотр: Секция с заголовком «Экскурсии и туры». Сетка 3×2 карточек с тёмными фонами на изображениях. В каждой — название категории, описание, ссылка «подробнее →». При наведени — легкая анимация.

3. Карточка тура

includes/blocks/class-block-tours-grid.php

Шорткод: tours-bashkiria-core/tours-grid

Карточка тура в каталоге. Содержит галерею изображений (слайдер), название, продолжительность, уровень сложности (индикатор 1-4), цену от и кнопку «Подробнее».

Элементы карточки

Элемент	Селектор	Описание
Галерея	`.nk-tour-card__slider`	Слайдер изображений (до 5 шт). При наведении прокручивается вправо.
Заголовок	`.nk-tour-card__title`	H3 — название тура
Длительность	`.nk-tour-card__duration`	Иконка часов + текст (напр. «7 дней / 6 ночей»)
Сложность	`.nk-diff-bar`	4 сегмента (1=зелёный, 2=жёлтый, 3=оранжевый, 4=красный)
Цена	`.nk-tour-card__price`	«от 12 000 руб» — из расписания
Кнопка	`.nk-btn--primary`	«Подробнее»

Предпросмотр: Карточка на белом фоне. Верх — изображение тура (галерея со слайдами), ниже — название, иконка часов + длительность, индикатор сложности. Внизу — цена и кнопка.

4. Фильтры каталога

includes/blocks/class-block-tours-grid.php (строка 77-95)

Встроены в tours-grid при showFilters=true

Табы фильтрации по типу тура. Переключают туры по taxonomy tour_type. Также select-фильтры в календаре заездов.

Типы фильтров

Фильтр	Тип	Значения
Тип тура	tab / select	Все, Однодневные, Туры по России, Экскурсии, Термы & SPA, Джип-туры, Фестивали, По Уфе
Сезон	select	Все, Весна, Лето, Осень, Зима
Сложность	select	Любая, Лёгкий, Средний, Сложный, Экстремальный
Регион	select	Башкортостан, Татарстан, Дагестан, Алтай, Карелия, Крым и др.

Предпросмотр: Ряд табов с названиями типов. Активный таб подсвечен. Select-фильтры — выпадающие списки в одну строку.

5. Календарь заездов

includes/class-shortcodes.php

Шорткод:

        
        
            
                Календарь заездов
                
                    
                    Август 2026
                    
                
                
                    
                    
                    
                    
                
                
                     ≥ 8 мест
                     3–7 мест
                     1–2 места
                
            
            
                Загрузка календаря…

Интерактивный календарь с датами заездов. Показывает свободные места на каждую дату. Фильтрация по типу, сложности, сезону, региону. REST API.

Легенда

Цвет	Значение
Зелёный	≥ 8 свободных мест
Жёлтый	3-7 свободных мест
Красный	1-2 свободных места

Предпросмотр: Календарная сетка на месяц. Каждая дата — ячейка с цветом. Навигация ← Месяц →. Попап при клике — список туров с бронированием.

6. Социальное доказательство

includes/class-frontend.php (строки 260-290, на главной)

4 блока с иконками для повышения доверия. Только на главной (статический fallback).

Иконка	Текст
Люди	90% туристов возвращаются
Звезда	Лучшие экскурсоводы
Галочка	Насыщенные программы
Сердце	Нас выбирают

Предпросмотр: Горизонтальный ряд из 4 блоков с разделителями. Иконка + жирный текст + пояснение. Анимация появления при скролле.

7. Как это работает

includes/class-frontend.php (строки 292-333, на главной)

Секция с 4 шагами: выбор тура, связь, оплата, отправление. Номер, иконка, заголовок, описание.

#	Заголовок	Описание
01	Выберите тур	87 авторских маршрутов по Башкирии
02	Свяжитесь с нами	WhatsApp или заявка на сайте
03	Оплатите удобно	Предоплата от 2000 руб
04	Отправляйтесь в путь	Встреча в Уфе, всё под ключ

Предпросмотр: Заголовок «Как это работает». Сетка 4 колонки. Каждый шаг: номер в круге, иконка, заголовок, описание. Анимация.

8. Ценности (Values)

includes/blocks/class-block-values.php

Шорткод: tours-bashkiria-core/values

4 карточки-ценности компании. Иконка (SVG или кастом), заголовок, описание. Эффект свечения под иконкой.

Атрибуты

Атрибут	Тип	Описание
`items`	array	Массив: icon (URL), title, description

Предпросмотр: «Почему выбирают нас». Сетка 2×2. Иконка со свечением, заголовок, описание.

9. Превью блога

includes/blocks/class-block-blog-preview.php

Шорткод: tours-bashkiria-core/blog-preview

Сетка последних статей блога. Изображение, дата, заголовок, отрывок.

Атрибуты

Атрибут	Тип	По умолч.	Описание
`title`	string	Полезные статьи	Заголовок секции
`count`	number	3	Количество постов (max 6)
`showMoreLink`	boolean	true	Ссылка «Все статьи»

Предпросмотр: Сетка карточек. Фото, дата (иконка + число), H3-заголовок, отрывок. Ссылка «Все статьи» снизу.

10. FAQ — Аккордеон

includes/blocks/class-block-faq.php

Шорткод: tours-bashkiria-core/faq

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

Атрибуты

Атрибут	Тип	Описание
`items`	array	Массив: question (string), answer (string, HTML)

Предпросмотр: «Часто задаваемые вопросы». Список вопросов со стрелкой вниз. Раскрытие ответа. Стрелка поворачивается.

11. Отзывы (Reviews)

includes/blocks/class-block-reviews.php

Шорткод: tours-bashkiria-core/reviews

Сетка карточек отзывов. Звёздный рейтинг, текст, автор с фото.

Атрибуты

Атрибут	Тип	Описание
`items`	array	Массив: text, author, photo (ID), rating (1-5)

Предпросмотр: «Отзывы путешественников». 5 звёзд (заполненные/пустые), текст курсивом, имя + аватарка.

12. Карточка гида

includes/blocks/class-block-guides.php

Шорткод: tours-bashkiria-core/guides

Сетка карточек гидов. Фото (или плейсхолдер), имя, описание. Свечение под фото.

Атрибуты

Атрибут	Тип	Описание
`items`	array	Массив: photo (ID), name, description

Предпросмотр: «Наши гиды». Сетка 4 карточек. Круглое фото с зелёным свечением, имя, описание.

13. Футер (Footer)

includes/blocks/class-block-footer.php

Шорткод: tours-bashkiria-core/footer

Подвал сайта. Логотип, описание, соцсети, колонки ссылок, контакты, копирайт.

Атрибуты

Атрибут	Тип	По умолч.	Описание
`phone`	string	+7 917 456 61 66	Телефон
`email`	string	info@turrb.ru	Email
`vkUrl`	string	https://vk.com/turrb	VK
`telegramUrl`	string	https://t.me/turrb	Telegram
`aboutText`	string	—	Текст о компании
`columns`	array	3 колонки	title + links (формат \|)

Предпросмотр: Тёмный фон. Волна сверху. Логотип + описание + соцсети. 3 колонки ссылок. Контакты. Копирайт.

14. Шапка сайта (Header)

includes/class-frontend.php (render_header, строки 102-145)

Фиксированная шапка. Зелёный полупрозрачный фон + blur. Логотип, навигация (Nav_Walker), поиск, телефон, бургер.

Элементы

Элемент	Описание
Логотип	SVG гор + «Наш Край» + подпись
Навигация	wp_nav_menu primary. Десктоп + выпадающие подменю
Поиск	Иконка лупы → overlay поиска
Телефон	Ссылка tel: .nk-btn—primary
Бургер	Открывает мобильное меню

Настройки Customizer

ID	По умолч.
tbc_logo_text	Наш Край
tbc_logo_subtext	Туры по Башкирии
tbc_company_phone	+7 917 456 61 66

Предпросмотр: Фиксированная панель 64px. Слева логотип, центр — ссылки, справа — поиск + телефон + бургер. Blur при скролле.

15. Мобильное меню

includes/class-frontend.php (render_header, строки 147-191)

Полноэкранное мобильное меню. Тёмный фон + blur. Логотип, навигация с подменю, контакты, избранное, ЛК.

Элемент	Описание
Шапка	Логотип + крестик закрытия
Навигация	Вертикальный список. Подменю раскрываются по клику
Контакты	Телефон, избранное, личный кабинет

Предпросмотр: Затемнение фона, панель с логотипом и крестиком. Список ссылок. Подменю раскрываются. Внизу — контакты.

16. Хлебные крошки (Breadcrumbs)

wp-content/themes/nashkray-theme/functions.php (nk_render_breadcrumbs, строка 115)

Шорткод:

Навигационная цепочка. Отображается на всех страницах, кроме главной.

Тип страницы	Цепочка
Страница	Главная / Название
Одиночный тур	Главная / Туры / Название
Архив туров	Главная / Туры
Запись	Главная / Категория / Название
404	Главная / Страница не найдена

Предпросмотр: «Главная / Туры / Название тура». Разделитель — слэш.

17. Блок контактов

includes/blocks/class-block-contacts.php

Шорткод: tours-bashkiria-core/contacts

Контактная информация: телефон, email, адрес, режим работы. Каждый контакт — иконка + подпись + значение. Опционально карта.

Атрибуты

Атрибут	Тип	По умолч.	Описание
`phone`	string	+7 917 456 61 66	Телефон
`email`	string	info@turrb.ru	Email
`address`	string	г. Уфа, ул. Ленина, 28, офис 312	Адрес
`schedule`	string	Пн-Пт 10:00-19:00, Сб 11:00-16:00	Режим работы
`mapUrl`	string	—	URL iframe карты

Предпросмотр: «Контакты». Слева 4 блока с иконками (телефон, email, адрес, часы). Справа — карта.

18. Кнопка избранного (Favorites)

includes/class-favorites.php + includes/elementor/widgets/class-tour-favorites-button.php

Кнопка «В избранное». Сердечко (пустое/заполненное). AJAX. Для авторизованных — user_meta, для гостей — cookie.

Параметры (Elementor)

Параметр	По умолч.	Описание
label_add	В избранное	Текст неактивного состояния
label_remove	В избранном	Текст активного состояния
icon_color_inactive	#64748b	Цвет иконки
icon_color_active	#E87722	Цвет активной иконки
icon_size	20px	Размер иконки

Предпросмотр: Сердечко + текст. Неактивное — серый контур. Активное — оранжевое с заливкой. AJAX-переключение.

19. Модалка бронирования

includes/class-frontend.php (render_modal, строки 554-604)

Модальное окно бронирования тура. Форма: имя, телефон (обязательно), email, взрослые/дети, комментарий. Чекбокс согласия. Итоговая сумма. AJAX-отправка.

Поля формы

Поле	Треб.	Описание
name	Да	Имя
phone	Да	Телефон
email	Нет	Email
adults	Нет	Количество взрослых (1 по умолч.)
children	Нет	Количество детей (0 по умолч.)
comment	Нет	Комментарий
offer_consent	Да	Чекбокс согласия с офертой

Предпросмотр: Затемнение фона, модальное окно с заголовком «Бронирование». Поля формы. Итоговая сумма. Кнопка «Отправить заявку». После отправки — сообщение об успехе.

20. Форма консультации

includes/class-frontend.php (render_modal, строки 606-629)

Форма обратной связи для консультации. Открывается по кнопке в правом нижнем углу. Поля: имя, телефон, комментарий. Чекбокс согласия.

Поля

Поле	Треб.	Описание
name	Да	Имя
phone	Да	Телефон
comment	Нет	Комментарий

Предпросмотр: Кнопка с иконкой чата «Консультация» в правом нижнем углу. При клике — overlay с формой. Поля + чекбокс согласия + кнопка «Отправить». Успешная отправка — галочка и сообщение.

21. WhatsApp плавающая кнопка

includes/class-frontend.php (render_modal, строка 549-552)

Фиксированная кнопка WhatsApp в правом нижнем углу. Иконка с логотипом WhatsApp, ссылка wa.me/79174566166.

Предпросмотр: Круглая зелёная кнопка с иконкой WhatsApp. Фиксирована в правом нижнем углу. При наведении — легкое увеличение. Открывает чат WhatsApp в новом окне.

22. Cookie-баннер

includes/admin/class-legal-settings.php (cookie_banner, строка 79)

Баннер с уведомлением об использовании cookie. Отображается внизу экрана до принятия пользователем. Текст настраивается в админке.

Настройки

Опция	ID	По умолчанию
Текст cookie	tbc_cookie_notice	«Мы используем cookie…»

Предпросмотр: Фиксированная панель внизу. Текст уведомления слева, кнопка «Принять» справа. Тёмный фон с blur. После принятия — скрывается (cookie nk_cookie_accepted).

23. Чекбокс согласия (152-ФЗ)

includes/admin/class-legal-settings.php (render_consent_checkbox, строка 101)

Чекбокс согласия с договором оферты и политикой конфиденциальности. Используется в формах бронирования и консультации. Требуется для отправки формы.

Настройки

Опция	ID	По умолчанию
Текст согласия	tbc_offer_text	«Я согласен с условиями договора оферты…»

Предпросмотр: Чекбокс с текстом-ссылками на оферту, политику конфиденциальности и правила возврата. Зелёный accent color. Требуется для отправки формы (required).

24. Боковое меню ЛК

wp-content/themes/nashkray-theme/template-parts/account-dashboard.php + includes/class-account.php

Боковое меню личного кабинета. Аватар пользователя, имя, email. Ссылки: Мои поездки, История бронирований, Избранное, Выйти. Активный пункт подсвечен.

Страницы ЛК

URL	Содержимое
/account/	Дашборд: последние 5 бронирований
/account/bookings/	Вся история бронирований
/account/favorites/	Список избранных туров с ценами и датами

Предпросмотр: Слева — вертикальное меню с аватаром и именем пользователя. Пункты: Мои поездки, История бронирований, Избранное, Выйти. Справа — содержимое страницы. На мобильных — скрывается.

UI Kit

UI Kit — Style Guide

Содержание

1. Hero — Блок героя

Атрибуты / Параметры

2. Категории туров

Атрибуты / Параметры

3. Карточка тура

Элементы карточки

4. Фильтры каталога

Типы фильтров

5. Календарь заездов

Календарь заездов

Легенда

6. Социальное доказательство

7. Как это работает

8. Ценности (Values)

Атрибуты

9. Превью блога

Атрибуты

10. FAQ — Аккордеон

Атрибуты

11. Отзывы (Reviews)

Атрибуты

12. Карточка гида

Атрибуты

13. Футер (Footer)

Атрибуты

14. Шапка сайта (Header)

Элементы

Настройки Customizer

15. Мобильное меню

16. Хлебные крошки (Breadcrumbs)

17. Блок контактов

Атрибуты

18. Кнопка избранного (Favorites)

Параметры (Elementor)

19. Модалка бронирования

Поля формы

20. Форма консультации

Поля

21. WhatsApp плавающая кнопка

22. Cookie-баннер

Настройки

23. Чекбокс согласия (152-ФЗ)

Настройки

24. Боковое меню ЛК

Страницы ЛК