Разработка WordPress темы сайта ШАДР - Портфолио chomovva

Проект по вёрстке и разработке 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.

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