Доработка сайта «В радиусе 5 км» на WordPress
Комплексная доработка туристического сайта самостоятельных экскурсий «В радиусе 5 км».
В рамках проекта переработаны поиск экскурсий, страница выбора направлений, главная страница, раздел с видео, футер и шаблон записей.
Часть функций разработана отдельно на PHP и JavaScript с интеграцией в WordPress. Все основные элементы адаптированы для компьютеров, планшетов и смартфонов.
Сайт: vradiuse5km.ru
Задача
Сайт уже работал и содержал большой объем экскурсионных материалов. Требовалось обновить основные пользовательские сценарии без полной пересборки проекта.
Главный объем работы касался поиска и навигации по экскурсиям. Одновременно обновлялись главная страница, видеораздел, футер и шаблон публикаций.
Новые решения нужно было встроить в существующую структуру WordPress и сохранить возможность дальнейшего наполнения сайта материалами.
Что доработано
- плагин поиска экскурсий;
- комбинированный поиск;
- аккордеон направлений;
- главная страница;
- вывод видеоматериалов;
- футер сайта;
- шаблон внутренних записей;
- мобильная версия.
Плагин поиска экскурсий
Для сайта разработан отдельный плагин WordPress с несколькими вариантами поиска. Пользователь может искать материалы по общему запросу, рубрике или метке.
Дополнительно реализован комбинированный сценарий по региону и достопримечательности. Сначала выбирается регион, после этого становятся доступны связанные с ним объекты.
Если пользователь начинает работать с другим полем поиска, предыдущие значения очищаются автоматически. Это исключает конфликт между разными сценариями и случайное сочетание несовместимых параметров.
Для комбинированного варианта одного региона недостаточно. Поиск запускается после выбора достопримечательности, поэтому запрос формируется по двум связанным параметрам.
Интерфейс поиска
Поля и кнопки оформлены в цветовой гамме существующего сайта. Для каждого сценария добавлены подсказки, поясняющие порядок ввода данных.
Форма перестраивается на небольших экранах. Размеры полей и элементов управления рассчитаны на работу с мобильных устройств.
Технологии
- PHP;
- JavaScript;
- HTML;
- CSS;
- WordPress API;
- таксономии WordPress;
- фильтры запросов.
Введенные значения проходят очистку и фильтрацию перед выполнением запроса. Плагин подключается через шорткод, поэтому форму можно разместить в нужной части страницы.
Страница выбора направлений
Страница направлений переработана в многоуровневый интерактивный аккордеон. Первый уровень содержит регионы и края, следующие уровни — города, области и более мелкие населенные пункты.
В разных ветках используется два или три уровня вложенности. Пользователь раскрывает только нужное направление, а стрелка возле кнопки показывает текущее состояние блока.
Внутри страницы работает динамический поиск. Он проверяет регионы, города, поселки и экскурсионные материалы без перезагрузки страницы.
Для управления аккордеоном добавлены две отдельные кнопки. Первая раскрывает или закрывает все регионы, вторая очищает запрос и возвращает списки в исходное состояние.
На этой же странице размещена адаптивная галерея достопримечательностей. Фотографии выводятся крупными превью, сохраняют пропорции и увеличиваются при наведении курсора.
Обновление главной страницы
На главной заменена старая форма поиска. Новая версия связана со стандартным поисковым механизмом WordPress и адаптирована под мобильные экраны.
Для видеоматериалов добавлена карусель. Посетитель может просматривать подборку непосредственно на главной странице без вывода всех элементов одновременно.
Блоки экскурсий и направлений переведены на адаптивную сетку. На широком экране используется несколько колонок, на планшетах и смартфонах количество колонок уменьшается.
Для формы и карточек доработана HTML-разметка, CSS отвечает за сетку и медиазапросы, JavaScript используется для интерактивных элементов.
Видео, футер и шаблон записей
Раздел с видео
Страница переделана в листинг с миниатюрами и постраничной навигацией. По умолчанию выводится 12 материалов.
На компьютере используется сетка по три элемента в строке. На планшете остаются две колонки, на смартфоне — одна.
Для миниатюр предусмотрены оптимизированные размеры, placeholder и отложенная загрузка.
Футер
В подвале переработаны структура, размеры текста и отступы. Меню стало компактнее и занимает меньше пространства.
Графические иконки социальных площадок заменены текстовыми ссылками: Zen, Telegram, OK и VK.
Для мобильной версии изменено расположение элементов, размеры ссылок и интервалы.
Шаблон записей
Внутренние публикации получили новую блочную структуру. Заголовки, тексты и изображения формируют отдельные части страницы.
Контент можно размещать последовательно, а шаблон задает его оформление. H1, H2 и H3 получают предусмотренное для них оформление.
На мобильных устройствах фотографии центрируются и подстраиваются по ширине, а карточки последних записей выводятся вертикально.
Скриншоты доработок
На скриншотах показаны форма поиска, страница направлений, обновленная главная, футер, видеораздел и внутренний шаблон.
Результат доработки
В рамках одного этапа обновлены основные точки взаимодействия посетителя с сайтом: поиск, выбор направления, главная страница, видео и внутренние публикации.
Новые функции встроены в существующий проект WordPress. Сайт сохранил накопленный контент, но получил другую логику поиска, навигации и представления материалов.