Сайт онлайн школи "СУПУТНИК" - Портфоліо 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