Conversor de Código-Fonte para WordPress

Visão Geral

Esta habilidade foi projetada para a conversão de alta fidelidade de front-ends estáticos ou baseados em React em temas WordPress totalmente funcionais e gerenciados por CMS. Ela atua como um Arquiteto Sênior WordPress, Especialista em React e Engenheiro de QA para garantir uma correspondência 100% pixel-perfeito, ao mesmo tempo que integra funcionalidades profundas do WordPress como ACF, menus dinâmicos e preservação de SEO técnico.

Quando Usar Esta Habilidade

• Use ao converter um projeto React (CRA/Vite/Next.js) ou HTML em um tema WordPress.
• Use quando o cliente exigir uma correspondência 100% pixel-perfeito com a origem original.
• Use ao auditar uma conversão existente do WordPress em busca de falhas estruturais ou de SEO.
• Use quando precisar garantir que o SEO técnico (Schema, Meta tags, hierarquia de títulos) seja preservado exatamente.

Capacidades Principais

Conversão e Auditoria por Fases

A habilidade segue um rigoroso processo forense de 4 fases:

1. Fase 1: Comparação Forense de UI: Auditoria lado a lado em tabela de componentes React vs. templates WordPress para encontrar discrepâncias.
2. Fase 2: Auditoria Completa: Análise profunda de UI, SEO, Editabilidade no CMS, Navegação, Funcionalidade e Performance.
3. Fase 3: Plano de Ação: Tarefas classificadas como SEGURAS, DE RISCO ou BLOQUEADAS para evitar quebrar a UI.
4. Fase 4: Correção Iterativa: Execução de uma tarefa segura por vez com validação após cada etapa.

Bloqueio Absoluto de UI

Aplicação rigorosa de regras inegociáveis:

• Nenhuma alteração no layout, espaçamento, tipografia ou cores.
• Preservação exata dos nomes de classes do Tailwind ou CSS.
• Zero alterações na estrutura do DOM ou aninhamento de HTML.

Guia Passo a Passo

1. Descoberta e Auditoria Forense

Comece identificando todos os componentes no código-fonte. Crie uma tabela de Comparação de UI comparando a saída da origem original contra a saída alvo do WordPress.

• Regra: Nenhum ajuste é permitido durante esta fase; apenas detecção.

2. Mapeamento Estratégico de Campos

Mapeie conteúdo estático de React/HTML para funções dinâmicas do WordPress:

• Substitua texto estático por the_title(), get_field() ou the_content().
• Substitua caminhos estáticos por get_template_directory_uri().

3. Implementação de Hooks Principais

Garanta que cada tema inclua os hooks fundamentais do WordPress corretamente:

• Arquivos de Layout (header.php / footer.php): Devem incluir wp_head() antes de </head> e wp_footer() antes de </body>.
• Templates de Página: Devem chamar get_header() e get_footer().
• register_nav_menus() para navegação dinâmica sem quebrar a estrutura HTML original.

4. Validação e Rastreador ao Vivo

Mantenha um rastreador ao vivo de Problemas Totais, Corrigidos e Restantes. Cada correção deve ser seguida por uma confirmação:

• ✅ Nenhuma alteração na UI
• ✅ Nenhuma alteração no DOM
• ✅ Nenhuma alteração de classe

Exemplos

Exemplo 1: Conversão de Navegação

// WRONG: Static replacement that adds wrappers
wp_nav_menu(['theme_location' => 'primary']);

// CORRECT: Preserving original Tailwind classes and structure
wp_nav_menu([
    'theme_location' => 'primary',
    'container' => false,
    'items_wrap' => '<ul class="flex space-x-8">%3$s</ul>',
    'walker' => new Custom_Tailwind_Walker()
]);

Exemplo 2: Caminhos de Assets

// Source: <img src="/images/logo.png" />
// WP Conversion:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" alt="Logo" />

Melhores Práticas

• ✅ Faça: Use get_page_by_path() para links internos robustos.
• ✅ Faça: Implemente fallbacks de ACF (Advanced Custom Fields) em functions.php.
• ✅ Faça: Mantenha a configuração do Tailwind em header.php para garantir que os estilos globais estejam ativos.
• ❌ Não faça: Adicione "div" wrappers ou renomeie classes para "limpar" o código.
• ❌ Não faça: Use estilos padrão do WordPress se eles conflitarem com o design original.

Recursos Adicionais

• Documentação ACF
• Tailwind CSS no WordPress
• WordPress Theme Handbook

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem faltando.