
WebEnergy
Створив сайт на CMS WordPress для блогу QA-тестера.
Адреса сайту: https://webenergy.mrpl.info/
Моя роль у проекті
- підбір шаблону дизайну і його адаптація в Figme під тематику сайту
- верстка за шаблоном Figma
- створення валидной WordPress теми
- встановлення та налаштування теми на хостингу
- додавання демо-контенту
Верстка
Верстка створена за допомогою Gulp.js. Стилі написані на препроцесорі SASS (синтаксис SCSS), html-код на препроцесорі PUG (Jade). Файли проекту розділені на логічні модулі відповідно до їхньої ролі на сайті. Завдяки цьому вертку легко доповнити новими блоками та шаблонами.
HTML-код повністю проходить перевірку інструментами W3C.
Стилі написані на “ванільному-css”, тобто без використання фреймворків типу Bootstrap або FlexboxGrid.
Верстка сайту адаптивна, добре відображається на мобільних пристроях і десктопах. Головна сторінка сайту виконаний у вигляді Лендінгу.
На основі дизайну домашньої сторінки створені шаблони для постів, виведення результатів пошуку і сторінки помилки 404.
Бібліотеки та js-плагіни, які я використовував:
- Superembed.js – виявляє вбудоване відео популярних відеосервісів і робить його адаптивним;
- Fancybox.js –jQuery плагін для створення модальних вікон і галереї;
- jQuery – популярний JavaScript фреймворк.
WordPress тема
Готову верстку я інтегрував на WordPress. Створена тема відповідає правилам і стандартам кодексу WordPress.
При інтеграції не використовувалися білдери або плагіни, які можуть уповільнити завантаження сайту або роботу хостингу. Вся настройка теми здійснюється через WordPress Customizer API. Працює живе превью, тобто при зміні налаштувань автоматично оновлюється область попереднього перегляду сторінки.
Для деяких блоків головної сторінки написані нестандартні елементи управління, це:
- вибір термінів (міток) за аналогією з вибором категорій на сторінці редагування поста
- галерея зображень
- список з будь-якою кількістю елементів у вигляді форми в модальному вікні
Тема підтримує багатомовність за допомогою плагіна Polylang. Все налаштування Customizer API перекладаються стандартними засобами Polylang.
Після інтеграції верстки показники швидкості завантаження сайту в “жовтій зані” (70-80%).
Налаштування теми
Групи налаштувань Customizer API Поля для додаткових скриптів Посилання на соцмережі та інші профілі автора Налаштування Першого екрану домашньої сторінки Тексти блоку Про автора Галерея логотипів Блок Скіли та фото автора Настройки блоку останніх постів блогу на головній Поля для контактної форми блоку зворотного зв’язку Налаштування шаблону Категорії / Блогу “Префікс” категорій Тексти шаблону сторінки помилки 404
Скріншоти шаблонів сторінок
Блог Результати пошуку Пост Постійна сторінка Сторіка помилки 404