Como criar um tema filho do WordPress (2021)

Publicados: 2021-10-21

Você sabe fazer um tema filho do WordPress ?

Claro, seu tema parecerá adequado para o seu site, mas em alguns pontos, você precisará editá-los. Fazer alterações no tema filho é uma opção preferível para editar seu site. Além disso, aprender sobre o tema filho é uma das coisas básicas do WordPress que você deve saber. Você pode começar a aprender sobre o WordPress aqui.

Vamos passar pelo processo para criar um tema filho do WordPress.

Índice

Por que você deve usar temas filhos para WordPress?

No WordPress, um tema filho adquire todos os recursos, funcionalidades e outros do tema pai. Por outro lado, é possível editar o tema filho sem alterar o tema pai. Isso reduzirá o tempo e o esforço de editar o site para você. Além disso, as atualizações do seu tema WordPress permanecem mais seguras e estáveis. Quando você personaliza o filho, todas as alterações e personalizações no pai permanecerão as mesmas. Os usuários também podem usar esse tema filho em outros sites do WordPress.

Avisos antes de criar um tema filho

Para fazer um tema filho WordPress , é necessária habilidade de codificação, pois você trabalhará com HTML e CSS. Saber o que mudar é significativamente importante. Além disso, você precisará de um conhecimento básico de PHP, pelo menos copiando/colando os trechos de código de outras fontes.

Aconselhamos sinceramente que você pratique no ambiente de desenvolvimento. Este é um lugar onde você pode fazer isso sem ter medo de bagunçar seu site principal. É como se você matasse 2 coelhos com uma cajadada só: um está movendo-o para o campo de testes e o outro é usado como desenvolvimento do tema.

Mais uma coisa, o tema pai deve ajustar a aparência e as funcionalidades aos seus propósitos. De fato, quanto menos alterações você fizer, melhor será o seu site.

Nas partes abaixo, usaremos o tema LearnPress como exemplo para uma melhor ilustração do tema WordPress create child .

Construindo o primeiro tema filho

Você tem 2 opções ao criar temas filhos no WordPress. Você pode usar a maneira manual para se familiarizar com todos os arquivos. Caso contrário, a aplicação de um plug-in funcionará com arquivos e pastas complicados.

Agora vamos começar a customização.

Usando o código

Para começar, você abrirá /wp-content/themes/ na instalação do WordPress e criará uma nova pasta para o seu tema filho. Nomeie como quiser.

Leia mais: Como criar um site para pequenas empresas com o WordPress

Em seguida, você deve criar os primeiros 2 arquivos para o seu tema filho. Abra um editor de texto e cole o código abaixo no documento vazio:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Você pode alterar as informações conforme planeja e salvar este arquivo em seu arquivo style.css na pasta do tema filho recente. Bem, você acabou de criar a folha de estilo principal do tema filho.

Em seguida, você criará um ^segundo arquivo para importar as folhas de estilo do tema pai. Crie um novo documento em seu editor de texto e copie este código:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()-&gt;get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Quando você usa o LearnPress como tema pai, esse código começará a funcionar. Assim, a maioria dos temas funcionará assim. Salve este arquivo e ele se tornará a pasta functions.php do seu tema filho.

Após essas etapas, você terá um tema filho básico. Em “Aparência”, escolha “Temas” e “Ativar”. Portanto, seu site começará a usar o tema filho. Se você precisar personalizar, vá para a próxima parte.

Usando plug-ins

Sugerimos que você use o plug-in Child Theme Configurator. Como não requer codificação, você pode facilmente fazer alterações e personalizações.

Primeiro, instale o plugin em seu site. Para obter mais guias sobre a instalação de plugins, clique aqui.

Ao ativar, você vai em “Ferramentas” -> “Temas Filhos” e escolhe LearnPress no tema pai pedindo pop-up. Escolha “Analisar” para verificar a compatibilidade para ser um tema pai. Em seguida, você terá que nomear a pasta do tema filho para salvar os arquivos e onde salvá-los. Na configuração padrão, escolha “Clique para editar atributos de tema filho”. Então você preencherá as informações do tema filho.

Ao criar um tema filho manualmente, seu tema filho não herdará menus e ferramentas do tema pai. Para resolvê-lo, use o Configurador de Tema Filho. Por fim, escolha “Create New Theme Child” para finalizar. Nesta etapa, seu tema filho terá o functions.php e style.css para desenvolvimentos posteriores. Aparentemente, lembre-se de visualizar seu plugin filho. Depois, você seleciona “Ativar e publicar” para publicar seu tema filho.

Agora, vamos começar a personalizar seu tema filho.

Personalização do tema filho do WordPress

Vamos criar um tema filho WordPress um pouco diferente do tema pai, adicionando código ao arquivo “style.css”.

Copie o código do Firefox/Chrome Inspector

Você pode usar os widgets do Inspetor do Chrome e do Firefox para descobrir o código CSS necessário. Além disso, você pode usar essas ferramentas para acessar os elementos CSS e HTML de todos os sites.

Leia mais: Guias para escanear temas do WordPress Malware e código malicioso

Para ver um arquivo CSS de um post ou site, clique com o botão direito do mouse e escolha “Inspecionar”. Sua tela será dividida em duas metades e você poderá ver o CSS e o HTML da página. Quando você move o mouse sobre as linhas HTML, a ferramenta inspetora mostrará na janela superior. Também faz as regras CSS.

Haverá uma mudança temporária de cor na parte de trás. Para torná-lo permanente, copie esta linha de regra CSS e cole no arquivo style.css do tema filho:

 1 body { 2 background-color: #fdf8ef; 3 )

Salve as alterações e visualize o site. Além disso, você pode relançar isso para qualquer elemento na folha de estilo do tema. Bem, nós lhe damos uma folha de estilo completa para um tema filho aqui:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Copie o código do arquivo style.css do tema pai

Como você pode ver, é possível copiar do arquivo pai theme'style.css e colá-lo no tema filho e personalizar.

Por exemplo, o código da cor de fundo da página é:

 1 background-color: var(--global--color-background);

'–global–color-background' é uma variável usada nos vários lugares do tema. Você terá que alterar o valor da variável se precisar alterar a cor nesses locais ao mesmo tempo. Vá para /wp-content/themes/learnpress na pasta de instalação do WordPress e abra o arquivo style.css no editor de texto para procurar o local do –global–color-background. Essa variável pode ser alterada com outra variável. Você pode encontrar um monte de variáveis de cor no arquivo style.css do tema pai. Depois de selecionar as opções de cores adequadas, você copia e cola essa linha de código no arquivo style.css do tema filho e substitui as antigas pelas novas escolhidas para sua tendência de cores. Em seguida, as cores serão divididas com base nos esquemas de cores planejados. Esse processo tornará seus esquemas de cores consistentes e rapidamente editados.

Personalizando os arquivos de modelo

Em um tema, as áreas de manipulação de arquivos em um site são chamadas de modelos. Os templates geralmente são nomeados de acordo com a seção que eles tratam. Assim, algumas seções importantes são gerenciadas por vários arquivos ou modelos de conteúdo.

Para personalizar um modelo, localize esse arquivo no tema pai e copie-o para o tema filho. Em seguida, abra-o no editor de texto e comece a modificá-lo.

Leia mais: Top 8 plugins de mídia social incríveis para WordPress

Mostraremos um tutorial para este processo com o arquivo footer.php. Copie-o para a pasta do tema filho e abra-o em um editor de texto simples. Por exemplo, vamos excluir o link “Proudly powered by WordPress” no rodapé e adicionar um aviso de direitos autorais. Para começar, exclua todas as tags <div class="powered-by">.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Em seguida, você colará o código encontrado abaixo dessas tags no exemplo abaixo.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Escolha “Salvar alterações” e quando você voltar ao site, verá o novo aviso de direitos autorais.

Adicionando funcionalidades ao seu tema filho do WordPress

Para alterar ou adicionar uma função ao seu site, você terá que procurar pelo arquivo functions.php. Este arquivo usa código PHP para fazer este processo ser executado.

Normalmente, você é orientado a copiar e colar trechos de código no arquivo function.php, mas eles serão excluídos quando você atualizar o PHP ou seu tema. Portanto, sugerimos que você use um tema filho para adicionar os trechos de código. Bem, vamos para o processo de adição de widgets. Adicione o trecho de código ao arquivo functions.php do tema filho.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Salve e navegue até “Aparência” -> “Widgets” para ver a nova ferramenta. Além disso, você pode procurar mais informações sobre como adicionar uma área de função. Você pode adicionar muitos recursos adicionando trechos de código ao arquivo functions.php do seu site.

Isso é tudo sobre como criar um tema filho no WordPress . Vamos passar para a parte do erro de correção.

Corrigindo erros

Você pode enfrentar qualquer problema ao criar um tema filho a qualquer momento. Portanto, você não deve desistir facilmente.

Problemas de sintaxe podem ser causados por alguma falta no processo de codificação. Além disso, é o erro mais popular que todos os usuários podem encontrar. Além disso, se as coisas não derem certo, você sempre pode excluí-lo e começar de novo.

Como criar um tema filho do WordPress: Conclusão

Esperamos que você possa adquirir conhecimento sobre como criar um tema infantil através do nosso artigo. Obrigado por suas leituras!

Leia mais: Como corrigir o erro HTTP 500 WordPress (2021)