Guia introdutório para o desenvolvimento de temas no WordPress: construa o seu primeiro subtema do zero

O WordPress, como o sistema de gerenciamento de conteúdo mais popular mundial, deve sua grande flexibilidade e personalização ao seu sistema de temas. Para desenvolvedores que desejam personalizar a aparência do seu site sem ter que mexer no código-fonte, os temas filhos (Child Themes) são a solução perfeita. Eles permitem que você herde todas as funcionalidades do tema pai de forma segura e realize modificações apenas onde são necessárias, garantindo que as atualizações do tema pai não apaguem o trabalho que você fez. Este artigo irá guiá-lo passo a passo para criar um tema filho do WordPress totalmente funcional, do zero.

O que é um subtema e quais são as suas principais vantagens?

Um subtema é um tema WordPress independente que depende de outro tema (chamado de tema pai) para funcionar. A ideia central dos subtemas é a “herança e a sobrescrição” de características e funcionalidades. Geralmente, um subtema contém apenas um arquivo de estilo (style sheet) e um arquivo de funcionalidades (function file), mas é através desses dois arquivos que é possível personalizar profundamente o tema pai.

O uso de subtemas oferece várias vantagens insubstituíveis. A principal delas é a segurança das atualizações, que é o ponto mais importante. Quando você modifica diretamente os arquivos do tema pai, qualquer alteração personalizada será substituída após a publicação de uma nova versão do tema pai, o que pode causar problemas com o estilo do site ou a falha de funcionalidades. Com subtemas, suas modificações ficam isoladas no respectivo diretório, permitindo que o tema pai seja atualizado sem afetar as alterações feitas nos subtemas.

Leitura recomendada Guia de introdução ao plugin WooCommerce: construa a sua loja online do zero.。

Em segundo lugar, está a eficiência no desenvolvimento. Não é necessário criar todos os arquivos de modelo de um tema do zero; basta modificar a parte que deseja alterar no subtema. Por exemplo, se você quiser apenas alterar o cabeçalho do site, é suficiente fazer isso no subtema correspondente. header.php Arquivos, todos os outros modelos (como…) single.php、page.phpTodas as partes relacionadas usarão automaticamente a versão do tema pai. Isso aumentou significativamente a eficiência do desenvolvimento.

Hospedagem para sites WordPress da UltraHost

Garantia de reembolso em 30 dias, largura de banda ilimitada e banco de dados, proteção contra DDoS gratuita; desconto de 50% na compra de 3 anos (planos de 4 TB a 10 TB).

página de acesso

Por último, temos a clareza da estrutura e a portabilidade. Todo o código personalizado está concentrado em uma pasta temática independente, o que torna a estrutura muito fácil de entender. Quando você precisar migrar o site para um novo servidor ou compartilhar suas personalizações com membros da equipe, basta copiar essa pasta temática, o que torna o gerenciamento muito prático.

Crie o seu primeiro diretório de subtemas e o arquivo correspondente.

Criar um subtema é tecnicamente simples; você só precisa seguir uma estrutura de arquivos e convenções de nomeação específicas. Primeiro, você deve estar no diretório de temas do WordPress. /wp-content/themes/ Crie uma nova pasta. O nome dessa pasta deve ser o mesmo que o nome do seu subtópico. É recomendado usar letras minúsculas, hífens e números, por exemplo: my-first-child-theme。

Nesse folder, o primeiro e mais importante arquivo que você deve criar é o arquivo de estilo (style sheet). style.cssEste arquivo não apenas contém regras de estilo, mas as notas no cabeçalho do arquivo também são cruciais para que o WordPress reconheça o subtema. Essas notas devem conter informações específicas.

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

Por favor, note que…Template: Esta linha é de extrema importância; ela deve ser exatamente igual ao nome da pasta do tema pai, levando em conta a distinção entre maiúsculas e minúsculas. Por exemplo, se você estiver usando o tema padrão do WordPress, o “Twenty Twenty-Six”, o nome da pasta correspondente será… twentytwentysixEntão, aqui é necessário escrever. twentytwentysixÉ através desta declaração que o WordPress estabelece a relação de herança entre os subtemas (subthemes) e o tema pai (parent theme).

Leitura recomendada Guia Definitivo para o Desenvolvimento de Temas WordPress: Construindo Temas para Sites Profissionais do Zero。

Para que os subtemas possam carregar os estilos corretamente, geralmente é necessário criar um segundo arquivo principal: o arquivo de funcionalidades. functions.phpA função deste arquivo é a mesma que a do tema pai. functions.php Carregamento em paralelo, em vez de sobrepor os arquivos. Você pode adicionar código PHP personalizado, e o mais importante é usar esse código para inserir corretamente os arquivos de estilo do tema pai e dos temas filhos na fila de processamento.

Os estilos são carregados corretamente através do arquivo de funcionalidades.

Dentro do subtópico,functions.php A principal tarefa de um arquivo geralmente é gerenciar o carregamento dos arquivos de estilo (style sheets). Embora os subtemas… style.css Será automaticamente reconhecido pelo WordPress, mas, para garantir que os estilos do tema pai sejam carregados com prioridade e corretamente, a prática recomendada é usar um gancho de ação (action hook) do WordPress para gerenciar a sequência de carregamento dos recursos de forma explícita.

Você precisa em um subtópico… functions.php Escreva uma função no arquivo e use-a. wp_enqueue_scripts Este gancho de ação é usado para chamá-lo. Esse método garante que os arquivos de estilo sejam carregados de forma correta e eficiente no topo da página.

hospedagem compartilhada da hosting.com

Alto desempenho com CPUs AMD EPYC, armazenamento SSD NVMe e LiteSpeed, suporte interno especializado 24 horas por dia, 7 dias por semana, medidas de segurança avançadas, incluindo SSL, força bruta, malware e proteção contra DDoS, economia de até 73%

página de acesso

A seguir, um exemplo de implementação padrão:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_theme_enqueue_styles() {
    // 首先加载父主题样式表
    wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() . '/style.css' 
    );

// 然后加载子主题样式表
    wp_enqueue_style( 
        'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'), // 声明依赖关系，确保父主题样式先加载
        wp_get_theme()->get('Version') // 使用主题版本号作为缓存破坏参数
    );
}
add_action( 'wp_enqueue_scripts', 'my_first_child_theme_enqueue_styles' );

No código acima,get_template_directory_uri() A função retorna o URI do diretório do tema pai. get_stylesheet_directory_uri() A função retorna o URI do diretório do tema ativo atual (ou seja, do subtema). Ao declarar que a tabela de estilos do subtema depende da tabela de estilos do tema pai, garantimos que a ordem de sobreposição do CSS esteja correta: os estilos do tema pai são aplicados primeiro, e em seguida, os estilos do subtema são sobrepostos e complementados com base neles.

Implementar a personalização de subtemas comuns

Assim que a estrutura básica for montada, você poderá começar o trabalho de personalização propriamente dito. As personalizações mais comuns ocorrem nos níveis dos estilos e dos arquivos de modelos.

Leitura recomendada Análise aprofundada do desenvolvimento de plugins para WordPress: Construindo funcionalidades personalizadas do zero。

Para a personalização dos estilos, basta que você faça isso no subtema correspondente. style.css Adicione novas regras CSS ao arquivo. Como essas regras são carregadas após os estilos do tema pai, elas terão maior prioridade (desde que a especificidade dos seletores seja a mesma). Por exemplo, se você quiser alterar a cor dos links em todo o site, pode adicionar o seguinte código:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

Para layouts mais complexos ou modificações de funcionalidades, você precisa substituir o arquivo de template do tema pai. Esta é uma das funcionalidades mais poderosas dos temas filhos. O procedimento é o seguinte: selecione o arquivo de template do tema pai que deseja modificar (por exemplo,...). header.php、footer.php ou page.phpCopie o arquivo para o diretório do seu subtema. Em seguida, o WordPress utilizará automaticamente essa cópia localizada no diretório do subtema, ignorando o arquivo original no diretório do tema pai.

Hospedagem Compartilhada InterServer

Hospedagem compartilhada $2.50 USD por mês, primeiro mês $0.1 USD código promocional tryinterserver, 461 scripts de aplicativos em nuvem, instalação com um clique.

página de acesso

Por exemplo, para personalizar o rodapé, você pode modificar o código do tema pai. footer.php Copie o arquivo para a pasta do subtema e, em seguida, abra essa cópia para edição. Você pode modificar as informações de copyright, remover ou adicionar áreas para ferramentas adicionais, etc. Lembre-se de que deve copiar apenas os arquivos que precisam ser alterados, e não a todo o tema pai.

Além disso, você também pode fazer isso nos subtemas. functions.php Novas funcionalidades podem ser adicionadas ao tema. Por exemplo, é possível criar uma nova área para ferramentas no lado esquerdo da página, adicionar suporte para tipos de artigos personalizados ou carregar scripts adicionais para páginas específicas. Esses códigos serão armazenados de forma segura no seu subtema (subtheme).

resumos

Seguindo os passos deste artigo, você já dominou o processo completo desde a criação da estrutura do diretório, a escrita das informações necessárias para os cabeçalhos das tabelas de estilo, até o carregamento correto dos estilos através dos arquivos de funcionalidades, passando pela substituição de estilos e templates específicos. Os subtemas (subthemes) representam uma prática recomendada e essencial no desenvolvimento com WordPress, pois permitem separar claramente o seu trabalho de personalização do código do tema principal, garantindo a manutenibilidade e a segurança do site a longo prazo. Seja que você queira apenas fazer ajustes de cor ou realizar uma reestruturação profunda do layout, começar com um subtema é sempre o ponto de partida mais sensato e profissional.

Perguntas frequentes Perguntas frequentes

É possível criar subtemas para qualquer tema do WordPress?

Teoricamente, qualquer tema que siga as normas de escrita e os padrões de codificação do WordPress pode ser usado como tema pai para criar subtemas. Você só precisa garantir que, no subtema… style.css Não. Template: Basta preencher corretamente o nome da pasta do tópico pai no campo correspondente.

No entanto, alguns temas com design muito simples ou estrutura especial (por exemplo, aqueles cujos estilos não são carregados de maneira padrão) podem causar problemas no funcionamento dos subtemas. Ao escolher um tema pai, é geralmente mais seguro dar preferência a aqueles que são populares, atualizados regularmente e possuem documentação completa.

Os ficheiros functions.php dos subtemas irão substituir os do tema principal?

Não. Esta é uma das mais comuns mal-entendidas em relação aos subtemas. functions.php O arquivo não irá substituir o arquivo com o mesmo nome no tópico pai; em vez disso, será adicionado ao tópico pai. functions.php É carregado posteriormente.

Isso significa que o código contido em ambos os arquivos será executado. Você pode fazer isso no subtópico… functions.php Você pode adicionar novas funcionalidades ou modificar o comportamento existente usando os ganchos (hooks) do WordPress, mas não pode “substituir” diretamente uma função do tema pai criando uma função com o mesmo nome, pois isso pode causar erros fatais no PHP. Para alterar o comportamento de uma função do tema pai, geralmente é necessário utilizar os ganchos de ação (action hooks) ou os ganchos de filtro (filter hooks).

O que fazer se o estilo do site ficar desordenado após ativar um subtópico?

Se a aparência do site se tornar completamente anormal após a ativação de um subtópico, isso geralmente é devido ao fato de que a tabela de estilos (style sheet) não foi carregada corretamente. Por favor, siga os passos abaixo para investigar o problema:

Primeiramente, verifique os subtemas. style.css No cabeçalho do arquivo… Template: Assegure-se de que o valor corresponda exatamente ao nome da pasta do tema pai, incluindo a maiúscula e a minúscula. Esta é a causa mais comum de problemas.

Em segundo lugar, verifique o seu… functions.php O código contido no arquivo, especialmente… wp_enqueue_style Verifique se a chamada da função está correta, se o caminho e as dependências estão configurados corretamente, e se não há erros de sintaxe em PHP. Você pode verificar se existem mensagens de erro relacionadas no “Painel -> Ferramentas -> Saúde do Site” no WordPress.

Finalmente, limpe todo o cache do seu site e do seu navegador, e depois atualize a página para ver os resultados.

Como adicionar modelos de página personalizados em um subtópico?

Adicionar um modelo de página personalizado em um subtópico é exatamente o mesmo que adicionar um modelo em um tópico comum. Você só precisa criar um novo arquivo PHP no diretório do subtópico e adicionar um bloco de comentários específico no início do arquivo para declará-lo como um modelo de página.

Por exemplo, crie um chamado… my-full-width.php O arquivo, no início, deve conter:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

Em seguida, você poderá escrever o código do seu modelo nesse arquivo. Após a conclusão do processo, ao criar ou editar uma página no painel administrativo do WordPress, você verá a opção “Minha Página de Largura Total” na lista suspensa “Modelo”, dentro das “Propriedades da Página”.