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