Antes de começar a escrever o código, você precisa de um ambiente de desenvolvimento local. Isso geralmente inclui um servidor local (como XAMPP, MAMP ou Local), bem como um editor de código (como VS Code ou PhpStorm). Certifique-se de que o PHP (recomendamos a versão 7.4 ou superior) e o MySQL estejam instalados no seu ambiente.
Um tema padrão do WordPress é uma pasta que contém um conjunto específico de arquivos. Primeiro, na sua instalação local do WordPress…wp-content/themesCrie uma nova pasta no diretório, por exemplo, nomeie-a “nova_pasta”.my-first-theme。
Em seguida, crie dois arquivos os mais básicos e essenciais: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 cabeçalho do arquivo é usado para informar ao WordPress sobre o seu tema.
Leitura recomendada Guia de introdução ao desenvolvimento de temas do WordPress: crie um site personalizado do zero.。
Nosstyle.cssNo arquivo, você precisa adicionar as seguintes informações de cabeçalho no formato especificado:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Essas informações serão exibidas na página “Aparência” -> “Temas” do painel administrativo do WordPress.index.phpO arquivo é o modelo padrão do tema e deve existir, mesmo que esteja temporariamente vazio, para que o WordPress consiga reconhecer que se trata de um tema válido.
Criar arquivos de modelos básicos
Após ter os arquivos de base, o seu tema ainda não consegue exibir nenhum conteúdo. O WordPress utiliza um sistema de hierarquia de templates para determinar qual arquivo de template deve ser carregado para diferentes tipos de páginas. A seguir, criaremos alguns arquivos de template essenciais.
Criar modelos de cabeça (header) e de rodapé (footer).
Para facilitar a reutilização do código e a manutenção da consistência, costumamos separar a parte superior (Header) e a parte inferior (Footer) de uma página da web em arquivos independentes. Primeiro, criamos…header.phpO arquivo contém a parte de cabeça (header) do documento HTML, além de outros elementos necessários para abrir o documento corretamente.<body>Tags, bem como a área pública no topo do site (como o Logotipo e o menu de navegação).
O mais simples…header.phpOs exemplos podem conter o seguinte conteúdo:
Leitura recomendada Criar um site profissional: o guia definitivo para o desenvolvimento e personalização de temas do WordPress em todos os aspetos.。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<header>
<h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>Preste atenção no que está dentro disso.wp_head()Funções: elas devem ser chamadas para que o núcleo do WordPress, os plugins e os próprios temas possam inserir o código necessário (como CSS e JS) no cabeçalho da página.
Em seguida, criefooter.phpArquivo, usado para fechar.<body>e<html>As etiquetas devem ser incluídas, assim como o conteúdo do rodapé.
<footer>
<p>© . Todos os direitos reservados.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Da mesma forma,wp_footer()As funções também são essenciais.
Agora, podemos atualizar.index.phpUsoget_header()eget_footer()Use uma função para introduzir essas duas partes:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Criar um ciclo de artigos e um modelo de conteúdo
No exemplo acima,index.phpNele, vemos o núcleo do WordPress: o “The Loop”. Ele é usado para percorrer todos os artigos da página atual (ou um único artigo). Para dar uma melhor estrutura ao conteúdo dos artigos, geralmente extraímos a lógica de exibição de um único artigo para um arquivo separado.
Criarcontent.phpoutemplate-parts/content.phpArquivo, e então, dentro do ciclo, é processado através…get_template_part()A função a chama.
Leitura recomendada Guia completo para o desenvolvimento de temas do WordPress: um tutorial prático do início ao fim.。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;E então crie.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
\n
</div>
</article>Dessa forma, o título do artigo, o resumo, os metadados e outros elementos são exibidos em um formato padronizado.
Introduzir estilos e scripts
Um tema moderno não pode prescindir de CSS e JavaScript. O WordPress disponibiliza funções padrão para enfileirar (enqueue) arquivos de estilo e scripts de forma segura, em vez de usá-los diretamente nos templates.<link>ou<script>Tags.
Style sheet principal para registro e fila de espera
Embora já tenhamos...style.cssMas, geralmente, nós fazemos isso através de…functions.phpO arquivo deve ser carregado a partir de um local específico. Primeiro, crie uma pasta no diretório raiz do tema (theme root directory).functions.phpDocumentos.
Em seguida, use…wp_enqueue_style()Uma função para carregar os arquivos de estilo (style sheets). Precisamos de…functions.phpCrie uma função em “China” e conecte-a (hook it)…wp_enqueue_scriptsNessa ação.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()A função irá obter automaticamente o tema.style.cssO caminho do ficheiro.
Adicionar o script para o menu de navegação responsivo
Para adicionar funcionalidades interativas, como menus responsivos em dispositivos móveis, precisamos introduzir o JavaScript. Suponhamos que tenhamos um script simples para alternar a exibição/ocultação do menu.
Primeiramente, crie um…js/navigation.jsArquivo. E então,functions.phpNa mesma função, use…wp_enqueue_script()Vamos carregá-lo.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}O último parâmetrotrueIndica que o script deve ser colocado no final da página (em…)</body>(Isso geralmente ajuda no desempenho de carregamento da página, antes dos marcadores.)
Implementar as funcionalidades principais do tema.
functions.phpÉ o “cérebro” do tema, responsável por adicionar várias funcionalidades e fornecer suporte. Além de carregar recursos, também precisamos declarar aqui as funcionalidades que o tema suporta.
Adicionar suporte à funcionalidade de temas.
O WordPress oferece uma série de “funcionalidades de temas” (theme features), e você precisa declarar explicitamente que as suporta para poder usá-las. As funcionalidades mais básicas incluem miniaturas de artigos (imagens de destaque), menus personalizados e suporte a marcas HTML5.
Nosfunctions.phpAdicione o seguinte código:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
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' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeÉ um gancho de ação que é executado durante a inicialização do tema e representa o local padrão para configurar as funcionalidades do mesmo.
Menu de navegação para registro
A maioria dos websites precisa de um menu de navegação. O sistema de menus do WordPress permite que os usuários personalizem os itens do menu em “Aparência” -> “Menus” no painel de administração. Você precisa primeiro registrar os locais dos menus para o seu tema.
No que aconteceu há pouco…my_first_theme_setupNa função, continue adicionando:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Após o registro, você poderá usar os arquivos de modelo (como…)header.phpO conceito de "design thinking" é usado no contexto dewp_nav_menu()A função foi utilizada para exibir este menu:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Criar uma barra lateral e uma área de ferramentas (widgets)
Os Widgets são outra funcionalidade poderosa do WordPress. Para usá-los, você precisa primeiro registrar uma barra lateral (a área onde os Widgets serão exibidos).
Nosfunctions.phpCrie uma nova função e conecte-a (ou “hook” ela) ao sistema existente.widgets_initEm termos de ações:
A função my_first_theme_widgets_init() registra a barra lateral com os seguintes parâmetros:
'name' => __( 'Barra lateral principal', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Adicione gadgets aqui.', 'my-first-theme' ),
'before_widget' => ' A função my_first_theme_widgets_init() registra a barra lateral com os seguintes parâmetros:
'name' => __( 'Barra lateral principal', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Adicione gadgets aqui.', 'my-first-theme' ),
'before_widget' => ' <'<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Após o registro, você poderá visualizar a área “Barra Lateral Principal” em “Aparência” -> “Widgets” no painel de administração, e arrastar widgets para lá. Para exibi-lo no tema, será necessário modificá-lo no modelo (por exemplo, no arquivo de template correspondente).sidebar.phpO método 'get' é chamado no código JavaScript.dynamic_sidebar( 'sidebar-1' )Função.
resumos
Através deste guia, completamos um processo de desenvolvimento de um tema para WordPress que é minimalista, mas completamente funcional. Começamos com a configuração do ambiente e a criação dos arquivos básicos, construímos gradualmente a estrutura dos templates, separamos as partes superior e inferior do tema, e implementamos o ciclo de exibição dos artigos. Em seguida, aprendemos como adicionar estilos e scripts ao tema de maneira padrão, garantindo sua compatibilidade e desempenho. Por fim,functions.phpNeste processo, ativamos as funcionalidades principais do tema, como as imagens de destaque, o menu de navegação e a área de ferramentas, o que confere ao tema uma grande capacidade de personalização.
Este é apenas um ponto de partida. Com base nisso, você pode continuar criando arquivos de modelos mais profissionais (como…)single.php、page.php、archive.phpExplore APIs mais avançadas do WordPress, como os tipos de artigos personalizados, as categorias e a API do Customizer, para criar temas de sites exclusivos com funcionalidades avançadas e design único.
Perguntas frequentes Perguntas frequentes
Quais tecnologias são essenciais para desenvolver temas para o WordPress?
Para desenvolver temas para o WordPress, é necessário dominar algumas tecnologias fundamentais. A primeira delas é o PHP, pois o próprio WordPress é escrito em PHP, e todos os arquivos de template e a lógica das funcionalidades dependem dessa linguagem. Você precisa entender a sintaxe básica do PHP, funções, ciclos e instruções condicionais.
Em seguida, temos o HTML e o CSS, que são utilizados para construir a estrutura e o estilo das páginas da web. É muito importante entender os princípios do design responsivo de páginas da web e as tecnologias de layout CSS modernas, como Flexbox e Grid. Por fim, é essencial ter um conhecimento básico do JavaScript para implementar funcionalidades interativas no lado front-end. Conhecer as funções específicas do PHP e o sistema de ganchos (Hooks) do WordPress é fundamental para o desenvolvimento eficiente de temas.
Qual é mais importante, o arquivo style.css ou o arquivo functions.php?
Esses dois arquivos desempenham papéis completamente diferentes, mas igualmente cruciais, no desenvolvimento de temas para o WordPress, e não é possível comparar facilmente qual deles é mais importante.style.cssO arquivo é a “identificação” de um tema, e o bloco de comentários no cabeçalho do arquivo é essencial para que o WordPress reconheça o tema. Sem ele, o tema não será exibido na lista de temas no painel de administração.
No entanto,functions.phpO arquivo é o “centro de funcionalidades” de um tema; quase todo o código responsável por aprimorar as funcionalidades do tema é escrito nele, como o menu de registro, a adição de suporte para temas, o carregamento de estilos de scripts e a definição de funções personalizadas. Sem ele, o tema perderia a maior parte de suas funcionalidades dinâmicas e sua capacidade de expansão. Os dois elementos (o arquivo e as funcionalidades do tema) são complementares e indispensáveis um para o outro.
Por que é necessário usar as funções wp_head() e wp_footer()?
wp_head()ewp_footer()É o gancho (hook) chave para a comunicação entre o núcleo do WordPress, os temas e os plugins.header.phpNão.</head>Chamar antes da tagwp_head()É o método padrão que permite que o próprio WordPress, os plugins que você instalou e outras partes do seu tema insiram o código necessário no cabeçalho da página (como meta tags, links para arquivos de estilo, referências a scripts, dados estruturados em JSON-LD, etc.).
Da mesma forma,footer.phpNão.</body>Chamar antes da tagwp_footer()Essas funções são utilizadas para inserir scripts que precisam ser carregados no final da página (como códigos de análise, JS carregados de forma atrasada) ou outros elementos HTML. A omissão dessas funções pode causar problemas no funcionamento dos plugins, a não exibição da barra de ferramentas de gerenciamento, além de vários problemas de compatibilidade.
Como fazer com que o meu tema esteja em conformidade com os padrões oficiais do WordPress?
Para que o seu tema esteja em conformidade com os padrões oficiais do WordPress e tenha alta qualidade, você precisa seguir o “WordPress Theme Development Manual” e os “Theme Review Requirements”. Isso inclui: utilizar práticas de codificação seguras e aplicar funções de escape em todos os dados dinâmicos gerados.esc_html(), esc_url()Para todas as strings de tradução, use funções de internacionalização (como…)__(), _e()E carrega o campo de texto.
O tema deve ter um design responsivo, garantindo que seja exibido corretamente em todos os dispositivos. O código deve ser claro, comentado e seguir os padrões de codificação do WordPress. Além disso, o tema deve oferecer muitas opções de personalização através do WordPress Customizer e implementar corretamente todas as funcionalidades e ganchos (hooks) essenciais do WordPress. É uma boa prática realizar testes antes de o lançar, utilizando o plugin Theme Check.
O que vem a seguir, o que vem a seguir?
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.
- Por que escolher o WordPress como a plataforma preferida para o site?
- Guia de Introdução Básica ao WordPress: Construa o seu primeiro site profissional do zero
- Solução completa para a criação de websites: um guia passo a passo para a implementação do zero até a lançamento no ar.
- Prefácio: Por que escolher o WordPress para o desenvolvimento?
- Guia Definitivo para Construção de Sites: O processo completo para criar um site profissional do zero
Português do Brasil