Сайт онлайн школы "СПУТНИК" - Портфолио chomovva

Была выполнена вёрстка по образцу и создание WordPress темы с поддержкой WooCommerce.

Адрес работы: https://websputnik.school/

Школа “СПУТНИК” – это русская онлайн школа для детей билингвов. Занятия в школе проводятся на русском языке в Skype и Zoom. Дети обучаются математике, русскому языку, чтению, естественным наукам, географии, музыке. Курсы обучения делятся на разные возрастные группы (категории). Есть отдельные страницы страницы преподавателей, с их контактами, ссылками на профили социальных сетей и контактной формой.

Старый сайт школы был создан в Wix и уже “вырос” из возможностей этой системы. Поэтому требовалось полностью перенести сайт на WordPress и настроить Woocommerce с системой бронирования. Где “товар” – это обучение на курсе, а бронирование – это запись на курс и предварительное платное тестирование.

Бронирование на на сайте реализовано как расширение функционала WooCommerce. Это отдельная разновидность “товара” для который можно настроить выбор даты.

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

  • вёрстка дополнительных шаблонов страниц (архивы, страницы преподавателей, страница результатов поиска, списков предметов, категория курсов в разрезе преподавателя и предмета)
  • интеграция html вёрстки на wordpress;
  • установка и настройка темы и плагинов на хостинге;
  • кастомизация шаблонов WooCommerce;
  • создание WordPress плагина для реализации дополнительного функционала;
  • перенос контента с Wix.

HTML-вёрстка

HTML-вёрстка выполнена совместно с Roman Tykhonenko. Вёрстка основана на фреймвёрке Bootstrap 4. Макет адаптивный, корректно отображается на в разных браузерах и при разных разрешениях экрана.

Используемые библиотеки и фреймвёрки:

WordPress тема

Была создана валидная WordPress тема с поддержкой шаблонов WooCommerce и дополнительного функционала написанного индивидуально для сайта школы.

Главная страница темы выполнена в виде Лендинга и несёт рекламный характер. Состоит из блоков с описанием работы школы, списком преподавателей, перечнем возрастных групп и курсов, примеры работ учеников школы. Все блоки главной страницы редактируются через Customizer API WordPress.

На постоянных страницах и страницах постов блога используется “ленивая” загрузка изображений. “Ленивая закрузка” добавлена с помощью js-библиотеки Zepto Lazy.

Подробней: «Ленивая загрузка» изображений в WordPress.

WordPress плагин

Плагин построен по идеологии шаблона WordPress Plugin Boilerplate. Это позволяет в дальнейшем легко добавлять новый функционал. Код плагина соответствует принципам объектно-ориентированного программирования.

Плагин добавляет следующий функционал:

  • список преподавателей и страницы преподавателей;
  • добавляет к страницам преподавателей списки контатов и контактную форму, письма с которой приходят на email преподавателя;
  • связывает товары WooCommerce (курсы) и преподавателей, т.е. на странице товара (курса) отображается информация о преподавателе;
  • создаёт дополнительную таксономию “Предметы” для товаров (курсов) WooCommerce;
  • добавляет возможность создания в теме дополнительных шаблонов для “предметов” и “преподавателей”;
  • дополнительные поля категорий товаров WooCommerce для настройки справочной информации;
  • добавляет для категорий курсов WooCommerce опции создания модального окна с формой регистрации нового ученика школы.

Страницы преподавателей – это отдельный тип записи, при редактировании которого в метаполя сохраняются информация о социальных сетях и форме обратной связи. Форма обратной связи с преподавателем реализована по аналогии с простой контактной формой для сайта.

Подробнее Простая форма обратной связи для WordPress-темы.

При редактировании курса в WooCommenrce появляется метабокс с возможностью выбора преподавателя курса. Информация о преподавателе публикуется в консоли (список товаров) и в публичной части сайта. А на странице преподавателя выводится выборка по курсам, которые он ведёт. Это создаёт перекрёстные ссылки, которые улучшают информативность и удобство использования сайтом, дают прямые ссылки на “товары” сайта.

Галерея

Снимок экрана главной страницы
Главная страница

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