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