Апгрейд сайта «В радиусе 5 км» (для WordPress)

На сайте «В радиусе 5 км» проведен глобальный апгрейд. Планировалось изменить поиск по экскурсиям, поиск по направлениям , главную страницу, вывод видео, футер. Все запланированные изменения были выполнены. Подробнее ниже .

Плагин: поиск экскурсий на сайте https://vradiuse5km.ru/

Разработан плагин для поиска экскурсий по сайту WordPress, включающий как отдельные поля поиска (общий поиск, рубрики, метки), так и комбинированный поиск по региону и достопримечательности.

В основе инструмента лежит технология многоуровневого анализа. Сначала искусственный интеллект оценивает общий смысл сгенерированного нейросетью текста, затем обращает внимание на корректность формулировок, термины, логику и внутренние связи между частями материала. Если утверждение выглядит спорным, система предлагает уточнить источник или изменить подачу, чтобы избежать двусмысленности. Это помогает увидеть детали, которые часто остаются незамеченными при ручной проверке.

Сделано:

Функционал полей поиска

• При вводе данных в одно поле остальные поля очищаются автоматически, что предотвращает некорректные результаты.
• Для комбинированного поиска сначала выбирается регион, затем доступные достопримечательности. Выбор только региона без достопримечательности не выполняет поиск.

Подсказки для пользователей

• Для отдельных полей: «Для поиска введите значение в одно из полей. При выборе другого поля предыдущие значения будут очищены автоматически.»
• Для комбинированного поиска: «Точный поиск: сначала выберите регион, затем одну из доступных достопримечательностей.»

Визуальное оформление

• Цвет кнопок, заголовков и элементов формы взят из темы сайта, шрифты и размеры выбраны для удобства чтения.
• Вертикальный разделитель между колонками, адаптивность под мобильные устройства, крупные читаемые поля.

Технологии
Использованы PHP, JavaScript, HTML, CSS, WordPress API, таксономии и фильтры запросов.

Безопасность и корректность
Все введенные пользователем данные проходят санитизацию и фильтрацию перед использованием в запросах, что предотвращает ошибки и угрозы безопасности.

Удобство управления
Плагин можно вставлять через шорткод в любом месте страницы, замещая старый поиск.

Шаблон страницы «Направления экскурсий» с аккордеоном

На странице «Выбор направления» сделаны следующие изменения:

Аккордеон с 2–3 уровнями вложенности:

• Первый уровень – регион/край.
• Второй уровень – город или область.
• Третий уровень – город или поселок (если есть).
  Теперь пользователи могут раскрывать как два, так и три уровня вложенности, что делает навигацию более универсальной.
  Аккордеон полностью интерактивный: кликая по кнопке, пользователь раскрывает или закрывает список, стрелка у кнопки поворачивается при раскрытии.

Функционал полей поиска

• При вводе данных в одно поле остальные поля очищаются автоматически, что предотвращает некорректные результаты.
• Для комбинированного поиска сначала выбирается регион, затем доступные достопримечательности. Выбор только региона без достопримечательности не выполняет поиск.

Поиск по всем уровням:

• Поле поиска ищет регионы, города, поселки и экскурсии.
• Фильтрация динамическая, без перезагрузки страницы.

Кнопки управления:

• «РАЗВЕРНУТЬ ВСЕ РЕГИОНЫ» открывает все регионы сразу, при повторном нажатии – сворачивает.
• «ОЧИСТИТЬ» сбрасывает поиск и закрывает все списки.
  Кнопки работают корректно на мобильных и десктопных версиях.

Галерея достопримечательностей:

• Добавлены изображения с крупным превью (высота 300px).
• Галерея адаптивна и аккуратно отображается на любых устройствах.
• Фото обрезаются по центру, сохраняют пропорции и плавно увеличиваются при наведении.

Используемые технологии: PHP, HTML, CSS, JavaScript (Vanilla JS).

Изменение «Главной» страницы

Главная страница стала современнее и удобнее – сделаны три ключевых изменения.

1. Новая форма поиска. Полноценная замена старой формы: улучшена разметка и доступность (корректные атрибуты label/aria), форма интегрирована с движком поиска WordPress и корректно обрабатывает запросы. Интерфейс формы адаптирован под мобильные устройства и гармонично вписан в общий дизайн.

2. Вывод видео каруселью. На главной видео теперь показываются в виде карусели – переключение по слайдам обеспечивает удобный просмотр подборок прямо с главной страницы. Карусель реализована через легкий JavaScript-компонент (плагин/компонент, подключенный в теме) с оптимизированной загрузкой миниатюр.

3. Изменение сетки для вывода экскурсий. Блоки с направлениями/экскурсиями переведены на адаптивную сетку: многоколоночная раскладка на широких экранах и компактное расположение на планшетах/смартфонах – это делает навигацию по направлениям быстрой и удобной.

Адаптивность: все элементы (форма поиска, карусель, карточки экскурсий) корректно подстраиваются под ширину экрана – десктоп, планшет, смартфон.

Технологии и инструменты (подробно):

• PHP – WordPress-шаблоны и серверная обработка поисковых запросов (стандартный WP-путь).
• HTML5 – семантическая разметка формы и карточек.
• CSS3 – медиазапросы, Flexbox/CSS Grid для адаптивной сетки, стилизация элементов.
• JavaScript – реализована клиентская логика карусели и интерактивные улучшения, в теме может использоваться vanilla JS и/или jQuery (в зависимости от подключенного компонента).
• Оптимизация изображений: использование миниатюр (WP Thumbnails / srcset) и lazy-loading для ускорения загрузки.

Изменение страницы «Видео»

Страница «Видео» оформлена более понятно и современно, реализована гибкая система листинга, есть настройка количества записей на странице.

1. Страница стала более понятной и современной. Обновлен визуальный стиль листинга и навигация по видео.

2. Листинг видео. Вся страница сделана как листинг: упорядоченный показ материалов с миниатюрами и метаданными (название, дата/краткое описание).

3. Миниатюры по 12 на страницу. По умолчанию на страницу выводится 12 миниатюр (постов/видео) с пагинацией.

4. Количество видео на странице можно менять. Параметр posts_per_page (или соответствующая настройка) сделан конфигурируемым – количество миниатюр на странице можно изменить в настройках/шорткоде/админ-панели по необходимости.

5. Сетка/верстка: на десктопе – сетка (по 3 элемента в ряд); на смартфоне – вывод в столбик, удобный для вертикального скролла.

6. Placeholder и оптимизация загрузки: для визуальной стабильности добавлен placeholder миниатюр до загрузки контента, миниатюры оптимизированы по размерам и используют ленивую загрузку.

Адаптивность: сетка и элементы управления полностью адаптивны – десктоп (сеткой), планшет (2-колонки), мобильный (одна колонка/столбик).

Технологии и инструменты (подробно):

• PHP / WordPress – WP_Query для формирования листинга, управление постами и пагинацией.
• HTML5 – разметка листинга и карточек видео.
• CSS3 – Grid/Flexbox и медиазапросы для адаптивной сетки, стилизация миниатюр и метаданных.
• JavaScript – для поведения постраничной навигации, lazy-loading миниатюр и взаимодействия (по необходимости).
• Работа с миниатюрами: использование возможностей WordPress (post thumbnails, srcset) для корректного отображения на ретина/мобильных экранах.

Изменение шаблона записей

Обновила дизайн шаблона внутренних страниц. Ранее использовался классический вариант, который со временем стал менее актуальным. Новый шаблон стал блочным, с четкой структурой и логичным расположением элементов. Каждая часть страницы теперь выделена визуально: заголовки, текст и фотографии формируют аккуратные блоки.

Добавление контента стало простым: достаточно вставить “портянку” – текст и изображения подряд, а шаблон сам распределяет их по структуре. Заголовки H1, H2, H3 оформляются как отдельные секции, фотографии подстраиваются под ширину экрана, а общий ритм страницы остается ровным.

Шаблон использует стандартные технологии: PHP для логики, HTML для структуры и CSS для дизайна. Это позволяет создавать страницы, которые легко читаются и корректно отображаются на всех устройствах.

На мобильных устройствах изображения центрируются, текст выравнивается по левому краю, а карточки последних записей выводятся столбиком, сохраняя прежний размер.

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

Форма заказа