Разработка WordPress темы сайта ШАДР
Проект по вёрстке и разработке WordPress темы для сайта Учебный центр «Школа архитектурного и дизайнерского развития».
Учебный центр «ШАДР» был создан на базе отдела международных проектов ПГТУ при содействии итало-украинского центра «Альпина».
Чем я занимался в проекте
- разработка структуры главной страницы;
- html-вёрстка;
- разработка WordPress темы;
- техническое обслуживание сайта.
Дальнейшим наполнением и сопровождение сайта занимаются специалисты УЦ «ШАДР».
Адрес сайта: https://shadr.pstu.edu/
Подробней о проекте вёрстки
Макет сайта адаптивен, используется модульная сетка Bootstrap 3.
Проект вёрстки выполнен на Gulp.js. Стили написаны на препроцессоре SASS (синтаксис SCSS), html-код на препроцессоре PUG (Jade).
Главная страница выполнена в виде лендинга. На странице используется параллакс-эффект и анимация блоков при прокрутке.
Библиотеки и фреймвёрки, которые я использовал в проекте:
- Bootstrap 3 – самый популярнай фреймвёрк HTML, CSS и JS для разработки адаптивных мобильных проектов в Интернете;
- LazyLoad.js – jQuery плагин для добавления “ленивой” загрузки изображений;
- jQuery -популярный JavaScript фреймворк;
- baguetteBox.js – Простой и легкий в использовании скрипт лайтбокса, написанный на чистом JavaScript;
- Parallax.js – это очень простой эффект прокрутки параллакса, реализованный как плагин jQuery;
- WOW.js – анимация элементов при прокрутке страницы, WOW.js позволяет отложить запуск анимации элементов до момента их отображения на экране при прокрутке страницы. Разработчик WOW.js рекомендует использовать Animate.css для анимации.
- Animate.css – библиотека css-анимации для сайта, поддерживает более 70 эффектов.
Описание WordPress темы
Все блоки главной страницы редактируются через Customizer API WordPress.
Тема поддерживает мультиязычность с помощью плагина PolyLang. Весь статический текст, который вводится с помощью Customizer API, можно перевести в админке: Languages > Strings translations.
По оразцу дизайна главной страницы были созданы шаблоны страницы:
front-page.php– главная;index.php– шаблон архива, категории;single.php– запись блога;page.php– постоянная страница;404.php– шаблон страницы ошибки 404;page-subpages-media.php– пользовательский шаблон постоянной страницы со списком дочерних страниц. Список отформатирован в виде Media object Bootstrap 3.
На внутренних страницах темы используется резиновый двухколоночный макет. Правая колонка – стандартный сайдбар WordPress, который можно отключить в административной панели.
В нижней части сайта размещается форма обратной связи и контактная информация. Эти блоки реализованы как виджеты WordPress.
