Os temas do WordPress são a estrutura central que define a aparência e as funcionalidades de um site. Dominar sua capacidade de desenvolvimento significa que você pode personalizar completamente todos os aspectos do site, livrando-se das limitações dos temas prontos e concretizando ideias de design e necessidades funcionais únicas. Começar entendendo seus conceitos básicos e a estrutura de arquivos é o primeiro passo para trilhar esse caminho.
Cada tema do WordPress é um ficheiro localizado em/wp-content/themes/A pasta dentro do diretório. Um tema funcional mais básico precisa de apenas dois arquivos:style.csseindex.phpDentre eles,style.cssNão é usado apenas para armazenar estilos; os comentários no cabeçalho do arquivo também carregam os metadados do tema, que são a chave para o WordPress reconhecer um tema.
Nosstyle.cssNo cabeçalho do markdown, você precisa usar comentários específicos para definir o tema. Um exemplo típico é o seguinte:
Leitura recomendada Guia completo de desenvolvimento de temas WordPress: tutorial prático do básico ao avançado。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Estas informações aparecerão na lista “Aparência > Temas” do painel do WordPress.index.phpé o arquivo de modelo principal do tema, usado como padrão de fallback quando outros modelos mais específicos não existem. À medida que o desenvolvimento avança, você gradualmente o substituirá ou complementará com arquivos de modelo mais específicos.
Entender a hierarquia de modelos do tema
O WordPress usa um sistema sofisticado de hierarquia de templates para determinar qual arquivo de template deve ser usado para renderizar qualquer solicitação de página específica. Entender essa hierarquia é a base para desenvolver temas com eficiência, pois ela permite saber como nomear os arquivos ao criar páginas específicas, como a página de detalhes de um post ou a página de arquivo de categorias.
Regras de nomenclatura dos principais arquivos de modelo
A hierarquia de templates segue o princípio de “do específico para o geral”. Por exemplo, ao acessar uma postagem de blog com ID 123, o WordPress procurará na seguinte ordem:single-post-123.php、single-post.php、single.phpE, por último,singular.phpSomente se nada disso existir, é que esse método será utilizado.index.php。
Os arquivos de modelo principais comumente usados incluem:
- front-page.php：usado para definir a página inicial do site.
- home.phpPágina de índice dos artigos do blog.
- single.php: Uma postagem individual do blog ou uma postagem individual de um tipo de postagem personalizada.
- page.phpPágina única.
- archive.php：Modelo genérico para vários tipos de páginas de arquivo (categorias, tags, autores etc.).
- category.php: Página de diretório de categoria específica.
- 404.phpPágina de erro 404.
- header.php、footer.php、sidebar.php：Esses geralmente são fragmentos de modelo parciais.
Funções comuns para chamar templates parciais
Para manter o código modular e facilmente mantível, o WordPress fornece várias funções essenciais para carregar arquivos de templates locais. A mais importante delas é…get_header()、get_footer()eget_sidebar()Elas são usadas respectivamente para introduzir…header.php、footer.phpesidebar.php。
Leitura recomendada Conceitos centrais no desenvolvimento de temas para WordPress。
Outra função de extrema importância é…get_template_part()Ele permite que você introduza qualquer fragmento de template de uma maneira mais flexível. Por exemplo, em um ciclo de artigos de blog, você pode querer incluir um template específico para o conteúdo do artigo:
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>Este código irá procurar prioritariamente…template-parts/content-post.php(Assumindo que o tipo do artigo seja…)postSe não for encontrado, então será carregado.template-parts/content.php。
Funcionalidades baseadas em funções principais e hooks
O poderoso conjunto de recursos do WordPress vem de sua vasta biblioteca de funções e de seu sistema de “ganchos” orientado a eventos. No desenvolvimento de temas, o uso proficiente das funções centrais e dos ganchos é fundamental para implementar funcionalidades complexas e otimizar o desempenho e a segurança.
Funções básicas para obter e exibir conteúdo
Nos arquivos de modelo, você usará com frequência uma série de funções para obter e exibir conteúdo dinâmico. Por exemplo,the_title()Usado para exibir o título do artigo ou da página atual, ethe_content()Então, a saída será o conteúdo principal após a formatação. Correspondente à função de saída direta está a função que usaget_Funções no início, comoget_the_title(), elas retornam dados para que você possa processá-los posteriormente no código.
O loop de posts do blog é o núcleo dos templates do WordPress, e sua estrutura de código padrão é a seguinte:
<!-- 在这里输出文章内容 -->
<h2>\n</h2>
<div>\n</div>
<?php endwhile; ?>
<!-- 这里可以放置分页导航 -->
<?php else : ?>
<!-- 如果没有找到文章，显示的内容 -->
<p>Não há conteúdo por enquanto.</p>Expandir funcionalidades com hooks
Os hooks são divididos em dois tipos: “ações” e “filtros”. Os hooks de ação permitem que você insira seu próprio código quando determinados eventos ocorrem, por exemplo, emwp_headProduza metatags adicionais no hook. Você pode usaradd_action()Uma função que permite montar (ou vincular) outra função sua própria.
Leitura recomendada Guia de Iniciação para o Desenvolvimento de Temas WordPress: Construa o Seu Primeiro Tema Personalizado do Zero。
Por exemplo, no tópico…functions.phpAdicionar suporte a links de Feed no arquivo:
add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
// 为文章和评论添加Feed链接到head中
add_theme_support( 'automatic-feed-links' );
}Os ganchos de filtro permitem que você modifique os dados. Por exemplo, usandoexcerpt_lengthOs filtros podem alterar o comprimento do resumo do artigo:
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
return 30; // 将摘要长度设置为30个单词
}functions.phpO arquivo é o “centro de funcionalidades” do tema; todas as funções personalizadas, chamadas a hooks e declarações de funcionalidades do tema devem ser colocadas aqui.
A funcionalidade de declaração de tópicos é suportada.
fazer uso deadd_theme_support()A função para declarar quais recursos principais do WordPress o seu tema oferece suporte é uma boa prática de desenvolvimento. Isso não apenas habilita funcionalidades, mas também garante compatibilidade com versões futuras.
As declarações de funcionalidades comuns incluem:
add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持HTML5语义化标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
}Integração de estilos personalizados e arquivos de scripts
Um tema moderno deve gerenciar corretamente seus arquivos de estilo CSS e seus scripts JavaScript, a fim de garantir que sejam carregados conforme necessário, evitar conflitos e seguir as melhores práticas de otimização de desempenho do front-end.
Registro seguro e carregamento de recursos
Não use nunca diretamente os arquivos de template.<link>ou<script>tags para codificar recursos de forma fixa. A maneira correta é usarwp_enqueue_scriptsAction hooks, em conjunto com…wp_enqueue_style()ewp_enqueue_script()Função.
Nosfunctions.phpNesse contexto, você precisa definir uma função para gerenciar a fila de espera dos recursos.
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
// 加载主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google字体
wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
// 加载主JavaScript文件，并依赖jQuery，在页脚加载
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
// 如果需要传递PHP变量到JS，可以使用wp_localize_script
wp_localize_script( 'mytheme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'home_url' => home_url(),
));
}Essa forma garante que as dependências estejam corretas, evita o carregamento duplicado e permite que plugins e outros temas sejam gerenciados por meio de suas declarações de dependência.
Adicionar suporte de estilos ao editor Gutenberg
Com a popularização do editor de blocos, tornou-se fundamental adicionar suporte a estilos do front-end no editor do back-end para proporcionar uma experiência de edição “o que você vê é o que obtém”. Você pode usaradd_theme_support( ‘editor-styles’ )E coloque na fila uma folha de estilo do editor.
add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor-style.css' );
}resumos
O desenvolvimento de temas para WordPress é um processo que começa com a compreensão da estrutura básica de arquivos e avança gradualmente para a hierarquia de templates, funções principais, sistema de hooks e gerenciamento de recursos. O segredo está na prática: começar com um tema mais simples possívelstyle.csseindex.phpComece e crieheader.phpefooter.phpRealize a divisão modular. Em seguida, utilize a hierarquia de templates para criar templates específicos para diferentes tipos de páginas, comosingle.phpoupage.php. Emfunctions.phppor meio de hooks eadd_theme_supportAdicione recursos com segurança e sempre por meio dewp_enqueue_scriptspara gerenciar estilos e scripts. Seguindo esses princípios e etapas fundamentais, você será capaz de criar temas WordPress profissionais, eficientes e de fácil manutenção.
Perguntas frequentes Perguntas frequentes
Quais arquivos são necessários no mínimo para criar um tema do WordPress?
Tecnicamente, um tema reconhecido e ativado pelo WordPress precisa de, no mínimo, dois arquivos:style.csseindex.php。style.cssAs notas de cabeça dos arquivos devem conter as informações de metadados do tema corretas, por exemplo…Theme Nameeindex.phpComo o arquivo de template mais básico, é usado para renderizar todas as páginas.
Como criar um modelo de página personalizado para o meu tema?
Criar modelos de página personalizados é muito simples. Você só precisa, em qualquer arquivo de modelo (geralmente épage.phpadicione um bloco específico de comentários PHP no topo de ). Por exemplo, para criar um modelo de página de “largura total”, você pode criar um novo arquivo chamadotemplate-full-width.phpO arquivo, e escreva no início do arquivo:/* Template Name: 全宽页面 */Após salvar as alterações, ao editar a página no painel administrativo do WordPress, você poderá ver e selecionar a opção “Página de Largura Total” no menu suspenso “Modelo” (Template), dentro das “Propriedades da Página” (Page Properties).
Por que usar add_action no functions.php para adicionar funcionalidades?
Diretamente emfunctions.phpCodificar funções em um determinado contexto pode levar ao seu execução em um momento inapropriado, o que pode causar erros ou impedir que as funções funcionem corretamente.add_action()ouadd_filter()Montar sua função em um hook específico do WordPress pode garantir que o código seja executado no momento correto e seguro. Por exemplo,after_setup_themeGancho para inicialização do temawp_enqueue_scriptsHooks são usados para carregar recursos. Esta é a melhor prática da arquitetura de plugins do WordPress, podendo melhorar a modularidade e a compatibilidade do código.
Como fazer com que o meu tema suporte a tradução em vários idiomas?
Para que o tema ofereça suporte a vários idiomas, é necessário concluir algumas etapas. Primeiro, emstyle.cssUsado no cabeçalho e em todos os arquivos de modelo__()、_e()use funções de tradução, entre outras, para envolver todas as strings de texto que precisam ser traduzidas. Em seguida, emfunctions.phpUse isto no chinês (simplificado)load_theme_textdomain()função para carregar os arquivos de tradução. Por fim, use ferramentas como o Poedit para extrair as strings do código-fonte e gerar.potArquivos e peça ao tradutor para criar o idioma correspondente, comozh_CN.poe.moarquivo de tradução de ). Coloque o arquivo de tradução no diretório do tema de/languages/Basta colocá-lo na pasta.
Quais licenças e normas devem ser observadas ao desenvolver temas comerciais?
Desenvolver temas comerciais para distribuição ou venda exige o cumprimento rigoroso dos requisitos de licenciamento do WordPress. O ponto mais importante é que seu tema deve adotar a mesma licença do núcleo do WordPress, GPL v2 ou superior. Isso significa que outras pessoas têm o direito de usar, modificar e redistribuir o código do seu tema. Em segundo lugar, devem ser seguidos os padrões oficiais de codificação e as diretrizes de revisão de temas do WordPress, para garantir a qualidade do código, a segurança e a compatibilidade. Além disso, é extremamente importante declarar corretamente a licença de todos os recursos de terceiros utilizados (como fontes e bibliotecas de ícones) e garantir que eles também sejam compatíveis com a GPL ou que tenham obtido autorização comercial.
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.
- Desenvolvimento de Temas para WordPress: Do Início à Expertise: Um Guia Completo para Construir Sites Personalizados
- Desenvolvimento de temas para WordPress do zero: Criando uma interface de site única e diferenciada
- Guia de Desenvolvimento de Temas para WordPress: Construindo Sites Personalizados do Zero
- Guia Completo para o Desenvolvimento de Temas WordPress: Um Tutorial Prático do Zero à Proficiência
- Guia Completo para o Desenvolvimento de Temas WordPress: Construindo Modelos de Sites de Nível Profissional do Zero
Português do Brasil