
Розробка сайту кафедри АіКТ
Суть проекту: розробка сайту Кафедри автоматизації та комп’ютерних технологій ПДТУ.
Сайт покликаний вирішити в першу чергу завдання по залученню абітурієнтів на навчання на кафедрі. А також ознайомлення студентів і співробітників кафедри з поточними подіями в навчальному процесі, інформування про майбутні і минулі заходи (сесії, захисту дипломів, семінари, конференції і т.д.), обмін інформаційними матеріалами навчального характеру.
Основна аудиторія сайту це абітурієнти, студенти і співробітники кафедри.
Адреса проекту: 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 прийом, який використовується для вирішення проблем, що виникають при використанні «плаваючих» елементів в рамках блоку контейнера.