Выполнил работу по переносу дизайна и контента сайта c платформы Tilda на CMS WordPress.

Сайт: https://omaldivah.ru/

Подробнее о проекте

Компания Люкс Острова занимается организацией премиум-класса на Мальдивах. Оригинальный сайт компании был создан на платформе Tilda в виде лендинга. Из-за особенностей платформы он перегружен и очень долго грузился. Необходимо было перенести дизайн сайта и контент на CMS WordPress, создать каталог отелей и улучшить показатели скорости по сравнению с оригиналом.

Моя роль в проекте

  • вёрстка по образцу
  • создание валидной WordPress темы
  • создание плагина каталога отелей
  • установка и настройка плагина на хостинге
  • перенос контента

Вёрстка

Проект вёрстки выполнен на Gulp.js. Стили написаны на препроцессоре SASS (синтаксис SCSS), html-код на препроцессоре PUG (Jade). Файлы проекта разделены на логические модули согласно их роли на сайте, что делает вёрстку легко расширяемой.

Вёрстка сайта адаптивна, хорошо отображается на мобильных устройствах и десктопах. Сайт выполнен в виде лендинга. Дополнительно созданы шаблоны для постоянных страниц/постов и блока.

HTML-код полностью валиден и не имеет ошибок и предупреждений.

Результаты анализа валидатора W3C
Результаты анализа валидатора W3C

Тема

Тема интегрирована по всем правилам кодекса wordpress. При интеграции не использовались сторонние плагины или билдеры. Вся настройка темы осуществляется через WordPress Customizer API. Для некоторых блоков главной страницы написаны нестандартные элементы управления. Работает живое превью, т.е. при изменении настроек автоматически обновляется область предварительного просмотра страницы.

Основное внимание было уделено скорости загрузки при сохранении валидности согласно кодексу и расширяемости.

На оригинальном сайте все отели загружались на главную страницу вместе с контентом и дополнительными полями. Заказчик захотел, чтобы для клиента ничего визуально не изменится. Поэтому для сохранения хороших показателей скорости отели подгружаются “порциями” по 5 единиц только во время просмотре с помощью AJAX.

“Отели” загружаются из каталога консоли сайта. Описание отеля и дополнительные поля в виде видео, галерей загружаются только при клике на соответствующие ссылки и открываются в модальных окнах.

Плагин

Плагин построен по аналогии с шаблоном WordPress Plugin Boilerplate и добавляет каталог отелей в виде нестандартного типа записей “Отель”.

“Отель” – неиерархический непубличный пользовательский тип записи. В настройках плагина реализована возможность сделать “Отели” публичными, добавить в карту сайта и а так же создать нестандартные шаблоны для публичной части сайта.

Дополнительные поля “Отеля”:

  • краткое описание по аналогии с описанием товара в WooCommerce
  • стоимость
  • условия проживания (тура)
  • галерея
  • ссылка на видео YouTube с подробным описанием
  • преимущества проживания в виде списка
  • заголовок раздела преимуществ
  • ссылка на страницу (якорь) с возможностью заказать обратный звонок

Скриншоты

Скриншот главной страницы сайта люкс Острова
51голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x