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

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

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

Основная аудитория сайта это абитуриенты, студенты и сотрудники кафедры.

Адрес проекта: 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 прием, который используется для решения проблем, возникающих при использовании «плавающих» элементов в рамках блока контейнера.

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