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

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

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

Preparativos: Criar um ambiente temático completo

Antes de escrever qualquer código, estabelecer um ambiente de desenvolvimento bem estruturado é a chave para o sucesso. Primeiramente, você precisa instalar o WordPress localmente ou em um servidor remoto. Crie um diretório para armazenar os temas, localizado dentro do diretório de instalação do WordPress. /wp-content/themes/ Sim. Vamos criar algo chamado… my-first-theme Um novo diretório foi criado; este é o diretório central do nosso tema personalizado.

Um tema básico do WordPress pode ser reconhecido pelo sistema com apenas dois arquivos. O primeiro é o arquivo de estilo (style sheet). style.cssEle não apenas define a aparência do site, mas as informações contidas nos comentários do cabeçalho também servem como um “cartão de identidade” do tema, incluindo o nome do tema, o autor, a descrição e outros metadados. O segundo elemento é o arquivo do modelo principal (template). index.phpÉ o arquivo de modelo de entrada padrão do WordPress.

Vamos criar primeiro. style.css Arquivo, no qual são escritas as informações de cabeçalho necessárias.

Leitura recomendada Desenvolvimento de Temas para WordPress: Um Guia Completo para Criar Temas Personalizados do Zero。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是我开发的第一个 WordPress 主题，用于学习和实践。
Version: 1.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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

Em seguida, crie o mais básico… index.php O arquivo pode ser muito simples e ser usado apenas para testar se o tema foi reconhecido corretamente.

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 
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Olá, mundo! Este é o meu primeiro tópico.</h1>
    <?php wp_footer(); ?>
</body>
</html>

Após concluir a criação desses dois arquivos, faça login no seu painel de controle do WordPress e vá para a página “Aparência” → “Temas”. Lá, você deverá ver o tema “My First Theme” que acabamos de criar. Ative-o e, em seguida, acesse a página inicial do seu site para ver a saída mais simples possível. Isso indica que o framework do seu tema foi configurado com sucesso.

Compreender o arquivo de modelo principal e sua estrutura hierárquica

O WordPress utiliza uma hierarquia de templates (Template Hierarchy) para determinar qual arquivo de template deve ser usado para renderizar a página solicitada pelo usuário. Compreender essas regras é fundamental para o desenvolvimento de temas. Em resumo, quando um usuário acessa uma página específica, o WordPress procura pelo arquivo de template correspondente seguindo uma ordem de prioridade definida. O nível mais básico dessa hierarquia… index.phpÉ a opção de recuo final para todas as páginas.

Por exemplo, quando se acessa o conteúdo de um único artigo do blog, o WordPress procura primeiro… single-post.phpSe não existir, então procure. single.phpSó será usado se ainda não estiver disponível. index.phpPara a página que exibe a lista de artigos, ele procura sequencialmente… home.php、front-page.php、index.php。

Para criar um tema de blogue completo em termos de funcionalidades, precisamos criar pelo menos os seguintes arquivos de modelo-chave:header.php(Cabeça da página do site)footer.php(Footer do site)sidebar.php(Lateral bar, opcional)index.php(Índice do Conteúdo Principal)single.php(Um único artigo)page.php(Single page) E style.css(Style sheet).

Leitura recomendada Como desenvolver um tema personalizado para o WordPress do zero?。

Através de get_header()、get_footer() e get_sidebar() Com essas funções de template, podemos modularizar o código genérico e reutilizá-lo. O arquivo de template principal é, por exemplo… index.php A estrutura se tornará muito clara devido a isso.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

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

Essa abordagem modular não só torna o código mais fácil de manter, como também permite que você crie cabeçalhos e rodapés específicos para diferentes tipos de páginas de forma prática.

Desenvolvimento prático: Criando um ciclo principal e chamando o conteúdo do artigo

O núcleo de qualquer tema de blog é o “The Loop” (O Ciclo). Trata-se de uma estrutura de código PHP utilizada pelo WordPress para extrair o conteúdo dos artigos do banco de dados e exibi-lo na página. Dentro desse ciclo, é possível utilizar uma série de etiquetas de modelo (Template Tags) para exibir informações como o título do artigo, o conteúdo, o autor, a data, entre outras.

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

Vamos construir o mais básico de tudo.index.phpO arquivo exibe a lista de artigos no ciclo principal.

<div class="content-area">
    <main class="site-main">
        
            <header class="page-header">
                <h1 class="page-title">Artigo mais recente</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/pt/</?php the_permalink(); ?>">
                            \n
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Publicado em:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Desculpe, não foi encontrado nenhum artigo.</p>
        
    </main>
    <?php get_sidebar(); ?>
</div>

\n

No código acima, usamos… have_posts() e the_post() Vamos construir um ciclo usando as tags de template. the_title()、the_permalink()、the_excerpt() “等” é usado para exibir o conteúdo correspondente.post_class() A função gera automaticamente uma série de classes CSS muito úteis para o container do artigo, o que facilita o nosso trabalho de design de estilo.

Para um único artigo, precisamos criar… single.phpSua estrutura é semelhante à da página de índice, mas geralmente apenas exibe um único artigo em ciclo e mostra todo o seu conteúdo.the_content())。

Leitura recomendada Guia de Iniciação para o Desenvolvimento de Temas WordPress: Construindo Temas Personalizados do Zero。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

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

Neste ponto, foi introduzida uma função mais poderosa. get_template_part()Ele é usado para carregar outro arquivo de fragmento de template localizado no diretório do tema. Por exemplo,get_template_part( 'template-parts/content', 'single' ); Será carregado com prioridade. template-parts/content-single.php O arquivo será carregado se não existir. template-parts/content.phpIsso melhora ainda mais a organização e a reutilizabilidade do código.

Melhorias nas funcionalidades temáticas e práticas recomendadas

Após a formatação de um tema básico, podemos torná-lo mais poderoso e robusto adicionando arquivos de funcionalidades específicas para o tema e seguindo as melhores práticas de desenvolvimento. Um dos arquivos mais importantes nesse processo é… functions.php。

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

Subject:functions.phpO arquivo não é obrigatório, mas permite que você adicione funcionalidades ao seu tema, registre novas características e interaja com a API principal do WordPress. Ele funciona como um “plugin” para o seu tema, mas está intimamente ligado a ele. O que você deve fazer aqui é “registrar” essas funcionalidades e “declará-las” (indicar que elas existem no seu tema), em vez de simplesmente exibir o conteúdo diretamente.

Um padrãofunctions.phpDeve conter os seguintes conteúdos:

1. Menu de registro: Use register_nav_menus() Função.
2. Barra lateral de registro: use-a. register_sidebar() Função.
3. Adição do suporte a temas: utilize add_theme_support() Funções para ativar funcionalidades essenciais, como imagens destacadas dos artigos e logotipos personalizados.
4. Carregar estilos e scripts: use wp_enqueue_style() e wp_enqueue_script() Funções, e usá-las corretamente. wp_enqueue_scripts Gancho.

__( '主导航菜单', '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() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 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' );

// 注册一个右侧边栏
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
?&gt;

Siga essas melhores práticas: adicione funcionalidades através de “ganchos” (hooks), organize a carga de recursos de forma correta, e utilize funções de tradução. __() e _e() Isso permite a internacionalização do seu tema, garantindo que ele seja seguro, eficiente e esteja em conformidade com os padrões de desenvolvimento oficiais do WordPress.

resumos

Desde a criação de algo que contém… style.css e index.php Começando pelos diretórios básicos do WordPress, você já completou a maior parte do processo de criação de um tema personalizado para o WordPress. Analisamos em detalhes o sistema de hierarquia de templates, entendendo como o WordPress seleciona automaticamente os arquivos de template corretos para renderizar diferentes páginas. Praticamos a construção do ciclo principal do tema (main loop) e aprendemos a usar várias tags de template para exibir conteúdo dinamicamente. Por fim, functions.php Foram adicionadas funcionalidades mais avançadas e maior padronização ao tema. Embora este seja apenas um ponto de partida, ele abre as portas para que você possa continuar explorando, adicionando mais arquivos de modelo, estilos mais variados e funcionalidades interativas, até criar um site exclusivo que atenda plenamente às suas necessidades ou às dos seus clientes.

Perguntas frequentes Perguntas frequentes

É necessário entender PHP para o desenvolvimento de temas?

Sim, para desenvolver temas para o WordPress de forma avançada, é necessário possuir um conhecimento básico de PHP. Como o WordPress é construído em PHP, todos os arquivos de template, chamadas de funções e a lógica de processamento de dados dependem dessa linguagem. Para iniciantes, é essencial dominar a sintaxe básica de PHP, variáveis, arrays, ciclos, condições e funções.

Como fazer com que o meu tema se adapte a dispositivos móveis?

Tornar um tema com design responsivo é um requisito básico para sites modernos. Você precisa utilizar Consultas de Mídia (Media Queries) em CSS para ajustar o layout e os estilos de acordo com diferentes larguras de tela. Durante o desenvolvimento, sempre deve-se adotar a estratégia de “prioridade para dispositivos móveis”: primeiro, escreva os estilos adequados para telas pequenas e, em seguida, adicione ou altere esses estilos para telas maiores através das Consultas de Mídia.

Qual é a melhor maneira de desenvolver e testar temas?

É fortemente recomendado que o desenvolvimento de temas seja realizado em um ambiente de desenvolvimento local. Utilizando ferramentas como Local by Flywheel, XAMPP, MAMP ou Docker para criar um ambiente de servidor local, você poderá iterar e testar rapidamente sem afetar o site online. Além disso, é aconselhável ativar as funcionalidades relevantes do WordPress para facilitar o processo de desenvolvimento. WP_DEBUG Os padrões são de extrema importância, pois permitem que os erros e avisos do PHP sejam exibidos na tela, ajudando você a identificar e corrigir problemas no código em tempo hábil.

Quais tecnologias front-end eu preciso dominar?

Além do PHP, você também precisa dominar HTML e CSS, que são fundamentais para a construção da estrutura e dos estilos das páginas da web. Para interações mais complexas e efeitos dinâmicos, o conhecimento de JavaScript é igualmente importante. É especialmente importante aprender como inserir e usar arquivos JavaScript de forma segura e correta no WordPress. wp_enqueue_script), bem como aprender a usar a biblioteca JavaScript que vem integrada ao WordPress.

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.