Preparação e configuração do ambiente
Antes de começar a escrever o código, você precisa de um ambiente de desenvolvimento adequado. Isso inclui um ambiente de servidor local (como XAMPP, MAMP ou Local by Flywheel), bem como um editor de código (como VS Code, PhpStorm ou Sublime Text). Certifique-se de que o seu ambiente local suporte PHP (versão 7.4 ou mais recente) e MySQL/MariaDB.
Em seguida, você precisará ir para o diretório de instalação do WordPress.wp-content/themesCrie uma nova pasta dentro da pasta existente; essa nova pasta se tornará o seu diretório de temas. Por exemplo, você pode criar uma pasta chamada…my-first-themeO folder é o local onde todos os seus arquivos relacionados aos diferentes temas estão armazenados. É como o “lar” de todos os seus documentos sobre esses temas.
O arquivo mais básico de um tema WordPress tem apenas dois:style.csseindex.phpDentre eles,style.cssNão é apenas um arquivo de estilo (stylesheet), mas também o “cartão de identidade” do tema. Ele informa ao WordPress o nome do tema, o autor, a descrição e outros metadados através de comentários no cabeçalho do arquivo.
Leitura recomendada Análise aprofundada do desenvolvimento de temas do WordPress: um guia de técnicas essenciais, desde o início até à perfeição.。
Criar um arquivo de informações do tópico
Na sua pasta de temas, crie…style.cssArquivo, e insira as seguintes informações básicas:
/*
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
*/Este comentário é essencial. É exatamente através da leitura desse comentário que o WordPress funciona corretamente.Theme NameEsta linha é usada para identificar e exibir o seu tema na lista de temas do backend. Outras informações, como…Text DomainIsso é para preparar a tradução para outros idiomas (internacionalização).
Criar o arquivo de modelo principal.
Em seguida, crie o mais básico…index.phpO arquivo… Mesmo que este arquivo esteja temporariamente vazio, basta que…style.cssAs informações estão completas, e o seu tema aparecerá na lista “Aparência” -> “Temas” no painel administrativo do WordPress, onde poderá ser ativado. Agora, vamos…index.phpEscreva a estrutura HTML mais simples possível para exibir o título do blog e o conteúdo do artigo.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<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><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
<div>\n</div>
</article>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_foot(); ?>
</body>
</html>Este código utiliza várias funções do núcleo do WordPress.模板标签Por exemplobloginfo()、the_title()、the_content()funçãowp_head()ewp_foot()Esses são os “ganchos” (hooks) cruciais que permitem que o núcleo do WordPress, plugins e outros scripts insiram o código necessário no início e no final da página.
Compreender a hierarquia dos modelos e criar modelos principais.
O WordPress utiliza um conjunto de ferramentas e recursos conhecido como…模板层级As regras determinam qual arquivo de template deve ser usado para renderizar um pedido de página específico. Este é um dos conceitos mais centrais no desenvolvimento de temas. Em resumo, o WordPress começa a procurar pelo arquivo de template mais específico; se não for encontrado, recorre a um arquivo mais genérico e, por último, a um arquivo padrão.index.php。
Leitura recomendada Guia introdutório para o desenvolvimento de temas do WordPress: construa o seu primeiro tema personalizado do zero.。
Criar um modelo para a página de detalhes do artigo.
Quando um usuário acessa um único artigo, o WordPress procura primeiro por…single-post.phpSe não existir, então use.single.phpE, por último,index.phpVamos criar um…single.phpÉ usado especificamente para controlar a exibição de um único artigo.
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
Publicado em: | Autor:
</div>
</header>
<div class="entry-content">
\n
</div>
<footer class="entry-footer">
分类：
</footer>
</article>
<?php
// 上一篇/下一篇导航
the_post_navigation();
// 评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>Este modelo introduz três componentes importantes:get_header()、get_sidebar()eget_footer()Elas são usadas respectivamente para introduzir…header.php、sidebar.phpefooter.phpArquivos são a chave para a reutilização de código e para um design modular.
Criar um modelo de página
Para páginas estáticas (como “Sobre Nós”), o WordPress procura…page.phpCriarpage.phpSua estrutura é semelhante à…single.phpSemelhante, mas geralmente não exibe metadados como categorias, etiquetas e horário de publicação.
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<div class="entry-content">
\n
</div>
</article>
<?php
endwhile;
?>
</main>Implementar funcionalidades e estilos temáticos
Um tema completo não precisa apenas de arquivos de modelo, mas também deve ser implementado de forma adequada através de outros componentes e processos.functions.phpO arquivo é usado para adicionar funcionalidades, registrar menus, áreas de ferramentas (widgets), e realizar outras ações relacionadas.style.cssAdicionar estilo.
Arquivo de funções para funcionalidades temáticas
Crie um arquivo no diretório raiz do seu tema.functions.phpEste arquivo é carregado automaticamente durante a inicialização do tema e é usado para armazenar todas as funções PHP personalizadas e hooks.
<?php
/**
* 我的第一个主题的功能函数
*/
// 添加主题支持功能
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像（缩略图）功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus(
array(
'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
)
);
// 添加HTML5标记支持
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册小工具侧边栏
function my_first_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', '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' );
// 加载主题样式表和脚本
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载通用CSS
wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
// 加载通用JavaScript
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Adicionar estilos básicos
Agora, vamos em…style.cssApós a cabeça dos comentários, adicione algum CSS básico para embelezar o seu tema.
Leitura recomendada Guia Definitivo para o Desenvolvimento de Temas WordPress: Criando um Tema Personalizado para um Site WordPress do Zero。
/* 基础重置与排版 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
header {
border-bottom: 2px solid #0073aa;
margin-bottom: 40px;
padding-bottom: 20px;
}
.entry-title {
color: #222;
}
.site-main {
float: left;
width: 70%;
}
/* 侧边栏样式 */
.widget-area {
float: right;
width: 25%;
padding-left: 5%;
}
/* 页脚样式 */
footer {
clear: both;
border-top: 1px solid #ddd;
margin-top: 60px;
padding-top: 20px;
text-align: center;
color: #666;
}Modularização e componentes de template
Para melhorar a manutenção e a reutilização do código, o WordPress recomenda que as partes repetitivas de uma página (como o cabeçalho, o rodapé e as barras laterais) sejam divididas em arquivos de componentes de template separados.
Criar componentes para o cabeçalho e o rodapé da página.
Criarheader.phpContém desde…<!DOCTYPE html>From “começar” to “abrir”<main>Tudo o que vem antes da hashtag.
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary">Ir para o conteúdo principal</a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
else :
?>
<p class="site-title"><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$my_first_theme_description = get_bloginfo( 'description', 'display' );
if ( $my_first_theme_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
</div>
<nav id="site-navigation" class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</header>
<div id="content" class="site-content">Consequentemente, crie.footer.phpInclui</div><!-- #content -->Todo o conteúdo seguinte.
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<p><?php printf( esc_html__( '主题：%1$s', 'my-first-theme' ), '<a href="https://example.com/">我的第一个主题</a>' ); ?></p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>Criarsidebar.phpPara exibir a área dos widgets.
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php
endif;
?>Depois de concluir a montagem dessas peças, você poderá usá-las.get_header()、get_footer()eget_sidebar()As funções são chamadas de forma concisa em todos os arquivos de template.
resumos
Através deste guia, você completou todo o processo de construção de um tema básico para o WordPress, partindo do zero. Você aprendeu como configurar o ambiente de desenvolvimento e como criar os arquivos necessários para o tema.style.csseindex.phpE, com um profundo entendimento do sistema de camadas de templates do WordPress, foi possível criar templates específicos para diferentes tipos de páginas (como artigos e páginas padrão).single.php， page.phpVocê dominou o método de...functions.phpO arquivo adiciona funcionalidades essenciais ao tema, como um menu de registro, ferramentas úteis e imagens exclusivas de suporte. Por fim, você aplicou o conceito de desenvolvimento modular, dividindo o cabeçalho, o rodapé e a barra lateral em componentes de template reutilizáveis.header.php， footer.php， sidebar.phpIsso aumentou significativamente a manutenibilidade do código. Este é apenas um ponto de partida; com base nele, você pode continuar explorando tipos de artigos personalizados, opções de tema avançadas, design responsivo e interações em JavaScript, para construir gradualmente um tema WordPress poderoso e com design profissional.
Perguntas frequentes Perguntas frequentes
Por que o meu tema não é exibido em segundo plano?
Assegure-se de que a pasta de temas esteja localizada no local correto.wp-content/themes/No diretório, e dentro dele…style.cssO cabeçalho do arquivo contém um bloco de comentários com formatação correta, especialmente…Theme Name:Esta linha deve estar presente e correta. O código de codificação do arquivo deve ser UTF-8 sem BOM (Byte Order Mark).
Como adicionar suporte para logotipo personalizado ao meu tema?
No seufunctions.phpOs documentosmy_first_theme_setupNa função, adicione uma linha de código:add_theme_support( 'custom-logo' );Após a adição, os usuários poderão carregar e configurar o Logotipo no painel de administração do WordPress, na seção “Aparência” -> “Personalizado” -> “Identidade do site”. Você precisará…header.phpUse isto no chinês (simplificado)the_custom_logo()Função para exibir o Logo.
O que fazer se o site mostrar uma tela em branco após a modificação do arquivo functions.php?
Isso geralmente significa…functions.phpExistem erros de sintaxe PHP no arquivo. O WordPress irá parar de funcionar devido a esse erro fatal. Você precisa acessar o servidor via FTP ou através do gerenciador de arquivos e remover o arquivo com o erro.functions.phpRenomear (por exemplo, para…)functions.php.bakIsso permitirá que o site seja acessado novamente. Em seguida, verifique e corrija seu código, e carregue os arquivos corretos novamente. Testar em um ambiente de desenvolvimento local é um bom hábito para evitar esse tipo de problema.
Como fazer com que o meu tema suporte a tradução em vários idiomas?
Você já está…style.cssEstá configurado.Text Domain(Campo de texto), e emfunctions.phpA string utilizou…esc_html__( ‘文本’， ‘my-first-theme’ )Uma função de tradução como essa. Em seguida, você precisará usar ferramentas como o Poedit para escanear as strings traduzíveis nos arquivos do tema e gerar o conteúdo necessário para a tradução..potArquivos de modelo, e então criar os correspondentes para cada idioma..poe.moArquivos, e coloque-os no tópico correspondente./languagesNo diretório correspondente. O WordPress carregará automaticamente as traduções apropriadas de acordo com as configurações de idioma do site.
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