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

Primeiros passos no desenvolvimento de temas para WordPress: Criando seu primeiro tema do zero

Leitura de 3 minutos
2026-03-11
2026-06-04
1,944
Eu recebo uma comissão quando você faz compras através dos links abaixo, sem custo adicional para você.

Preparativos: Compreender a estrutura do tema e os arquivos básicos

Antes de começar a escrever o código, precisamos entender a estrutura básica de um tema padrão do WordPress. O tema mais simples do WordPress requer apenas dois arquivos:style.css e index.phpNo entanto, um tema com funcionalidades completas e estrutura clara requer mais arquivos de modelo específicos para definir as diferentes partes do site.

Os arquivos de modelo principais incluem:
* index.phpO arquivo do modelo principal do tema é o modelo de recorrência padrão para todas as páginas do site.
* style.cssO estilo principal do tema contém não apenas regras CSS, mas também comentários no cabeçalho do arquivo que definem as metadados do tema, como o nome do tema, o autor, a descrição, etc. Esses dados são cruciais para que o WordPress reconheça o tema corretamente.
* header.phpO modelo do cabeçalho de um site geralmente contém:<head>Algumas partes do site, o LOGO do site e o menu de navegação principal.
* footer.phpO modelo do rodapé de um site geralmente contém informações de copyright, uma área para widgets, entre outros elementos.
* functions.phpArquivo funcional do tema, usado para adicionar funcionalidades ao tema, registrar menus, áreas de widgets, bem como conter outros arquivos PHP.

Além disso, existem modelos específicos para páginas individuais, como… single.php(Um único artigo)page.php(Página independente)archive.php(Página de arquivamento do artigo) etc. Compreender a função desses arquivos é a base para construir um tópico coerente.

Leitura recomendada Introdução ao desenvolvimento de temas para WordPress: Construa o seu primeiro tema personalizado do zero。

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

A configuração do ambiente de desenvolvimento também é muito importante. Você precisa de um ambiente de desenvolvimento PHP local (como XAMPP, Local by Flywheel ou DevKinsta), um editor de código (como VS Code ou PhpStorm), e deve garantir que o WordPress instalado em seu computador esteja na versão mais recente.

Criar arquivos de tema e uma estrutura de diretórios

Primeiramente, dentro do diretório de instalação do seu WordPress… wp-content/themes/ Dentro da pasta, crie uma nova pasta e nomeie-a com o nome do seu tópico, por exemplo: my-first-themeTodos os arquivos de tema serão colocados nesta pasta.

Em seguida, criaremos o primeiro e também necessário arquivo:style.cssNo topo deste arquivo, você precisa adicionar uma nota específica para informar ao WordPress que este é o seu tema.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Agora, crie o segundo arquivo necessário:index.phpNa fase inicial, podemos tornar tudo muito simples, limitando-nos a exibir uma estrutura HTML básica.

<!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>
    <header>
        <h1>Bem-vindo ao meu primeiro tema para WordPress!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Todos os direitos reservados.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Neste momento, se você entrar no painel administrativo do WordPress, na seção “Aparência” → “Temas”, você deverá ver o seu “Primeiro Tema” e poderá ativá-lo. Após a ativação, ao acessar a página inicial do site, notará que o conteúdo dos artigos está apresentado dentro de uma página HTML muito básica.

Leitura recomendada Guia completo para o desenvolvimento de temas do WordPress: do início ao avançado.。

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 modelos e funcionalidades centrais

Para tornar a estrutura do tópico mais clara, precisamos…index.phpDividir em partes menores e reutilizáveis. Primeiro, crie… header.php Arquivo, será…<head>Parte do conteúdo e o cabeçalho foram movidos para dentro.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1009>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

Em seguida, crie footer.php Documentos.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Agora, precisamos criar o “cérebro” do tema… functions.php Arquivos. Aqui, configuraremos as funcionalidades de suporte a temas, a localização dos menus, bem como a adição de tabelas de estilos e scripts.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
function my_first_theme_scripts() {
    // 主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 主JavaScript文件（如果存在）
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Finalmente, reestruture seu… index.phpUse as tags de modelo do WordPress para inserir o cabeçalho e o rodapé da página.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Adicionar estilo e funcionalidade interativa

A estrutura do tema já está pronta; agora é hora de adicionar estilos e interações a ele. Primeiro,style.cssApós as notas no cabeçalho do arquivo, adicione algum CSS básico para embelezar o seu tema.

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 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Para lidar com a navegação em dispositivos móveis, podemos criar um arquivo simples de JavaScript. Crie-o no diretório raiz do tema. /js/navigation.js。

Leitura recomendada O guia completo para o desenvolvimento de plug-ins do WordPress: um tutorial prático do zero à publicação on-line。

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

E adicione os estilos correspondentes no CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

resumos

Através dos passos acima, completamos um tema WordPress básico, mas com uma estrutura completa. Começamos com a compreensão dos arquivos centrais do tema e, gradualmente, criamos os demais componentes necessários para a sua funcionalidade.style.csseindex.phpE, em seguida, através da separação…header.php、footer.phpe poderosofunctions.phpOs arquivos ajudaram a tornar a estrutura do tema modular e fácil de manter. Por fim, adicionamos estilos básicos e interações simples em JavaScript para melhorar a experiência do usuário.

Este tema possui as características básicas de um tema moderno para WordPress: suporte para tags de título, imagens de destaque, menus de navegação e um esboço de design responsivo. Partindo desse ponto, você pode continuar explorando as possibilidades para criar um tema ainda mais aprimorado.single.php、page.phpEspere por mais arquivos de modelos, introduza frameworks CSS mais complexos (como o Bootstrap), ou use a API REST do WordPress para criar uma interface frontal mais dinâmica. O mundo do desenvolvimento de temas é vasto e interessante; o segredo está em colocar a mão na massa e em iterar constantemente.

Perguntas frequentes Perguntas frequentes

Por que o meu tema não está exibido na lista de “Temas” no backend?

Por favor, verifique primeiro se a sua pasta de temas está localizada no caminho correto:wp-content/themes/Em segundo lugar, certifique-se de questyle.cssO bloco de comentários com informações sobre o tema, localizado no topo do arquivo, está no formato correto; em particular, a linha “Theme Name:” é obrigatória. Qualquer erro de ortografia ou problema de formatação pode impedir que o WordPress reconheça o tema.

Como adicionar uma área para widgets (pequenos aplicativos) ao meu tema?

Você precisa de…functions.phpOs ficheiros utilizados no documentoregister_sidebar()Uma função é utilizada para registrar a área onde os widgets serão exibidos. Após a registo, você poderá utilizar essa área nos arquivos de modelo correspondentes (como…)sidebar.phpoufooter.phpO conceito de "design thinking" é usado no contexto dedynamic_sidebar()É uma função usada para chamá-la. Este é o método padrão para expandir as funcionalidades da barra lateral ou do rodapé de um tema.

函数 get_template_part() 有什么用？

get_template_part()É um tag de template muito poderoso, usado para carregar fragmentos de código reutilizáveis dentro de um tema. Por exemplo, pode ser usado para fazer chamadas em ciclos.get_template_part( 'template-parts/content', get_post_type() );Primeiramente, tentará carregar o conteúdo.template-parts/content-post.php(Assumindo que o tipo do artigo seja…)postSe falhar, então carregue.template-parts/content.phpIsso aumentou significativamente a modularidade e a manutenibilidade do código.

Ao desenvolver um tema para o WordPress, como garantir que ele esteja em conformidade com os padrões de codificação do WordPress?

O WordPress estabeleceu padrões de codificação detalhados para PHP, HTML, CSS e JavaScript. É recomendado que você instale ferramentas de linting apropriadas no seu editor de código (como o PHP_CodeSniffer, em conjunto com as regras de codificação do WordPress, ou o ESLint). Além disso, consulte regularmente os documentos sobre padrões de codificação disponíveis no manual oficial do WordPress e assegure-se de que esses padrões sejam rigorosamente seguidos durante o desenvolvimento em equipe, a fim de manter a qualidade e a consistência do código.

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.