Como criar um tema infantil para WordPress (2021)

Você sabe como fazer um tema infantil do WordPress ?

Claro, seu tema parecerá adequado para seu site, mas em alguns pontos, você precisará editá-los. Fazer alterações no tema filho é uma escolha 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 de criação de um tema filho do WordPress.

Por que você deve usar temas infantis 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 pai. Isso reduzirá o tempo e o esforço de edição do site para você. Além disso, as atualizações do tema do WordPress ficam 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 este tema filho em outros sites WordPress.

Avisos antes de criar um tema filho

Para fazer um tema infantil em WordPress , é necessário ter habilidade de codificação, já que você trabalhará com HTML e CSS. Saber o que mudar é muito 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: um é movido para o campo de teste e o outro é usado como tema de desenvolvimento.

Mais uma coisa, o tema pai deve ajustar a aparência e as funcionalidades aos seus objetivos. Na verdade, quanto menos alterações você fizer, melhor seu site se tornará.

Nas partes abaixo, usaremos o tema LearnPress como um exemplo para uma ilustração melhor do tema criar filho do WordPress .

Construindo o Tema da Primeira Criança

Você tem 2 opções ao criar temas infantis em WordPress. Você pode usar a forma 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 código

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

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

 1 Theme Name: WPB 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 esse 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ê vai fazer um arquivo de 2 ^nd para importar as folhas de estilo do tema pai. Faça 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()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Quando você usa LearnPress como o tema pai, este código começa a funcionar. Portanto, 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 Plugins

Sugerimos que você use o plug-in Configurador de tema infantil. 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 do plugin, clique aqui.

Ao ativar, você vai para “Ferramentas” -> “Temas infantis” e escolhe LearnPress no pop-up de pergunta do tema pai. 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 do tema filho”. Em seguida, você preencherá as informações do tema infantil.

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 Infantil. Por fim, escolha “Criar Novo Tema Criança” para finalizar. Nesta etapa, seu tema filho terá functions.php e style.css para desenvolvimentos futuros. Aparentemente, lembre-se de visualizar o plugin do seu filho. Depois disso, você seleciona “Ativar e publicar” para publicar seu tema filho.

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

Personalização do tema infantil do WordPress

Criaremos o 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 Inspector do Chrome e 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.

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

Haverá uma mudança temporária de cor nas costas. 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 reiniciá-lo para qualquer elemento na folha de estilo do tema. Bem, fornecemos 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 theme'style.css pai e colá-lo no tema filho e personalizá-lo.

Por exemplo, o código para a 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. Mova 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 grande grupo de variáveis ​​de cores 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 os antigos pelos novos escolhidos para sua tendência de cor. Em seguida, as cores serão divididas com base nos esquemas de cores planejados. Este processo tornará seus esquemas de cores consistentes e rapidamente editados.

Personalizando os arquivos de modelo

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

Para personalizar um modelo, encontre 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.

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 “Orgulhosamente desenvolvido com WordPress” no rodapé e adicionar um aviso de direitos autorais. Para começar, exclua tudo entre 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 que encontrar 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 tema infantil 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 funcionar.

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ê deve usar um tema filho para adicionar os trechos de código. Bem, vamos passar para o processo de adição de widgets. Adicione o fragmento 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 encontrar qualquer problema ao criar um tema infantil a qualquer momento. Portanto, você não deve desistir facilmente.

Os problemas de sintaxe podem ser causados ​​por alguma falta no processo de codificação. Além disso, é o erro mais comum 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 Infantil WordPress: Conclusão

Esperamos que você possa adquirir conhecimento sobre como criar um tema infantil por meio de nosso artigo. Obrigado por suas leituras!

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