Сайт онлайн школы “СПУТНИК”

Была выполнена вёрстка по образцу и создание 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 появляется метабокс с возможностью выбора преподавателя курса. Информация о преподавателе публикуется в консоли (список товаров) и в публичной части сайта. А на странице преподавателя выводится выборка по курсам, которые он ведёт. Это создаёт перекрёстные ссылки, которые улучшают информативность и удобство использования сайтом, дают прямые ссылки на “товары” сайта.

Галерея