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

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

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

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

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).

Дерево опцій теми в WordPress Customizer API

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

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

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

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

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

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

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

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

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

Шаблон главной страницы сайта
Шаблон головної сторінки сайту
51голос
Рейтинг статті
Підписатися
Сповістити про
guest
0 Коментарі
Вбудовані Відгуки
Переглянути всі коментарі
0
Ми любимо ваші думки, будь ласка, прокоментуйте.x
()
x