Разработка сайта кафедры АиКТ - Портфолио 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).

Дерево настроек темы
Дерево настроек темы

Зарегистрированные шорткоды темы

Помимо главной страницы списки можно использовать и на внутренних страницах с помощью шорткодов.

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

Тема поддерживает “дефолтную” контактую форму, для которой зарегистрирован отдельный форткод [contact_form].

Подробней: “Простая форма обратной связи для WordPress-темы”.

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

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

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

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

Шаблон главной страницы сайта
Шаблон главной страницы сайта
vote
Article Rating
Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x