Do zero ao um: um guia passo a passo para dominar as competências essenciais do desenvolvimento de temas modernos do WordPress.

Conceitos básicos no desenvolvimento de temas para o WordPress moderno

A arquitetura dos temas do WordPress moderno difere significativamente dos métodos tradicionais. A principal mudança é a adoção completa dos temas baseados em blocos (Block Themes) e do modo de edição em todo o site (Full Site Editing – FSE). Isso significa que a aparência e o layout de um tema – desde o cabeçalho, o rodapé até o conteúdo dos artigos – podem ser construídos e modificados usando os “blocos” disponíveis no editor Gutenberg, sem a necessidade de escrever diretamente templates PHP complexos.

A estrutura fundamental dos arquivos de um tema moderno foi simplificada de forma significativa. O arquivo de modelo mais crítico nesse contexto é…theme.jsonEle define as configurações globais do tema, como o estilo, a paleta de cores e o layout. Outro arquivo de extrema importância é…index.htmlEle substituiu o método tradicional.index.phpComo modelo padrão, use blocos de HTML estáticos e que possam ser interpretados pelo editor para construir a estrutura da página.style.cssO arquivo ainda existe e é usado principalmente para declarar as informações do tema, mas a maioria das definições de estilos CSS foi transferida para outro local.theme.jsonOu gerenciado pelo editor.

Para manter a compatibilidade com versões anteriores, o WordPress verifica se existe um arquivo específico no diretório raiz do tema.block-templatesoutemplatesPastas. Essas pastas são usadas para armazenar arquivos de modelos HTML baseados em blocos, por exemplo.single.htmloupage.htmlElas serão utilizadas com prioridade em relação aos arquivos de templates PHP. Além disso, o método de tratamento dos estilos e recursos front-end provenientes dos temas depende de…wp_enqueue_styleewp_enqueue_scriptFunções, geralmente no arquivo principal.functions.phpRealize o registro e faça a fila nesse local.

Leitura recomendada Desenvolvimento de temas WordPress do início ao fim: um guia passo a passo para criar um site personalizado.。

Compreender essa mudança de conceito — de escrever templates PHP fixos para usar JSON e marcadores de bloco para definir estilos e estruturas — é o primeiro passo para dominar o desenvolvimento de temas modernos.

Hospedagem para sites WordPress da UltraHost

Garantia de reembolso em 30 dias, largura de banda ilimitada e banco de dados, proteção contra DDoS gratuita; desconto de 50% na compra de 3 anos (planos de 4 TB a 10 TB).

página de acesso

Criação e configuração dos arquivos centrais do tema

Para criar um tema moderno para o WordPress, primeiro é necessário…wp-content/themesCrie uma nova pasta de temas no diretório. Isso também se aplica aos temas blocos.style.cssO arquivo ainda é necessário como um “arquivo de identificação”, e o bloco de comentários no topo dele deve conter informações específicas.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Imediatamente em seguida, você precisa criar o “cérebro” de um tema moderno…theme.jsonArquivo. Este arquivo JSON está localizado no diretório raiz do tema e é usado para controlar de forma centralizada os estilos globais e as configurações do tema. Através deste arquivo, você pode definir o sistema de formatação (como o tamanho e a família dos fontes), as paletas de cores, os estilos padrão dos blocos, etc. Plugins e subtemas também podem sobrepor essas definições, permitindo a personalização dos estilos. Um arquivo básico…theme.jsonA estrutura é a seguinte:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Modelo principal do temaindex.htmlA estrutura da página padrão foi definida. Ela é composta inteiramente por marcas de bloco envolvidas em comentários HTML reconhecidos pelo editor, por exemplo:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Essa estrutura divide claramente a cabeça da página, a área de conteúdo principal e o rodapé, e faz isso através de…wp:post-contentO conteúdo dos artigos é carregado dinamicamente em blocos. Por fim, é necessário criar um diretório chamado “Template Parts” no diretório raiz do tema.partsE coloque isso dentro.header.htmlefooter.htmlArquivos de componentes, etc.

Leitura recomendada Guia popular de 2026 para iniciantes: Como criar o seu primeiro tema para WordPress do zero。

Construir páginas utilizando modelos e componentes de modelo.

Nos temas em blocos, a estrutura de layout da página é construída principalmente através de templates (modelos) e Template Parts (peças de modelo). Os templates são usados para definir a estrutura geral de tipos específicos de páginas (como um único artigo ou uma página de arquivos), enquanto as Template Parts são módulos reutilizáveis, como cabeçalhos e rodapés.

Os arquivos de modelo geralmente são armazenados na pasta do tema.templatesDentro da pasta. O WordPress irá corresponder automaticamente a arquivos de modelo específicos para diferentes tipos de consultas. Por exemplo,single.htmlUsado para exibir um único artigo.page.htmlUsado para páginas estáticas.home.htmlouindex.htmlPara a página inicial do blog. Você pode…theme.jsonNão.customTemplatesAlgumas declarações definem modelos personalizados, que são disponibilizados para os usuários escolherem no editor de páginas.

Os componentes do modelo são armazenados em…partsDentro da pasta, isso aumentou significativamente a reutilização do código e a conveniência de manutenção. Foi criado um arquivo de cabeçalho (header file).header.htmlA área superior do site pode ser construída utilizando o bloco de título do site, o bloco de navegação, entre outros elementos. Crie também um arquivo para o rodapé (footer).footer.htmlÉ possível inserir informações de copyright e uma área para ferramentas adicionais (ou “widgets”).

hospedagem compartilhada da hosting.com

Alto desempenho com CPUs AMD EPYC, armazenamento SSD NVMe e LiteSpeed, suporte interno especializado 24 horas por dia, 7 dias por semana, medidas de segurança avançadas, incluindo SSL, força bruta, malware e proteção contra DDoS, economia de até 73%

página de acesso

Um típico…header.htmlPode ser algo como o seguinte:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

Neste exemplo,wp:navigationOs blocos são identificados ou caracterizados por meio de seus… (The blocks are identified or characterized by their…)refOs atributos referem-se a um menu de navegação criado e salvo em “Aparência” -> “Editor” (cujo ID é 4), o que ilustra a grande vantagem da separação entre o conteúdo e a estrutura no site inteiro. Ao incluir esses componentes no modelo principal, isso permite…Assim, você pode inseri-los na página.

Para layouts mais complexos, é possível utilizar…wp:group、wp:columns、wp:queryUse blocos para construir linhas, colunas e conteúdo de repetição. Por exemplo,wp:queryOs blocos podem listar dinamicamente os artigos mais recentes, o que equivale ao “loop principal” (main loop) presente em temas tradicionais, mas agora tudo é configurado exclusivamente através de um editor visual.

Leitura recomendada Do Zero à Proficiência: Guia Completo e Tutorial Prático para o Desenvolvimento de Temas para WordPress。

Adicionar funcionalidades e estilos através de arquivos de funções

Apesar de os temas em bloco dependerem em grande medida…theme.jsonE os modelos HTML, mas…functions.phpOs arquivos continuam sendo o núcleo da funcionalidade de extensões de temas. Trata-se de um arquivo PHP que não retorna nenhum valor e é utilizado para adicionar funcionalidades, registrar scripts de estilo, definir o suporte aos temas, entre outras tarefas.

Uma operação básica é registrar e colocar em fila os arquivos de estilo (style sheets) e os scripts relacionados aos temas. Mesmo que o estilo seja composto principalmente por…theme.jsonPara a gestão, você provavelmente ainda precisará de CSS personalizado adicional.

Hospedagem Compartilhada InterServer

Hospedagem compartilhada $2.50 USD por mês, primeiro mês $0.1 USD código promocional tryinterserver, 461 scripts de aplicativos em nuvem, instalação com um clique.

página de acesso

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpÉ também um ótimo local para adicionar funcionalidades personalizadas. Por exemplo, você pode usar…register_block_styleA função registra uma variante visual personalizada para um bloco central existente (como um parágrafo), permitindo que ela seja exibida no painel de “Estilos” do editor para que o usuário possa escolhê-la.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Além disso, você também pode usar ganchos (hookes), como…wp_head、wp_footerInsira código personalizado ou utilize métodos disponíveis para isso.add_filterModifique o comportamento padrão da consulta, o conteúdo de saída, etc. Para necessidades de personalização mais complexas, considerar a criação de um pequeno plugin pode ser uma escolha mais modular.

Tópicos sobre Testes e Depuração

Após a conclusão do desenvolvimento, é essencial realizar testes abrangentes no tema. Primeiramente, é necessário ativar o tema em um ambiente local ou temporário para verificar se o layout básico das páginas da frente, o design responsivo, e o estilo de todos os blocos principais (títulos, parágrafos, imagens, galerias, botões, etc.) estão sendo exibidos corretamente. Além disso, é necessário garantir que o menu de navegação e os links estejam funcionando corretamente.

Em segundo lugar, é necessário realizar testes aprofundados com o editor Gutenberg. Crie novas páginas e artigos, tente usar vários blocos para construir layouts complexos, e verifique se as barras de ferramentas e os painéis de configuração dos blocos estão funcionando corretamente, bem como se é possível personalizar os estilos (por exemplo, através de…)theme.jsonVerifique se a paleta de cores ou o tamanho da fonte definidos foram aplicados corretamente aos blocos de conteúdo. É especialmente importante testar o editor de toda a página (“Aparência” -> “Editor”), tentando modificar o cabeçalho, o rodapé, o modelo da página inicial, etc., para garantir que as alterações sejam refletidas corretamente na interface do usuário após a salvaguarda.

O depuramento é um elemento central no desenvolvimento moderno. Abra as ferramentas de desenvolvedor do navegador (F12) e verifique se existem erros em JavaScript ou conflitos de CSS.wp-config.phpDefina no centrodefine('WP_DEBUG', true);É possível exibir avisos e erros do PHP na página, o que ajuda a localizar rapidamente problemas no código. Além disso, confira se o tema segue os padrões de codificação do WordPress e verifique, no verificador W3C no console, se existem erros na estrutura HTML.

Finalmente, é necessário realizar testes de compatibilidade entre diferentes navegadores (Chrome, Firefox, Safari, Edge) e dispositivos (desktop, tablet, celular) para garantir que todos os usuários tenham uma experiência consistente.

resumos

O desenvolvimento de temas para o WordPress moderno representa uma inovação em termos de conceitos. Ele passou de um processo de criação de templates em PHP baseados em instruções sequenciais para um modelo mais flexível e orientado a objetos.theme.jsonDesenvolvimento declarativo centrado em marcas de bloco e edição em todo o site. Os desenvolvedores precisam dominar essas ferramentas com habilidade.theme.jsonUse a configuração para definir o estilo global, utilize modelos de blocos HTML para construir a estrutura da página e, através disso…functions.phpRealização de aprimoramentos funcionais. Esse modelo reduz significativamente as barreiras para a criação de layouts personalizados, proporcionando aos criadores de conteúdo uma grande liberdade de design. No entanto, também exige que os desenvolvedores compreendam profundamente o sistema de edição por blocos. Seguindo o caminho de habilidades mencionado acima, você será capaz de criar temas para o WordPress que sejam flexíveis, poderosos e preparados para o futuro.

Perguntas frequentes Perguntas frequentes

O tema do bloco de desenvolvimento “###” ainda requer conhecimentos em PHP?
Sim, ainda é necessário. Embora a estrutura principal da página seja definida por modelos HTML,functions.phpOs arquivos ainda são essenciais para adicionar funcionalidades temáticas, registrar scripts de estilo, e realizar personalizações avançadas utilizando ganchos (hooks) e filtros. Além disso, o conhecimento de PHP é fundamental para criar componentes de templates dinâmicos baseados em consultas personalizadas ou para lidar com lógicas de negócios complexas.

Os temas em blocos e os temas tradicionais podem coexistir?

Sim. O WordPress consegue identificar automaticamente o tipo do tema. Se o diretório raiz do seu tema conter…theme.jsonArquivos etemplates/partsOs modelos de blocos localizados dentro das pastas serão reconhecidos pelo WordPress como temas de blocos, e a funcionalidade de edição em todo o site será ativada. No entanto, mesmo que esses arquivos estejam presentes, o sistema ainda manterá o sistema de modelos PHP dos temas tradicionais como alternativa. Se o modelo de bloco correspondente a uma solicitação não for encontrado, o sistema reverterá automaticamente para o uso do modelo PHP correspondente.single.php）。

Como adicionar CSS personalizado ao meu tema de bloco?

Existem principalmente três maneiras. A maneira mais recomendada é através de…theme.jsonOs documentosstylesAlgumas partes adicionam CSS que afeta o conjunto do site ou blocos específicos. Em segundo lugar, isso pode ser feito dentro do tema (theme) do site.style.cssEscreva regras de estilo adicionais no arquivo. Para estilos mais dinâmicos ou específicos para determinadas páginas, também é possível fazê-lo nesse arquivo.functions.phpUse isto no chinês (simplificado)wp_add_inline_styleAdicione estilos personalizados de forma in-line dentro da função, ou registre-os diretamente para o bloco em questão.

O modo de edição em todo o site representa algum risco para os websites existentes?

Para um site que já possui conteúdo, é necessário ter cuidado ao mudar para um novo tema de bloco. É recomendado realizar um teste completo do novo tema em um ambiente de teste (como um ambiente de desenvolvimento local ou um site temporário) para garantir que todo o conteúdo existente seja exibido corretamente e que o layout não seja alterado. Antes da conversão, é essencial fazer um backup de todo o site (incluindo arquivos e banco de dados). O editor de todo o site é poderoso, mas ele modifica diretamente os templates, e operações inadequadas podem afetar todas as páginas que utilizam esse template.