Главная/WordPress Fullstack/Блупринты/Кастомные темы/Натяжка верстки из Figma на тему с ACF PRO (Flexible Content)
К карточкам раздела «Кастомные темы»
Кастомные темы(ТЗ 18 из 54)
ТЗ: Натяжка верстки из Figma на тему с ACF PRO (Flexible Content)
Кастомные темы7 шагов • +35 XP

ТЗ: Натяжка верстки из Figma на тему с ACF PRO (Flexible Content)

Пошаговая разработка классической темы WordPress на чистом PHP: посадка макета из Figma, модульные секции через ACF Flexible Content, The Loop и безопасное экранирование данных.

~12 ч работыУровень: MiddlePHP 8.3/8.4WordPress 6.7+ACF PRO Flexible ContentFigma to WordPressTemplate HierarchyThe Loopwp_nav_menuesc_html / esc_attr
+5 XP за шаг
Выполнено 0 из 7 шагов (0%)
Трудозатраты~12 рабочих часов
Фриланс вилка~$540 – $900 (€480 – €840)
Оценка веб-студии~$1,140 – $1,920 (€1080 – €1800)

ТЗ заказчика (исходный бриф):

«У нас есть утвержденный дизайн-макет лендинга и внутренних страниц в Figma. Категорически против тяжелых конструкторов вроде Elementor. Нужна быстрая кастомная тема на PHP, где контент-менеджер в админке сможет сам собирать и переставлять гибкие секции страницы через ACF Flexible Content.»
Ключевые требования:
  • •Чистая верстка по Figma Pixel-Perfect без визуальных конструкторов
  • •Модульный конструктор страниц на ACF Flexible Content (hero, features, testimonials, cta)
  • •Понятный интерфейс в админке с логичными заголовками и инструкциями к полям
  • •Быстрая загрузка без раздутых CSS/JS фреймворков (Google PageSpeed ≥ 95)
  • •Корректное экранирование всех выводимых данных (esc_html, esc_url, wp_kses_post)
Ограничения проекта:
  • •Сервер клиента — PHP 8.3/8.4, WordPress 6.7+
  • •Строгий запрет на Elementor, Divi и WPBakery
  • •ACF PRO используется для гибких макетов (Local JSON включен)
Критерии приёмки (KPI):
  • PageSpeed Mobile ≥ 90, Desktop ≥ 95
  • Чистый валидный семантический HTML5 без лишних оберток
  • Безопасность: 0 XSS уязвимостей, все динамические поля экранированы
  • Контент-менеджер может создать новую посадочную страницу за 15 минут

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 7

Декомпозиция макета Figma и планирование структуры блоков

~45 минЛегкий

Практическое руководство:

Откройте Figma-макет проекта. Разбейте страницы на независимые повторяемые секции (Hero Banner, Сетка преимуществ, Слайдер кейсов, Тарифы, Форма заявки, FAQ). Зафиксируйте типы полей для каждой секции: текстовые строки, изображения, списки-репитеры и кнопки-ссылки.

План и контрольные точки реализации:
1Выписать полный реестр модульных секций макета
2Определить типы полей для каждого компонента (Text, Image, Repeater, Link)
3Согласовать с заказчиком обязательные и опциональные поля
4Подготовить графические ассеты (SVG иконки, WebP изображения)
Важные технические нюансы и подводные камни:

Не делайте слишком узкоспециализированные секции. Секция должна быть гибкой: например, блок "Преимущества" должен поддерживать от 2 до 6 колонок без изменения верстки.

Совет эксперта (Best Practice):

Составьте таблицу маппинга полей в Notion или Google Sheets: "Секция → Слаг лейаута (layout_name) → Поля". Это сэкономит часы при настройке ACF в админке.

Ожидаемый артефакт этапа:

Утвержденная карта секций и типов полей для гибкого конструктора.

2
Этап 2 из 7

Каркас темы: style.css, functions.php и подключение ассетов

~40 минЛегкий
3
Этап 3 из 7

Разметка header.php, footer.php и навигация wp_nav_menu

~40 минЛегкий
4
Этап 4 из 7

Настройка группы полей Flexible Content в ACF PRO и Local JSON

~50 минСредний
5
Этап 5 из 7

Архитектура циклического рендеринга секций в front-page.php

~35 минСредний
6
Этап 6 из 7

Верстка модульных секций и строгое экранирование данных

~50 минСредний
7
Этап 7 из 7

Аудит безопасности, валидация полей и сдача проекта клиенту

~30 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами