Preparação e configuração do ambiente
Antes de começar a escrever a primeira linha de código, você precisa de um ambiente de desenvolvimento adequado. Isso inclui um servidor local e um editor de código. Recomendamos o uso de XAMPP, MAMP ou Laragon para configurar o servidor local, pois eles permitem a instalação e execução automática do Apache, MySQL e PHP com apenas um clique. Escolha um editor de código de sua preferência, como Visual Studio Code, Sublime Text ou PHPStorm; o suporte a realce de código e completamento automático desses editores irá melhorar significativamente sua eficiência no desenvolvimento.
Em seguida, você precisa criar um diretório para o seu novo tema na instalação local do WordPress. Todos os temas do WordPress são armazenados em um determinado local no sistema. /wp-content/themes/ Dentro do diretório. Neste folder, crie um novo folder para o tópico que você está prestes a criar; por exemplo, nomeie-o… my-first-themeO nome desse folder é o seu identificador de tema, e ele será exibido na lista de temas no backend.
Ao mesmo tempo, você precisa entender os dois pilares fundamentais do desenvolvimento de temas para o WordPress: os arquivos de template e os arquivos de estilo (style sheets). Um tema básico para o WordPress requer apenas dois arquivos:style.css e index.php。style.css Não apenas controla o estilo visual do site, mas o bloco de comentários no cabeçalho do arquivo também serve como o “cartão de identidade” do tema, contendo informações metadáticas como o nome do tema, o autor e a descrição.index.php É o arquivo do modelo principal por padrão.
Leitura recomendada Guia Completo para o Desenvolvimento de Temas WordPress: Construindo Temas Personalizados do Zero。
Criar o arquivo de temas principais
Definir estilos e informações para o tema
Tudo começa a partir de… style.css Comece. Crie este arquivo na pasta raiz da pasta de temas e adicione um bloco de comentários formatado no início do arquivo. Este bloco de comentários é essencial para que o WordPress reconheça e carregue o tema. O código abaixo mostra um cabeçalho de tabela de estilo básico:
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Dentre eles,Text Domain Este arquivo é usado para internacionalização (i18n), preparando-se para futuras traduções em vários idiomas. Após criar este arquivo, faça login no painel administrativo do WordPress e vá para a página “Aparência” -> “Temas”. Lá, você deverá conseguir ver o seu tema, embora ele ainda não tenha nenhuma funcionalidade definida.
Construir a estrutura de um modelo básico
Em seguida, crie o arquivo de esqueleto para o tema. index.phpEste é o modelo mais básico. Quando o WordPress não consegue encontrar um arquivo de modelo mais específico (como…). single.php ou page.phpQuando necessário, ele é utilizado. Uma das formas mais simples de… index.php É possível conter apenas funções básicas que chamam a parte inicial (header), os ciclos de execução e a parte final (footer) do código do WordPress.
<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
<?php wp_body_open(); ?>
<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();
// 文章内容输出
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Este arquivo utiliza as tags de modelo padrão do WordPress, como… bloginfo() Obter informações sobre o site.the_title() e the_content() Exibir o título e o conteúdo dos artigos em um ciclo.wp_head() e wp_footer() Esses são ganchos (hooks) de extrema importância, pois permitem que o núcleo do WordPress, plugins e outros scripts interajam com as páginas do site. <head> e <footer> Injeção de código em uma área específica do sistema.
Separar o modelo (template) da funcionalidade (feature) que é introduzida.
Arquivos de modelo modularizados
Vamos index.php Ter todo o código escrito em um único arquivo pode torná-lo difícil de manter. A melhor prática é dividir o código em várias partes, conhecidas como “Componentes de Modelo” (Template Parts). Crie os seguintes arquivos para organizar a estrutura do código:
* header.phpArmazenar <head> Conteúdo de cabeça comum, como áreas e navegação no topo do site.
* footer.phpÉ onde são armazenadas as informações de copyright, bem como outros conteúdos de rodapé comuns, localizados na parte inferior do site.
* sidebar.phpÁrea para armazenar os widgets da barra lateral (opcional).
* functions.phpArquivo de funções funcionais do tópico.
Leitura recomendada Do zero: Passo a passo, ensinamos a você como desenvolver um tema personalizado para o WordPress.。
Em seguida, use… get_header()、get_footer() e get_sidebar() Funções como essa estão disponíveis em… index.php Introduzindo-as no meio. Após a reforma… index.php A parte central ficará muito simplificada:
<main>
<article>
<?php the_title( '<h2>', '</h2>' ); ?>
</article>
<p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
</main>Note que usamos… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Esta é a prática padrão de internacionalização.
Aprimorar as funcionalidades do tema
functions.php O arquivo é o “centro de controle” do seu tema. Ele é usado para adicionar funcionalidades de suporte ao tema, registrar menus e barras laterais, carregar arquivos de estilo (CSS) e scripts, entre outras coisas. Não se trata de um arquivo de modelo (template); ele é carregado automaticamente durante a inicialização do tema.
A seguir, está um exemplo básico… functions.php Exemplo:
__( '主导航菜单', 'my-first-theme' ),
) );
// 添加对 HTML5 标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 添加标题标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', '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( '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' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>Neste arquivo, definimos uma função. my_first_theme_setupE, através disso… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Monte-o no gancho de ação específico do tema de inicialização do WordPress. Da mesma forma, usamos… register_sidebar A função registrou uma área para ferramentas adicionais e, em seguida, wp_enqueue_style A função introduziu corretamente o arquivo de estilo do tema.
Criar modelos e estilos dedicados
Personalizar modelos para diferentes tipos de páginas.
A estrutura hierárquica dos templates do WordPress permite que você crie arquivos de template específicos para diferentes tipos de páginas. Por exemplo:
* front-page.phpUsado como página inicial estática.
* home.phpPágina de lista de artigos do blog.
* single.phpPágina de detalhes de um único artigo.
* page.phpPágina única.
* archive.phpPáginas de arquivamento com categorias, etiquetas, autores, etc.
* search.phpPágina de resultados da pesquisa.
* 404.phpPágina de erro 404.
Leitura recomendada Guia Prático para Iniciantes no Desenvolvimento de Temas para WordPress: Criando sua própria Arquitetura e Modelos de Temas a Partir do Zero。
Criar page.php É possível controlar de forma independente a aparência de todas as páginas, sem afetar as páginas que contêm o conteúdo dos artigos. Sua estrutura é… index.php Semelhante, mas geralmente não é necessário exibir os metadados da publicação do artigo (como data, autor).
Desenhar layouts e interações responsivos
Os temas do WordPress modernos devem ser responsivos, o que significa que o seu código CSS precisa se adaptar a todos os tamanhos de tela, desde celulares até computadores de mesa. É recomendado utilizar a estratégia de CSS “Mobile First” (Móvel Primeiro): primeiro, crie os estilos básicos para telas menores e, em seguida, use consultas de mídia (Media Queries) para adicionar estilos aprimorados para telas maiores.
Ao mesmo tempo, seu tema provavelmente precisará de algum JavaScript para fornecer funcionalidades interativas, como menus suspensos, carrosséis de imagens, etc. A abordagem correta é… functions.php Use isto no chinês (simplificado) wp_enqueue_script() Funções para registrar e enfileirar scripts, garantindo que as dependências (como o jQuery) sejam devidamente declaradas. Isso evita conflitos entre scripts e carregamentos repetidos, além de compatibilizar com as funcionalidades de otimização de scripts do WordPress.
resumos
Ao seguir os passos acima, você criou um tema personalizado para o WordPress que é básico, funcional e pronto para uso. Você aprendeu como definir as informações do tema, o que é essencial para que ele funcione corretamente no sistema. style.cssConstruir a base… index.php Modelos: Divida os modelos em componentes modulares. functions.php Você também aprimorou as funcionalidades relacionadas aos temas no WordPress. Além disso, compreendeu a poderosa estrutura hierárquica dos templates do WordPress, o que abre caminho para a criação de páginas de templates personalizadas e mais complexas.
O desenvolvimento de temas é um processo contínuo de iteração e aprofundamento. Em seguida, você pode explorar o desenvolvimento de subtemas (Child Themes) para modificar temas existentes de forma segura, aprender a usar a API do WordPress Customizer, que permite que os usuários ajustem as configurações do tema em tempo real através do painel de administração, ou aprofundar seu conhecimento sobre a API REST do WordPress para criar temas que se integrem com frameworks front-end. Manter-se atento aos documentos oficiais de desenvolvedores e participar ativamente da comunidade é essencial para melhorar suas habilidades continuamente.
Perguntas frequentes Perguntas frequentes
É necessário dominar PHP para desenvolver temas do WordPress?
Sim, ter uma base sólida em PHP é uma condição essencial para o desenvolvimento de temas para o WordPress. Como o próprio WordPress é escrito em PHP, todos os arquivos de template (como…) index.php、single.php）e arquivos de funcionalidades (functions.phpTodos eles necessitam do uso de código PHP para gerar conteúdo dinamicamente, chamar funções do WordPress e manipular dados.
Ao mesmo tempo, você também precisa estar familiarizado com HTML e CSS para construir a estrutura e o estilo das páginas, e ter um conhecimento básico de JavaScript (especialmente jQuery, pois ele está incluído no núcleo do WordPress) para adicionar funcionalidades interativas.
Por que a alteração do meu tema não é exibida no painel administrativo do WordPress?
Isso geralmente é causado pelo cache do navegador ou do servidor. Primeiro, tente limpar o cache no navegador. Ctrl + F5(Windows/Linux) ou Cmd + Shift + R(Mac) Realize um atualização forçada para limpar o cache do navegador.
Se o problema persistir, pode ser que o servidor ou os plugins de cache do WordPress (como W3 Total Cache e WP Super Cache) estejam armazenando arquivos antigos. Tente limpar o cache de todos esses plugins. Durante a fase de desenvolvimento, é recomendável desativar temporariamente esses plugins para evitar interferências no funcionamento do sistema.
Como fazer com que o meu tema suporte múltiplas línguas?
Para que um tema suporte múltiplas línguas (internacionalização e localização, ou i18n/l10n), isso depende principalmente das funções de tradução do WordPress. No tema, todos os textos direcionados aos usuários não devem ser escritos diretamente, mas sim envolvidos em funções de tradução.
Por exemplo, ao usar… (‘文本’， ‘my-first-theme’) Faça a tradução, ou use. echo esc_html(‘文本’， ‘my-first-theme’) “Perform output and escape.” style.css A parte superior (cabeça) e… load_theme_textdomain() Configuração correta no chamado de função Text Domain( Campo de texto ), e então use uma ferramenta como o Poedit para criar o conteúdo. .pot Modelo de tradução: .po/.mo Arquivos de idioma.
Qual é a diferença entre as funções contidas no arquivo functions.php do tema e as funcionalidades dos plugins?
functions.php A função do código contido no arquivo é semelhante à função do código do plugin; ambos podem ser usados para expandir o WordPress. A principal diferença reside no escopo de aplicação e no propósito específico de cada um.
functions.php As funcionalidades mencionadas estão intimamente ligadas ao tema atual. Quando o usuário altera o tema, essas funcionalidades geralmente deixam de estar disponíveis. Elas são adequadas para serem adicionadas a recursos que estejam diretamente relacionados à apresentação visual do tema, ao seu layout e aos seus modelos (por exemplo, a localização do campo de registro ou opções de suporte ao tema).
As funcionalidades fornecidas pelos plugins são independentes do tema escolhido; portanto, independentemente do tema utilizado, elas estarão disponíveis sempre que o plugin estiver ativado. Eles são adequados para adicionar funcionalidades genéricas que não estão relacionadas à aparência do tema (como formulários de contato, otimização para mecanismos de busca (SEO), funcionalidades de comércio eletrônico, etc.). Se uma funcionalidade precisar ser mantida após a troca de tema, ela deve ser implementada como um plugin.
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.
- O guia definitivo para escolher o tema perfeito para o WordPress: uma análise completa, desde os frameworks até as personalizações.
- 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
Português do Brasil