Tutorial sobre como criar um tema infantil em WordPress

Muitos de nós desejam personalizar algo no tema. Você também deseja adicionar ou editar algo no tema que está usando? Se sim, então você veio ao lugar certo, meu amigo. Esta postagem é um tutorial simples e abrangente sobre a criação de um tema filho do WordPress.

Se o tema tiver muitas opções de personalização, isso pode ajudar a atender às suas necessidades. Mas, independentemente de quantas opções estejam disponíveis, ainda pode haver algo que o tema atual que você tem não é capaz de fazer ou não é do jeito que você gosta. Então, se você está confortável com códigos e WordPress, então você pode mergulhar nos arquivos do tema e começar a editá-los, gastando alguns minutos, horas para adicionar as mudanças que você gosta no tema, apenas para descobrir que você perdeu essas mudanças na próxima vez atualização rola ao redor.

Então, para evitar isso, vem nosso herói chamado Tema Infantil . Criar um tema filho permite que você faça alterações em seu site sem alterar nada no código do tema original. Mesmo se você estiver fazendo apenas alguns pequenos ajustes, vale a pena gastar alguns minutos criando um tema filho.

Observação : para fazer alterações simples de CSS em seu site, você pode usar a caixa CSS adicional adicionada ao WordPress 4.7 em vez de criar um tema filho. Essas alterações feitas por meio da caixa CSS adicional ainda permanecerão lá, mesmo se você atualizar o tema. Mas se você estiver procurando por outras mudanças adicionais, como edição de arquivos PHP, um tema filho deve ser criado.

Então, eu acho que isso cobrirá o tópico ' Por que criar um tema filho?' pergunta. Portanto, vamos seguir em frente e criar um tema filho.

Como criar um tema infantil para WordPress?

Neste tutorial, vamos mostrar como criar um tema filho para nosso próprio tema popular, Spacious .

Passo um:

Crie uma nova pasta em seu diretório de temas. Você pode fazer isso usando o cPanel ou via FTP. O diretório de temas é wp-content / themes. Então, vamos nomear a pasta como criança espaçosa. Você pode nomeá-la como quiser, mas lembre-se de que não deve haver nenhum espaço no nome da pasta. É uma abordagem comum nomear o tema filho como o tema pai mais -child adicionado no final.

Passo dois:

Dentro da pasta spacious-child, crie um arquivo chamado style.css e preencha as informações conforme mostrado abaixo.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

Adicione isso e salve o arquivo.

Pontos a serem lembrados :

• O nome do modelo (neste caso, espaçoso) deve corresponder ao nome da pasta do tema pai e também se certificar de que não haja nenhum espaço em branco após o nome.
• Outros detalhes podem ser adicionados ou alterados conforme desejar.

Passo três:

Crie um arquivo chamado functions.php conforme você criou 'style.css' na Etapa Dois. E preencha as informações conforme mostrado abaixo.

<?php
/**
 * Child theme functions file.
 */
function spacious_child_enqueue_styles() {
	// Parent theme style handle 'spacious_style'.
	$parent_;

	// Enqueue parent and child theme style.css.
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

Na criação de um tema filho, os arquivos style.css e functions.php são obrigatórios, enquanto os arquivos de modelo e outros arquivos são opcionais e podem ser criados se necessário.

Por último , para ativar o tema filho, no painel, vá para Aparência-> Temas. Procure o tema filho que você criou e ative-o. É isso. Além disso, certifique-se de que o tema pai também esteja presente nos temas instalados para que o tema filho funcione. Se você agora visitar o seu site, ele deve ter a mesma aparência de quando o tema pai foi ativado. No entanto, pode ser necessário redefinir algumas das configurações no Customizador.

Modificando o CSS do seu tema

Se você deseja modificar o CSS do tema, pode adicionar CSS no final do arquivo style.css e salvá-lo. Essas linhas CSS sobrescreverão o CSS do tema pai.

Por exemplo, digamos que queremos alterar o tamanho da fonte do título do site para o tema espaçoso do valor padrão de 36px para 42px e também alterar sua cor do padrão #444444 para azul ( #0000FF ). Então você pode simplesmente adicionar as linhas CSS abaixo.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
	color: #0000FF;
	font-size: 42px;
}

Fazendo mais mudanças

Editando outros arquivos de tema
Você também pode fazer alterações estruturais nos arquivos de tema ajustando os arquivos de modelo. Digamos que você deseja algumas alterações ou deseja adicionar algum código extra no cabeçalho. Então você pode copiar o arquivo header.php do tema pai, colar dentro do tema filho e fazer / adicionar alterações lá e salvar o arquivo. Este arquivo header.php será carregado em vez do arquivo header.php do tema pai.

Empacotando

Esperançosamente, agora você pode criar um tema filho e fazer a personalização que desejar. Quer dizer alguma coisa? Adicione nos comentários e eu entrarei em contato com você. Aproveitar!