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

Guia de Iniciação para o Desenvolvimento de Temas WordPress: Construa o Seu Primeiro Tema Personalizado do Zero

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

Conceitos básicos do desenvolvimento de temas para WordPress

Antes de começar a escrever o código, é essencial entender a estrutura básica de um tema do WordPress. Um tema é, essencialmente, uma pasta que contém uma série de arquivos que seguem regras específicas; esses arquivos juntos determinam a aparência e algumas das funcionalidades do site. A ideia central é a chamada “estrutura de templates” (estrutura de modelos): o WordPress seleciona e carrega automaticamente o arquivo de template correspondente com base no tipo da página que está sendo acessada (como a página inicial, a página de um artigo, uma página personalizada, etc.).

Cada tópico deve conter dois arquivos principais:style.css e index.php。style.css Não apenas fornece estilos, mas as anotações no cabeçalho do arquivo também contêm metadados sobre o tema, como o nome do tema, o autor, a descrição, etc. Esta é a única maneira pelo qual o WordPress reconhece um tema.index.php É o arquivo de modelo padrão; quando nenhum outro modelo mais específico estiver disponível, o WordPress recorrerá a seu uso.

Os temas interagem com o núcleo do WordPress através de Tags de Modelo (Template Tags). Trata-se de funções em PHP que são utilizadas para obter e exibir conteúdo dinamicamente a partir do banco de dados. the_title() Título do Artigo:the_content() Compreender e utilizar corretamente essas funções é fundamental para a exibição de conteúdo dinâmico.

Leitura recomendada Guia completo para o desenvolvimento de temas WordPress: do iniciante ao especialista.。

Configurar o ambiente de desenvolvimento e criar a estrutura do tema

Um ambiente de desenvolvimento eficiente e isolado é o primeiro passo no desenvolvimento de temas. Recomendamos o uso de softwares de servidor local, como XAMPP, MAMP ou Laragon, que permitem a rápida configuração de um ambiente PHP e MySQL no seu computador. Instale os arquivos principais do WordPress no diretório raiz do servidor local (por exemplo, no diretório “www”). htdocs ou www) dentro.

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

Em seguida, no diretório de instalação do WordPress… wp-content/themes/ Dentro do caminho, crie uma pasta para o seu novo tema, por exemplo, nomeie-a como “my_new_theme”. my-first-themeNeste folder, crie o primeiro arquivo necessário:style.cssAs notas de cabeça devem seguir estritamente o seguinte formato:

/*
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
*/

Após salvar o arquivo, acesse a página “Aparência” -> “Temas” no painel administrativo do WordPress. Você deverá ver o seu tema listado e poderá ativá-lo.

Agora, crie o segundo arquivo necessário:index.phpEste é o arquivo do modelo principal do tema. No início, você pode apenas inserir a estrutura básica de HTML5 e um ciclo simples para fazer testes.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <header>
        <h1>Meu tema personalizado</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                ?>
                <article>
                    <h2>\n</h2>
                    <div>\n</div>
                </article>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Informações no fundo do site</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Detalhado sobre os arquivos de modelo e funções centrais

Conforme a complexidade do tema aumenta, é necessário separar o código de diferentes funções em arquivos de templates especializados. O sistema de hierarquia de templates do WordPress procura e carrega automaticamente o template que melhor se adapta à página atual.

Leitura recomendada Eu vou te ensinar, passo a passo, como criar um tema personalizado para o WordPress que seja poderoso e funcional.。

Criar header.php Arquivo, será… index.php \nChina <head> Parte e <header> Corte parte do código e insira-o aqui. Em seguida… index.php Usado na parte superior get_header() Use uma função para introduzi-lo. Da mesma forma, crie… footer.php Armazene as informações na parte inferior e use-as. get_footer() Introduzir. Criar. sidebar.phpE use também… get_sidebar() Introdução: Isso permite a modularização e o reutilização do código.

Para diferentes tipos de páginas, é possível criar modelos específicos:
* single.php: Usado para exibir um único artigo.
* page.phpÉ usado para exibir uma única página.
* front-page.phpSe existir, será usado como a página inicial estática.
* home.phpÉ usado para exibir o índice de artigos do blog (quando a página inicial está configurada para “Artigos Mais Recentes”).
* archive.php: Usado para exibir páginas de arquivo, como categorias, etiquetas, autores, etc.
* 404.phpÉ usado para exibir a página de erro 404.

No arquivo de template, a estrutura mais central é a “Loop” (O Ciclo). É um bloco de código PHP usado pelo WordPress para recuperar e exibir artigos do banco de dados. A estrutura básica é a seguinte:

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 
<!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->

    <p>Desculpe, não foi encontrado nenhum conteúdo.</p>

função bloginfo() ou get_bloginfo() Usado para obter informações básicas sobre um site, como bloginfo( 'name' ) Título do site:bloginfo( 'stylesheet_url' ) Envie o URL do estilo de tabela de tópicos.

Expansão das funcionalidades de estilo, scripts e temas

Para que os estilos do tema sejam carregados corretamente e para evitar conflitos, é necessário usar as funções fornecidas pelo WordPress para adicionar os arquivos de estilo e scripts à fila de processamento, em vez de escrevê-los diretamente no HTML. <link> ou <script> Tags. Isso é feito através dos temas (topics). functions.php Implementado em um arquivo.

Criar functions.php O arquivo é usado para adicionar funcionalidades específicas do tema, modificar o comportamento padrão ou registrar estilos de scripts. wp_enqueue_style() e wp_enqueue_script() Função:

Leitura recomendada Guia Completo para o Desenvolvimento de Temas WordPress: Construindo Temas Personalizados de Alta Performance do Zero。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Nos functions.php Nesse contexto, também é possível utilizar… add_theme_support() Funções para declarar as funcionalidades suportadas por um tema, como imagens características dos artigos, logotipos personalizados, formatação dos artigos, etc.

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

O estilo final do tema geralmente é definido em… style.css Ou em outros arquivos CSS carregados através de funções. O WordPress adiciona automaticamente muitas classes CSS úteis para o `body` e para os artigos. home, single, page-id-{ID} Você pode usar esses nomes de classe para criar estilos específicos.

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

resumos

Através dos passos deste artigo, você já dominou o processo essencial para criar um tema personalizado para o WordPress do zero. Desde a compreensão dos conceitos básicos de temas e da estrutura das suas folhas de estilo (templates), até a configuração do ambiente de desenvolvimento, a criação dos arquivos necessários, a análise dos templates principais, o entendimento de estruturas de repetição e de tags de template, você também aprendeu como… functions.php Adicione corretamente os estilos, scripts e funcionalidades relacionadas aos temas. Embora esse processo seja básico, ele abrange a estrutura essencial do desenvolvimento de temas. Em seguida, você pode aprofundar seu conhecimento explorando o desenvolvimento de subtemas, tipos de artigos personalizados, opções avançadas de temas e a integração com o WooCommerce, entre outras funcionalidades, aprimorando continuamente suas habilidades nesse campo.

Perguntas frequentes Perguntas frequentes

É necessário entender PHP para desenvolver temas (temas de design para websites)?

Sim, o PHP é a linguagem de programação central do WordPress. Os arquivos de tema são, essencialmente, arquivos PHP que combinam HTML com funções PHP do WordPress (tags de modelo) para gerar páginas dinamicamente. Mesmo ao usar construtores de páginas, é essencial entender o PHP para personalizar funcionalidades avançadas e resolver problemas.

O arquivo style.css do tema pode ter seu nome alterado?

Não é possível.style.css É um arquivo essencial para que o WordPress reconheça um tema; seu nome é fixo. Todas as metadados do tema (como o nome e o autor) são definidos nas notas de cabeça deste arquivo. No entanto, você pode… functions.php A função registra e carrega arquivos CSS com outros nomes para complementar os estilos.

Como fazer com que um tema suporte o idioma chinês ou permita a tradução?

Primeiramente, em style.css As notas de cabeça devem ser configuradas corretamente no código. Text Domain(por exemplo my-first-theme), e use em todas as strings que precisam ser traduzidas __() ou _e() As funções são encapsuladas (embaladas) em um determinado formato. Em seguida, ferramentas como o Poedit são utilizadas para analisar o tema (o conjunto de arquivos que compõem a aparência do site) e gerar o código necessário para a implementação dessas funções. .pot Arquivos de modelo, e crie as versões correspondentes para o idioma desejado (por exemplo, zh_CN.poArquivo de tradução para…) e, finalmente, compilar em… .mo O arquivo foi colocado no tópico (tema). languages Dentro da pasta.

Como adicionar funcionalidades de menu a um tema personalizado?

Primeiramente, no tópico… functions.php Os ficheiros utilizados no documento register_nav_menus() O local de registo da função. Depois, no ficheiro de modelo (como, por exemplo, header.phpNo local onde deseja exibir o menu, use… wp_nav_menu() A função chama o menu que foi registrado. Assim, os usuários podem configurar o conteúdo dos menus nessas posições no painel de controle do WordPress, na seção “Aparência” -> “Menus”.

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.