Разработка сайта на WordPress по макету Figma
Создаю кастомную тему WordPress под готовый дизайн — без универсальных шаблонов и визуальных конструкторов. Контент редактируется через понятные поля, не разрушая структуру страниц.
Что это решает
Готовый дизайн часто пытаются поместить внутрь универсальной темы или конструктора. В результате структура подстраивается под ограничения шаблона, появляются визуальные расхождения, лишние настройки и код, который сложно поддерживать.
Я создаю кастомную тему WordPress под конкретный проект. Сайт сохраняет дизайн макета, а в админке остаются только действительно необходимые поля: тексты, изображения, карточки, проекты, статьи и другие данные, которые клиент должен менять самостоятельно.
Как проходит работа
Проектирование структуры
Изучаю макет и определяю, какие данные должны редактироваться через админку. Разделяю постоянные элементы, обычные страницы, записи, проекты, услуги и повторяющиеся блоки.
Разработка темы
Собираю шаблоны страниц и подключаю их к WordPress. Переношу в тему навигацию, формы, изображения, повторяющиеся компоненты и предусмотренную макетом логику.
Настройка админки
Создаю понятные поля для управления контентом. Ограничиваю структуру там, где свободное редактирование может нарушить дизайн, и оставляю гибкость там, где она действительно нужна.
Наполнение и запуск
Переношу базовый контент, тестирую формы и редактирование, настраиваю технические страницы и переношу сайт на рабочий хостинг. После запуска передаю доступы и короткую инструкцию.
Что вы получите
- —Кастомную тему WordPress, разработанную под ваш макет.
- —Адаптивные шаблоны всех согласованных страниц.
- —Понятную админку без лишних настроек.
- —Редактируемые тексты, изображения, карточки и записи.
- —Формы с валидацией и отправкой уведомлений.
- —Базовые SEO-поля, метатеги и Open Graph.
- —Исходники темы, доступы и инструкцию по редактированию.
- —Две недели на исправление обнаруженных после запуска ошибок.
Что входит в разработку сайта на WordPress
Я не устанавливаю готовую тему и не пытаюсь повторить дизайн с помощью набора универсальных блоков. Структура сайта разрабатывается под конкретный макет и задачи проекта.
В услугу входят:
- установка и базовая настройка WordPress;
- разработка кастомной темы;
- создание шаблонов страниц и записей;
- настройка меню и навигации;
- подключение редактируемых полей;
- формы обратной связи;
- страницы услуг, проектов или материалов;
- адаптивная вёрстка;
- базовые SEO-настройки;
- оптимизация изображений и шрифтов;
- настройка страницы 404;
- перенос сайта на рабочий хостинг;
- краткая инструкция по работе с админкой.
Состав разделов зависит от проекта. Для корпоративного сайта могут понадобиться услуги, команда и проекты. Для портфолио — кейсы и категории. Для контентного проекта — материалы, авторы и рубрики.
Как работает редактирование контента
Для каждого типа информации создаются свои поля. Клиент видит не техническую структуру страницы, а понятные названия: заголовок, описание, изображение, кнопка, список преимуществ или карточка проекта.
Поля можно ограничить по формату и количеству символов. Это позволяет менять содержание, не вмешиваясь в код и не нарушая заложенную дизайнером композицию.
Повторяющиеся сущности — например проекты, услуги или статьи — оформляются как отдельные разделы WordPress. Новая запись автоматически получает нужный дизайн и появляется в соответствующих списках.
Когда нужна кастомная тема
Такой вариант подходит, если:
- дизайн уже подготовлен в Figma;
- важно сохранить точное соответствие макету;
- сайт должен быстро загружаться;
- клиенту нужна понятная админка;
- проект будет развиваться и наполняться;
- универсальная тема ограничивает структуру;
- визуальный конструктор создаёт слишком много лишних настроек.
Если сайт состоит из одной статичной страницы и контент почти никогда не меняется, WordPress может быть необязателен. В таком случае достаточно адаптивной HTML-вёрстки.
Что потребуется для оценки
Для предварительной оценки достаточно ссылки на Figma, списка страниц и описания редактируемого контента.
Также важно заранее обозначить интеграции: отправку заявок в CRM, мультиязычность, поиск, фильтры, личный кабинет, оплату или импорт данных. Такой функционал оценивается отдельно от базовой разработки темы.
ДРУГИЕ УСЛУГИ
Адаптивная вёрстка по макетам Figma
Переношу дизайн из Figma в адаптивный HTML/CSS/JavaScript без визуальных упрощений. Продумываю промежуточные состояния и проверяю страницы на реальных устройствах.
GSAP-анимации для сайтов
Реализую анимации из Figma, прототипа или референса: появления элементов, параллакс, ScrollTrigger и интерактивные сцены. Адаптирую движение под разные экраны и производительность устройств.
НАЧАТЬ ПРОЕКТ
Есть готовый макет? Давайте превратим его в работающий сайт.
Обсудить проект в TelegramОбычно отвечаю в течение 30 минут.
Для предварительной оценки достаточно ссылки на Figma.