
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%).
Настройки темы
Группы настроек Customizer API Поля для ввода дополнительных скриптов Ссылки на соцсети и другие профили автора Настройки Первого экрана главной Тексты блока Об авторе Галерея логотипов Блок Скилы и фото автора настройки вывод последних постов блога на главной Поля для контактной формы блока обратной связи Настройки шаблона Категории / Блога “Превикс” категории Тексты шаблона страницы ошибки 404
Скриншоты шаблонов страниц
Блог Результаты поиска Пост Постоянная страница Страница ошибки 404