
Разработка сайта Study in Ukraine
Выполненная работа: разработка сайта и WordPress-темы для него.
Адрес разработанного сайта: https://studyinukraine.pstu.edu/
Ссылка на Git проекта WordPress темы: https://github.com/mar-pstu/studyinukraine-next
Чем я занимался в проекте:
- разработкой layout-а и подбором psd макета;
- вёрсткой;
- интеграцией макета на wordpress;
- установкой на хостинг и настройкой макета.
Подробнее о проекте
Разработка сайта заказана одним из подразделений Приазовского государственного технического университета, которое занимается привлечением и организацией обучения иностранных студентов.
Целевая аудитория сайта это иностранные граждане в процедуре поступления которых есть некоторые особенности. Главная страница выполнена в виде Лендинга и несёт в первую очередь рекламный характер. Так же на сайте размещены информационные материалы, образцы документов, выписки Правил поступления и прочее.
Вёрстка
Разработка сайта проходила в несколько этапов, которые включали в себя создание технического задания, подбор макета дизайна, вёрстку и создание WordPress темы. В процессе работы на был создан gulp-проект, который включает в себя вёрстку и wordpress тему. Основой для него послужил мой Стартовый шаблон.
В вёрстке использовано:
- FlexboxGrid.css – модульная бутстрап подобная сетка на флексбоксах;
- LazyLoad.js – jQuery плагин для добавления “ленивой” загрузки изображений;
- Superembed.js – обнаруживает встроенное видео популярных видеосервисов и делает его адаптивным;
- Fancybox.js – jQuery плагин для создания модальных окон и галлерей;
- jQuery -популярный JavaScript фреймворк.
Вёрстка сайта адаптивна и кроссбраузерна, поддерживает последние версии популярных браузеров и IE 11.
В вёрстке используется модульная двенадцати колоночная сетка на флексбоксах FlexboxGrid.css.
Языковые версии
В соответствии с нуждами целевой аудитории контент сайта и WordPress-тема переведёны на русский и английский языки. Мультиязычность реализуется с помощью плагина PolyLang.
Опции темы в WordPress Customozer API
WordPress тема спроектирована как предельно простая, поэтому Customizer API широко используется.
А именно все блоки главной страницы темы полностью настраивается в WordPress Customozer API. Текстовые настройки переводятся плагином PolyLang в админке: languages -> String translation
.
В блоке главной страницы “Есть вопросы?” используется встроенная контактная форма, которую можно легко заменить на стороннюю с помощью шорткода. Подробней Простая форма обратной связи для WordPress-темы.
Настройка страницы ошибки 404 Список контактов организации Настройка контактной формы в подвале страницы Список шагов к поступлению Настройка секции Области знаний Настройки секции главной Услуги Настройки секции главной О нас Настройка списка отзывов Настройка первого экрана главной страницы Главной блок настроек темы