Antes de começar a programar, você precisa de um ambiente de desenvolvimento local. Isso geralmente inclui um servidor local (como XAMPP, MAMP ou Local by Flywheel), PHP, um banco de dados MySQL e um editor de código (como VS Code ou Sublime Text). Certifique-se de que a sua versão do PHP esteja em conformidade com os requisitos oficiais do WordPress.
Em seguida, no diretório da sua instalação do WordPress,wp-content/themesDentro da pasta, crie uma nova pasta, por exemplo…my-first-themeEste diretório conterá todos os arquivos relacionados ao seu tópico.
Um tema básico do WordPress necessita apenas de dois ficheiros:style.csseindex.phpEm primeiro lugar, criestyle.cssAdicione o arquivo e acrescente uma nota com informações sobre o tema no início do arquivo, o que é necessário para que o WordPress reconheça o tema.
Leitura recomendada Temas WordPress personalizados: um guia completo para criar a aparência exclusiva do seu site a partir do zero.。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 一个简单的入门级响应式WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Em seguida, crie o mais simples possível.index.phpO ficheiro, por enquanto, contém apenas uma estrutura HTML e a frase “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
<h1>Olá, mundo! Este é o meu primeiro tema.</h1>
<?php wp_footer(); ?>
</body>
</html>Agora, inicie sessão no seu back-end do WordPress e, em “Aparência” -> “Temas”, deverá conseguir ver “My First Theme” e ativá-lo. Embora seja bastante básico neste momento, já conseguiu criar um tema que o WordPress consegue reconhecer.
Criar o arquivo de modelo central do tema
Um tema completo é composto por uma série de ficheiros de modelo, que controlam a apresentação de diferentes partes do website. Vamos começar por criar os ficheiros mais importantes.
Separar o cabeçalho do rodapé
O primeiro passo é separar o código repetitivo (como o cabeçalho e o rodapé) em ficheiros separados. Criarheader.phpOs documentos, que incluem desde<!DOCTYPE html>Abre isso<body>Tudo o que vem antes da hashtag.
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>Criarfooter.phpO ficheiro, que contém o conteúdo do rodapé e a etiqueta de finalização.
Leitura recomendada Crie o seu próprio tema WordPress do zero: um guia completo de arquitetura, design e desenvolvimento.。
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Em seguida, modifique o seuindex.phpDocumentos, utilizandoget_header()eget_footer()Os parâmetros são usados para introduzir estas partes.
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
\nCriar um ciclo de artigos com uma barra lateral.
O acima mencionadoindex.phpJá está incluído o ciclo principal básico do WordPress (The Loop), que é usado para pesquisar e exibir uma lista de artigos. Em seguida, criesidebar.phpPara adicionar uma barra lateral.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Para introduzir a barra lateral na página, você precisa deindex.phpAjuste a estrutura da área de conteúdo principal e utilizeget_sidebar()Função. Ao mesmo tempo, é necessário criar umfunctions.phpRegiste o ficheiro para este espaço de gadgets da barra lateral.
Implementar um layout e estilos responsivos
O design responsivo garante que o seu tema seja apresentado correctamente em todos os dispositivos. Vamos começar com a estrutura básica do CSS e as consultas de mídia.
Definir o estilo básico e o modelo de caixa flexível
No seustyle.cssAbaixo da descrição do tópico, adicione um estilo de restauração e um layout básico. Usar o Flexbox para criar um layout responsivo simples é um bom ponto de partida.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Adicionar consulta de mídia
As consultas de mídia são o núcleo do design responsivo. Adicionamos um ponto de interrupção simples que altera o layout da área de conteúdo e da barra lateral de lado a lado para empilhados quando a largura da tela é inferior a 768 px (abaixo de um dispositivo típico de tablet).
Leitura recomendada Desenvolvimento de temas WordPress: um guia completo, do início ao fim.。
Primeiro, modifique a estrutura HTML, dentro de <index.phpEnvolva o conteúdo principal e a barra lateral num único contentor.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Em seguida, adicione os estilos correspondentes no CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Melhorar a funcionalidade do tema através do functions.php
functions.phpOs ficheiros são a “sala de máquinas” do seu tema, utilizada para adicionar funcionalidades, registar características e introduzir scripts e estilos de forma segura.
Registre o menu de navegação e a área de ferramentas adicionais.
Nosfunctions.phpNo entanto, na China, é usadoregister_nav_menusFunção para registrar a posição do menu de navegação do tema.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Após o registro, você poderá…header.phpefooter.phpUse isto no chinês (simplificado)wp_nav_menu()Agora, vamos usar uma função para chamar estes menus.
Estilo de carregamento seguro e scripts
Nunca faça links diretos para ficheiros CSS ou JavaScript nos ficheiros do modelo. Deve utilizarwp_enqueue_style()ewp_enqueue_script()A função, e através dewp_enqueue_scriptsOs ganchos são usados para carregá-los.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Criar mais ficheiros de modelo para enriquecer as funcionalidades.
Atualmente, temos apenas um temaindex.phpIsso será usado em todas as páginas. O nível de modelos do WordPress determina que ele procure modelos mais específicos para diferentes tipos de páginas. Vamos criar alguns.
Um artigo individual e um modelo de página
Criarsingle.phpUsado para exibir um único artigo.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Criarpage.phpUsado para exibir páginas estáticas. A sua estrutura é semelhante à desingle.phpÉ semelhante, mas geralmente não mostra metainformações como categorias e etiquetas.
Para seguir o princípio DRY (Não Repita a Si Mesmo), podemos extrair as partes de exibição de conteúdo dos artigos e páginas para componentes de modelo (Template Part). Crie-os na pasta raiz do tema.template-partsCrie uma pasta e, dentro dela, crie mais pastas ou arquivos.content-single.phpecontent-page.php。
Modelo de página de arquivo de artigos
Criararchive.phpPara mostrar as páginas de arquivo, como categorias, etiquetas, autores, etc. Pode ser reutilizado.index.phpIsso pode variar dependendo do tema que você está usando, mas geralmente, o título do arquivo é exibido no topo do ciclo.
<main id="primary" class="site-main">
<header class="page-header">
< ?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>resumos
Através deste guia, concluiu a criação de um tema WordPress responsivo básico, mas completo. Aprendeu a estrutura básica do tema, como separar os componentes do modelo (cabeçalho, rodapé, barra lateral), implementar o ciclo principal do WordPress e criar um layout responsivo usando consultas de mídia CSS. Além disso, aprendeu a utilizar ofunctions.phpRegiste os ficheiros para os menus, gadgets e métodos de carregamento seguro de recursos e comece a utilizar o poderoso sistema de hierarquia de modelos do WordPress.
O desenvolvimento de temas é um processo contínuo. Em seguida, você pode explorar mais arquivos de modelo (como404.php、search.phpPor exemplo, aprenda a usar as classes Body e Post do WordPress para aumentar o nível de controlo de estilo, estude em profundidade a API do Customizador para fornecer opções de configuração visual aos utilizadores e até experimente integrar fluxos de trabalho modernos de front-end, como Sass ou ES6, no seu processo de desenvolvimento.
Perguntas frequentes Perguntas frequentes
Quais são os arquivos mínimos necessários para um tema do WordPress?
Um tema mínimo que possa ser reconhecido pelo WordPress precisa apenas de dois ficheiros:style.csseindex.php。style.cssA cabeça deve conter as anotações corretas sobre o assunto, eindex.phpEm seguida, será utilizado como modelo padrão para todas as páginas.
Como fazer com que o meu tema suporte a tradução em vários idiomas?
Você precisa fazer duas coisas. Primeiro, emstyle.cssOs comentários no início e todos os locais onde o texto é utilizado (por exemplo, através de__()ou_e()Os idiomas são traduzidos usando o domínio de texto. Neste guia, usamos o domínio de texto “my-first-theme”. Em seguida, usamos ferramentas como o Poedit para criar um ficheiro .pot e traduzi-lo para ficheiros .po e .mo, colocando-os no diretório do tema./languagesNo diretório. Por fim,functions.phpUse isto no chinês (simplificado)load_theme_textdomain()Tradução de “Function loading”.
Por que meus estilos personalizados ou scripts não estão funcionando?
Isso geralmente acontece porque não está sendo carregado na ordem recomendada pelo WordPress. Certifique-se de que você estáfunctions.phpNo arquivo, use…wp_enqueue_style()ewp_enqueue_script()Funções, e montá-las emwp_enqueue_scriptsAdicione estilos e scripts aos ganchos. Os links escritos diretamente nos ficheiros de modelo podem ser ignorados pelos plug-ins de cache ou carregados na ordem errada em determinadas situações.
Como adicionar suporte para logotipo personalizado ao meu tema?
Esta é uma funcionalidade muito comum. Você precisa de...functions.phpNa função de definição do tema do arquivo (por meio de…)after_setup_theme(Após a execução do gancho), adicioneadd_theme_support( 'custom-logo' )Você pode passar um array de parâmetros para definir as dimensões e outros atributos do Logo. Após a adição desses parâmetros, os usuários poderão carregar o Logo em “Aparência” -> “Personalizado” -> “Identidade do Site”. No lado front-end, você pode utilizar esses parâmetros para configurar a exibição do Logo de acordo com as especificações desejadas.the_custom_logo()Uma função para exibi-lo.
Como depurar erros PHP durante o processo de desenvolvimento?
Recomenda-se que, no ambiente de desenvolvimento local,wp-config.phpAtive o modo de depuração do WordPress no arquivo.WP_DEBUGA constante foi definida como…trueVocê também pode configurar ao mesmo tempoWP_DEBUG_LOGeWP_DEBUG_DISPLAYPara controlar se os erros são registados num ficheiro de registo ou apresentados no ecrã. Lembre-se de desativar o modo de depuração antes de colocar o tema online.
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