Guia de introdução ao desenvolvimento de temas do WordPress: construa o seu primeiro tema de site do zero.

Fundamentos do desenvolvimento de temas para WordPress e configuração do ambiente de desenvolvimento

Antes de começar a escrever o código, você precisa entender a estrutura básica de um tema para o WordPress. Um tema é, essencialmente, uma pasta que contém uma série de arquivos escritos em PHP, CSS, JavaScript e imagens, os quais juntos definem a aparência e algumas das funcionalidades do site. Essa pasta deve estar localizada no diretório de instalação do WordPress.wp-content/themesEstá no índice. Cada tópico precisa de um arquivo de estilo principal.style.cssE um arquivo de modelo básico.index.phpEstes são os requisitos mínimos para iniciar qualquer projeto de desenvolvimento de temas.

Para desenvolver de forma eficiente, é altamente recomendado criar um ambiente de desenvolvimento local. Isso permite que você teste seus projetos livremente sem afetar o site online. Você pode utilizar pacotes integrados como XAMPP, MAMP, Local by Flywheel ou DevKinsta, que instalam automaticamente Apache/Nginx, PHP e MySQL com apenas um clique. No ambiente local, você também precisará de um editor de código, como VS Code,PhpStorm ou Sublime Text; as funcionalidades de realce de sintaxe e sugestões para PHP, HTML e CSS desses editores aumentarão significativamente a sua eficiência na programação.

Após a conclusão dos preparativos, você precisará…wp-content/themesCrie uma nova pasta no diretório, por exemplo…my-first-themeEm seguida, criaremos o primeiro arquivo necessário.

Leitura recomendada Aprenda a desenvolver temas para o WordPress do zero: melhores práticas e guia para criar sites personalizados.。

Criar um arquivo de estilos principais

Dentro da pasta de temas, crie um novo arquivo com o nome…style.cssO arquivo é responsável não apenas pelo estilo do site, mas também pelo cabeçalho de comentários (Header) que se encontra no início do mesmo. Esse cabeçalho é a única forma pelo qual o WordPress consegue reconhecer o tema utilizado. O cabeçalho de comentários contém informações metadadas sobre o tema, como o seu nome, o nome do autor e uma descrição.

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).

página de acesso

A seguir está…style.cssExemplo padrão do cabeçalho de um arquivo:

/*
Theme Name: 我的第一个主题
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
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/

Após o cabeçalho do arquivo, você pode começar a adicionar regras de estilo para os elementos do seu site, da mesma forma que escreve CSS normalmente. Campo de Texto (Text Domain)my-first-themeÉ um identificador reservado para a internacionalização do tema e deve ser consistente com o nome da pasta do tema.

Criar um arquivo de modelo central para o tema

Os arquivos de template são a estrutura básica de um tema do WordPress e determinam como diferentes tipos de conteúdo são organizados e exibidos. Esses arquivos são compostos principalmente por código PHP, misturado com etiquetas HTML. O arquivo de template mais básico é…index.phpÉ o modelo alternativo para todas as páginas, utilizado quando não há um modelo mais específico (por exemplo,...).single.phpoupage.phpQuando isso acontece, o WordPress o utiliza.

Criar um arquivo de índice básico

Crie dentro da pasta de temas.index.phpUm dos mais simples, mas ainda assim completamente funcional…index.phpÉ possível incluir o ciclo do WordPress (The Loop), que é o mecanismo central usado para obter e exibir o conteúdo dos artigos do banco de dados.

Leitura recomendada Desenvolvimento de temas WordPress do início ao fim: um guia passo a passo para criar um site personalizado.。

Um minimizadoindex.phpVeja o exemplo a seguir:

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

<main>
        
                <article>
                    <h2><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
                    <div>\n</div>
                </article>
            
            <p>Não há artigos disponíveis.</p>
        
    </main>

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

Este arquivo contém várias partes-chave:wp_head()ewp_footer()Ganchos (hooks) permitem que o núcleo do WordPress, plugins e outros scripts insiram o código necessário antes do início e no final de uma página (como CSS e JS).the_post()A função é utilizada dentro de um ciclo para definir os dados do artigo atual e, em seguida…the_title()ethe_content()Basta usar os tags de template correspondentes para exibir o conteúdo desejado.

Introduzir estilos e scripts

Apenasstyle.cssOs arquivos ainda não são suficientes; você precisa informar ao WordPress quando carregá-los através de uma função. Isso requer a criação de outro arquivo essencial na pasta do tema:functions.phpEste não é um arquivo de modelo, mas sim um “banco de recursos” para o tema, utilizado para aprimorar as funcionalidades do mesmo, gerar menus de registro, barras laterais, e para introduzir tabelas de estilos (style sheets) e scripts de forma segura.

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%

página de acesso

Expansão das funcionalidades do tema e carregamento dos estilos

functions.phpO arquivo é o “quarto de máquinas” do tema; todo o código PHP que não está relacionado à exibição direta das páginas deve ser colocado aqui. Neste arquivo, você deve utilizar…add_action()A função monta o seu código em um determinado ponto de acionamento (hook) do WordPress, garantindo que ele seja executado no momento correto.

Carregar tabelas de estilos de forma segura

A maneira correta não é introduzir os elementos diretamente no arquivo de template usando etiquetas.style.cssEm vez disso, é feito através de…wp_enqueue_style()Funções são utilizadas para organizar a carga dos recursos de forma sequencial. Isso segue o mecanismo de gerenciamento de dependências do WordPress e evita a carga repetida dos mesmos recursos.

Nosfunctions.phpAdicione o seguinte código:

Leitura recomendada Guia popular de 2026 para iniciantes: Como criar o seu primeiro tema para WordPress do zero。

<?php
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 可以在此加载其他样式或脚本，例如：
    // wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Aqui,get_stylesheet_uri()A função irá obter automaticamente o tema relacionado.style.cssO caminho do ficheiro.add_action( 'wp_enqueue_scripts', ... )Assegure-se de que nossa função de carregamento seja chamada quando o WordPress estiver preparando os scripts e estilos front-end.

Ativar a funcionalidade do tema básico

Nosfunctions.phpNesse contexto, também podemos ativar algumas funcionalidades essenciais para os websites modernos. Por exemplo, habilitar o suporte a imagens destacadas (miniaturas de artigos) para os textos e páginas, bem como adicionar locais personalizados para os menus do site.

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.

página de acesso

// 启用文章特色图像
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-first-theme' ),
) );

// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );

add_theme_support()As funções são utilizadas para declarar as várias funcionalidades suportadas por um determinado tema.register_nav_menus()Isso define os locais onde os menus podem ser alocados no painel de administração do WordPress, na seção “Aparência” -> “Menus”.

Criar modelos e temas dedicados para testes.

Com a aperfeiçoamento das funcionalidades básicas do tema, o elemento único…index.phpO arquivo já não consegue atender às necessidades de exibição de todos os tipos de páginas. A estrutura hierárquica dos templates do WordPress permite que você crie arquivos de template específicos para a página inicial, para cada artigo, para páginas em geral e para páginas de arquivos, proporcionando assim um controle mais detalhado sobre a aparência do site.

Criar um modelo de página única para artigos

Quando o usuário clica para ler o texto completo de um artigo, é direcionado para a página exclusiva desse artigo. Crie um nome para essa página…single.phpUm arquivo específico é usado para controlar a exibição desses conteúdos de forma detalhada. Geralmente, esse arquivo contém informações mais completas sobre o artigo, como categoria, etiquetas, autor e comentários.

<main>
    
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <h1>\n</h1>
            <div class="meta">
                Publicado em:  | Autor:
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            
            <div class="content">
                \n
            </div>
            <div class="taxonomies">
                Categoria:
                <br>
                Tags:
            </div>
        </article>
        
</main>

Este modelo introduziu novas funções de modelo:get_header(), get_sidebar()eget_footer()Elas serão carregadas separadamente, cada uma com o nome…header.php、sidebar.phpefooter.phpArquivos de componentes de template. Esse método modulariza a estrutura da página, evitando a repetição de código. Você precisa criar esses arquivos correspondentes e inserir o código neles.index.phpOs códigos correspondentes para a cabeça, o fundo e as barras laterais.

Testar e verificar o seu tema.

Após concluir a criação do modelo principal, faça login no painel administrativo do seu WordPress e vá para “Aparência” -> “Temas”. Você deve ver “Meu Primeiro Tema” na lista de temas. Ative-o, e então acesse a página inicial do site e a página de um artigo individual para verificar se todos os elementos (título, conteúdo, menu, rodapé) estão sendo exibidos conforme esperado.

Use as ferramentas de desenvolvimento do navegador para verificar se a estrutura HTML está correta e se o CSS está sendo aplicado corretamente. Tente criar alguns artigos de teste que contenham imagens destacadas, categorias e tags, e assegure-se de que todos esses elementos sejam chamados e exibidos corretamente no modelo. Esta é a melhor maneira de encontrar e corrigir problemas potenciais.

resumos

Parabéns por concluir a construção básica do seu primeiro tema para o WordPress. Com este guia, você aprendeu como criar a pasta do tema do zero e escrever os arquivos necessários para a sua funcionalidade.style.csseindex.phpArquivos, para serem utilizados.functions.phpO processo completo que inclui o aprimoramento de funcionalidades, o carregamento de recursos, a criação de arquivos de modelos específicos e o desenvolvimento modular é apenas o ponto de partida no mundo do desenvolvimento de temas. Em seguida, você pode aprofundar sua pesquisa e conhecer mais sobre os vários tipos de arquivos de modelos disponíveis.page.php、archive.phpVocê também pode explorar recursos avançados como áreas de widgets, tipos de artigos personalizados, entre outros, e continuamente aprimorar a estrutura e o design do seu código.

Perguntas frequentes Perguntas frequentes

###: Por que o meu tema não é exibido no backend?
Isso geralmente acontece devido a...style.cssO problema é devido a um formato incorreto ou à falta da cabeça das notas de tema no arquivo. Verifique se o arquivo está localizado no diretório raiz da pasta de temas e se as informações da cabeça da nota estão completas e em formato correto. Outra possibilidade é um problema com as permissões do arquivo; confira se o WordPress tem permissão para ler a pasta de temas.

O arquivo functions.php é necessário?

Tecnicamente falando, um sistema que possui apenas…style.csseindex.phpO tema também funcionará. Mas…functions.phpÉ essencial para implementar qualquer funcionalidade que vá além da simples saída em HTML básico (como menus de registro, adição de barras laterais, carregamento seguro de scripts e estilos). É o método padrão para expandir e personalizar as funcionalidades de um tema, portanto, é indispensável para qualquer tema prático.

Como adicionar uma barra lateral ao meu tema?

Primeiramente, emfunctions.phpUse isto no chinês (simplificado)register_sidebar()A função registra uma ou mais áreas para ferramentas adicionais (barras laterais). Em seguida, no arquivo de template onde você deseja exibir a barra lateral…index.phpousingle.phpNeste artigo, usamosdynamic_sidebar()Uma função é criada para chamá-lo. Por fim, o usuário pode arrastar e soltar os widgets para essa área na página “Aparência” -> “Widgets” do painel administrativo do WordPress.

Quais são as considerações de segurança ao desenvolver temas?

Nunca confie diretamente em dados inseridos pelo usuário ou provenientes do banco de dados. Ao exibir qualquer conteúdo dinâmico na página, use sempre as funções de escape fornecidas pelo WordPress.esc_html()、esc_url()ewp_kses_post()Ao introduzir funcionalidades personalizadas ou formulários no tema, é necessário seguir os mecanismos de verificação de nonce e permissões do WordPress.wp_enqueue_style()ewp_enqueue_script()É melhor carregar os recursos dinamicamente, em vez de codificá-los de forma fixa ou usar etiquetas.