Principal/WordPress Fullstack/Blueprints/Temas personalizados/Maquetación desde Figma a tema WordPress con ACF PRO (Flexible Content)
Volver a tarjetas «Temas personalizados»
Temas personalizados(ТЗ 18 из 54)
Especificación: Maquetación desde Figma a tema WordPress con ACF PRO (Flexible Content)
Temas personalizados7 шагов • +35 XP

Especificación: Maquetación desde Figma a tema WordPress con ACF PRO (Flexible Content)

Desarrollo paso a paso de un tema clásico de WordPress en PHP puro: maquetación modular desde Figma con ACF Flexible Content, sincronización local acf-json, encolado de recursos y escape estricto de datos.

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

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

Tenemos un diseño aprobado en Figma para landing y páginas internas. Necesitamos un tema WordPress rápido y modular con ACF Flexible Content para que los editores puedan construir páginas personalizadas sin romper la coherencia visual.
Ключевые требования:
  • •Maquetación pixel-perfect desde Figma para todas las resoluciones (320px a 4K)
  • •Arquitectura modular con ACF PRO Flexible Content para maquetación dinámica de páginas
  • •Sincronización local JSON (acf-json) para versionado en Git de las definiciones de campos
  • •Encolado moderno de recursos sin bloqueo de renderizado y LCP < 1.2s
  • •Escape estricto de salidas (esc_html, esc_url, esc_attr, wp_kses_post) en todas las plantillas
Ограничения проекта:
  • •Cero constructores visuales pesados (sin Elementor, Divi o WPBakery)
  • •Compatibilidad con PHP 8.2+ y tipado estricto
  • •Alojamiento local de Google Fonts conforme al RGPD
Критерии приёмки (KPI):
  • PageSpeed Insights: 95+ Móvil, 98+ Escritorio
  • LCP < 1.2s, CLS = 0, INP < 150ms
  • Cero advertencias en WordPress Theme Check y Theme Sniffer

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

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

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

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

1
Этап 1 из 7

Paso 1: Estructura del tema y arquitectura de directorios

~45 минЛегкий

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

Cree la carpeta del tema con los archivos raíz obligatorios: style.css con metadatos completos, index.php, functions.php, header.php, footer.php y subcarpetas estructuradas (/template-parts, /assets, /inc, /acf-json).

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

Asegúrese de que el Text Domain coincida exactamente con el slug de la carpeta del tema para una correcta internacionalización.

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

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

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

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

2
Этап 2 из 7

Paso 2: Registro y encolado de recursos mediante wp_enqueue_scripts

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

Paso 3: Configuración de ACF PRO y sincronización acf-json

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

Paso 4: Diseño del esquema de bloques con Flexible Content

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

Paso 5: Bucle modular de renderizado con plantillas parciales

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

Paso 6: Maquetación de componentes y escape estricto de datos

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

Paso 7: Auditoría de seguridad, pruebas de diseño adaptativo y entrega

~30 минЛегкий

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

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

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

Интеграция

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

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

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

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