
Сайт онлайн школы “СПУТНИК”
Была выполнена вёрстка по образцу и создание WordPress темы с поддержкой WooCommerce.
Адрес работы: https://websputnik.school/
Школа “СПУТНИК” – это русская онлайн школа для детей билингвов. Занятия в школе проводятся на русском языке в Skype и Zoom. Дети обучаются математике, русскому языку, чтению, естественным наукам, географии, музыке. Курсы обучения делятся на разные возрастные группы (категории). Есть отдельные страницы страницы преподавателей, с их контактами, ссылками на профили социальных сетей и контактной формой.
Старый сайт школы был создан в Wix и уже “вырос” из возможностей этой системы. Поэтому требовалось полностью перенести сайт на WordPress и настроить Woocommerce с системой бронирования. Где “товар” – это обучение на курсе, а бронирование – это запись на курс и предварительное платное тестирование.
Бронирование на на сайте реализовано как расширение функционала WooCommerce. Это отдельная разновидность “товара” для который можно настроить выбор даты.
Моя роль в проекте
- вёрстка дополнительных шаблонов страниц (архивы, страницы преподавателей, страница результатов поиска, списков предметов, категория курсов в разрезе преподавателя и предмета)
- интеграция html вёрстки на wordpress;
- установка и настройка темы и плагинов на хостинге;
- кастомизация шаблонов WooCommerce;
- создание WordPress плагина для реализации дополнительного функционала;
- перенос контента с Wix.
HTML-вёрстка
HTML-вёрстка выполнена совместно с Roman Tykhonenko. Вёрстка основана на фреймвёрке Bootstrap 4. Макет адаптивный, корректно отображается на в разных браузерах и при разных разрешениях экрана.
Используемые библиотеки и фреймвёрки:
- Bootstrap 4 – это открытый и бесплатный HTML, CSS и JS фреймворк;
- LazyLoad.js – jQuery плагин для добавления “ленивой” загрузки изображений;
- Superembed.js – обнаруживает встроенное видео популярных видеосервисов и делает его адаптивным;
- jQuery -популярный JavaScript фреймворк;
- Slick.js – популярный слайдер.
WordPress тема
Была создана валидная WordPress тема с поддержкой шаблонов WooCommerce и дополнительного функционала написанного индивидуально для сайта школы.
Главная страница темы выполнена в виде Лендинга и несёт рекламный характер. Состоит из блоков с описанием работы школы, списком преподавателей, перечнем возрастных групп и курсов, примеры работ учеников школы. Все блоки главной страницы редактируются через Customizer API WordPress.
На постоянных страницах и страницах постов блога используется “ленивая” загрузка изображений. “Ленивая закрузка” добавлена с помощью js-библиотеки Zepto Lazy.
Подробней: «Ленивая загрузка» изображений в WordPress.
WordPress плагин
Плагин построен по идеологии шаблона WordPress Plugin Boilerplate. Это позволяет в дальнейшем легко добавлять новый функционал. Код плагина соответствует принципам объектно-ориентированного программирования.
Плагин добавляет следующий функционал:
- список преподавателей и страницы преподавателей;
- добавляет к страницам преподавателей списки контатов и контактную форму, письма с которой приходят на email преподавателя;
- связывает товары WooCommerce (курсы) и преподавателей, т.е. на странице товара (курса) отображается информация о преподавателе;
- создаёт дополнительную таксономию “Предметы” для товаров (курсов) WooCommerce;
- добавляет возможность создания в теме дополнительных шаблонов для “предметов” и “преподавателей”;
- дополнительные поля категорий товаров WooCommerce для настройки справочной информации;
- добавляет для категорий курсов WooCommerce опции создания модального окна с формой регистрации нового ученика школы.
Страницы преподавателей – это отдельный тип записи, при редактировании которого в метаполя сохраняются информация о социальных сетях и форме обратной связи. Форма обратной связи с преподавателем реализована по аналогии с простой контактной формой для сайта.
Подробнее Простая форма обратной связи для WordPress-темы.
При редактировании курса в WooCommenrce появляется метабокс с возможностью выбора преподавателя курса. Информация о преподавателе публикуется в консоли (список товаров) и в публичной части сайта. А на странице преподавателя выводится выборка по курсам, которые он ведёт. Это создаёт перекрёстные ссылки, которые улучшают информативность и удобство использования сайтом, дают прямые ссылки на “товары” сайта.