Começando com os Temas Filhos do WordPress?

Neste tutorial, você aprenderá como criar um tema filho do WordPress. Se você é novo no WordPress e não sabe o que é um tema filho do WordPress, explicarei tudo.

Os temas do WordPress são uma coleção de arquivos PHP, JavaScript e CSS. Em palavras simples, com os temas do WordPress, você pode alterar a aparência do seu blog. Os temas do WordPress podem ser muito poderosos.

Os temas premium do WordPress oferecem muitos recursos e funcionalidades avançadas. Milhares de temas gratuitos e premium do WordPress estão disponíveis.

Você pode criar um tema WordPress do zero ou pode criar um tema WordPress baseado em outro tema. Cada versão do WordPress vem com temas WordPress pré-instalados e, se você não gostar do tema WordPress pré-instalado, poderá instalar outro tema WordPress ou criar um tema filho.

Por que temas filhos do WordPress?

Criar um tema filho do WordPress significa que você pega um tema existente e cria seu próprio tema baseado nele. O tema filho herda a maioria dos recursos do tema original, conhecido como tema pai.

O tema infantil economiza muito trabalho e tempo. Criar um tema WordPress do zero leva muito tempo e, às vezes, conhecimento avançado de HTML, CSS, PHP é necessário. Com temas filhos, você pode fazer muitas modificações.

Se você não estiver satisfeito com a personalização, opções e recursos que o tema do WordPress que você está usando fornece, então você pode criar um tema filho. Mesmo se você quiser fazer uma alteração em seu tema WordPress, você deve criar um tema filho ou usar o plug-in do editor CSS.

Você pode editar seus arquivos de tema WordPress existentes diretamente, mas, quando fizer uma atualização, perderá todas as suas personalizações. É por isso que você precisa de um tema filho.

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

Com os temas filhos do WordPress, você pode adicionar quantos recursos quiser. Você decide. Se você deseja alterar o tamanho da fonte ou a cor dos títulos ou links, pode fazê-lo facilmente com CSS.

Você pode adicionar novos menus de navegação, registrar novas barras laterais, criar páginas personalizadas para produtos ou adicionar suporte para fontes da web personalizadas.

O que você precisará:

Agora você sabe o que é um tema filho do WordPress e por que deve criar temas filhos. É hora de aprender como criar um tema filho do WordPress.

Não é necessário, mas recomendamos configurar uma instalação local do WordPress para fins de desenvolvimento e aprendizado. Com a instalação local do WordPress, você pode testar seus novos plugins e temas de forma rápida e fácil.

Existem muitas maneiras de instalar o WordPress localmente, se você é um usuário MAC, pode usar o MAMP, os usuários do Windows podem usar o instalador WordPress XAMPP, WAMP ou Bitnami.

• Como instalar o WordPress com servidor WAMP
• Como instalar o WordPress com MAMP
• Como instalar o WordPress com Bitnami Stack

Se você é um iniciante absoluto, pode baixar e instalar a pilha Bitnami WordPress para criar um site WordPress totalmente funcional em seu MAC ou PC.

Pessoalmente, prefiro o servidor WAMP para desenvolvimento local. Não é difícil instalar o WordPress no WAMP, você pode ler o tutorial ou assistir a vídeos para aprender como instalar o WordPress usando WAMP, XAMPP ou MAMP.

Você também precisará de um editor de código para editar arquivos de tema. Sublimetext, Brackets, Atom são alguns editores de código populares.

Como criar um tema filho do WordPress?

Assim que seu site WordPress local estiver pronto, podemos começar a criar nosso tema filho. Se você estiver usando o servidor WAMP, vá para o diretório de instalação do WAMP > WWW > WordPress > wp-content > pasta de temas.

Na pasta de temas do WordPress, crie uma nova pasta e nomeie-a twentysixteen-child ou qualquer coisa que você goste, por exemplo, InstantShift. Vamos usar o tema twentysixteen como tema pai. Isso significa que nosso tema filho será baseado no tema TwentySixteen.

Para cada tema filho, precisamos de dois arquivos.

• functions.php
• style.css

Na pasta do tema twentysixteen-child, crie esses dois arquivos. Agora abra seus arquivos no editor de texto, para acesso rápido, você pode arrastar sua pasta de vinte e dezesseis filhos na barra lateral do editor de texto. Abra o arquivo style.css e adicione o seguinte código.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

A marcação acima é necessária para um tema filho. Sem uma folha de estilo com a marcação necessária, o WordPress não será capaz de reconhecer seu tema filho.

Eu acho que você pode entender tudo. Não há nada para explicar. O nome do meu tema filho é InstantShift, mas você pode nomear seu filho como quiser. O mais importante é o Modelo: vinte e dezesseis. Este é o nome do nosso tema pai. Certifique-se de soletrar corretamente.

Se você estiver usando qualquer outro tema como tema pai, simplesmente altere Template: twentysixteen por Template: parent-theme-name.

No cabeçalho da folha de estilo também podemos adicionar mais informações, mas não é obrigatório. Agora faça login no painel do WordPress. Vá para Aparência > Temas. Você deve ver o tema InstantShift sem nenhuma captura de tela, porque não adicionamos nenhuma captura de tela para nosso tema filho.

Passe o mouse sobre o tema InstantShift e clique no botão Detalhes do tema. Aqui está a captura de tela do meu tema filho.

Se você puder ver esta tela, significa que seu tema filho está pronto. Agora podemos começar a personalizar nosso tema. Ative este novo tema e visite o front-end do seu blog. Você verá todo o seu conteúdo sem nenhum estilo.

Não se preocupe. É normal. Não podemos ver nenhum estilo porque não incluímos o arquivo de folha de estilo dos temas pai. vamos garantir que a folha de estilo do nosso tema filho esteja funcionando. No arquivo style.css do seu tema filho, adicione o seguinte código.

body{
     background-color: #E7F5FB;
}

salve seu arquivo style.css, recarregue a página inicial do seu site WordPress local e você verá uma cor de fundo azul clara.

Registrando a folha de estilo do tema pai

Não queremos criar todos os estilos do zero. Vamos apenas adicionar alguns novos estilos com o arquivo style.css do tema filho. Agora vamos adicionar o arquivo stye.css do tema pai em nosso tema filho.

Abra o arquivo functions.php e adicione o seguinte código no arquivo functions.php do tema filho.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Agora, se você recarregar seu site WordPress local, verá o tema normal com todos os estilos TwentySixteen.

Isso é tudo. Você criou com sucesso seu primeiro tema filho. Você também adicionou uma nova cor de fundo para o corpo.

Mas não criamos nosso tema filho para simplesmente mudar o plano de fundo para o corpo. Vamos começar a personalizar nosso tema.

Substituindo estilos de tema pai

Cabeçalho de personalização:

Por padrão, o cabeçalho do tema Twenty Sixteen tem muito preenchimento. Vamos alterar o preenchimento e adicionar a nova cor de fundo para o cabeçalho do site. Adicione o seguinte código no arquivo style.css do seu tema filho, salve seu arquivo e recarregue o front-end do seu site para ver as alterações.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Aqui você pode ver a captura de tela do cabeçalho do site antes e depois de adicionar nossos novos estilos.

Personalizando a Navegação Principal

Agora vamos alterar a cor de fundo dos itens do menu de navegação principal. Gosto de usar as ferramentas de desenvolvedor do Chrome para editar meus estilos CSS.

Depois de editar as páginas da Web com as ferramentas de desenvolvimento do Chrome, você pode copiar o novo código das ferramentas de desenvolvimento do Chrome e colar no arquivo style.css do seu tema filho.

Abra o arquivo style.css do seu tema filho e adicione o seguinte código nele.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Aqui você pode ver a captura de tela do nosso novo cabeçalho. Personalizamos muito facilmente nosso tema com o tema filho.

Palavras Finais

Agora você sabe como pode criar temas filhos do WordPress. É muito simples e fácil. Com o conhecimento básico de HTML e CSS, você pode mudar completamente o design do seu site.

Você também pode adicionar novos menus de navegação, áreas de widgets, suporte para novas fontes We etc com o tema filho. Mas não podemos cobrir tudo em um único artigo.

Se você deseja aprender o desenvolvimento de temas do WordPress, deve começar com os temas filhos do WordPress. Aprenda os fundamentos da personalização do tema.