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

Aprenda a desenvolver temas do WordPress do zero: um guia essencial para criar um site personalizado.

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

Conceitos centrais no desenvolvimento de temas para WordPress

Antes de aprofundarmos no código, é essencial entender os elementos básicos que compõem um tema do WordPress. Um tema não é apenas um conjunto de arquivos PHP e CSS; trata-se de um aplicativo que segue uma estrutura específica e interage de forma estreita com o núcleo do WordPress. O elemento central de um tema é o sistema de camadas de templates (templates hierarchy), que determina como o WordPress seleciona e renderiza os arquivos de template correspondentes de acordo com o tipo da página que está sendo acessada (como a página inicial, a página de um artigo, uma página de categoria, etc.).

O tema mais básico deve conter dois arquivos:style.csseindex.phpDentre eles,style.cssNão é apenas um arquivo de estilo (stylesheet), mas também o “cartão de identidade” de um tema. O bloco de comentários no início do arquivo contém informações metadados sobre o tema, como o nome, o autor, a descrição e a versão.index.phpÉ o arquivo de modelo padrão; quando nenhum outro arquivo de modelo mais específico estiver disponível, o WordPress recorrerá a ele.

O tema organiza o seu conteúdo através de uma série de arquivos de modelo padronizados.single.phpUsado para exibir um único artigo.page.phpUsado para exibir páginas independentes.archive.phpUsado para exibir a lista de arquivos de artigos. O segredo do desenvolvimento reside em entender e utilizar as muitas funções internas fornecidas pelo WordPress.the_title()、the_content()、wp_head()ewp_footer()Essas funções extraem dados do banco de dados e os exibem de forma segura na página, servindo como uma ponte que liga a aparência do tema ao conteúdo do site.

Leitura recomendada Como escolher e personalizar um tema WordPress adequado para você?。

Construa o seu primeiro tópico: Estrutura Básica de Arquivos

Vamos começar criando um tema minimalista chamado “MyFirstTheme” para nos familiarizarmos com o processo de desenvolvimento. Primeiro, no diretório de instalação do WordPress…wp-content/themes/Crie uma nova pasta e nomeie-a…myfirsttheme。

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

Criar um arquivo de estilo (style sheet).

Primeiro, crie o arquivo de cabeçalho com as informações do tópico.style.cssEste arquivo define os metadados do tema.

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Text DomainUtilizado para a internacionalização, preparando o terreno para futuras funcionalidades de tradução. Após isso, você pode começar a escrever os estilos CSS do site.

Criar o arquivo de modelo principal.

Em seguida, crie o básico.index.phpArquivo. Este é o ponto de entrada para todo o tópico.

<!DOCTYPE html>
<html no numeric noise key 1013>
<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 1010>
    <header>
        <h1><a href="/pt/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

<main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2>\n</h2>
                <div>\n</div>
            </article>
        
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Este código constrói uma estrutura completa de página em HTML5.wp_head()ewp_footer()Os “ganchos” (hooks) permitem que plugins e temas insiram código (como CSS e JS) no início e no final da página.body_class()A função exibe uma série de nomes de classes CSS, o que facilita o desenvolvimento de estilos condicionais.the_post()A função define um valor global durante a execução do ciclo.$postVariáveis, para facilitar o uso.the_title()ethe_content()Consegue exibir corretamente os dados do artigo atual.

Leitura recomendada Criar um site profissional: O guia definitivo para a escolha e personalização de temas WordPress。

Introduzir o arquivo de funcionalidades

Embora um só…style.csseindex.phpO tema já está funcional, mas um tema completo geralmente inclui…functions.phpEste arquivo não é um arquivo de modelo, mas um “plugin funcional” para um tema, usado para conectar funções aos vários ganchos de ação (action hooks) e ganchos de filtro (filter hooks) do WordPress.

Criarfunctions.phpArquivo usado para adicionar funcionalidades de suporte a temas, bem como para organizar a sequência de introdução de tabelas de estilos e scripts.

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

Através deadd_theme_support()Nós ativamos as funcionalidades mais comuns em temas modernos do WordPress.wp_enqueue_style()É o método padrão para introduzir arquivos de estilo (style sheets), garantindo o gerenciamento de dependências e a prevenção de carregamentos repetidos.

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

Desenvolvimento Avançado: Componentes de Modelos e Controle de Ciclos

Quando as funcionalidades básicas do tema estiverem aprimoradas, para melhorar a manutenção e a reutilização do código, será necessário aprender sobre componentes de template e métodos mais avançados de controle de loops.

Utilizar componentes de template para dividir o código

Vamosindex.phpÉ uma prática padrão separar as partes comuns, como o cabeçalho, o rodapé e as barras laterais, em arquivos de componentes de modelo independentes. Criar esses arquivos facilita a reutilização e a manutenção do design em diferentes páginas ou projetos.header.php、footer.phpesidebar.php。

Vamosindex.php\nChina<body>Mova todo o código que está antes da tag para…header.php。</body>e</html>Todo o código que está antes das etiquetas (incluindo o conteúdo do rodapé)…wp_footer()) Mover parafooter.phpE então,index.phpUse isto no chinês (simplificado)get_header()eget_footer()Funções são usadas para introduzi-las.

Leitura recomendada Do desenvolvimento à implantação: como construir e otimizar um tema WordPress de nível profissional.。

Modificadoindex.phpO corpo do texto é o seguinte:

<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2>\n</h2>
            <div>\n</div>
        </article>
    
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    
</main>

Criar um modelo de página personalizado

O WordPress permite que você crie modelos personalizados para páginas específicas. Por exemplo, você pode criar um modelo de página com tamanho total da tela. Crie um novo arquivo PHP, como…template-fullwidth.phpAdicione a seguinte nota com o nome do modelo no início do arquivo:

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 
<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1>\n</h1>
            <div class="entry-content">
                \n
            </div>
        </article>
    <?php endwhile; ?>
</main>
\n

Ao criar ou editar uma página, é possível selecionar o “Modelo de Página de Largura Total” no menu suspenso “Modelo”, localizado nas “Propriedades da Página”. Isso demonstra a flexibilidade do sistema de modelos.

Controlar o ciclo principal e as consultas personalizadas

Nosarchive.phpOu, na página de categorias, você pode precisar modificar o comportamento do ciclo principal. Use isso.WP_QueryAs classes podem criar consultas personalizadas.

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

Você deve certamente usar isso após o término do ciclo de consulta personalizada.wp_reset_postdata()Isso é para garantir que as variáveis globais voltem ao estado em que estavam no ciclo principal, evitando erros em funções subsequentes.

Otimização de Tópicos e Melhores Práticas

Após a conclusão do desenvolvimento, garantir a robustez, a segurança e o desempenho do tema é a última etapa antes da sua publicação.

Assegurar a segurança e a internacionalização.

Todo o conteúdo gerado dinamicamente deve ser escapado. Use as funções de escape fornecidas pelo WordPress.esc_html()、esc_attr()、esc_url()Para a tradução, use…__()Para realizar a tradução de uma string, use o seguinte método:_e()Anteriormente, nós…functions.phpO campo de texto já foi configurado.myfirsttheme。

// 正确示例
echo '<a href="/pt/' . esc_url($user_profile_link) . '/">'. esc_html($user_name) '.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

Adicionar a área de ferramentas adicionais

A área de ferramentas adicionais (Sidebar) é uma funcionalidade clássica do WordPress.functions.phpRegistre uma área para ferramentas de barra lateral.

function myfirsttheme_widgets_init() {
    register_sidebar(array(
        'name' =&gt; __('主侧边栏', 'myfirsttheme'),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __('在此添加小工具。', 'myfirsttheme'),
        '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', 'myfirsttheme_widgets_init');

Em seguida, nosidebar.phpNo entanto, na China, é usadodynamic_sidebar()Uma função para chamá-lo.

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Considerações para a otimização de desempenho

Otimizar a velocidade de carregamento dos temas é de extrema importância. Certifique-se de que os arquivos CSS e JavaScript sejam corretamente combinados e compactados (isso geralmente é feito durante a fase de desenvolvimento com ferramentas de construção como Webpack ou Gulp).add_image_size()Adicione tamanhos de imagens apropriados para evitar o carregamento de imagens originais muito grandes no frontend. Quanto aos scripts, use-os apenas quando necessário.wp_dequeue_script()Remova o código e assegure-se de que o script seja carregado no rodapé da página (ao inseri-lo de forma apropriada).wp_enqueue_script()O último parâmetro deve ser definido como…true）。

resumos

O desenvolvimento de temas para o WordPress é um processo sistemático que começa com a compreensão de conceitos fundamentais (como a estrutura das templates e as funções de hook), passa pela construção da estrutura básica dos arquivos, continua com o uso de componentes de templates e consultas personalizadas para um design modular, e finaliza com a melhoria da segurança e do desempenho do tema. Ao seguir os padrões de codificação oficiais do WordPress e as melhores práticas, os desenvolvedores podem criar temas que sejam atraentes visualmente, eficientes, seguros e fáceis de manter. O segredo está na prática contínua, começando com projetos simples…index.phpestyle.cssComece, tentando gradualmente arquivos de modelo mais complexos…functions.phpCom as funcionalidades disponíveis, no final você será capaz de criar um site personalizado que atenda perfeitamente às suas necessidades.

Perguntas frequentes Perguntas frequentes

É possível aprender o desenvolvimento de temas para o WordPress mesmo sem ter conhecimentos básicos de programação?

Sim, mas é necessário investir tempo no aprendizado dos conceitos básicos. É recomendado dominar primeiro HTML e CSS, que são as bases para a criação da aparência das páginas da web. Em seguida, aprenda gradualmente a sintaxe do PHP, já que o núcleo do WordPress é escrito em PHP. Por fim, desenvolva seus projetos utilizando as funções e ganchos (hooks) específicos do WordPress. Começar modificando temas existentes é uma ótima maneira de aprender.

Qual é a diferença entre o `functions.php` do tema e os plugins?

functions.phpFaz parte do tema, e sua função está intimamente relacionada à aparência e ao comportamento do mesmo. Quando o usuário alterna o tema,functions.phpAs funcionalidades contidas no tema podem se tornar inativas quando este é alterado. No entanto, as funcionalidades fornecidas por plugins são geralmente independentes do tema e têm como objetivo adicionar características específicas ao site (como formulários de contato, otimização para mecanismos de busca, etc.). Portanto, essas funcionalidades permanecem ativas mesmo após a troca de tema. Se uma funcionalidade não está relacionada ao design visual do tema, é mais apropriado que ela seja implementada como um plugin.

Por que o meu modelo de página personalizado não está sendo exibido na lista suspensa?

Por favor, verifique se o seu arquivo de template personalizado está localizado no diretório raiz do tema e se o formato do bloco de comentários com o nome do template no início do arquivo está correto. O bloco de comentários deve ser um comentário PHP, e a linha “Template Name:” deve estar exatamente como indicado. Além disso, assegure-se de que o arquivo existe..phpO sufixo foi adicionado, e o cache foi atualizado através do painel administrativo do WordPress.

Como fazer com que o meu tema suporte subtemas (Child Themes)?

Para que o seu tema possa ser personalizado de forma segura através de subtemas, algumas convenções devem ser seguidas durante o desenvolvimento:get_template_directory_uri()Para citar recursos do tópico pai, eles são utilizados no tópico filho.get_stylesheet_directory_uri()Embrace a função copiável dentro de…if (!function_exists(‘…’))Em instruções condicionais, é necessário esclarecer no documento que o tópico suporta subtópicos, além de fornecer informações básicas sobre esses subtópicos.style.cssExemplo.

Quais são as normas de codificação que devem ser seguidas ao desenvolver temas?

É fortemente recomendado seguir as instruções/diretrizes fornecidas.Padrão oficial de codificação PHP do WordPressePadrões de codificação CSSIsso inclui o uso de aspas simples para definir strings (a menos que seja necessário analisar variáveis), o uso de espaços para indentação, o estilo de formatação de linhas com parênteses chaves, e o uso de letras minúsculas e underscores para nomear funções e variáveis. Seguir essas normas torna o seu código mais fácil de ser compreendido e aceito por outros desenvolvedores, especialmente quando você considera enviar o seu trabalho para um diretório oficial.

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.