Розробка сайту кафедри АіКТ

Суть проекту: розробка сайту Кафедри автоматизації та комп’ютерних технологій ПДТУ.

Сайт покликаний вирішити в першу чергу завдання по залученню абітурієнтів на навчання на кафедрі. А також ознайомлення студентів і співробітників кафедри з поточними подіями в навчальному процесі, інформування про майбутні і минулі заходи (сесії, захисту дипломів, семінари, конференції і т.д.), обмін інформаційними матеріалами навчального характеру.

Основна аудиторія сайту це абітурієнти, студенти і співробітники кафедри.

Адреса проекту: https://act.pstu.edu/

Git-репозіторій проекта: https://github.com/mar-pstu/act-theme

Моя роль у проекті

• участь в складанні ТЗ;
• розробка концепції сайту та його інформаційної структури;
• розробка layout-а і підбір psd макета;
• верстка;
• інтеграція макета на wordpress;
• установка на хостинг і налаштуванням макету;
• консультація редакторів сайту з питань роботи в CMS WordPress.

Про проект вертки

Верстка сайту адаптивна, коректно відображається на десктопах і мобільних пристроях. У шаблоні верстки використовується бутстрапоподобная модульна сітка на флексбоксах FlexboxGrid.css.

Основою верстки послужив мій стартовий проект для розробки WordPress теми на Gulp.js.

Стилі написані на препроцесорів SASS (синтаксис * .scss), html на препроцесорів PUG (Jade). Іконки я підібрав на сервісі FlatIcon і підключив у вигляді SVG переконвертувати в Base64.

Більш детальніше про проект: Стартовий шаблон.

Бібліотеки та фреймворки, які я використав:

• FlexboxGrid.css – модульна бутстрап подібна сітка на флексбоксах;
• LazyLoad.js – jQuery плагін для додавання “ледачого” завантаження зображень;
• Superembed.js – виявляє вбудоване відео популярних відеосервісів і робить його адаптивним;
• Fancybox.js – jQuery плагін для створення модальних вікон і галереї;
• jQuery – популярний JavaScript фреймворк;
• Slick.js – популярний слайдер.

WordPress тема

Головна сторінка виконана у вигляді Лендінга і несе рекламний характер. Всі блоки головної сторінки редагуються через Customizer API WordPress.

Тема підтримує багатомовність за допомогою плагіна PolyLang. Весь статичний текст, який вводиться за допомогою Customizer API, можна перерекласти в адмінці: Languages> Strings translations.

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

Детальніше: «Ледаче завантаження» зображень в WordPress.

Налаштування теми

Через Customizer API редагується більшість блоків теми. Всі настройки розподілені по групах.

Блоки головної сторінки

Налаштування основних блоків головної сторінки сайту згруповані в окреме меню.

Списки теми

На головній сторінці часто використовуються списки “визначень”, які характеризують кафедру. Наприклад її переваги, напрямки роботи тощо. Для зручності редагування я виніс списки в окрему групу.

Налаштування типів сторінок

У цій групі знаходяться налаштування основних файлів-шаблонів WordPress. Це сторінки архівів (archive.php), постів блогу (single.php), постійних сторінок (page.php).

Зареєстровані шорткоди теми

Крім головної сторінки списки можна використовувати і на внутрішніх сторінках за допомогою шорткодов.

• [features] – список особливостей кафедри
• [directions] – напрямки роботи
• [specialties] – список спеціальностей
• [teachers] – слайдер викладачів
• [socials_list] – список в посилань на соціальні мережі у вигляді іконок
• [indicators] – блок показників роботи кафедри
• [steps] – список кроків до вступу
• [cources] – додаткові освітні курси
• [advantages] – переваги навчання на кафедрі

Тема підтримує “дефолтну” Контакт форму, для якої зареєстрований окремий форткод [contact_form].

Детальніше: “Проста форма зворотного зв’язку для WordPress-теми“.

Блоки редактора Гутенерг

Для зручності редагування сторінок сайту в тему додано кілька блоків редактора Гутенберг, це

• Акордеон – графічний елемент, який представляє собою вертикально складений список елементів. Кожен елемент можна «розгорнути» або «розкрити», щоб показати вміст, пов’язане з цим елементом.
• Clearfix – це заснований на CSS прийом, який використовується для вирішення проблем, що виникають при використанні «плаваючих» елементів в рамках блоку контейнера.

Скріни шаблонів сторінок