Página inicial/relacionado ao conhecimento/WordPress/Detalhes do conteúdo

Guia de introdução ao desenvolvimento de temas do WordPress: crie o seu primeiro tema do zero.

Leitura de 3 minutos
2026-03-14
2026-06-05
2,375
Eu recebo uma comissão quando você faz compras através dos links abaixo, sem custo adicional para você.

Compreender a estrutura básica de um tema WordPress

Antes de começar a escrever o código, é essencial entender a estrutura de um tema do WordPress. Um tema básico requer pelo menos dois arquivos: um é o arquivo de estilo (stylesheet) que define as informações do tema, e o outro é o arquivo de modelo PHP (template) que exibe o conteúdo do site. Esses arquivos juntos formam a estrutura básica do tema e seguem uma estrutura de diretórios e convenções de nomeação específicas.

O arquivo central é…style.cssEsse arquivo não contém apenas estilos CSS; o bloco de comentários no cabeçalho do arquivo é, na verdade, o “cartão de identidade” do tema. Esse bloco informa ao sistema WordPress o nome do tema, o autor, a descrição, a versão e outras informações metadados. Sem um formato correto…style.cssO WordPress não conseguirá reconhecer e ativar o seu tema.

Outro arquivo essencial é…index.phpEste é o arquivo do modelo principal do tema. Quando o WordPress não consegue encontrar um arquivo de modelo mais específico (como…).single.phpoupage.phpQuando isso acontece, ele é usado por padrão para renderizar a página. É a opção de reserva para todos os arquivos de template.

Leitura recomendada Desvendando o desenvolvimento de temas do WordPress: as principais técnicas para criar um site personalizado do zero.。

Documento de declaração de informações sobre o tema

Style sheet do temastyle.cssA parte superior (head) deve conter comentários específicos. Aqui está um exemplo básico:

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).
LOGO da UltaHost página de acesso 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Dentre eles,Text DomainUsado para internacionalização; é um identificador que será utilizado durante o processo de tradução subsequente. Este arquivo geralmente também contém todo o seu código de estilo CSS.

Arquivos de modelo principais

index.phpO arquivo é a porta de entrada para o tema. Um dos exemplos mais simples…index.phpÉ possível usar apenas ciclos básicos que chamam funções do núcleo do WordPress para obter e exibir a lista de artigos.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

Neste trecho de código,wp_head()ewp_footer()São dois “ganchos” (hooks) cruciais que permitem que o núcleo do WordPress, plugins e outros scripts insiram o código necessário no início e no final das páginas, como estilos, scripts e meta tags.

Criar um ambiente de desenvolvimento local

Antes de implantar um tema em um servidor online, criar um ambiente de desenvolvimento local é a maneira mais eficiente e segura. O ambiente local permite que você teste o código livremente e depure erros sem afetar o site online.

Leitura recomendada Domine completamente o desenvolvimento de temas do WordPress: um guia completo, do início ao fim.。

Selecione o software do servidor local.

Para iniciantes, softwares de servidor local integrados são a melhor escolha. Eles combinam Apache/Nginx, PHP e o banco de dados MySQL em um único pacote, permitindo a instalação e o uso com apenas um clique. Opções populares incluem XAMPP, Local by Flywheel e DevKinsta. Esses ferramentas simulam um ambiente de servidor de rede real, permitindo que você execute o WordPress no seu próprio computador.

Instale o WordPress e crie a pasta para os temas (templates).

Após executar o programa no servidor local, você precisará instalar um novo WordPress. Baixe o pacote comprimido mais recente do WordPress e descompacte-o no diretório raiz do site no servidor local (por exemplo, a pasta htdocs do XAMPP). Em seguida, acesse o endereço local (como http://localhost) através de um navegador para concluir o famoso processo de instalação em “cinco minutos”.

Após a instalação, entre no WordPress.wp-content/themesDiretório. Aqui, crie uma nova pasta para o tema que você está prestes a desenvolver; por exemplo, nomeie-a “my-first-theme”. As pastas que você criou anteriormente…style.csseindex.phpO arquivo deve ser colocado dentro desta pasta. Agora, você deve fazer login no painel administrativo do WordPress e, em “Aparência” -> “Temas”, conseguirá ver o seu tema. Embora suas funcionalidades sejam ainda muito simples no momento.

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%
LOGOTIPO da hosting.com página de acesso

Construir um sistema de arquivos de modelos básicos

Apenasindex.phpO tema em si não é suficiente para atender às necessidades de um site completo. Um tema funcionalmente completo precisa de um conjunto de arquivos de template para lidar com diferentes cenários de exibição, como artigos individuais, páginas independentes, arquivos de arquivamento de artigos, etc. O sistema de hierarquia de templates do WordPress seleciona automaticamente o arquivo de template mais adequado para renderizar a página solicitada.

Artigo e modelo de página

single.phpO modelo é usado para exibir um único artigo de blog. Quando um usuário clica para ler o texto completo de um artigo, o WordPress utiliza esse modelo. Geralmente, ele contém informações mais detalhadas sobre o artigo, como categorias, etiquetas, autor e a área de comentários.

page.phpOs modelos são utilizados para exibir páginas estáticas independentes (como as páginas “Sobre Nós” e “Contato”). A diferença entre eles e os modelos de artigos é que, geralmente, não exibem elementos pertencentes aos artigos do blog, como a data de publicação ou a categoria.

Leitura recomendada Explicação detalhada do desenvolvimento de temas WordPress: um guia completo do início ao fim.。

Modelos de cabeça e rodapé

Para seguir o princípio DRY (Don’t Repeat Yourself – Não se repita), os temas do WordPress geralmente separam as partes de cabeça (Header) e pé de página (Footer) em arquivos independentes.

header.phpO arquivo contém todo o código desde o início até a área principal do conteúdo da página, incluindo as seções, o identificador do site, o menu de navegação principal, entre outros elementos.index.php、single.phpEm outros modelos, também é possível usá-lo.get_header()Use uma função para introduzi-lo.

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.
Logo da InterServer página de acesso

Da mesma forma,footer.phpO arquivo contém todo o conteúdo do rodapé, como informações de copyright, navegação auxiliar, etc., e é usado para…get_footer()Introdução de funções. Além disso,sidebar.php(O sidebar) também é frequentemente separado e utilizado.get_sidebar()Chamada.

Reestruturadoindex.phpVai ficar muito simples e conciso:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Integração de estilos e scripts

Os temas modernos precisam carregar corretamente e de forma eficiente os arquivos de estilo CSS e os scripts JavaScript. O WordPress disponibiliza funções específicas para gerenciar esses recursos, garantindo que eles sejam carregados na ordem correta de dependência e evitando a introdução repetida ou conflitos entre eles.

Use a fila de funções para adicionar estilos.

A maneira correta de fazer isso é através de…wp_enqueue_style()A função adiciona o arquivo de estilo à fila. Você precisa criar um elemento no tema com o nome…functions.phpO arquivo em questão é o núcleo funcional do tema, utilizado para adicionar várias características, funcionalidades e modificar o comportamento padrão.

Nosfunctions.phpNeste caso, você pode montar uma função nowp_enqueue_scriptsNeste gancho de ação:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()A função irá obter automaticamente o tema.style.cssCaminho do arquivo. Ao carregar os recursos dessa maneira, o WordPress consegue gerenciá-los de forma mais eficiente.

Use a fila de funções para adicionar scripts.

O carregamento de scripts JavaScript também requer o uso de uma fila; a função correspondente é…wp_enqueue_script()Você pode adicioná-los na mesma função.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Aqui,array( 'jquery' )Foi declarado que esse script depende do banco de dados central do jQuery; o WordPress garantirá que o jQuery seja carregado primeiro. O último parâmetro…trueIsso indica que o script deve ser colocado no final da página (antes do conteúdo principal), o que ajuda a melhorar a velocidade de carregamento da página.

resumos

Desenvolver um tema para o WordPress do zero é um processo de aprendizado sistemático que abrange vários passos cruciais, desde a compreensão da estrutura básica dos arquivos, a configuração de um ambiente local, a criação de um sistema de templates até a integração correta dos recursos. Ao criar tudo isso por conta própria…style.css、index.php、header.php、footer.phptambémfunctions.phpAlém desses arquivos essenciais, você não apenas criou um tema funcional, mas também compreendeu em profundidade o funcionamento da estrutura de templates e do sistema de “ganchos” (hooks) do WordPress. Lembre-se de que o essencial no desenvolvimento de temas é seguir as convenções e padrões do WordPress, o que garante que seu tema seja compatível, eficiente e fácil de manter. Partindo desse ponto, você pode explorar funcionalidades mais avançadas, como tipos de artigos personalizados, ferramentas de customização de temas e áreas de widgets, para construir gradualmente um tema personalizado e poderoso.

Perguntas frequentes Perguntas frequentes

Os desenvolvedores de temas precisam de ter conhecimentos de PHP?

Sim, dominar o PHP é uma condição essencial para o desenvolvimento de temas para o WordPress. Isso porque o próprio WordPress é escrito em PHP, e todos os arquivos de template (como…)index.php、single.phpTodos são arquivos PHP, e eles utilizam código PHP para chamar as funções centrais do WordPress, a fim de gerar dinamicamente o conteúdo das páginas. Além disso, são usados para adicionar funcionalidades.functions.phpO arquivo é totalmente composto por código PHP. O HTML e o CSS são utilizados para definir a estrutura e o estilo, enquanto o PHP é a essência para implementar funcionalidades dinâmicas e a interação com os dados.

Qual é a função do arquivo functions.php do tema?

functions.phpO arquivo é o “centro de funcionalidades” do seu tema. Não se trata de um arquivo de modelo; ele não gera diretamente nenhuma parte da página. Pelo contrário, é usado para armazenar todo o código PHP necessário para modificar e expandir as funcionalidades do tema. Usos comuns incluem: registrar a posição dos menus de navegação, definir a área dos widgets, etc.wp_enqueue_scriptsO “gancho” (hook) é usado para adicionar arquivos de CSS e JavaScript, para fornecer suporte a funcionalidades específicas do tema (como miniaturas de artigos, fundos personalizados), bem como para definir várias funções personalizadas. Este arquivo é carregado automaticamente quando o tema é ativado.

Como fazer com que o meu tema suporte múltiplas línguas?

Tornar um tema compatível com múltiplas línguas (internacionalização e localização) envolve basicamente dois passos. O primeiro passo é utilizar funções de tradução específicas do WordPress em todos os trechos de texto que precisam ser traduzidos no tema.__('文本', 'text-domain')ou_e('文本', 'text-domain')quetext-domainDeve ser combinado com…style.cssDeclarado na…Text DomainConsistente. O segundo passo é usar ferramentas como o Poedit para escanear o código do tema e gerar o necessário..potArquivos de modelo; o tradutor utiliza esses arquivos para criar as versões correspondentes em outro idioma (como o chinês)..poE o compilado.moArquivo, e coloque-o no tópico./languages/No diretório correspondente, o WordPress carregará automaticamente as traduções apropriadas de acordo com as configurações de idioma do site.

Qual é a diferença entre temas (themes) e plugins?

Os temas e os plugins no WordPress desempenham funções completamente diferentes. Os temas são responsáveis pelo aspecto visual do site, ou seja, pela aparência, pelo layout, pelos estilos e pela estrutura dos templates que os usuários veem. Eles determinam “como o site é”. Já os plugins são usados para adicionar funcionalidades específicas ao site; essas funcionalidades funcionam independentemente do tema escolhido, seja para criar formulários de contato, otimizar o SEO, adicionar carrinhos de compras para lojas online, entre outras coisas. Eles determinam “o que o site pode fazer”. Um bom princípio de prática é: o código relacionado à apresentação visual e ao layout deve ser colocado no tema, enquanto o código relacionado às funcionalidades essenciais deve ser desenvolvido em forma de plugins. Isso garante que, ao trocar de tema, as funcionalidades importantes do site não sejam perdidas.

O que vem a seguir, o que vem a seguir?

Se estiver criando ou otimizando um site WordPress, a próxima etapa é continuar lendo sobre otimização de desempenho, configuração de plugins e personalização de temas.

Leitura ampliada e conhecimento prático

Os seguintes estão relacionados ao tópico deste artigo e são adequados para uma leitura mais aprofundada. Geralmente, é melhor priorizar o artigo que está mais próximo do seu problema atual e, em seguida, expandir gradualmente para os tópicos adjacentes.

Tags.