{"id":3756,"date":"2016-07-14T14:50:12","date_gmt":"2016-07-14T17:50:12","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3756"},"modified":"2018-08-28T10:01:03","modified_gmt":"2018-08-28T13:01:03","slug":"wordpress-criando-e-customizando-temas-filhos-child-themes","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/wordpress-criando-e-customizando-temas-filhos-child-themes\/","title":{"rendered":"WordPress – Criando e customizando Temas Filhos (Child Themes)"},"content":{"rendered":"

O WordPress<\/a> \u00e9 um CMS que fornece infinitas possibilidades de customiza\u00e7\u00e3o, principalmente se voc\u00ea possui conhecimentos em HTML, CSS e PHP. Ap\u00f3s instalar um tema, algumas pessoas come\u00e7am a\u00a0alterar uma s\u00e9rie de coisas no blog ou site, como estilos, fun\u00e7\u00f5es, disposi\u00e7\u00e3o de itens, mas cuidado, voc\u00ea pode estar fazendo isto da forma ERRADA!<\/p>\n

Errado? Mas por qu\u00ea?<\/h2>\n

\"WordPress\"Um dos principais motivos pelo qual n\u00e3o \u00e9 recomendado alterar diretamente os arquivos do tema, envolve a quest\u00e3o do update. Caso seu tema receba alguma atualiza\u00e7\u00e3o, esta atualiza\u00e7\u00e3o pode sobrescrever os arquivos do tema, fazendo com que voc\u00ea perca suas altera\u00e7\u00f5es.<\/p>\n

Ah… mas se eu n\u00e3o atualizar ent\u00e3o fica tudo certo, n\u00e3o \u00e9 mesmo?<\/p><\/blockquote>\n

N\u00e3o exatamente. Manter o seu tema atualizado \u00e9 de vital import\u00e2ncia para a seguran\u00e7a de seu site e update dos novos recursos criados pelo WordPress. Sendo assim, mantenha seu tema atualizado!<\/p>\n

Editando temas com\u00a0Child Themes<\/h2>\n

A melhor forma de se fazer altera\u00e7\u00f5es em um tema no WordPress sem editar diretamente seus arquivos \u00e9 a utiliza\u00e7\u00e3o de Child Themes,<\/strong> que em uma tradu\u00e7\u00e3o livre significa\u00a0<\/strong>Temas Filhos<\/em>. Antes de falar a respeito de Child Themes, temos que falar dos Parent Themes (Temas Pais)<\/em>.<\/p>\n

Parent Themes (Temas Pais)<\/h3>\n

Quando dois temas se amam muito, eles…<\/del>\u00a0Brincadeiras a parte, um tema se torna um tema pai quando \u00e9 criado um tema filho para ele. Caso contr\u00e1rio, ele \u00e9 apenas um tema normal. Qualquer tema que possua todos os arquivos obrigat\u00f3rios para seu funcionamento pode se tornar um Tema Pai.<\/p>\n

Child Themes (Temas Filhos)<\/h3>\n

O WordPress entende o tema filho como um tema normal, o qual \u00e9 exibido normalmente junto com os outros temas na sua dashboard do WordPress e precisa ser ativado.<\/p>\n

Para criar um tema filho, voc\u00ea precisa criar um diret\u00f3rio para ele em\u00a0wp-content\/themes, <\/em>mas isso\u00a0n\u00e3o \u00e9 exatamente uma regra, contudo\u00a0recomenda-se a utiliza\u00e7\u00e3o do sufixo -child para indicar que o tema \u00e9 um filho.<\/p>\n

Exemplo:\u00a0twentyfifteen-child<\/em><\/p>\n

Crie dentro do diret\u00f3rio rec\u00e9m-criado os arquivos style.css<\/em> e functions.php<\/em>.\u00a0No arquivo style.css<\/em>,\u00a0voc\u00ea precisa adicionar um cabe\u00e7alho com as informa\u00e7\u00f5es do tema, similar ao que o tema pai possui:<\/p>\n

\/*\r\n Theme Name:   Twenty Fifteen Child\r\n Theme URI:    http:\/\/example.com\/twenty-fifteen-child\/\r\n Description:  Twenty Fifteen Child Theme\r\n Author:       John Doe\r\n Author URI:   http:\/\/example.com\r\n Template:     twentyfifteen\r\n Version:      1.0.0\r\n License:      GNU General Public License v2 or later\r\n License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\n Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\r\n Text Domain:  twenty-fifteen-child\r\n*\/<\/pre>\n
Notaram algo diferente\u00a0al\u00e9m da adi\u00e7\u00e3o da palavra Child<\/em> no nome e na descri\u00e7\u00e3o do tema?<\/p>\n
Neste cabe\u00e7alho estou informando que o template \u00e9 twentyfifteen<\/em>, ou seja, estou dizendo que este tema \u00e9 um tema filho do tema que est\u00e1 no diret\u00f3rio twentyfifteen.\u00a0<\/em>\u00c9 esta linha que informa ao WordPress que nosso tema \u00e9 um tema filho.<\/p>\n
A partir da\u00ed, todos os arquivos que n\u00e3o forem encontrados no diret\u00f3rio do nosso tema filho, ser\u00e3o carregados herdados do tema pai.<\/p>\n
Caramba! Ficou tudo zoado aqui!<\/p><\/blockquote>\n
Calma a\u00ed! Ainda falta uma coisa importante: Como n\u00f3s criamos um arquivo style.css<\/em> no nosso tema filho, ele passa a ignorar o style.css<\/em> do tema pai. Sendo assim, o CSS do seu tema n\u00e3o carrega.<\/p>\n
Voc\u00ea precisa adicionar esta fun\u00e7\u00e3o ao arquivo functions.php do seu tema filho. Ela adiciona o style.css<\/em> do tema pai ao seu tema filho.<\/p>\n
<?php\r\nadd_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );\r\nfunction theme_enqueue_styles() {\r\n    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\r\n\r\n}<\/pre>\n
M\u00e3os \u00e0 obra!<\/h2>\n
No caso do style.css<\/em>, os estilos do tema filho tem prioridade sobre os estilos do tema pai. Sendo assim, se voc\u00ea adicionar um c\u00f3digo que entre em conflito com um estilo aplicado no tema pai, o que ser\u00e1 aplicado \u00e9 o do tema filho.<\/p>\n
Agora voc\u00ea pode alterar seu tema livremente. Suas altera\u00e7\u00f5es n\u00e3o ficam restritas a apenas aos estilos. Voc\u00ea pode editar qualquer arquivo do tema,\u00a0basta voc\u00ea fazer uma c\u00f3pia do arquivo do tema pai e replic\u00e1-lo no diret\u00f3rio do tema filho.<\/p>\n
Assim, voc\u00ea pode alterar qualquer arquivo do tema. Caso queira retornar para a vers\u00e3o original deste arquivo, basta remov\u00ea-lo do diret\u00f3rio do seu tema filho. Bem melhor, n\u00e3o?<\/p>\n
Mas e o functions.php<\/em>? Porque o estilo n\u00e3o carregou\u00a0e\u00a0as fun\u00e7\u00f5es carregaram normalmente?<\/p><\/blockquote>\n
O arquivo functions.php<\/em>\u00a0do seu tema filho \u00e9 carregado juntamente com o functions.php<\/em> do tema pai, por\u00e9m, diferentemente do que ocorre com os estilos, o functions.php<\/em> do tema pai \u00e9 carregado primeiro.<\/p>\n
Um erro comum \u00e9 replicar o c\u00f3digo do functions.php<\/em> do tema pai no arquivo de mesmo nome no tema filho. N\u00e3o fa\u00e7a isso, “vai dar muito ruim”, pois as fun\u00e7\u00f5es que foram copiadas j\u00e1 est\u00e3o sendo executadas.<\/p>\n
Ent\u00e3o \u00e9 isso \ud83d\ude42<\/p>\n
Neste artigo optei por abordar a cria\u00e7\u00e3o de um child theme<\/em> sem ter que me aprofundar na cria\u00e7\u00e3o e customiza\u00e7\u00e3o de temas.<\/p>\n
Gostou do artigo? Tem alguma d\u00favida? Fez algo bem legal?<\/p>\n
Quer uma s\u00e9rie de artigos sobre como criar um tema para WordPress do zero?<\/p>\n
N\u00e3o deixe de comentar! \ud83d\ude42<\/p>\n
Bons estudos!<\/p>\n","protected":false},"excerpt":{"rendered":"
O WordPress \u00e9 um CMS que fornece infinitas possibilidades de customiza\u00e7\u00e3o, principalmente se voc\u00ea possui conhecimentos em HTML, CSS e PHP. Ap\u00f3s instalar um tema, algumas pessoas come\u00e7am a\u00a0alterar uma s\u00e9rie de coisas no blog ou site, como estilos, fun\u00e7\u00f5es, disposi\u00e7\u00e3o de itens, mas cuidado, voc\u00ea pode estar fazendo isto da forma ERRADA! Errado? Mas […]<\/p>\n","protected":false},"author":25,"featured_media":4052,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"class_list":["post-3756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=3756"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3756\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/4052"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=3756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=3756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=3756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}