NichiaVision.com — корпоративный сайт-каталог, разработанный на WordPress по готовому дизайн-макету. В рамках проекта была выполнена точная вёрстка интерфейса, сборка кастомной темы, настройка структуры данных через ACF, реализация каталога продукции, мультиязычности и оптимизация производительности без использования сторонних плагинов.
После такой технической сборки важен уже контроль боевого проекта: чек-лист Сайт запустили или переделали помогает не пропустить формы, мобильную версию, индексацию, редиректы, аналитику и другие ошибки, которые проявляются только после публикации.
По сути, Вёрстка сайта по макету здесь была отдельным полноценным этапом: готовую визуальную систему из Figma нужно было точно перенести в адаптивный интерфейс, сохранить состояния элементов и подготовить всё к интеграции с WordPress.
Похожий подход к вёрстке по готовому макету и интеграции управляемого контента на WordPress использовался и в проекте EvExperts.
Другой подход к похожей задаче показан в проекте Homiko.ru, где сайт-каталог проектировался с нуля вместе со структурой, фирменным дизайном, UX и технической оптимизацией.
Главная задача проекта — перенести готовый дизайн в рабочий сайт так, чтобы итоговая версия точно соответствовала макетам, быстро загружалась, удобно редактировалась из админ-панели и оставалась готовой к дальнейшему масштабированию.
О проекте
NichiaVision.com — это корпоративный сайт с каталоговой структурой. Проект требовал не шаблонной сборки, а аккуратной кастомной реализации: чистой вёрстки, продуманной архитектуры WordPress, гибких полей для управления контентом и стабильной работы на разных устройствах.
Важный нюанс: дизайн был уже подготовлен. Моя задача заключалась в том, чтобы выполнить вёрстку по готовому макету и собрать на её основе полноценный сайт на WordPress.
То есть работа была сосредоточена на frontend-разработке, переносе дизайна в код, создании кастомной темы, настройке структуры каталога и технической реализации проекта.
Задача
Необходимо было разработать корпоративный сайт-каталог с нуля на WordPress, не используя готовые темы, конструкторы и сторонние плагины для ключевой логики.
Основные требования:
- сверстать сайт по готовым макетам;
- добиться точного соответствия дизайну;
- разработать полностью кастомную тему WordPress;
- реализовать каталог продукции;
- построить структуру данных через ACF;
- сделать удобное управление контентом из админ-панели;
- реализовать мультиязычность на 4 языка;
- отказаться от сторонних решений там, где это возможно;
- обеспечить высокую скорость загрузки;
- сохранить чистый, поддерживаемый и масштабируемый код.
Что было реализовано
Вёрстка по готовому макету
Основная часть работы — Pixel Perfect вёрстка по макетам из Figma. Интерфейс был перенесён в HTML, CSS и JavaScript с сохранением визуальной логики, сеток, отступов, размеров, состояний элементов и адаптивного поведения.
Особое внимание было уделено тому, чтобы сайт выглядел аккуратно не только на десктопе, но и на планшетах, мобильных устройствах и промежуточных разрешениях.
Вёрстка выполнена без лишних зависимостей. Это позволило сохранить контроль над кодом, избежать перегруза и сделать frontend предсказуемым для дальнейшей поддержки.
Кастомная тема WordPress
Для проекта была разработана полностью кастомная тема WordPress. Готовые темы и визуальные конструкторы не использовались.
Такой подход позволил:
- не тащить лишний код;
- сделать структуру сайта под конкретный проект;
- сохранить высокую скорость загрузки;
- контролировать HTML-разметку;
- гибко управлять шаблонами;
- упростить дальнейшие доработки.
Кастомная тема даёт больше контроля, чем готовое решение. Особенно это важно для корпоративного сайта-каталога, где структура страниц, каталог продукции и мультиязычность должны работать стабильно и без лишней нагрузки.
Архитектура проекта
Архитектура сайта была собрана с нуля под задачи корпоративного каталога. Структура продумана так, чтобы контент можно было удобно редактировать и расширять.
В проекте реализованы:
- шаблоны страниц;
- структура каталога продукции;
- кастомные блоки и поля;
- логика вывода данных;
- отдельные элементы интерфейса;
- адаптивные компоненты;
- мультиязычные версии контента.
Это не сборка из готовых модулей, а ручная разработка логики под конкретный сайт.
Структура данных через ACF
Для управления контентом использовался ACF. Через гибкие поля построена структура данных для страниц и каталога.
ACF позволяет администратору редактировать сайт без вмешательства в код: менять тексты, изображения, характеристики, блоки, элементы каталога и другой контент.
Такой подход удобен для корпоративных сайтов: владелец проекта получает не статичную вёрстку, а полноценную систему управления контентом.
Каталог продукции
В проекте реализована гибкая система контента под каталог продукции. Каталог сделан не через сторонний плагин, а на собственной структуре.
Это дало возможность настроить каталог под реальные задачи сайта, а не под ограничения готового решения.
Преимущества такого подхода:
- меньше лишнего кода;
- выше производительность;
- точная структура под проект;
- проще масштабировать;
- легче дорабатывать;
- лучше контроль над шаблонами и выводом данных.
Чистый frontend
Frontend проекта реализован на чистом HTML, CSS и JavaScript без лишних зависимостей.
Это важно для скорости, стабильности и поддержки. Чем меньше случайных библиотек и тяжёлых готовых решений, тем проще контролировать поведение сайта.
В рамках frontend-работы были реализованы:
- адаптивная сетка;
- интерактивные элементы;
- мобильная версия;
- состояния кнопок и ссылок;
- корректное отображение блоков на разных разрешениях;
- оптимизированная структура стилей;
- аккуратная работа со скриптами.
Адаптивная версия
Отдельно была проработана мобильная версия сайта. Это не просто автоматическое сжатие десктопного макета, а отдельная адаптация интерфейса под мобильные сценарии.
Для корпоративного каталога это особенно важно: пользователь может открыть сайт с телефона, быстро изучить информацию, перейти по разделам и просмотреть нужные материалы без проблем с навигацией.
Адаптивность была реализована для разных экранов, включая десктоп, планшеты и смартфоны.
Мультиязычность на 4 языка
На сайте реализована мультиязычность на 4 языка без сторонних решений.
Вместо установки тяжёлого плагина была разработана собственная система переключения и хранения контента. Такой подход позволил сохранить контроль над структурой, скоростью и логикой вывода данных.
Это особенно важно, когда нужна не просто автоматическая подмена текста, а аккуратная работа с контентом, структурой страниц и каталогом.
Производительность и оптимизация
Один из ключевых акцентов проекта — скорость загрузки и техническая оптимизация.
Сайт был оптимизирован под реальные показатели PageSpeed и пользовательский опыт. Благодаря отказу от лишних плагинов, чистой теме, аккуратной работе со скриптами и критическим CSS удалось добиться высоких результатов.
Показатели Google PageSpeed
| Метрика | Результат |
|---|---|
| Performance | 89 |
| Accessibility | 96 |
| Best Practices | 100 |
| SEO | до 98 |
Метрики загрузки
| Метрика | Результат |
|---|---|
| FCP | от 0,3 сек |
| LCP | от 1 сек |
| TBT | 0 мс |
| CLS | 0 |
| Speed Index | от 0,8 сек |
Такие показатели говорят о том, что сайт быстро отдаёт первый рендер, не блокирует основной поток, не создаёт заметных сдвигов layout и остаётся комфортным для пользователя.
Что особенно важно в проекте
Главная особенность проекта — полный контроль над кодом.
Вместо набора плагинов и готовых решений была создана кастомная система под конкретную задачу. Это позволило сделать сайт легче, быстрее и понятнее для дальнейшей поддержки.
В проекте были важны три вещи:
Точность — дизайн должен был соответствовать готовому макету.
Скорость — сайт должен был быстро загружаться и показывать хорошие технические показатели.
Гибкость — контент и каталог должны были удобно редактироваться из WordPress.
Почему отказ от плагинов был важен
Для WordPress-проектов плагины часто ускоряют запуск, но одновременно добавляют лишний код, стили, скрипты и ограничения. В этом проекте ставка была сделана на ручную реализацию.
Это позволило:
- не перегружать сайт;
- избежать конфликтов между плагинами;
- лучше контролировать производительность;
- сделать структуру под конкретный каталог;
- упростить поддержку;
- точнее реализовать макет;
- снизить зависимость от сторонних обновлений.
Такой подход особенно оправдан для корпоративных сайтов, где важны скорость, стабильность и долгий срок жизни проекта.
Результат
В результате получился корпоративный сайт-каталог на WordPress с кастомной темой, чистой вёрсткой, гибкой структурой данных, мультиязычностью и высокой производительностью.
Проект не зависит от тяжёлых сторонних решений, легко поддерживается и готов к дальнейшему развитию. Сайт можно расширять, добавлять новые разделы, развивать каталог и дорабатывать функциональность без полной переделки архитектуры.
FAQ
Ответы на частые вопросы о вёрстке и разработке сайта NichiaVision.com
В проекте была выполнена вёрстка по готовому макету, разработана кастомная тема WordPress, настроена структура данных через ACF, реализован каталог продукции, мультиязычность и оптимизация скорости.
Нет. Дизайн был предоставлен в виде готового макета. Основная работа заключалась в точной вёрстке по макету и технической реализации сайта на WordPress.
Нет. Для проекта была разработана полностью кастомная тема WordPress под конкретную структуру сайта и каталога.
Ключевая логика проекта реализована вручную без сторонних плагинов. Это позволило сохранить контроль над кодом, скоростью и структурой сайта.
Структура данных построена через ACF. Это позволяет удобно редактировать контент, блоки, страницы и элементы каталога из админ-панели WordPress.
Да. На сайте реализована мультиязычность на 4 языка без сторонних решений, с собственной системой переключения и хранения контента.
Да. Сайт полностью адаптивный, а мобильная версия была проработана отдельно, чтобы интерфейс удобно работал на смартфонах и планшетах.
По Google PageSpeed: Performance — 89, Accessibility — 96, Best Practices — 100, SEO — до 98. Также достигнуты FCP от 0,3 сек, LCP от 1 сек, TBT 0 мс, CLS 0 и Speed Index от 0,8 сек.
Отказ от лишних плагинов позволил ускорить сайт, снизить нагрузку, избежать конфликтов, сохранить чистый код и полностью контролировать логику проекта.
Да. Проект готов к масштабированию: можно расширять каталог, добавлять новые разделы, дорабатывать функциональность и развивать мультиязычный контент.
