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

Була виконана верстка за зразком і створення 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 з’являється метабокс з можливістю вибору викладача курсу. Інформація про викладача публікується в консолі (список товарів) і в публічній частині сайту. А на сторінці викладача виводиться вибірка по курсах, які він викладає. Це створює перехресні посилання, які покращують інформативність і зручність використання сайтом, дають прямі посилання на “товари” сайту.

Галерея