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

Guia para iniciantes no desenvolvimento de temas para WordPress: Criando seu primeiro tema do zero

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

Preparação e configuração do ambiente

Antes de começar a escrever código, você precisa de um ambiente de desenvolvimento adequado. Isso inclui um ambiente de servidor local (como XAMPP, MAMP ou Local by Flywheel), um editor de código (como VS Code ou PhpStorm) e uma instalação nova do WordPress. Certifique-se de que seu WordPress esteja na versão mais recente, para poder usar os recursos e APIs mais recentes.

Em seguida, você precisa no WordPresswp-content/themesCrie uma nova pasta no diretório, e o nome dessa pasta será o slug do seu tema, por exemplomy-first-themeEsta pasta será o lar de todos os seus arquivos de tema. Um tema do WordPress, em sua forma mais básica, tem apenas dois arquivos:index.phpestyle.cssDentre eles,style.cssNão é apenas uma folha de estilos, mas também um “arquivo de cabeçalho” que contém metadados do tema; suas informações de comentário são cruciais para que o WordPress reconheça o seu tema.

Criar um básicostyle.cssO arquivo, cujas notas de cabeça devem conter as seguintes informações:

Leitura recomendada Criando um Tema Perfeito para WordPress: Um Guia Completo de Desenvolvimento do Zero à Proficiência。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainEste arquivo é usado para internacionalização e deve ter o mesmo nome que a pasta do seu tema. Além disso, crie o arquivo mais simples possível.index.phpO arquivo deve conter apenas uma frase.<?php get_header(); ?>E um<h1>Olá, mundo!</h1>Neste momento, no painel administrativo do WordPress, em “Aparência” -> “Temas”, você deve conseguir ver o seu tema e ativá-lo. Embora ele ainda não mostre nada (porque ainda não o criamos), isso não significa que não possa ser usado posteriormente. Basta seguir os passos indicados no painel para configurá-lo e personalizá-lo conforme desejado.header.phpIsso marca o primeiro passo que você deu com sucesso.

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

Compreender os arquivos de modelo principais e a estrutura hierárquica dos modelos

O WordPress utiliza um sistema inteligente chamado “estrutura de templates” (template hierarchy) para determinar qual arquivo de template deve ser usado para exibir o conteúdo de uma determinada solicitação de página. Compreender essa estrutura é fundamental para o desenvolvimento de temas. O sistema começa a procurar pelo arquivo de template mais específico; se não for encontrado, recorre a um arquivo mais genérico.

Os arquivos de modelo mais básicos incluem:
* index.php: o modelo final de fallback; se qualquer solicitação não encontrar um modelo mais específico, usará este.
* header.phpQue contém o documento.<head>parte e a área do cabeçalho do site. Por meio deget_header()Introdução de funções.
* footer.php：inclui a área de rodapé do site. Por meio deget_footer()Introdução de funções.
* sidebar.php: inclui o componente da barra lateral. Através deget_sidebar()Introdução de funções.
* functions.php: Este não é um arquivo de modelo, mas sim a “biblioteca de funções” do seu tema, usada para adicionar funcionalidades, registrar menus, widgets etc.

Para diferentes tipos de páginas, existem modelos mais específicos:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Modelo personalizado) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Usado na página de lista de artigos do blog) -> front-page.php(Usado para definir uma página estática como a página inicial) -> index.php。

Criar modelos para cabeçalhos e rodapés de páginas

Primeiro, crie.header.php…Ele deve começar com…<!DOCTYPE html>Comece, e inclua as chamadas de funções-chave do WordPress, como…wp_head()。

Leitura recomendada Personalização de temas premium do WordPress: um guia prático de design, desenvolvimento e otimização。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/pt/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Da mesma forma, criar.footer.phpE assegure-se de que a chamada seja feita corretamente.wp_footer()Função.

    <footer>
        <p>©  . Todos os direitos reservados.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Agora, você pode atualizar o seu…index.phpUse esses componentes de template.

<main>
    <h1>Olá, mundo, da Main!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Melhorar a funcionalidade do tema através do functions.php

functions.phpO arquivo é o “cérebro” do seu tema. É nele que você adiciona funcionalidades, registra componentes essenciais do WordPress (como menus e áreas de widgets), além de inserir arquivos de estilo (CSS) e scripts.

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

Adicionar suporte a temas e um menu de navegação para o registro.

Primeiro, vamos ativar algumas funções básicas do tema. Use…add_theme_support()Funções para declarar as funcionalidades suportadas por um tema.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Em seguida, registre uma posição para o menu de navegação. Isso permite que os usuários configurem o menu em “Aparência” -> “Menu” no painel de administração e utilizem esse menu nos modelos.wp_nav_menu()A função a chama.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Incluir no estilo e nos scripts

A maneira correta de carregar estilos e scripts é através de…wp_enqueue_style()ewp_enqueue_script()Funções, monte-as…wp_enqueue_scriptsNo gancho.

Leitura recomendada Análise Abrangente do Desenvolvimento de Temas para WordPress: Um Guia Prático do Início ao Avançado。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Criar ciclos e modelos de conteúdo

“Loop” é a estrutura de código PHP em WordPress usada para recuperar e exibir artigos do banco de dados. É o “coração” de quase todos os arquivos de template.

Compreender a estrutura do ciclo principal

No exemplo acima,index.phpNo exemplo, já vimos um ciclo básico. Vamos analisá-lo detalhadamente:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                \n
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><p>Desculpe, nenhuma publicação corresponde aos seus critérios.</p></p>

Construir um modelo para um único artigo

Agora, vamos criar um modelo dedicado para exibir um único artigo.single.phpÉ mais detalhado do que o ciclo da página de lista.

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1>\n</h1>
                <div class="entry-meta">
                    <p><strong>Publicado em %s por %s</strong></p> <p><strong>Data de publicação: </strong><time> . . .</time><strong> Link para os posts do autor: </strong><a> . . .</a></p> <p><strong>.</strong></p>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

resumos

Através deste guia, você completou o processo essencial para criar um tema básico para o WordPress do zero. Começamos com a configuração do ambiente de desenvolvimento e a criação dos arquivos fundamentais, e depois avançamos para a compreensão do sistema de estrutura de templates do WordPress, que é a base para a construção de temas flexíveis. Você aprendeu como criar componentes reutilizáveis…header.phpefooter.phpComponentes de template, e através de uma tecnologia poderosa…functions.phpO arquivo adicionou suporte a funcionalidades essenciais para o seu tema, como menus de navegação e carregamento de estilos. Por fim, exploramos o mecanismo de “loop” do WordPress e criamos templates para exibir listas de artigos e artigos individuais.

Este é apenas um ponto de partida. Em seguida, você pode explorar a criação de mais modelos específicos (como…)page.php, archive.phpNa área de registro de ferramentas adicionais, é possível criar tipos de artigos e categorias personalizados, além de implementar um design responsivo de nível avançado e interações em JavaScript. Lembre-se de que consultar a documentação oficial para desenvolvedores e praticar constantemente são os melhores caminhos para aprimorar suas habilidades.

Perguntas frequentes Perguntas frequentes

O que devo fazer se, após a ativação do meu tema, o site exibir uma tela em branco ( tela branca)?

Isso geralmente é causado por um erro fatal em PHP. Por favor, verifique primeiro o seu código.functions.phpHá erros de sintaxe no arquivo, como a falta de pontos e vírgulas ou parênteses? Abra o WordPress para verificar.WP_DEBUGOs modelos podem ajudá-lo a ver as informações de erro específicas.wp-config.phpNo arquivo, será…define('WP_DEBUG', false);mudar paradefine('WP_DEBUG', true);。

Como adicionar a funcionalidade de um Logo personalizado ao meu tema?

No seufunctions.phpOs documentosadd_theme_supportAlém disso, adicione uma linha:add_theme_support('custom-logo');Você também pode passar um parâmetro de array para definir o tamanho do Logo e se a sua altura deve ser flexível. Em seguida, o usuário pode carregar o Logo em “Aparência” -> “Personalizado” -> “Identidade do Site” e usá-lo no modelo.the_custom_logo();A função a chama.

Por que o menu de navegação que eu registrei não é exibido no backend?

Por favor, verifique os seguintes pontos: Primeiro, certifique-se de que o seu código de registro esteja correto.functions.phpE já foi montado corretamente.initGancho ou…after_setup_themeNo gancho. Em segundo lugar, certifique-se de que você definiu corretamente…theme_location(por exemplo'primary') Ao ser chamadowp_nav_menu()O terceiro ponto é que, após a criação do menu, é necessário atribuí-lo à posição que você registrou no painel de controle “Aparência” -> “Menu” -> “Gerenciar Posições”.

Como criar uma área para ferramentas pequenas (barra lateral)?

Primeiramente, emfunctions.phpUse isto no chinês (simplificado)register_sidebar()A função registra uma pequena área de ferramentas. Você precisa fornecer um parâmetro de tipo array para definir o ID, o nome, a descrição, etc. dessa área. Em seguida, isso é feito no arquivo de template onde você deseja exibir a barra lateral (por exemplo…).sidebar.phpNeste artigo, usamosdynamic_sidebar()Chame a função e passe o ID do widget para executá-la. Por fim,index.phpousingle.phpEm modelos como esses, é utilizado…<?php get_sidebar(); ?>Introduzir o modelo do sidebar.

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.