{"id":767,"date":"2017-04-19T17:24:02","date_gmt":"2017-04-19T20:24:02","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=767"},"modified":"2022-09-04T12:04:57","modified_gmt":"2022-09-04T15:04:57","slug":"wordpress-tema-filho-basico-ao-avancado","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/","title":{"rendered":"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado"},"content":{"rendered":"<blockquote class=\"wp-block-quote\">Este post faz parte de um conjunto de artigos organizados em um <a href=\"https:\/\/felipeelia.com.br\/curso-de-wordpress\/\">Curso de WordPress<\/a>. Acesse o link para outros conte\u00fados.<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u00cdndice<\/h2>\n\n\n\n<ul>\n<li><a href=\"#o-que-sao-temas-filhos\">O que s\u00e3o temas filhos?<\/a><\/li>\n\n\n\n<li><a href=\"#quando-nao-usar-um-tema-filho-no-wordpress\">Quando N\u00c3O \u00e9 preciso usar um tema filho no WordPress<\/a><\/li>\n\n\n\n<li><a href=\"#criando-seu-tema-filho\">Criando seu tema filho<\/a>\n<ul>\n<li><a href=\"#nao-faca-bagunca\">N\u00e3o fa\u00e7a bagun\u00e7a<\/a><\/li>\n\n\n\n<li><a href=\"#fazendo-do-seu-tema-filho-algo-util\">Fazendo do seu tema filho algo \u00fatil<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#coisas-que-voce-precisa-saber-antes-de-continuar\">Coisas que voc\u00ea precisa saber antes de continuar<\/a>\n<ul>\n<li><a href=\"#o-functions-php-do-tema-filho-e-carregado-primeiro\">O functions.php do tema FILHO \u00e9 carregado PRIMEIRO<\/a><\/li>\n\n\n\n<li><a href=\"#funcoes-do-wordpress-para-tema-pai-e-para-tema-filho\">Fun\u00e7\u00f5es do WordPress para tema pai e para tema filho<\/a><\/li>\n\n\n\n<li><a href=\"#nao-altere-o-codigo-do-tema-pai-mas-entenda-como-ele-funciona\">N\u00e3o altere o c\u00f3digo do tema pai, mas entenda como ele funciona<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#incluindo-arquivos-css\">Incluindo arquivos CSS<\/a>\n<ul>\n<li><a href=\"#adicionando-o-style.css-do-tema-pai\">Adicionando o style.css do tema pai<\/a><\/li>\n\n\n\n<li><a href=\"#incluindo-um-css-no-final-da-fila\">Incluindo um CSS no final da fila<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#temas-filhos-na-vida-real\">Temas filhos na vida real<\/a>\n<ul>\n<li><a href=\"#o-arquivo-x-php-do-meu-tema-filho-nao-sobrescreve-o-do-pai\">O arquivo x.php do meu tema filho n\u00e3o sobrescreve o do pai<\/a><\/li>\n\n\n\n<li><a href=\"#quando-posso-instalar-e-criar-um-tema-filho\">Quando posso instalar e criar um tema filho?<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"o-que-sao-temas-filhos\">O que s\u00e3o temas filhos?<\/h2>\n\n\n\n<p>Um tema filho do WordPress \u00e9 um tema que precisa de outro para funcionar. \u00c9 uma esp\u00e9cie de subtema ou um complemento ao tema pai. Um dos recursos mais bacanas do WordPress, eles permitem que voc\u00ea estenda um tema sem alterar seu c\u00f3digo. Dessa forma voc\u00ea consegue aplicar as personaliza\u00e7\u00f5es necess\u00e1rias para o projeto e continuar atualizando aquele tema que o cliente comprou no ThemeForest.<\/p>\n\n\n\n<p>Outro uso interessante para os temas filhos s\u00e3o em instala\u00e7\u00f5es multisites. Se os sites forem ligeiramente parecidos, voc\u00ea pode desenvolver o tema do primeiro e apenas aplicar altera\u00e7\u00f5es nos demais, facilitando a manuten\u00e7\u00e3o e otimizando o tempo de desenvolvimento.<\/p>\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"quando-nao-usar-um-tema-filho-no-wordpress\">Quando N\u00c3O \u00e9 preciso usar um tema filho no WordPress<\/h2>\n\n\n\n<p>A partir da vers\u00e3o 4.7 n\u00e3o \u00e9 mais preciso usar um tema filho se voc\u00ea s\u00f3 precisa alterar CSS. Para isso basta ir em Personalizar e acrescentar seu c\u00f3digo no campo <strong>CSS adicional<\/strong>. Se voc\u00ea tiver certeza absoluta de que CSS ser\u00e3o as \u00fanicas altera\u00e7\u00f5es necess\u00e1rias, voc\u00ea n\u00e3o precisa de um tema filho. Caso contr\u00e1rio, isto \u00e9, se voc\u00ea acha que existe uma possibilidade, mesmo que remota, que <a href=\"https:\/\/felipeelia.com.br\/como-escolhi-meu-novo-tema-wordpress-o-oceanwp\/\">voc\u00ea precise alterar outra coisa no tema<\/a>, crie desde o come\u00e7o um tema filho e mexa a partir dele.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"criando-seu-tema-filho\">Criando seu tema filho<\/h2>\n\n\n\n<p>Para que seu tema filho seja listado, voc\u00ea s\u00f3 precisa criar uma pasta com qualquer nome e nela colocar um arquivo com nome <code>style.css<\/code> que comece da seguinte forma:<\/p>\n\n\n\n<pre class=\"wp-block-code css\"><code>\/*\n * Template:     twentyseventeen\n *\/<\/code><\/pre>\n\n\n\n<p>Substituindo <code>twentyseventeen<\/code> pelo nome da pasta do seu tema.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"nao-faca-bagunca\">N\u00e3o fa\u00e7a bagun\u00e7a<\/h3>\n\n\n\n<p>Isso \u00e9 s\u00f3 o que voc\u00ea precisa, mas <strong>seja caprichoso<\/strong>. Para o nome da pasta, por exemplo, o ideal \u00e9 usar o mesmo nome do tema pai seguido de <code>-child<\/code>. O cabe\u00e7alho do <code>style.css<\/code> que eu passei a\u00ed em cima tamb\u00e9m \u00e9 s\u00f3 o m\u00ednimo, mas o ideal \u00e9 colocar mais do que isso. No <a href=\"https:\/\/codex.wordpress.org\/pt-br:Temas_Filhos\" target=\"_blank\" rel=\"noopener noreferrer\">codex<\/a> vemos todas as op\u00e7\u00f5es poss\u00edveis:<\/p>\n\n\n\n<pre class=\"wp-block-code css\"><code>\/*\n * Theme Name:   Twenty Fifteen Child\n * Theme URI:    http:\/\/example.com\/twenty-fifteen-child\/\n * Description:  Twenty Fifteen Child Theme\n * Author:       John Doe\n * Author URI:   http:\/\/example.com\n * Template:     twentyfifteen\n * Version:      1.0.0\n * License:      GNU General Public License v2 or later\n * License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\n * Text Domain:  twenty-fifteen-child\n *\/<\/code><\/pre>\n\n\n\n<p>O tema de exemplo l\u00e1 \u00e9 o <code>twentyfifteen<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fazendo-do-seu-tema-filho-algo-util\">Fazendo do seu tema filho algo \u00fatil<\/h3>\n\n\n\n<p>O WordPress tentar\u00e1 carregar o arquivo <code>functions.php<\/code> se seu tema filho tiver um, <strong>al\u00e9m do <code>functions.php<\/code> do tema pai<\/strong>. Al\u00e9m disso, ele tentar\u00e1 usar qualquer arquivo da <a href=\"https:\/\/developer.wordpress.org\/files\/2014\/10\/template-hierarchy.png\" target=\"_blank\" rel=\"noopener noreferrer\">hierarquia de templates<\/a> que seu tema filho possua, ao inv\u00e9s de usar o arquivo do tema pai. Resumindo: se o tema filho possui um <code>archive.php<\/code>, ele usa o do filho, sen\u00e3o pega o do pai mesmo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"coisas-que-voce-precisa-saber-antes-de-continuar\">Coisas que voc\u00ea precisa saber antes de continuar<\/h2>\n\n\n\n<p>Entender como funcionam os hooks no WordPress \u00e9 <strong>essencial<\/strong> para n\u00e3o fazer besteira. Corra l\u00e1 no <a href=\"https:\/\/felipeelia.com.br\/hooks-no-wordpress-actions-e-filters\/\">post que eu fiz sobre isso<\/a>, d\u00ea uma lida e volte. \u00c9 s\u00e9rio, entender como isso funciona vai fazer falta no futuro (vai fazer falta para qualquer coisa que voc\u00ea fa\u00e7a no WordPress).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"o-functions-php-do-tema-filho-e-carregado-primeiro\">O functions.php do tema FILHO \u00e9 carregado PRIMEIRO<\/h3>\n\n\n\n<p><strong>Sim, \u00e9 isso mesmo.<\/strong> Dessa forma, se seu tema pai estiver preparado pra isso, voc\u00ea pode sobrescrever algumas fun\u00e7\u00f5es. Por exemplo, se no tema filho voc\u00ea incluir<\/p>\n\n\n\n<pre class=\"wp-block-code php\"><code>function theme_special_nav() {\n    \/\/  Faz alguma coisa de um jeito mais legal.\n}<\/code><\/pre>\n\n\n\n<p>e no tema pai tiver<\/p>\n\n\n\n<pre class=\"wp-block-code php\"><code>if ( ! function_exists( 'theme_special_nav' ) ) {\n    function theme_special_nav() {\n        \/\/  Faz alguma coisa.\n    }\n}<\/code><\/pre>\n\n\n\n<p>a sua vers\u00e3o ser\u00e1 usada. Sua fun\u00e7\u00e3o \u00e9 definida primeiro, logo o php n\u00e3o entra no <code>if<\/code> do tema pai. Se o carregamento fosse invertido, isto \u00e9, o tema filho depois do tema pai, a execu\u00e7\u00e3o passaria por dentro do <code>if<\/code>, j\u00e1 que a fun\u00e7\u00e3o ainda n\u00e3o existe e, no seu <code>functions.php<\/code>, ela causaria um erro de execu\u00e7\u00e3o (<em>Cannot redeclare nome_da_funcao()<\/em>), por estar duplicada.<br>Repare na necessidade do tema pai usar a fun\u00e7\u00e3o <code>function_exists<\/code>, <strong>se ele n\u00e3o fizer isso voc\u00ea n\u00e3o pode declarar a fun\u00e7\u00e3o<\/strong> no seu <code>functions.php<\/code> ou causar\u00e1 o erro da mesma forma.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mas se o functions.php do tema filho \u00e9 carregado primeiro, como \u00e9 que eu vou colocar minhas coisas para aparecerem depois???<\/h4>\n\n\n\n<p>N\u00e3o leu o <a href=\"https:\/\/felipeelia.com.br\/hooks-no-wordpress-actions-e-filters\/\">post que eu indiquei ali em cima<\/a>, n\u00e9? Atrav\u00e9s do mecanismo de hooks do WP voc\u00ea pode passar por par\u00e2metro a prioridade da sua fun\u00e7\u00e3o: passe uma prioridade mais alta e sua fun\u00e7\u00e3o ser\u00e1 executada depois. Vamos falar mais sobre isso mais para frente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"funcoes-do-wordpress-para-tema-pai-e-para-tema-filho\">Fun\u00e7\u00f5es do WordPress para tema pai e para tema filho<\/h3>\n\n\n\n<p>Em fun\u00e7\u00f5es que se referem a temas, o WordPress segue a conven\u00e7\u00e3o de que <code>template<\/code> aponta para o tema pai e <code>stylesheet<\/code> para o tema filho. Se n\u00e3o houver tema filho os dois apontam para o mesmo lugar.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Tema pai<\/strong><\/th><th><strong>Tema filho<\/strong><\/th><\/tr><\/thead><tbody><tr><td>get_template_directory_uri()<\/td><td>get_stylesheet_directory_uri()<\/td><\/tr><tr><td>get_template_directory_uri() . \u2019\/style.css\u2019<\/td><td>get_stylesheet_uri()<\/td><\/tr><tr><td>get_template_directory()<\/td><td>get_stylesheet_directory()<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>E assim segue. Uma outra fun\u00e7\u00e3o que pode ser \u00fatil \u00e9 a <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_child_theme\/\" target=\"_blank\" rel=\"noopener noreferrer\">is_child_theme()<\/a>.<\/p>\n\n\n\n<p>A fun\u00e7\u00e3o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener noreferrer\">get_template_part<\/a> tentar\u00e1 sempre usar o arquivo do tema filho primeiro. Se ele n\u00e3o existir, o WordPress procura no tema pai.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"nao-altere-o-codigo-do-tema-pai-mas-entenda-como-ele-funciona\">N\u00e3o altere o c\u00f3digo do tema pai, mas entenda como ele funciona<\/h3>\n\n\n\n<p>N\u00e3o \u00e9 porque voc\u00ea n\u00e3o pode alterar o c\u00f3digo que voc\u00ea n\u00e3o deve olhar para ele. N\u00e3o fa\u00e7a do c\u00f3digo uma caixa-preta, mas <strong>entenda como ele funciona e veja como ele inclui as coisas<\/strong>, isso vai ajudar muito a resolver todo o tipo de problema.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"incluindo-arquivos-css\">Incluindo arquivos CSS<\/h2>\n\n\n\n<p>Fazendo o teste com o tema <em>Twenty Seventeen<\/em>, nativo do WordPress, j\u00e1 vemos que precisamos atuar urgentemente: o site fica completamente sem estilo.<\/p>\n\n\n\n<p>A raz\u00e3o disso \u00e9 a forma como o <code>style.css<\/code> do tema \u00e9 inclu\u00eddo. No tema pai, na fun\u00e7\u00e3o associada ao hook <code>wp_enqueue_scripts<\/code>, que tipicamente inclui os arquivos CSS e JS, temos:<\/p>\n\n\n\n<pre class=\"wp-block-code php\"><code>wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );<\/code><\/pre>\n\n\n\n<p>Quando n\u00e3o h\u00e1 tema filho, a fun\u00e7\u00e3o <code>get_stylesheet_uri()<\/code> aponta para o <code>style.css<\/code> do tema ativo, lembra? Ao criarmos e ativarmos um tema filho, a fun\u00e7\u00e3o <code>get_stylesheet_uri()<\/code> passa a apontar para o <code>style.css<\/code> do tema filho e o estilo do tema pai n\u00e3o \u00e9 mais adicionado.<\/p>\n\n\n\n<p>Explicando de outra forma, o <em>Twenty Seventeen<\/em> inclui somente o <code>style.css<\/code> apontado pela fun\u00e7\u00e3o <code>get_stylesheet_uri()<\/code>. Quando n\u00e3o h\u00e1 tema filho esta fun\u00e7\u00e3o aponta para o <code>style.css<\/code> do tema ativo e tudo fica OK. Quando h\u00e1 um tema filho, a fun\u00e7\u00e3o <code>get_stylesheet_uri()<\/code> aponta para o <code>style.css<\/code> do tema filho e a\u00ed nada mais aponta para o <code>style.css<\/code> do <em>Twenty Seventeen<\/em>.<\/p>\n\n\n\n<p><strong>Se<\/strong> o c\u00f3digo do <em>Twenty Seventeen<\/em> fosse como o a seguir, os dois <code>style.css<\/code> seriam inclu\u00eddos:<\/p>\n\n\n\n<pre class=\"wp-block-code php\"><code>wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '\/style.css' );\nif ( is_child_theme() ) {\n    wp_enqueue_style( 'twentyseventeen-style-child', get_stylesheet_uri() );\n}<\/code><\/pre>\n\n\n\n<p>Ele n\u00e3o \u00e9 dessa forma para n\u00e3o obrigar todo mundo a incluir o <code>style.css<\/code> dele e tamb\u00e9m para n\u00e3o ter mais um if ali \u00e0 toa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adicionando-o-style.css-do-tema-pai\">Adicionando o style.css do tema pai<\/h3>\n\n\n\n<p>No <code>functions.php<\/code> do tema filho temos ent\u00e3o que adicionar novamente o <code>style.css<\/code> do tema pai, ou seja, no nosso caso temos que incluir o <code>style.css<\/code> do&nbsp;<em>Twenty Seventeen<\/em> atrav\u00e9s do nosso tema. Vamos usar o mesmo <em>hook<\/em> <code>wp_enqueue_scripts<\/code>, no nosso <code>functions.php<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code php\"><code>function twentyseventeen_child_enqueue_styles() {\n   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );<\/code><\/pre>\n\n\n\n<p>No nosso <code>functions.php<\/code> estamos dizendo para o WordPress ent\u00e3o, que execute a nossa fun\u00e7\u00e3o <code>twentyseventeen_child_enqueue_styles<\/code> quando for acionada a action <code>wp_enqueue_scripts<\/code>. Nesta fun\u00e7\u00e3o adicionamos de volta o <code>style.css<\/code> do <em>Twenty Seventeen<\/em> e, <strong>assim, o estilo do site j\u00e1 parece certo novamente<\/strong>.<\/p>\n\n\n\n<p>Neste momento temos o tema filho chamando o <code>style.css<\/code> do tema pai e o tema pai chamando o <code>style.css<\/code> do tema filho. Vamos l\u00e1, no tema filho, ou seja, o nosso, apontamos para <code>get_template_directory_uri() . '\/style.css'<\/code>, que est\u00e1 no tema pai. No <em>Twenty Seventeen<\/em> tem <code>get_stylesheet_uri()<\/code>, que aponta para o tema filho. O <code>functions.php<\/code> do nosso tema \u00e9 carregado primeiro, ou seja, o <code>style.css<\/code> do <em>Twenty Seventeen<\/em> acaba sendo inclu\u00eddo primeiro. Assim, &#8220;por sorte&#8221;, temos a ordem ideal de inclus\u00e3o, que \u00e9 o <code>style.css<\/code> do <em>Twenty Seventeen<\/em> primeiro e o nosso vindo depois.<\/p>\n\n\n\n<p>Respire fundo e releia o \u00faltimo par\u00e1grafo. Voc\u00ea ver\u00e1 que ele faz sentido.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"incluindo-um-css-no-final-da-fila\">Incluindo um CSS no final da fila<\/h3>\n\n\n\n<p>Agora vamos supor que queremos incluir um arquivo CSS diferente nisso tudo, o <code>teste.css<\/code>. Vamos supor ainda que ele precisa estar <strong>depois<\/strong> dos outros arquivos CSS, para sobrescrever algum atributo. Se alterarmos nossa fun\u00e7\u00e3o para<\/p>\n\n\n\n<pre class=\"wp-block-code php\"><code>function twentyseventeen_child_enqueue_styles() {\n    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n    wp_enqueue_style( 'teste', get_stylesheet_directory_uri() . '\/teste.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );<\/code><\/pre>\n\n\n\n<p>O arquivo ser\u00e1 inclu\u00eddo, mas estar\u00e1 antes do <code>style.css<\/code> do nosso tema. Recapitulando, como nosso <code>functions.php<\/code> \u00e9 carregado primeiro, na lista de CSS teremos o <code>style.css<\/code> do <em>Twenty Seventeen<\/em>, carregado com <code>get_template_directory_uri() . '\/style.css'<\/code> na nossa fun\u00e7\u00e3o, logo depois o <code>teste.css<\/code> e mais pra frente o nosso <code>style.css<\/code>, inclu\u00eddo pelo pr\u00f3prio <em>Twenty Seventeen<\/em>.<\/p>\n\n\n\n<p>Podemos usar duas solu\u00e7\u00f5es:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Incluir um par\u00e2metro de depend\u00eancia no wp_enqueue_style:<\/h4>\n\n\n\n<pre class=\"wp-block-code php\"><code>function twentyseventeen_child_enqueue_styles() {\n    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n    wp_enqueue_style( 'teste', get_stylesheet_directory_uri() . '\/teste.css', array( 'twentyseventeen-style' ) );\n}\nadd_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );<\/code><\/pre>\n\n\n\n<p>Dessa forma o WordPress verifica se o arquivo tem alguma outra depend\u00eancia e espera para imprimir a tag s\u00f3 depois que ela for resolvida. Com o <code>array( 'twentyseventeen-style' )<\/code> ali, dizemos para o WordPress que o nosso estilo com nome <code>'teste'<\/code> precisa estar depois do estilo com nome <code>'twentyseventeen-style'<\/code>, sendo &#8220;nome&#8221; o primeiro par\u00e2metro que a fun\u00e7\u00e3o <code>wp_enqueue_style<\/code> recebe.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Alterar a prioridade da nossa fun\u00e7\u00e3o na action:<\/h4>\n\n\n\n<pre class=\"wp-block-code php\"><code>function twentyseventeen_child_enqueue_styles() {\n    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n    wp_enqueue_style( 'teste', get_stylesheet_directory_uri() . '\/teste.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles', 99 );<\/code><\/pre>\n\n\n\n<p>Repare no <code>99<\/code> ali. Dessa forma nossa fun\u00e7\u00e3o \u00e9 executada depois da fun\u00e7\u00e3o do tema pai, que \u00e9 inclu\u00edda sem esse par\u00e2metro e, por isso, recebe prioridade <code>10<\/code>. Esta solu\u00e7\u00e3o \u00e9 <strong>muito \u00fatil<\/strong>, especialmente para inclus\u00e3o de javascripts. Falei que ler aquele post sobre hooks ajudaria, n\u00e9?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"temas-filhos-na-vida-real\">Temas filhos na vida real<\/h2>\n\n\n\n<p>Na vida real usamos tema filho para sobrescrever algum arquivo da hierarquia de templates. O <code>single.php<\/code> do seu tema pai precisa ser modificado? <strong>Copie para o tema filho e altere o que precisar.<\/strong> A p\u00e1gina inicial do seu site precisa ser alterada? Copie e altere. E assim por diante. Infelizmente, nem sempre \u00e9 t\u00e3o f\u00e1cil.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"o-arquivo-x-php-do-meu-tema-filho-nao-sobrescreve-o-do-pai\">O arquivo x.php do meu tema filho n\u00e3o sobrescreve o do pai<\/h3>\n\n\n\n<p>O WordPress s\u00f3 cuida dos arquivos que est\u00e3o na <a href=\"https:\/\/developer.wordpress.org\/files\/2014\/10\/template-hierarchy.png\" target=\"_blank\" rel=\"noopener noreferrer\">hierarquia de templates<\/a>. Se seu tema pai n\u00e3o for bem estruturado, voc\u00ea ter\u00e1 problemas para sobrescrever o c\u00f3digo.<\/p>\n\n\n\n<p>Por exemplo, voc\u00ea comprou um tema que exibe a data e hora da publica\u00e7\u00e3o dos posts e voc\u00ea precisa sumir com isso. Achou que no tema pai este c\u00f3digo est\u00e1 em <code>includes\/post-meta.php<\/code>, copiou essa estrutura para o tema filho, alterou e nada aconteceu. <strong>Seu tema pai foi mal feito.<\/strong><\/p>\n\n\n\n<p>Lembra que eu falei que era preciso entender como seu tema pai funcionava? Ent\u00e3o, esse \u00e9 um bom momento. Voc\u00ea precisar\u00e1 encontrar como o arquivo <code>post-meta.php<\/code> \u00e9 adicionado. O WordPress est\u00e1 chegando em qual arquivo da hierarquia de templates? O <code>single.php<\/code>, por exemplo? Se nosso arquivo hipot\u00e9tico <code>post-meta.php<\/code> estiver sendo chamado com um <code>include<\/code> do php, ser\u00e1 preciso ter uma vers\u00e3o do <code>single.php<\/code> no tema filho tamb\u00e9m, para que voc\u00ea possa alterar essa chamada, usando <code>get_template_part<\/code> preferencialmente.<\/p>\n\n\n\n<p>Algumas vezes o caminho acabar\u00e1 ficando longo. Ser\u00e1 preciso copiar muitos arquivos para o tema filho, para alterar s\u00f3 uma besteirinha. Mesmo assim, <strong>n\u00e3o tome o caminho f\u00e1cil, tome o caminho certo<\/strong>. Alterar o tema pai n\u00e3o \u00e9 uma op\u00e7\u00e3o, lembra?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"quando-posso-instalar-e-criar-um-tema-filho\">Quando posso instalar e criar um tema filho?<\/h3>\n\n\n\n<p>Preferencialmente no come\u00e7o do projeto, mas nunca \u00e9 tarde. O \u00fanico conselho aqui \u00e9, se j\u00e1 estiver com alguma coisa configurada, <strong>fa\u00e7a um backup<\/strong>. Alguns temas simplesmente apagam todas as suas configura\u00e7\u00f5es se s\u00e3o trocados por outros e, como a troca para o tema filho n\u00e3o deixa de ser uma troca de tema, voc\u00ea pode acabar perdendo algumas horas de trabalho.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Gostou do texto? Tem alguma sugest\u00e3o? Comente aqui embaixo e assine a newsletter aqui do lado para receber os textos novos!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.<\/p>\n","protected":false},"author":1,"featured_media":779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[30],"tags":[106],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress: tema filho do b\u00e1sico ao avan\u00e7ado | Felipe Elia<\/title>\n<meta name=\"description\" content=\"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado | Felipe Elia\" \/>\n<meta property=\"og:description\" content=\"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\" \/>\n<meta property=\"og:site_name\" content=\"Felipe Elia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-19T20:24:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T15:04:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Elia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/felipe_elia\" \/>\n<meta name=\"twitter:site\" content=\"@felipe_elia\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Elia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\"},\"author\":{\"name\":\"Felipe Elia\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"headline\":\"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado\",\"datePublished\":\"2017-04-19T20:24:02+00:00\",\"dateModified\":\"2022-09-04T15:04:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\"},\"wordCount\":1958,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"keywords\":[\"Temas\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\",\"url\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\",\"name\":\"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado | Felipe Elia\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/#website\"},\"datePublished\":\"2017-04-19T20:24:02+00:00\",\"dateModified\":\"2022-09-04T15:04:57+00:00\",\"description\":\"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.\",\"breadcrumb\":{\"@id\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/felipeelia.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felipeelia.com.br\/#website\",\"url\":\"https:\/\/felipeelia.com.br\/\",\"name\":\"Felipe Elia\",\"description\":\"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado\",\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felipeelia.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\",\"name\":\"Felipe Elia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"contentUrl\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"width\":400,\"height\":400,\"caption\":\"Felipe Elia\"},\"logo\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\"},\"description\":\"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.\",\"sameAs\":[\"https:\/\/www.facebook.com\/felipe.elia\",\"https:\/\/www.instagram.com\/felipe.elia\/\",\"https:\/\/www.linkedin.com\/in\/felipeelia\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia\",\"https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ\"],\"url\":\"https:\/\/felipeelia.com.br\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado | Felipe Elia","description":"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/","og_locale":"pt_BR","og_type":"article","og_title":"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado | Felipe Elia","og_description":"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.","og_url":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/","og_site_name":"Felipe Elia","article_publisher":"https:\/\/www.facebook.com\/felipe.elia","article_author":"https:\/\/www.facebook.com\/felipe.elia","article_published_time":"2017-04-19T20:24:02+00:00","article_modified_time":"2022-09-04T15:04:57+00:00","og_image":[{"width":"1200","height":"630","url":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg","type":"image\/jpeg"}],"author":"Felipe Elia","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/felipe_elia","twitter_site":"@felipe_elia","twitter_misc":{"Escrito por":"Felipe Elia","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#article","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/"},"author":{"name":"Felipe Elia","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"headline":"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado","datePublished":"2017-04-19T20:24:02+00:00","dateModified":"2022-09-04T15:04:57+00:00","mainEntityOfPage":{"@id":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/"},"wordCount":1958,"commentCount":10,"publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"keywords":["Temas"],"articleSection":["WordPress"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/","url":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/","name":"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado | Felipe Elia","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/#website"},"datePublished":"2017-04-19T20:24:02+00:00","dateModified":"2022-09-04T15:04:57+00:00","description":"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.","breadcrumb":{"@id":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/felipeelia.com.br\/wordpress-tema-filho-basico-ao-avancado\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/felipeelia.dev\/"},{"@type":"ListItem","position":2,"name":"WordPress: tema filho do b\u00e1sico ao avan\u00e7ado"}]},{"@type":"WebSite","@id":"https:\/\/felipeelia.com.br\/#website","url":"https:\/\/felipeelia.com.br\/","name":"Felipe Elia","description":"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado","publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felipeelia.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292","name":"Felipe Elia","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/","url":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","contentUrl":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","width":400,"height":400,"caption":"Felipe Elia"},"logo":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/"},"description":"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.","sameAs":["https:\/\/www.facebook.com\/felipe.elia","https:\/\/www.instagram.com\/felipe.elia\/","https:\/\/www.linkedin.com\/in\/felipeelia\/","https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia","https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ"],"url":"https:\/\/felipeelia.com.br\/author\/admin\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",1200,630,false],"thumbnail":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2-150x150.jpg",150,150,true],"medium":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2-300x158.jpg",300,158,true],"medium_large":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2-768x403.jpg",768,403,true],"large":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2-1024x538.jpg",1024,538,true],"1536x1536":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",1200,630,false],"2048x2048":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",1200,630,false],"ocean-thumb-m":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",600,315,false],"ocean-thumb-ml":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",800,420,false],"ocean-thumb-l":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",1200,630,false],"yarpp-thumbnail":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/04\/wordpress-tema-filho-2.jpg",120,63,false]},"uagb_author_info":{"display_name":"Felipe Elia","author_link":"https:\/\/felipeelia.com.br\/author\/admin\/"},"uagb_comment_info":10,"uagb_excerpt":"Alterar temas prontos do WordPress \u00e9 o dia a dia de muita gente. Veja o que s\u00e3o os temas filhos com dicas profissionais de como usar esse importante recurso.","_links":{"self":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/767"}],"collection":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":0,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media\/779"}],"wp:attachment":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}