Os temas do WordPress são a essência da aparência e das funcionalidades de um site. Através do desenvolvimento personalizado, os desenvolvedores podem ter total controle sobre a lógica de design, o desempenho e a expansão de funcionalidades do site, livrando-se das restrições dos temas de terceiros. Este guia irá guiá-lo desde a estrutura de diretórios mais básica, passando pela construção gradual de um tema personalizado do WordPress completo em funcionalidades e em conformidade com os padrões atuais de desenvolvimento. Você aprenderá os conceitos fundamentais da arquitetura de um tema, a lógica de organização dos arquivos de modelo e como injetar conteúdo dinâmico utilizando funções PHP e ganchos (hooks).
Fundamentos do desenvolvimento de temas e preparação do ambiente
Antes de começar a escrever o código, é essencial criar um ambiente de desenvolvimento adequado e entender a estrutura básica do tema em questão. Isso garantirá que o seu trabalho de desenvolvimento seja eficiente e esteja em conformidade com as normas da ecologia do WordPress.
Criar um ambiente de desenvolvimento local
Recomendamos o uso de um ambiente de desenvolvimento local, como Local, XAMPP ou MAMP. Esses ferramentas permitem instalar PHP, MySQL e Apache/Nginx com apenas um clique. Crie uma nova instalação do WordPress nesse ambiente para usar como plataforma de teste para o seu tema.
Leitura recomendada Guia de desenvolvimento de temas WordPress: do zero à criação de um tema profissional。
Estrutura de diretórios padrão para a compreensão do tema
Um tema simplificado ao extremo, reconhecido pelo WordPress, necessita de apenas dois arquivos:style.css e index.phpNo entanto, um diretório de temas personalizados bem estruturado deve organizar adequadamente todos os tipos de arquivos. A estrutura típica de um diretório de temas é a seguinte:
your-theme/
├── style.css (必需，主题样式表和信息头)
├── index.php (必需，主模板文件)
├── functions.php (主题功能增强文件)
├── header.php (头部模板)
├── footer.php (底部模板)
├── sidebar.php (侧边栏模板)
└── assets/ (静态资源目录)
├── css/
├── js/
└── images/Criar o arquivo do estilo principal (style sheet).
style.css O arquivo não é apenas um arquivo de estilo, mas também o “cartão de identidade” do tema. O bloco de comentários no topo do arquivo contém todas as metadados necessárias para que o WordPress reconheça o tema.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始开发的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Dentre eles,Text Domain Usado para internacionalização; é um identificador que deve ser utilizado em chamadas subsequentes às funções de tradução.
Construir um sistema de arquivos de modelos centrais
O WordPress utiliza um sistema de hierarquia de templates para determinar qual arquivo de template deve ser usado para cada tipo de página. A criação desses arquivos é o trabalho central no desenvolvimento de temas.
Criar um arquivo de modelo básico
Primeiro, crie os modelos de cabeça e pé separados. Arquivos header.php Deve conter o cabeçalho do documento HTML.Na parte inicial de uma região e do corpo de uma página, geralmente se utiliza… wp_head() Funções para permitir que plugins e funcionalidades principais injetem código.
Leitura recomendada Desenvolvimento de temas do WordPress do início ao fim: um guia completo para criar sites personalizados.。
<!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>
<?php wp_body_open(); ?>
<header>
<h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>arquivo footer.php Então, o conteúdo incluirá o rodapé e será exibido da seguinte forma: wp_footer() A função terminou.
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Implementar o arquivo do modelo principal
index.php Como o arquivo de recuo do modelo final, sua principal responsabilidade é incluir as partes de cabeça (header) e pé de página (footer), bem como construir o ciclo principal para exibir a lista de artigos.
<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>Desenvolver modelos de páginas dedicados
De acordo com a estrutura hierárquica dos modelos, você pode criar modelos mais específicos para páginas específicas. Por exemplo, você pode criar… single.php Usado para exibir um único artigo.page.php Usado para exibir páginas independentes.archive.php Usado para exibir arquivos organizados por categoria. O WordPress irá automaticamente priorizar o uso desses modelos mais específicos.
Melhorar as funcionalidades de um tema através de arquivos de funções.
functions.php O arquivo é relacionado ao seu tema “Centro de Controle” e serve para adicionar funcionalidades, registrar menus, suportar imagens especiais, etc., sem a necessidade de modificar os arquivos principais.
Adicionar suporte básico para temas.
Nos functions.php No entanto, na China, é usado add_theme_support() Uma função é usada para declarar as funcionalidades suportadas por um determinado tema. Este é um ponto de partida padrão.
function my_custom_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
// 支持HTML5标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Registre a área de ferramentas no sidebar.
fazer uso de register_sidebar() Uma função é utilizada para definir a área dos widgets, permitindo que os usuários adicionem conteúdo dinamicamente em segundo plano.
Leitura recomendada Introdução ao Desenvolvimento de Temas para WordPress: Construa o Seu Primeiro Tema Personalizado do Zero。
function my_custom_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-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_custom_theme_widgets_init' );Introduzir scripts e estilos de forma segura
Nunca faça links diretos (hard links) para arquivos CSS e JS dentro de templates. Em vez disso, use métodos adequados para incluí-los no código. wp_enqueue_style() e wp_enqueue_script() Função, e montada em wp_enqueue_scripts No gancho.
function my_custom_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );Implementar etiquetas de template e ciclos
As etiquetas de template são uma série de funções PHP fornecidas pelo WordPress, utilizadas para exibir conteúdo dinamicamente nos templates, como títulos de artigos, textos, datas, etc. Elas são geralmente usadas dentro do ciclo principal (main loop).
Compreender e utilizar o ciclo principal
O ciclo principal é o conceito mais central nos modelos do WordPress; ele utiliza variáveis globais. $wp_query É necessário percorrer os artigos que precisam ser exibidos na página atual. A estrutura básica é a seguinte:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
<!-- 没有找到文章时的内容 -->
<?php endif; ?>Ao fazer a chamada… the_post() Depois disso, os “dados dos artigos” em nível global são configurados, e então é possível usar vários tipos de etiquetas de modelo.
Use os tags de modelos comuns para exibir o conteúdo.
Dentro do ciclo, você pode chamar uma série de funções para exibir as informações do artigo. Por exemplo:
- the_title()Título do artigo:
- the_permalink()Gerar um link permanente para o artigo.
- the_content(): Exiba o conteúdo completo do artigo.
- the_excerpt(): Saída do resumo do artigo.
- the_post_thumbnail(): Exibir imagens que destacam as características do artigo.
- the_date() e the_author()Exiba a data de publicação e o autor.
Implementar navegação de páginas em um artigo
Após a conclusão da iteração da lista de artigos (como na página inicial ou na página de arquivos), é necessário fornecer um sistema de navegação por páginas. Isso pode ser feito utilizando diferentes técnicas, dependendo do tipo de aplicação e do design desejado. the_posts_pagination() Uma função para gerar uma lista de links de paginação atraente e de fácil acesso.
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '上一页', 'my-custom-theme' ),
'next_text' => __( '下一页', 'my-custom-theme' ),
) );resumos
Desde a criação do arquivo que contém os cabeçalhos de informações corretos… style.css e básico index.php Começando, você já percorreu o caminho essencial para criar um tema personalizado para o WordPress. Analisamos em detalhes o sistema de hierarquia de templates e desmembramos seus componentes. header.php e footer.php Para aumentar a reutilização do código e, através disso… functions.php O arquivo foi aprimorado de forma consistente, adicionando funcionalidades de tema e recursos. Compreender e utilizar corretamente o “ciclo principal” (main loop) e as “tags de modelo” (template tags”) é fundamental para exibir conteúdo dinâmico nas páginas. Seguindo esses passos e boas práticas, você não apenas criou um tema funcional, mas também estabeleceu uma base para um projeto que é fácil de manter, expandir e que atende aos padrões do WordPress.
Perguntas frequentes Perguntas frequentes
É necessário dominar o PHP para desenvolver temas para o WordPress?
Sim, o PHP é essencial para ser dominado. O próprio núcleo do WordPress é escrito em PHP; todos os arquivos de template, a lógica das funcionalidades e a interação com o banco de dados dependem do PHP. O HTML, o CSS e o JavaScript são usados para construir a aparência e a interação do lado do usuário (front-end), mas o PHP é a base para injetar dados dinâmicos nesse ambiente.
Por que o meu tema não é exibido no painel de administração ou não pode ser ativado?
A causa mais comum é… style.css O formato do cabeçalho de informações do tema no topo do arquivo está incorreto, faltam informações essenciais, ou há um problema com a codificação do arquivo. Por favor, preencha o cabeçalho de informações de acordo com as especificações e verifique se a codificação do arquivo está definida como UTF-8 sem BOM. Além disso, confira se a pasta do tema foi colocada no local correto./wp-content/themes/No diretório.
Qual é a diferença entre o arquivo functions.php e um plugin?
functions.php As funcionalidades contidas no arquivo estão profundamente vinculadas ao tema atual; portanto, ao trocar de tema, essas funcionalidades serão desativadas. Elas são adequadas para serem adicionadas quando se trata de recursos que estão intimamente relacionados à aparência e ao layout do tema (como menus de registro, definição de áreas para ferramentas adicionais, opções de suporte ao tema, etc.). Por outro lado, as funcionalidades fornecidas por plugins geralmente são independentes do tema e permanecem disponíveis mesmo após a troca de tema, sendo ideais para recursos de caráter mais geral (como formulários de contato, otimização para mecanismos de busca (SEO), cache, etc.).
Como posso fazer com que o meu tema suporte vários idiomas (internacionalização)?
Você precisa usar as funções de internacionalização do WordPress para encapsular todo o texto direcionado aos usuários. No código, utilize-as. () ou _e() Funções como essas, e especifique onde elas devem ser utilizadas. style.css Definido em chinês Text DomainPor exemplo:echo ( ‘阅读更多’, ‘my-custom-theme’ );Em seguida, use uma ferramenta como o Poedit para gerar.potFicheiros de modelo de tradução, para os tradutores criarem..poe.moArquivos de idioma.
Durante o desenvolvimento, deve-se modificar diretamente os arquivos de template principais?
Não modifique nunca diretamente os arquivos principais do WordPress, nem os arquivos principais de outros temas pai que você esteja utilizando (a menos que você esteja criando um tema filho). Qualquer alteração será substituída na próxima atualização. O desenvolvimento personalizado deve sempre ser realizado em seu próprio tema independente ou em um tema filho; essa é uma regra básica do desenvolvimento para o WordPress.
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 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
- Desenvolvimento Prático de Temas para WordPress: Construindo Sites Corporativos Responsivos do Zero
Português do Brasil