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%).