WebEnergy

Создал сайт на CSM WordPress для блога QA-тестера.

Адрес сайта: https://webenergy.mrpl.info/

Моя роль в проекте

• подбор шаблона дизайна и его адаптация в Figme под тематику сайта
• вёрстка по шаблону Figma
• создание валидной WordPress темы
• установка и настройка темы на хостинге
• добавление демо-контента

Вёрстка

Вёрстки создана с помощью сборщика Gulp.js. Стили написаны на препроцессоре SASS (синтаксис SCSS), html-код на препроцессоре PUG (Jade). Файлы проекта разделены на логические модули согласно их роли на сайте, что делает вёрстку легко расширяемой.

HTML-код полностью валиден и не имеет ошибок и предупреждений.

Стили написаны на “ванильном-css”, т.е. без использования фреймвёрков типа Bootstrap или FlexboxGrid.

Вёрстка сайта адаптивна, хорошо отображается на мобильных устройствах и десктопах. Главная страница сайта выполнен в виде лендинга.

На основе дизайна главной созданы шаблоны для постоянных страниц и постов, вывода результатов поиска и страницы ошибки 404.

Библиотеки и js-плагины, которые я использовал:

• Superembed.js – обнаруживает встроенное видео популярных видеосервисов и делает его адаптивным;
• Fancybox.js – jQuery плагин для создания модальных окон и галлереи;
• jQuery -популярный JavaScript фреймворк.

WordPress тема

Готовую вёрстку я интегрировал на WordPress. Созданная тема соответствует правилам и стандартам кодекса WordPress.

При интеграции не использовались билдеры или стронние плагины, которые могут замедлить загрузку сайта или нагрузить хостинг. Вся настройка темы осуществляется через WordPress Customizer API. Работает живое превью, т.е. при изменении настроек автоматически обновляется область предварительного просмотра страницы.

Для некоторых блоков главной страницы написаны нестандартные элементы управления, это

• множественный выбор термов (меток) по аналогии с выбором категорий на странице редактирования поста
• галерея изображений
• список с произвольным количеством элементов в виде формы в модальном окне

Тема поддерживает многоязычность с помощью плагина Polylang. Все настрйоки Customizer API переводятся стандартными средствами этого плагина.

После интеграции вёрстки у темы показатели скорости загрузки в “желтой зане” (70-80%).