Main/WordPress Fullstack/Blueprints/Custom Themes/Figma Design Conversion to WordPress Theme with ACF PRO (Flexible Content)
Back to «Custom Themes» cards
Custom Themes(ТЗ 18 из 54)
Spec: Figma Design Conversion to WordPress Theme with ACF PRO (Flexible Content)
Custom Themes7 шагов • +35 XP

Spec: Figma Design Conversion to WordPress Theme with ACF PRO (Flexible Content)

Step-by-step classic WordPress theme development using pure PHP: converting Figma layouts into modular Flexible Content sections, local JSON synchronization, asset enqueueing, and robust output escaping.

~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)

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

We have an approved Figma design for landing and internal pages. We need a fast, modular WordPress theme built with ACF Flexible Content so our content managers can assemble custom pages using pre-built blocks without breaking the design system.
Ключевые требования:
  • •100% pixel-perfect conversion matching Figma layouts across all viewports (320px to 4K)
  • •Modular architecture using ACF PRO Flexible Content for dynamic page building
  • •Local JSON synchronization (acf-json) for version-controlled field definitions in Git
  • •Modern asset bundling with zero render-blocking CSS/JS and LCP < 1.2s
  • •Strict output escaping (esc_html, esc_url, esc_attr, wp_kses_post) across all templates
Ограничения проекта:
  • •Zero page builder bloat (no Elementor, Divi, or WPBakery)
  • •PHP 8.2+ compatibility with strict type declarations
  • •Local Google Fonts serving for GDPR compliance
Критерии приёмки (KPI):
  • PageSpeed Insights: 95+ Mobile, 98+ Desktop
  • LCP < 1.2s, CLS = 0, INP < 150ms
  • Zero security warnings in WordPress Theme Check and Theme Sniffer

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

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

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

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

1
Этап 1 из 7

Step 1: Theme scaffolding & directory architecture

~45 минЛегкий

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

Create the theme folder with required root files: style.css with complete metadata headers, index.php, functions.php, header.php, footer.php, and structured subdirectories (/template-parts, /assets, /inc, /acf-json).

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

Ensure the Text Domain matches the theme directory slug exactly for seamless i18n.

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

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

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

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

2
Этап 2 из 7

Step 2: Asset registration & enqueueing via wp_enqueue_scripts

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

Step 3: ACF PRO setup & local acf-json synchronization

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

Step 4: Flexible Content layout schema design

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

Step 5: Modular template part rendering loop

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

Step 6: Component markup & rigorous output escaping

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

Step 7: Security audit, responsive QA & handover

~30 минЛегкий

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

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

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

Интеграция

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

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

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

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