Do zero: Passo a passo, ensinamos a você como criar um subtema profissional para o WordPress.

No ecossistema do WordPress, os subtemas são a pedra angular para a personalização e a manutenção segura de um site. Eles permitem que você herde todas as funcionalidades, estilos e arquivos de modelo do tema pai, enquanto faz modificações em um diretório separado. Isso significa que, quando o tema pai recebe atualizações de segurança ou novas funcionalidades, você pode atualizá-lo com um único clique, sem preocupações de que o código personalizado que você escreveu com cuidado seja substituído. Seja para ajustar as cores, modificar o layout ou adicionar funcionalidades complexas, usar subtemas é a melhor prática.

Por que é necessário usar subtópicos?

Modificar diretamente o arquivo do tema pai é uma operação de alto risco. Assim que o tema pai for atualizado, todas as suas alterações serão perdidas e você terá que reaplicá-las manualmente, um processo que é muito propenso a erros e consome muito tempo e esforço. O que é ainda mais importante é que, em casos de colaboração em equipe ou migração de sites no futuro, a falta de registros claros das alterações pode causar grandes problemas.

Os subtemas resolvem esse problema através de um mecanismo de “sobreposição” (ou “substituição”). Quando o WordPress renderiza uma página, ele procura primeiro pelo arquivo de template correspondente no diretório do subtema. Se for encontrado, a versão do subtema é utilizada; caso contrário, o sistema recorre automaticamente à versão do tema pai. Esse mecanismo permite que você modifique apenas as partes que precisam ser alteradas, enquanto o resto continua a receber atualizações e manutenção do tema pai.

Leitura recomendada Guia de Iniciação para o Desenvolvimento de Temas WordPress: Construa o Seu Primeiro Tema do Zero。

Além disso, o uso de subtemas é uma prática recomendada pelo próprio WordPress, pois ajuda a manter o código organizado e fácil de manter, sendo um sinal de desenvolvimento profissional.

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

A estrutura básica para criar um subtópico é a seguinte:

Criar um subtópico é muito simples; são necessárias apenas duas arquivos básicas: um arquivo de estilo e um arquivo de funções. Primeiro, você precisa… /wp-content/themes/ Crie uma nova pasta no diretório, geralmente chamada “Nome_do_Tema_Pai-filho”, por exemplo: twentytwentyfour-child。

Criar o arquivo do estilo principal (style sheet).

O núcleo de um subtópico é o seu arquivo de estilo (style sheet). style.cssEste arquivo não contém apenas regras CSS; o mais importante são as anotações no cabeçalho do arquivo, que servem para informar ao WordPress que se trata de um subtema e qual é o seu tema pai.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 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:  twentytwentyfour-child
*/

Dentre eles,Template: Esta linha é de extrema importância; seu valor deve ser exatamente o mesmo que o nome do diretório do tema pai, levando em conta a distinção entre maiúsculas e minúsculas. É com base nisso que o WordPress reconhece a relação entre temas pai e filho.

Introduzir o estilo do arquivo de temas pai

Apenas com os arquivos mencionados acima, o subtema ainda não consegue carregar os estilos do tema pai. Você precisa modificar o arquivo de funções do subtema. functions.php Use isto no chinês (simplificado) wp_enqueue_scripts Um “gancho” (hook) é usado para organizar a sequência de carregamento dos arquivos de estilo do tema pai.

Leitura recomendada Como criar um site profissional essencial: um guia completo para o desenvolvimento e a personalização de temas do WordPress。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_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')
    );
}
?>

get_template_directory_uri() A função obtém o URL do diretório do tópico pai. get_stylesheet_directory_uri() Obtenha o URL do diretório do tópico (subtópico) ativo atual. Isso é feito através de um array de dependências. array( 'parent-style' ) Assegure-se de que o estilo do subtema seja carregado após o estilo do tema pai, para que suas regras CSS personalizadas possam substituir corretamente o estilo do tema pai.

Funcionalidades para a expansão de subtemas

Após criar a estrutura básica, você pode… functions.php O arquivo permite a expansão ilimitada das funcionalidades do site. O código contido neste arquivo será executado antes do código do tema pai. functions.php A execução do arquivo oferece uma excelente oportunidade para modificar as funções principais do sistema.

Funcionalidades personalizadas para o site

Por exemplo, você pode querer adicionar um novo tipo de artigo personalizado ao seu site, chamado “Projeto”. Isso pode ser feito dentro de um subtema (subtopic). functions.php Registre-o no arquivo.

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

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

Ao mesmo tempo, você também pode remover algumas funcionalidades desnecessárias do tema pai. Por exemplo, se o tema pai adicionou um widget de rodapé que você não deseja, você pode usar… remove_action() Vamos desativá-lo. Suponhamos que o tópico pai esteja… init Usado no gancho. parent_theme_footer_widgets A função adicionou um pequeno utilitário; você pode removê-lo da seguinte maneira:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Atenção, o seguinte texto está sendo utilizado aqui: after_setup_theme O gancho (hook) foi configurado com uma prioridade um pouco maior (por exemplo, 15) para garantir que o código do tópico pai tenha sido executado antes. add_actionDessa forma, o nosso… remove_action Só então poderá entrar em vigor.

Substituir o arquivo de modelo do tema pai.

Uma das funcionalidades mais poderosas dos subtemas é a capacidade de substituir os arquivos de modelo do tema pai. Se você quiser modificar a forma como um artigo é exibido em uma única página, basta alterar os arquivos de modelo que estão no tema pai. single.php Copie o conteúdo para o diretório dos seus subtemas e, em seguida, edite-o. O WordPress utilizará automaticamente a sua versão do conteúdo.

Leitura recomendada Desbloquear o potencial: Explorando as tecnologias centrais e as melhores práticas para criar temas avançados para o WordPress。

Para um controle mais detalhado, você pode até mesmo substituir as partes do modelo (Template Parts) ou blocos de modelo específicos. Por exemplo, para modificar a exibição dos metadados de um artigo, basta copiar e editar o código correspondente no tema pai. template-parts/content-post-meta.php O arquivo deve ser colocado no mesmo caminho do subtópico.

Técnicas avançadas para o desenvolvimento de subtemas

Quando o desenvolvimento de subtemas entra em uma fase mais avançada, você terá que lidar com tópicos mais complexos, como localização, herança de opções do tema e atualizações dos próprios subtemas.

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

Implementar a tradução localizada de textos.

Para que o seu subtópico suporte vários idiomas, você precisa configurar corretamente o domínio de texto (Text Domain) e utilizar as funções de tradução. style.css A parte superior (cabeça) e… functions.php A primeira etapa é carregar o campo de texto.

Nos functions.php No entanto, na China, é usado load_child_theme_textdomain Função:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Depois disso, use algo como isso nas partes da string que precisam ser traduzidas. esc_html__( 'Your Text', 'twentytwentyfour-child' ) Essa é a forma de encapsular uma função. Em seguida, você pode usar ferramentas como o Poedit para gerá-la. .po e .mo Traduza o arquivo e armazene-o em um subtópico. /languages/ Catálogo.

Modificar funções centrais de forma segura

Às vezes, você precisa modificar uma função complexa em um tema pai, e essa função não oferece flexibilidade suficiente através de ganchos (hooks). Se essa função for “conectável” (pluggable), ou seja, se for possível utilizá-la de forma independente do contexto em que está inserida… if ( ! function_exists( ... ) ) Então, você pode fazer isso no subtópico. functions.php Você pode redeclarar a função diretamente nesse contexto, substituindo completamente sua definição anterior.

Antes de tentar esta operação, verifique com cuidado a maneira como as funções estão definidas no tópico pai. Se elas não forem de tipo “plugável” (ou seja, não puderem ser reutilizadas em outros contextos), tentar redeclará-las à força pode causar erros fatais no sistema. Nesse caso, uma abordagem mais segura é entrar em contato com o desenvolvedor do tópico ou procurar outros mecanismos de filtragem (hookes) para atender às suas necessidades.

resumos

Criar um subtema para o WordPress é uma habilidade essencial que todos os profissionais devem dominar. Isso estabelece um processo de personalização seguro e sustentável, separando claramente o seu código personalizado do código principal do tema. Comece criando um arquivo que contém as informações de cabeçalho (headers) corretas… style.css e que carrega os estilos functions.php Desde o início, passando pela substituição dos arquivos de template, pela expansão de funcionalidades, até o processamento de conteúdos localizados e pela implementação de personalizações avançadas, cada etapa segue as melhores práticas do WordPress. Manter sempre o uso de subtemas (sub-templates) é a base sólida para garantir que o seu site acompanhe as atualizações do WordPress nos próximos anos, mantendo ao mesmo tempo uma aparência e funcionalidades únicas.

Perguntas frequentes Perguntas frequentes

Quais são os requisitos para o nome da pasta do subtópico?

Não há restrições estritas para o nome da pasta do subtópico, mas, para maior clareza, geralmente se recomenda o uso do formato “nome-do-tópico-pai-subtópico”, por exemplo: astra-childO ponto-chave é… style.css No cabeçalho do arquivo… Template: O valor desse campo deve ser exatamente o mesmo que o nome da pasta do tópico pai, incluindo a maiúscula e a minúscula. Caso contrário, o WordPress não conseguirá estabelecer corretamente a relação entre o tópico filho e o tópico pai.

Todos os tópicos pai suportam a criação de subtópicos?

A grande maioria dos temas modernos e que seguem os padrões de codificação do WordPress suporta completamente os subtemas. Teoricamente, qualquer tema pode ser usado como um tema pai. No entanto, alguns temas mal projetados ou muito antigos podem ter problemas com o funcionamento dos subtemas devido ao uso de caminhos absolutos para referenciar recursos ou à falta de arquivos de modelo necessários. Ao escolher um tema pai, é aconselhável verificar sua documentação ou as avaliações dos usuários.

Como migrar um tópico pai que foi modificado diretamente para um tópico filho?

Primeiramente, no seu ambiente local ou de teste, crie um novo subtema com base no tema pai original, sem fazer nenhuma alteração nele. Em seguida, compare, um por um, as diferenças entre os arquivos do tema pai que você modificou anteriormente e os arquivos originais. Migre esses códigos modificados (que podem ser CSS, PHP ou HTML) de forma organizada para os arquivos correspondentes do subtema: o código CSS deve ser colocado no subtema. style.cssColoque o código da função aí. functions.phpOs arquivos de modelo modificados são copiados para o diretório do subtópico e, em seguida, as alterações são feitas neles. É um processo detalhado, mas que resolve o problema de uma vez por todas.

Os subtemas afetam a velocidade do site?

A criação correta de subtemas tem um impacto insignificante na velocidade do site. Os arquivos CSS e JS adicionais, geralmente, são de tamanho reduzido, e com um carregamento sequenciado e organizado, eles podem ser combinados e armazenados em cache de forma eficiente. O principal custo associado aos subtemas pode vir de… functions.php A lógica PHP complexa adicionada pode afetar o desempenho do sistema. Portanto, é importante manter o código dos subtemas simplificado e eficiente, seguindo os mesmos princípios adotados no desenvolvimento do tema pai. O uso adequado de técnicas de cache pode ajudar a compensar quaisquer impactos negativos no desempenho.