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