Criar tema filho no WordPress Tutorial passo a passo

Neste post, você aprenderá como criar um tema filho no WordPress passo a passo, Todos os conceitos básicos de Temas filhos do WordPress.

Você aprenderá como importar estilos CSS do tema pai, como substituir os estilos do tema pai e por que você deve criar temas filhos do WordPress.

Para saber por que os temas filhos do WordPress são importantes, você deve ler nosso Guia para Iniciantes de Desenvolvimento de Temas Pais e Filhos do WordPress

O que você pode fazer com os temas filhos do WordPress?

Com os temas filhos do WordPress, você pode personalizar facilmente seu tema WordPress ativo padrão. Você não precisa saber HTML, CSS, PHP ou JavaScript avançados para criar temas filhos.

Conhecimento básico ou bom de HTML, CSS e PHP pode ser muito útil.

Leitura adicional: Como escolher um tema WordPress gratuito ou premium perfeito

Você pode usar um tema filho do WordPress para modificar seu site com CSS, adicionar novas áreas de widget, menus de navegação adicionais, editar arquivos personalizados para criar novas páginas com estilo personalizado.

Com temas filhos, você também pode reordenar os elementos do site, adicionar novos conteúdos/elementos e alterar qualquer funcionalidade.

Por que você deve criar um tema filho do WordPress

A razão pela qual os temas filho existem é que você pode personalizar um tema “pai” (seu existente/ativo) sem perder suas alterações e modificações ao atualizar o tema pai.

Por exemplo, se você modificou diretamente o arquivo single.php, suas personalizações funcionariam bem no início.

No entanto, quando você atualizar seu tema para uma versão mais recente do seu tema modificado, você perderá todas as suas alterações e não haverá como restaurar sua personalização.

O que você precisa

Você pode criar um tema filho rapidamente e carregá-lo em seu servidor, mas é recomendável instalar o WordPress localmente em seu PC.

Com a instalação local do WordPress, você pode criar e testar rapidamente seu tema, você não precisa de uma conexão com a internet o tempo todo.

Com o site WordPress local, você pode cometer erros sem afetar seu site ao vivo e é muito mais rápido e melhor.

Existem muitas maneiras de instalar o WordPress localmente no Windows, MAC ou Linux. Leia este tutorial para saber como instalar o WordPress no PC local com a pilha Bitnami WordPress.

Já publicamos tutorial passo a passo para iniciantes.

Como instalar o WordPress no servidor WAMP no Windows 8

Como instalar o WordPress no Windows 8 usando o Bitnami Stack

como criar tema filho no guia passo a passo do WordPress?

Para cada tema filho no WordPress, são necessários dois arquivos.

• funções.php
• estilo.css

No arquivo style.css, podemos adicionar informações sobre nosso tema filho, por exemplo, nome do tema, descrição do tema, nome do autor, detalhes do tema pai, tags etc.

Também precisamos de um arquivo functions.php para registrar a folha de estilo do tema pai e filho. Com o arquivo functions.php também podemos adicionar novas funções, cadastrar novos menus de navegação, áreas de widgets etc.

Então, vamos começar a criar seu primeiro tema filho. Neste tema filho, não adicionaremos novas áreas de widgets, menus de navegação, etc. Usaremos nosso tema filho para fazer algumas alterações simples de CSS, substituiremos os estilos CSS padrão.

Você pode usar qualquer tema do WordPress como tema pai, para este tutorial, vou criar um tema filho para o tema TwentySixteen.

Crie uma nova pasta e salve-a como vinte e dezesseis filhos ou você pode nomeá-la como quiser, por exemplo, design.

Crie dois novos arquivos e salve-os como arquivo functions.php e style.css em nossa pasta de tema filho. O nome da pasta do meu tema filho é designbomb.

Agora adicione as seguintes informações no arquivo style.css do seu tema filho e salve seu arquivo.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Agora faça login no seu painel do WordPress. Vá para Aparência > Temas > Adicionar Novo e carregue este novo tema filho. Você verá um novo tema sem nenhuma captura de tela. Passe o mouse sobre o tema e clique no botão Detalhes do tema.

Você verá os seguintes detalhes para seu novo tema filho.

Na captura de tela acima, você pode ver todas as informações básicas sobre o nosso tema filho. Nome do nosso tema filho, quem é o autor deste tema, descrição do tema filho e você também pode ver Este é um tema filho do Twenty Sixteen. mensagem.

Nós adicionamos Modelo: vinte e dezesseis no arquivo style.css do nosso tema filho. Esta linha está dizendo ao WordPress que vinte dezesseis é o tema pai.

Se você estiver usando qualquer outro tema, substitua TwentySixteen pelo nome do tema pai.

Agora ative seu novo tema filho e recarregue sua página inicial. Você deve ver todo o conteúdo sem qualquer estilo. Não se preocupe, isso é normal. Isso ocorre porque não incluímos o arquivo style.css do nosso tema pai e filho

Após ativar o novo tema filho Vá em Appearance > Editor e selecione o arquivo functions.php (Theme Functions), adicione o seguinte código no arquivo functions.php e clique no botão Update file para salvar suas alterações.

 <?php function theme_enqueue_styles() { $parent_; 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 ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Agora visite o front-end do seu site WordPress e recarregue sua página, você deve ver o site normal com todos os estilos TwentySixteen.

Modificando estilos existentes

Isso significa que nosso tema filho está pronto, é hora de personalizar nosso tema pai com novos estilos CSS. Agora, em Aparência > Editor, selecione o arquivo style.css. Vamos adicionar alguns novos estilos.

Adicione o seguinte estilo no arquivo style.css do seu tema filho e salve seu arquivo.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

recarregue o front-end do seu site e abra qualquer página. Modificamos os estilos padrão para o item de menu atual. Veja a captura de tela abaixo.

Para o item de menu atual, adicionei uma nova cor de fundo, raio de borda, cor e sombra de caixa. Foi muito simples e fácil alterar os estilos com as ferramentas do Chrome Dev.

Isso é tudo

Agora você sabe como criar um tema filho. Não era tão simples e fácil. Com os temas filhos do WordPress, você pode personalizar quase todos os arquivos do seu tema pai, mas não é recomendável modificar todos os arquivos do seu tema pai.

Sempre use temas filhos para adicionar funções, recursos ou páginas personalizadas necessárias.

Baixe o tema filho Designs