4 мая, 2026 года
6 мин
46 просмотров 
NichiaVision.com — корпоративный сайт-каталог на WordPress, сверстанный по готовому макету. Для проекта была разработана полностью кастомная тема без сторонних плагинов для ключевой логики, настроена структура данных через ACF, реализованы каталог продукции, адаптивная версия, мультиязычность на 4 языка и оптимизация производительности.
NichiaVision.com — корпоративный сайт-каталог, разработанный на WordPress по готовому дизайн-макету. В рамках проекта была выполнена точная вёрстка интерфейса, сборка кастомной темы, настройка структуры данных через ACF, реализация каталога продукции, мультиязычности и оптимизация производительности без использования сторонних плагинов.
Главная задача проекта — перенести готовый дизайн в рабочий сайт так, чтобы итоговая версия точно соответствовала макетам, быстро загружалась, удобно редактировалась из админ-панели и оставалась готовой к дальнейшему масштабированию.
О проекте
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 с кастомной темой, чистой вёрсткой, гибкой структурой данных, мультиязычностью и высокой производительностью.
Проект не зависит от тяжёлых сторонних решений, легко поддерживается и готов к дальнейшему развитию. Сайт можно расширять, добавлять новые разделы, развивать каталог и дорабатывать функциональность без полной переделки архитектуры.
