Este tutorial n\u00e3o \u00e9 para todos.<\/p>\n
Voc\u00ea n\u00e3o precisa ser um desenvolvedor experiente para acompanhar, mas precisa de um interesse genu\u00edno em aprender mais sobre o WordPress e como os temas funcionam.<\/p>\n
Se voc\u00ea n\u00e3o tem medo de trabalhar com um pouco de c\u00f3digo e sujar as m\u00e3os com alguns arquivos de tema, seja bem-vindo!<\/p>\n
Neste guia, voc\u00ea aprender\u00e1 como personalizar seu site WordPress de acordo com o seu conte\u00fado usando um tema filho, mas primeiro …<\/p>\n
Vamos cobrir exatamente por que voc\u00ea deve usar essa coisa estranha chamada “tema infantil".<\/p>\n
Repita depois de mim:<\/p>\n
Juro solenemente nunca editar um arquivo de tema.<\/p>\n
Novos usu\u00e1rios do WordPress interessados \u200b\u200bem fazer personaliza\u00e7\u00f5es com c\u00f3digo costumam editar diretamente os arquivos em seu tema. Esta \u00e9 uma grande falta de n\u00e3o.<\/p>\n
Porque?<\/p>\n
Um motivo: quando voc\u00ea atualizar seu tema, o WordPress substituir\u00e1 seu tema existente pela nova vers\u00e3o do tema.<\/p>\n
Ent\u00e3o, por que isso importa?<\/p>\n
Imagine que voc\u00ea est\u00e1 usando a vers\u00e3o 1.04 do tema Challenger<\/a>. Voc\u00ea moveu o menu no arquivo header.php e adicionou um novo CSS ao style.css. Em seguida, a vers\u00e3o 1.05 \u00e9 lan\u00e7ada e voc\u00ea v\u00ea a notifica\u00e7\u00e3o em seu painel.<\/p>\n Quando voc\u00ea atualizar para a v1.05, os arquivos header.php e style.css ser\u00e3o substitu\u00eddos pelos da v1.05 do Challenger. Eles n\u00e3o conter\u00e3o as mesmas edi\u00e7\u00f5es que voc\u00ea fez, ent\u00e3o seu trabalho ser\u00e1 perdido e n\u00e3o h\u00e1 como recuper\u00e1-lo. Isso pode ser muito desanimador se voc\u00ea dedicar horas \u00e0s suas personaliza\u00e7\u00f5es.<\/p>\n No entanto, se voc\u00ea colocar suas personaliza\u00e7\u00f5es em um tema filho do Challenger, poder\u00e1 atualizar com seguran\u00e7a para a vers\u00e3o 1.05 sem perder nenhuma de suas personaliza\u00e7\u00f5es porque elas s\u00e3o armazenadas com seguran\u00e7a no tema filho.<\/p>\n Isso ficar\u00e1 um pouco mais claro \u00e0 medida que passarmos para um exemplo real, ent\u00e3o vamos prosseguir e fazer um tema filho agora.<\/p>\n Embora eu n\u00e3o v\u00e1 explicar em detalhes como todo o c\u00f3digo funciona aqui, essas s\u00e3o as ideias b\u00e1sicas e os snippets de que voc\u00ea precisa para come\u00e7ar.<\/p>\n Comece criando uma pasta vazia em sua \u00e1rea de trabalho. Voc\u00ea pode nome\u00e1-lo como quiser, mas a conven\u00e7\u00e3o de nomenclatura padr\u00e3o \u00e9 usar o nome do tema em min\u00fasculas seguido de “filho” e substituindo os espa\u00e7os por hifens.<\/p>\n Por exemplo, um tema filho para o tema Challenger teria um nome de pasta “desafiador-filho”. Esta pasta conter\u00e1 todos os arquivos do tema filho.<\/p>\n Voc\u00ea s\u00f3 precisa de um arquivo para criar um tema filho tecnicamente v\u00e1lido, style.css.<\/p>\n Usando o editor de c\u00f3digo de sua escolha, crie um novo arquivo dentro da pasta do tema filho e denomine style.css.<\/p>\n O arquivo style.css \u00e9, \u00e9 claro, onde voc\u00ea adicionar\u00e1 todo o seu CSS para personalizar seu site. Para que o WordPress reconhe\u00e7a seu tema filho como um tema v\u00e1lido, voc\u00ea precisa adicionar um cabe\u00e7alho de folha de estilo como este no topo de style.css:<\/p>\n Voc\u00ea pode copiar este cabe\u00e7alho exato e us\u00e1-lo para seus pr\u00f3prios temas filhos. Basta trocar o nome do tema pelo tema que voc\u00ea est\u00e1 personalizando.<\/p>\n A parte mais importante \u00e9 o valor “Template” que deve ser definido como o nome do tema pai. Em particular, o nome usado para a pasta que cont\u00e9m o tema pai.<\/p>\n Com isso instalado, voc\u00ea j\u00e1 pode ativar o tema filho por meio do menu Apar\u00eancia e us\u00e1-lo. No entanto, seu site ficar\u00e1 completamente sem estilo!<\/p>\n Quando um tema filho \u00e9 ativado, o WordPress n\u00e3o carrega mais o arquivo style.css do tema pai e, em vez disso, depende do seu tema filho para fazer isso.<\/p>\n Veja como voc\u00ea pode carregar as duas folhas de estilo …<\/p>\n Em seu editor de c\u00f3digo, crie um segundo arquivo no tema filho e nomeie-o functions.php.<\/p>\n Em seguida, adicione o seguinte c\u00f3digo ao arquivo:<\/p>\n Esta fun\u00e7\u00e3o diz ao WordPress para carregar o arquivo style.css do tema pai e, em seguida, carregar o arquivo style.css do tema filho. Carregar a folha de estilo do tema filho depois torna mais f\u00e1cil substituir os seletores CSS do tema pai.<\/p>\n Como mencionei anteriormente, n\u00e3o vou cobrir esse c\u00f3digo linha por linha, mas voc\u00ea pode encontrar uma explica\u00e7\u00e3o mais detalhada desse trecho no WordPress Codex<\/a>.<\/p>\n Isso \u00e9 tudo que voc\u00ea precisa fazer para criar um tema filho funcional!<\/p>\n Com a configura\u00e7\u00e3o do tema filho, h\u00e1 tr\u00eas maneiras de personalizar seu site com ele.<\/p>\n Voc\u00ea pode adicionar quantos CSS novos desejar ao arquivo style.css do tema filho.<\/p>\n Ao encontrar seletores para usar em seu CSS, n\u00e3o verifique o arquivo style.css do tema pai. Todos os nossos temas usam um “pr\u00e9-processador CSS”, ent\u00e3o nem olhamos para aquele arquivo! Em vez disso, siga este processo mais inteligente para encontrar seletores CSS<\/a> e acho que voc\u00ea ter\u00e1 muito mais sucesso ao personalizar seu site.<\/p>\n Com um tema pai bem codificado, voc\u00ea pode substituir qualquer uma das fun\u00e7\u00f5es encontradas em seu arquivo functions.php.<\/p>\n Por exemplo, todas as fun\u00e7\u00f5es em Mission News<\/a> s\u00e3o embaladas com um Uma customiza\u00e7\u00e3o comum que requer um tema filho \u00e9 a reordena\u00e7\u00e3o de elementos. Por exemplo, voc\u00ea pode querer mover o t\u00edtulo da postagem ap\u00f3s a Imagem em destaque, em vez de antes dela.<\/p>\n Voc\u00ea pode pegar qualquer um dos arquivos de modelo encontrados no tema pai e colocar uma c\u00f3pia em seu tema filho. Em vez disso, a vers\u00e3o no tema filho ser\u00e1 carregada. Isso permite que voc\u00ea adicione, reordene e remova quaisquer elementos que desejar em qualquer parte do site.<\/p>\n Quando estiver satisfeito com suas edi\u00e7\u00f5es, voc\u00ea pode instalar o tema filho em seu site.<\/p>\n Os temas filhos podem ser carregados da mesma forma que os temas normais do WordPress, portanto, leva apenas um ou dois minutos para ativ\u00e1-los em seu site. Siga este tutorial para instalar o seu tema filho:<\/p>\n Como instalar um tema infantil do WordPress<\/a><\/p>\n Se voc\u00ea \u00e9 totalmente novo em tudo isso, aqui est\u00e3o algumas ferramentas gratuitas para ajud\u00e1-lo.<\/p>\n Primeiro, se voc\u00ea n\u00e3o tiver um editor de c\u00f3digo, verifique o Visual Studio Code<\/a>. \u00c9 simples, mas flex\u00edvel. Tamb\u00e9m \u00e9 totalmente gratuito e muitos softwares profissionais s\u00e3o feitos com ele. \u00c9 o que eu uso para fazer temas aqui no Compete Themes.<\/p>\n Em segundo lugar, criar um site WordPress local (offline) \u00e9 uma \u00f3tima maneira de testar o c\u00f3digo sem afetar seu site real ao vivo. Embora eu j\u00e1 tenha usado e recomendado o MAMP<\/a> no passado, o Local by Flywheel<\/a> \u00e9 t\u00e3o f\u00e1cil e simples de usar que adoro isso. \u00c9 o que eu uso para o desenvolvimento de temas e tamb\u00e9m \u00e9 gratuito.<\/p>\n Voltando ao exemplo anterior …<\/p>\n Ao atualizar o tema do Challenger (ou qualquer tema), todo o diret\u00f3rio “challenger” \u00e9 substitu\u00eddo, o que n\u00e3o afetar\u00e1 o tema filho, pois agora ele tem seu pr\u00f3prio diret\u00f3rio na pasta “challenger-child”.<\/p>\n Com seu tema filho no lugar, voc\u00ea pode fazer com seguran\u00e7a quaisquer personaliza\u00e7\u00f5es que desejar e manter seu tema pai atualizado.<\/p>\n Se voc\u00ea \u00e9 novo em CSS e PHP, pode levar algum tempo para obter suas personaliza\u00e7\u00f5es da maneira que deseja, mas com um tema filho, voc\u00ea tem uma \u00f3tima base para trabalhar. Lembre-se de seguir estas etapas<\/a> para encontrar seletores CSS para usar, e qualquer personaliza\u00e7\u00e3o de estilo que voc\u00ea fizer ser\u00e1 muito simples.<\/p>\nComo criar um tema filho<\/h2>\n
Configura\u00e7\u00e3o b\u00e1sica<\/h3>\n
Crie o arquivo style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nCrie o arquivo functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nPersonalizando com seu novo tema filho<\/h2>\n
Adicionar e substituir estilos<\/h3>\n
Substituir fun\u00e7\u00f5es<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>cheque. Isso significa que voc\u00ea pode copiar a fun\u00e7\u00e3o para o arquivo functions.php do seu tema filho. Em seguida, voc\u00ea pode fazer as edi\u00e7\u00f5es que desejar para a fun\u00e7\u00e3o l\u00e1.<\/p>\nSubstituir modelos<\/h3>\n
Instalando o tema filho<\/h3>\n
Suas atualiza\u00e7\u00f5es est\u00e3o seguras<\/h2>\n