O que é um child theme no WordPress?<\/h2>\n
Um child theme no WordPress é um tema que possui todas as funções, estilos e layouts do tema pai, permitindo que você faça personalizações sem modificar o tema original. Isso garante que atualizações do tema principal não apaguem as mudanças feitas no seu site.<\/p>\n <\/div>\n\n\n\n<\/p>
Como funciona um child theme no WordPress?<\/strong><\/h3>Um child theme cria um diretório separado que abriga seus próprios arquivos style.css <\/strong>e functions.php<\/strong>. Esses são os principais componentes usados para personalizar o design e a funcionalidade de seu site.<\/p>Quando alguém visita seu site, o WordPress carrega primeiro o child theme — todas as personalizações ou substituições no child theme têm prioridade. Para qualquer coisa não modificada, o WordPress usa os arquivos do tema pai.<\/p>
Por exemplo, você pode usar um child theme para ajustar o esquema de cores, criar um template de página exclusivo ou adicionar alguma funcionalidade personalizada sem mexer no tema pai.<\/p>
A maior utilidade disso é que, caso você faça essas alterações diretamente no tema pai, elas serão perdidas sempre que o tema tiver uma atualização. Com um child theme, você garante que suas alterações ficarão seguras durante as atualizações do tema — se algo der errado, você pode desativar o child theme e usar o tema pai para manter o site funcionando sem problemas.<\/p>
Quando você precisa de um child theme?<\/strong><\/h3>Usar um child theme nem sempre é necessário, mas é altamente recomendado se você quiser:<\/p>
\n- Personalizar com segurança o design ou a funcionalidade do seu tema sem afetar o tema principal.<\/li>\n\n\n\n
- Criar um novo tema rapidamente usando o tema principal como base.<\/li>\n\n\n\n
- Simplificar algumas modificações menores (como ajustar o CSS ou adicionar modelos personalizados) sem precisar lidar com arquivos principais complexos.<\/li>\n\n\n\n
- Proteger suas personalizações para que elas não sejam perdidas durante as atualizações do tema principal.<\/li>\n\n\n\n
- Manter a consistência da sua marca herdando o design do tema principal e fazendo ajustes específicos.<\/li>\n\n\n\n
- Testar novos recursos sem colocar seu site em risco.<\/li>\n<\/ul>
Como criar um child theme no WordPress<\/strong><\/h2>Criar um child theme do WordPress é bastante simples. Nos parágrafos abaixos, vamos detalhar o passo a passo de como fazê-lo manualmente, o que lhe dará controle total sobre a configuração e manterá seu site leve. <\/p>
Outra alternativa é usar um plugin — neste caso, pule para a próxima seção.<\/p>
Pré-requisitos<\/strong><\/p>Antes de começar, verifique se você tem o seguinte:<\/p>
\n- Um tema pai.<\/strong> Verifique se o tema pai que você deseja personalizar está instalado e ativo em seu site do WordPress. Usaremos o tema padrão Twenty Twenty-Three <\/strong>para este tutorial. Consulte nosso guia se precisar de ajuda para instalar um tema do WordPress<\/strong><\/a>.<\/li>\n\n\n\n
- Acesso aos seus arquivos do WordPress. <\/strong>Você pode usar o gerenciador de arquivos do seu plano de hospedagem ou um cliente FTP, como o FileZilla<\/strong><\/a>. O Gerenciador de Arquivos da Hostinger pode ser acessado por meio do hPanel.<\/li>\n\n\n\n
- Backup do site. <\/strong>Crie um backup do seu site WordPress <\/strong><\/a>antes de fazer qualquer alteração para evitar a perda acidental de dados.<\/li>\n\n\n\n
- Um site de teste. <\/strong>A configuração de um ambiente de teste do WordPress<\/strong><\/a> permite que você faça experimentos livremente sem correr o risco de prejudicar o site ao vivo. Clientes do plano WordPress Business<\/strong><\/a> da Hostinger (ou superiores) podem usar a ferramenta de teste do hPanel.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-Cloud-hosting-x-WP_in-text-banner.png\")
<\/a><\/figure><\/div>1. Crie a pasta do child theme<\/strong><\/h3>Primeiro, vamos preparar a pasta do child theme para armazenar todos os arquivos. Para este tutorial, usaremos o Gerenciador de Arquivos da Hostinger<\/strong><\/a>, que você pode acessar no hPanel.<\/p>No diretório raiz do WordPress (public_html<\/strong>), vá para wp-content<\/strong>→ themes<\/strong>. Em seguida, crie uma nova pasta com um nome parecido com o do seu tema ativo atual. Essa será a pasta do seu child theme.<\/p>![\"pasta](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/file-manager-child-theme-folder-1024x250-1.png\")
<\/figure><\/div>2. Crie o arquivo de folha de estilo<\/strong><\/h3>O arquivo de folha de estilo, normalmente conhecido como style.css<\/strong>, controla o design e o layout do seu tema do WordPress. É nele que você define a relação com o tema pai e substitui seus estilos.<\/p>Crie um novo arquivo style.css <\/strong>na pasta do child theme e adicione o seguinte trecho de código a ele.<\/p>\/*\nTheme Name: Twenty Twenty-Three Child\nTheme URI: http:\/\/example.com\/twenty-twenty-three-child\/\nDescription: Twenty Twenty-Three Child Theme\nAuthor: Seu Nome\nAuthor URI: http:\/\/exemplo.com\nTemplate: twentytwentythree\nVersion: 1.0.0\n*\/\n\/* Adicione seus estilos personalizados aqui *\/<\/pre>Substitua o nome, o URI, a descrição e o modelo do tema pelos dados reais do tema pai e salve as alterações.<\/p>
3. Crie o arquivo functions.php e adicione a folha de estilos à fila<\/strong><\/h3>O arquivo functions.php <\/strong>é a espinha dorsal dos recursos do seu tema. Ele permite que você adicione funcionalidades personalizadas ou modifique os recursos existentes no tema principal. Esse arquivo também é responsável por criar a fila dos estilos e scripts do tema principal, garantindo que eles sejam carregados e funcionem corretamente.<\/p>Crie um novo arquivo functions.php <\/strong>na pasta do child theme e adicione o seguinte trecho de código para importar estilos do tema pai.<\/p><?php\n\/\/ Seu código para colocar estilos do tema pai na fila\nfunction enqueue_parent_styles() {\n wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\n?><\/pre>Não se esqueça de salvar as alterações no arquivo.<\/p>
4. Ative o child theme<\/strong><\/h3>Se você criar os arquivos style.css <\/strong>e functions.php <\/strong>corretamente, o child theme deverá aparecer em seu site do WordPress.<\/p>Acesse Aparência<\/strong> → Temas <\/strong>no painel de administração e clique em Ativar<\/strong> no child theme.<\/p>![\"ativando](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/wordpress-themes-1-1024x283-1.png\")
<\/figure><\/div>Pronto, seu site WordPress agora está sendo executado com um child theme.<\/p>
\n Dica<\/h4>\n
A pré-visualização do seu child theme está vazia? Você pode corrigir isso fazendo upload de uma imagem chamada screenshot.png <\/strong>na pasta do child theme. Essa imagem servirá como miniatura de visualização de seu tema no painel do WordPress.<\/p>\n <\/div>\n\n\n\n<\/p>Outras maneiras de criar um child theme<\/strong><\/h2>Se você não quiser editar os arquivos do seu site manualmente, um plugin do WordPress <\/strong><\/a>pode simplificar o processo. Mas preste atenção: você tem duas maneiras de fazer isso, que dependerão do tipo do seu tema — portanto, certifique-se de escolher a maneira correta.<\/p>Para verificar se você está usando um tema clássico ou em blocos, acesse a pasta do seu tema por meio do gerenciador de arquivos ou de um cliente FTP e procure um arquivo chamado theme.json<\/strong>. Por exemplo, o tema Twenty Twenty-Three <\/strong>tem esse arquivo, o que indica que ele é um tema baseado em blocos.<\/p>![\"pasta](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/file-manager-theme-folder-1024x377-1.png\")
<\/figure><\/div>Criando um child theme clássico um plugin<\/strong><\/h3>Se você estiver usando um tema clássico, siga estas etapas para criar seu child theme usando o WP Child Theme Generator<\/strong><\/a>:<\/p>\n- Instale e ative o plugin WP Child Theme Generator<\/strong>. Consulte nosso guia sobre a instalação de plugins do WordPress<\/strong><\/a> se precisar de ajuda.<\/li>\n<\/ol>
![\"instalando](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/wp-child-theme-generator.png\")
<\/figure><\/div>\n- Navegue até Appearance<\/strong> → Child Theme Gen <\/strong>no painel de administração.<\/li>\n\n\n\n
- Selecione o tema pai no campo suspenso e, em seguida, ajuste os detalhes do child theme conforme necessário. Certifique-se de marcar a opção Create and Activate <\/strong>para automatizar a troca.<\/li>\n<\/ol>
![\"usando](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/wp-child-theme-generator-new-1024x722-1.png\")
<\/figure><\/div>\n- Depois de clicar em Create Child Theme<\/strong>, o plugin te redirecionará para a página Temas<\/strong>, mostrando o child theme ativo.<\/li>\n<\/ol>
Lembre-se de que, embora esse plugin teoricamente funcione com temas baseados em blocos, ele não foi projetado para funcionar com eles. Se o seu tema principal for baseado em blocos, recomendamos o método seguinte.<\/p>
Criando um child theme de blocos usando um plugin<\/strong><\/h3>Para esse método, usaremos um outro plugin gratuito, chamado Create Block Theme<\/strong><\/a>. Esse plugin é compatível com a configuração theme.json<\/strong>, o que o torna ideal para criar temas filhos a partir de temas baseados em blocos. Veja como:<\/p>\n- Instale e ative o plugin Create Block Theme<\/strong>.<\/li>\n<\/ol>
![\"instalando](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/create-block-theme.png\")
<\/figure><\/div>\n- Acesse Appearance<\/strong> → Create Block Theme <\/strong>em seu painel do WordPress.<\/li>\n\n\n\n
- O plugin fornece várias opções para trabalhar com seu tema ativo. Por enquanto, escolha Create a child of “[nome do seu tema]”.<\/strong><\/li>\n<\/ol>
![\"plugin](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/create-block-theme-menu.png\")
<\/figure><\/div>\n- Digite o nome, a descrição e o autor do child theme. Clique em Create Child Theme <\/strong>quando terminar.<\/li>\n<\/ol>
![\"criando](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/create-block-theme-child-theme.png\")
<\/figure><\/div>\n- Se o processo for bem-sucedido, o plugin mostrará uma mensagem de confirmação e te levará ao Editor do Site. Você pode verificar novamente acessando Aparência → Temas <\/strong>para ver se agora está usando um child theme.<\/li>\n<\/ol>
Como personalizar seu child theme no WordPress<\/strong><\/h2>Agora que você tem um child theme, é hora de personalizá-lo. Esses métodos de personalização exigem alguma programação, portanto, pode ser útil ter algum conhecimento em CSS<\/strong><\/a>.<\/p>Se você preferir não mexer em código, confira nossas escolhas dos melhores plugins de criação de páginas do WordPress<\/strong><\/a> para simplificar o processo. Você também pode usar o editor de blocos do WordPress, o Gutenberg<\/strong><\/a>, para criar blocos personalizados e modelos reutilizáveis sem codificação.<\/p>Personalizando o CSS<\/strong><\/h3>Se estiver planejando grandes alterações nos estilos do seu child theme, a melhor opção é editar diretamente o arquivo style.css<\/strong>. Ele mantém todo o CSS do tema em um único lugar, facilitando o gerenciamento e a exportação, se necessário. Além disso, você pode usar ferramentas externas, como editores de código<\/strong><\/a>, para obter recursos como realce de sintaxe e controle de versão.<\/p>Por outro lado, o Editor de Temas do WordPressFile<\/a> <\/strong>é mais conveniente para alterações rápidas. Ele permite editar arquivos de tema diretamente do painel, o que é ideal para usuários sem acesso ao FTP ou ao Gerenciador de Arquivos.<\/p>Vá para Ferramentas<\/strong> ou Aparência<\/strong> e localize o Editor de arquivos de tema. Abra a folha de estilo na barra lateral direita e clique em Atualizar arquivo <\/strong>após <\/strong>personalizá-la. <\/p>![\"\"](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/wordpress-theme-file-editor-1024x436-1.png\")
<\/figure><\/div>Se preferir ver uma visualização ao vivo de suas alterações antes de aplicá-las, use o Personalizador de Tema <\/strong>para temas clássicos ou o Editor de Site <\/strong>para acessar a edição completa do site com base em blocos. Ambos podem ser acessados na barra lateral do WordPress, em Aparência <\/strong>– procure por Personalizar <\/strong>ou Editor<\/strong>.<\/p>![\"editor](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/wordpress-site-editor-1-1024x484-1.png\")
<\/figure><\/div>Outra maneira de adicionar CSS personalizado ao seu child theme é usar um plugin de gerenciador de código, como o WPCode<\/strong>. Esse método é excelente para reaplicar códigos sem precisar copiá-los e colá-los manualmente.<\/p>Falamos sobre cada um desses métodos em detalhes no nosso tutorial sobre CSS personalizado no WordPress <\/strong><\/a>– dê uma olhada para saber mais.<\/p>Em termos de estilo, existem muitas regras CSS que você pode usar para modificar a aparência do seu child theme. Basta misturar e editar conforme necessário para criar o design desejado.<\/p>
Por exemplo, este trecho de código modifica a cor do plano de fundo do site:<\/p>
body {\nbackground-color: #f3f3f3; \/* Troque #f3f3f3 pela cor desejada *\/\n}<\/pre>Para personalizar a cor da barra lateral, use o seguinte código CSS:<\/p>
.sidebar {\nbackground-color: #dddddd; \/* Troque #dddddd pela cor desejada *\/\n}<\/pre>Veja como você pode atualizar as fontes de todo o seu site:<\/p>
body {\n font-family: 'Arial', sans-serif; \/* Troque por sua fonte desejada *\/\n font-size: 16px; \/* Escolha o tamanho desejado *\/\n color: #333333; \/* Escolha a cor *\/\n}<\/pre>Confira nossa folha de dicas de CSS<\/a><\/strong> para obter propriedades e valores comuns de CSS.<\/p>Adicionando trechos de código personalizados ao functions.php<\/strong><\/h3>Esse método só funciona para temas clássicos ou temas híbridos, que misturam elementos clássicos e de blocos.<\/p>
Para personalizar as funções do seu site, basta adicionar ou ajustar as funções PHP<\/strong><\/a> existentes no arquivo functions.php <\/strong>do seu child theme. Assim como na edição do style.css<\/strong>, você pode fazer isso por meio do gerenciador de arquivos (ou de um cliente FTP), do editor de arquivos do tema ou até mesmo por um plugin de gerenciador de código.<\/p>O tipo de personalização que você pode fazer com as funções PHP varia de acordo com o tema. <\/p>
Por exemplo, o trecho de código abaixo combina as funções add_action() <\/strong>e enqueue_custom_styles() <\/strong>para colocar uma folha de estilo personalizada na fila:<\/p>function enqueue_custom_styles() {\nwp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '\/css\/custom-style.css');\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_styles');<\/pre>Com o código custom_dashboard_greeting()<\/strong>, você pode incluir uma mensagem de saudação personalizada no painel de administração do WordPress:<\/p>função <\/strong>custom_dashboard_greeting() {<\/p>function custom_dashboard_greeting() {\n echo \"Boas vindas ao seu site! Tenha um ótimo dia.\";\n}\nadd_action('admin_notices', 'custom_dashboard_greeting');<\/pre>Como existe uma infinidade de funções para experimentar, você pode mergulhar de cabeça na criatividade. Para te ajudar ao longo do caminho, aqui estão algumas dicas para melhorar seus resultados e tornar as personalizações do PHP mais fáceis:<\/p>
\n- Documente seu código com comentários. <\/strong>Use \/* *\/ <\/strong>para comentários de várias linhas ou \/\/ <\/strong>para comentários de uma única linha, para explicar o que seu código personalizado faz.<\/li>\n\n\n\n
- Agrupe e rotule suas personalizações.<\/strong> Organize suas funções em seções usando comentários para facilitar futuras personalizações e depuração.<\/li>\n\n\n\n
- Evite hardcoding. <\/strong>Em vez de incorporar funcionalidades, configurações ou conteúdo diretamente nos arquivos de tema ou modelos, use add_action() <\/strong>ou add_filter() <\/strong>para aplicar funcionalidades personalizadas com ganchos do WordPress<\/strong><\/a>.<\/li>\n<\/ul>
Modificando ou adicionando arquivos de modelo<\/strong><\/h3>Esse método é ideal quando você precisa personalizar o layout, a estrutura ou o conteúdo de partes específicas do seu site e evitar que as atualizações do tema substituam suas alterações.<\/p>
Primeiro, acesse a pasta do seu tema principal usando o Gerenciador de arquivos ou um cliente FTP e abra a pasta templates<\/strong>. Localize o arquivo responsável pela funcionalidade ou pelo design que você deseja alterar e copie-o para o child theme.<\/p>![\"templates](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/file-manager-templates-1024x376-1.png\")
<\/figure><\/div>O WordPress usa uma hierarquia de templates específica para localizar e carregar arquivos com base em sua localização e nomenclatura. Portanto, sempre mantenha a estrutura de diretórios para garantir que suas alterações funcionem.<\/p>
Quando alguém visita seu site, o WordPress carrega primeiro o child theme — todas as personalizações ou substituições no child theme têm prioridade. Para qualquer coisa não modificada, o WordPress usa os arquivos do tema pai.<\/p>
Por exemplo, você pode usar um child theme para ajustar o esquema de cores, criar um template de página exclusivo ou adicionar alguma funcionalidade personalizada sem mexer no tema pai.<\/p>
A maior utilidade disso é que, caso você faça essas alterações diretamente no tema pai, elas serão perdidas sempre que o tema tiver uma atualização. Com um child theme, você garante que suas alterações ficarão seguras durante as atualizações do tema — se algo der errado, você pode desativar o child theme e usar o tema pai para manter o site funcionando sem problemas.<\/p>
Quando você precisa de um child theme?<\/strong><\/h3>Usar um child theme nem sempre é necessário, mas é altamente recomendado se você quiser:<\/p>
\n- Personalizar com segurança o design ou a funcionalidade do seu tema sem afetar o tema principal.<\/li>\n\n\n\n
- Criar um novo tema rapidamente usando o tema principal como base.<\/li>\n\n\n\n
- Simplificar algumas modificações menores (como ajustar o CSS ou adicionar modelos personalizados) sem precisar lidar com arquivos principais complexos.<\/li>\n\n\n\n
- Proteger suas personalizações para que elas não sejam perdidas durante as atualizações do tema principal.<\/li>\n\n\n\n
- Manter a consistência da sua marca herdando o design do tema principal e fazendo ajustes específicos.<\/li>\n\n\n\n
- Testar novos recursos sem colocar seu site em risco.<\/li>\n<\/ul>
Como criar um child theme no WordPress<\/strong><\/h2>Criar um child theme do WordPress é bastante simples. Nos parágrafos abaixos, vamos detalhar o passo a passo de como fazê-lo manualmente, o que lhe dará controle total sobre a configuração e manterá seu site leve. <\/p>
Outra alternativa é usar um plugin — neste caso, pule para a próxima seção.<\/p>
Pré-requisitos<\/strong><\/p>Antes de começar, verifique se você tem o seguinte:<\/p>
\n- Um tema pai.<\/strong> Verifique se o tema pai que você deseja personalizar está instalado e ativo em seu site do WordPress. Usaremos o tema padrão Twenty Twenty-Three <\/strong>para este tutorial. Consulte nosso guia se precisar de ajuda para instalar um tema do WordPress<\/strong><\/a>.<\/li>\n\n\n\n
- Acesso aos seus arquivos do WordPress. <\/strong>Você pode usar o gerenciador de arquivos do seu plano de hospedagem ou um cliente FTP, como o FileZilla<\/strong><\/a>. O Gerenciador de Arquivos da Hostinger pode ser acessado por meio do hPanel.<\/li>\n\n\n\n
- Backup do site. <\/strong>Crie um backup do seu site WordPress <\/strong><\/a>antes de fazer qualquer alteração para evitar a perda acidental de dados.<\/li>\n\n\n\n
- Um site de teste. <\/strong>A configuração de um ambiente de teste do WordPress<\/strong><\/a> permite que você faça experimentos livremente sem correr o risco de prejudicar o site ao vivo. Clientes do plano WordPress Business<\/strong><\/a> da Hostinger (ou superiores) podem usar a ferramenta de teste do hPanel.<\/li>\n<\/ul>\n
<\/a><\/figure><\/div>1. Crie a pasta do child theme<\/strong><\/h3>Primeiro, vamos preparar a pasta do child theme para armazenar todos os arquivos. Para este tutorial, usaremos o Gerenciador de Arquivos da Hostinger<\/strong><\/a>, que você pode acessar no hPanel.<\/p>No diretório raiz do WordPress (public_html<\/strong>), vá para wp-content<\/strong>→ themes<\/strong>. Em seguida, crie uma nova pasta com um nome parecido com o do seu tema ativo atual. Essa será a pasta do seu child theme.<\/p><\/figure><\/div>2. Crie o arquivo de folha de estilo<\/strong><\/h3>O arquivo de folha de estilo, normalmente conhecido como style.css<\/strong>, controla o design e o layout do seu tema do WordPress. É nele que você define a relação com o tema pai e substitui seus estilos.<\/p>Crie um novo arquivo style.css <\/strong>na pasta do child theme e adicione o seguinte trecho de código a ele.<\/p>\/*\nTheme Name: Twenty Twenty-Three Child\nTheme URI: http:\/\/example.com\/twenty-twenty-three-child\/\nDescription: Twenty Twenty-Three Child Theme\nAuthor: Seu Nome\nAuthor URI: http:\/\/exemplo.com\nTemplate: twentytwentythree\nVersion: 1.0.0\n*\/\n\/* Adicione seus estilos personalizados aqui *\/<\/pre>Substitua o nome, o URI, a descrição e o modelo do tema pelos dados reais do tema pai e salve as alterações.<\/p>
3. Crie o arquivo functions.php e adicione a folha de estilos à fila<\/strong><\/h3>O arquivo functions.php <\/strong>é a espinha dorsal dos recursos do seu tema. Ele permite que você adicione funcionalidades personalizadas ou modifique os recursos existentes no tema principal. Esse arquivo também é responsável por criar a fila dos estilos e scripts do tema principal, garantindo que eles sejam carregados e funcionem corretamente.<\/p>Crie um novo arquivo functions.php <\/strong>na pasta do child theme e adicione o seguinte trecho de código para importar estilos do tema pai.<\/p><?php\n\/\/ Seu código para colocar estilos do tema pai na fila\nfunction enqueue_parent_styles() {\n wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\n?><\/pre>Não se esqueça de salvar as alterações no arquivo.<\/p>
4. Ative o child theme<\/strong><\/h3>Se você criar os arquivos style.css <\/strong>e functions.php <\/strong>corretamente, o child theme deverá aparecer em seu site do WordPress.<\/p>Acesse Aparência<\/strong> → Temas <\/strong>no painel de administração e clique em Ativar<\/strong> no child theme.<\/p><\/figure><\/div>Pronto, seu site WordPress agora está sendo executado com um child theme.<\/p>
\n Dica<\/h4>\n
A pré-visualização do seu child theme está vazia? Você pode corrigir isso fazendo upload de uma imagem chamada screenshot.png <\/strong>na pasta do child theme. Essa imagem servirá como miniatura de visualização de seu tema no painel do WordPress.<\/p>\n <\/div>\n\n\n\n<\/p>Outras maneiras de criar um child theme<\/strong><\/h2>Se você não quiser editar os arquivos do seu site manualmente, um plugin do WordPress <\/strong><\/a>pode simplificar o processo. Mas preste atenção: você tem duas maneiras de fazer isso, que dependerão do tipo do seu tema — portanto, certifique-se de escolher a maneira correta.<\/p>Para verificar se você está usando um tema clássico ou em blocos, acesse a pasta do seu tema por meio do gerenciador de arquivos ou de um cliente FTP e procure um arquivo chamado theme.json<\/strong>. Por exemplo, o tema Twenty Twenty-Three <\/strong>tem esse arquivo, o que indica que ele é um tema baseado em blocos.<\/p><\/figure><\/div>Criando um child theme clássico um plugin<\/strong><\/h3>Se você estiver usando um tema clássico, siga estas etapas para criar seu child theme usando o WP Child Theme Generator<\/strong><\/a>:<\/p>\n- Instale e ative o plugin WP Child Theme Generator<\/strong>. Consulte nosso guia sobre a instalação de plugins do WordPress<\/strong><\/a> se precisar de ajuda.<\/li>\n<\/ol>
<\/figure><\/div>\n- Navegue até Appearance<\/strong> → Child Theme Gen <\/strong>no painel de administração.<\/li>\n\n\n\n
- Selecione o tema pai no campo suspenso e, em seguida, ajuste os detalhes do child theme conforme necessário. Certifique-se de marcar a opção Create and Activate <\/strong>para automatizar a troca.<\/li>\n<\/ol>
<\/figure><\/div>\n- Depois de clicar em Create Child Theme<\/strong>, o plugin te redirecionará para a página Temas<\/strong>, mostrando o child theme ativo.<\/li>\n<\/ol>
Lembre-se de que, embora esse plugin teoricamente funcione com temas baseados em blocos, ele não foi projetado para funcionar com eles. Se o seu tema principal for baseado em blocos, recomendamos o método seguinte.<\/p>
Criando um child theme de blocos usando um plugin<\/strong><\/h3>Para esse método, usaremos um outro plugin gratuito, chamado Create Block Theme<\/strong><\/a>. Esse plugin é compatível com a configuração theme.json<\/strong>, o que o torna ideal para criar temas filhos a partir de temas baseados em blocos. Veja como:<\/p>\n- Instale e ative o plugin Create Block Theme<\/strong>.<\/li>\n<\/ol>
<\/figure><\/div>\n- Acesse Appearance<\/strong> → Create Block Theme <\/strong>em seu painel do WordPress.<\/li>\n\n\n\n
- O plugin fornece várias opções para trabalhar com seu tema ativo. Por enquanto, escolha Create a child of “[nome do seu tema]”.<\/strong><\/li>\n<\/ol>
<\/figure><\/div>\n- Digite o nome, a descrição e o autor do child theme. Clique em Create Child Theme <\/strong>quando terminar.<\/li>\n<\/ol>
<\/figure><\/div>\n- Se o processo for bem-sucedido, o plugin mostrará uma mensagem de confirmação e te levará ao Editor do Site. Você pode verificar novamente acessando Aparência → Temas <\/strong>para ver se agora está usando um child theme.<\/li>\n<\/ol>
Como personalizar seu child theme no WordPress<\/strong><\/h2>Agora que você tem um child theme, é hora de personalizá-lo. Esses métodos de personalização exigem alguma programação, portanto, pode ser útil ter algum conhecimento em CSS<\/strong><\/a>.<\/p>Se você preferir não mexer em código, confira nossas escolhas dos melhores plugins de criação de páginas do WordPress<\/strong><\/a> para simplificar o processo. Você também pode usar o editor de blocos do WordPress, o Gutenberg<\/strong><\/a>, para criar blocos personalizados e modelos reutilizáveis sem codificação.<\/p>Personalizando o CSS<\/strong><\/h3>Se estiver planejando grandes alterações nos estilos do seu child theme, a melhor opção é editar diretamente o arquivo style.css<\/strong>. Ele mantém todo o CSS do tema em um único lugar, facilitando o gerenciamento e a exportação, se necessário. Além disso, você pode usar ferramentas externas, como editores de código<\/strong><\/a>, para obter recursos como realce de sintaxe e controle de versão.<\/p>Por outro lado, o Editor de Temas do WordPressFile<\/a> <\/strong>é mais conveniente para alterações rápidas. Ele permite editar arquivos de tema diretamente do painel, o que é ideal para usuários sem acesso ao FTP ou ao Gerenciador de Arquivos.<\/p>Vá para Ferramentas<\/strong> ou Aparência<\/strong> e localize o Editor de arquivos de tema. Abra a folha de estilo na barra lateral direita e clique em Atualizar arquivo <\/strong>após <\/strong>personalizá-la. <\/p><\/figure><\/div>Se preferir ver uma visualização ao vivo de suas alterações antes de aplicá-las, use o Personalizador de Tema <\/strong>para temas clássicos ou o Editor de Site <\/strong>para acessar a edição completa do site com base em blocos. Ambos podem ser acessados na barra lateral do WordPress, em Aparência <\/strong>– procure por Personalizar <\/strong>ou Editor<\/strong>.<\/p><\/figure><\/div>Outra maneira de adicionar CSS personalizado ao seu child theme é usar um plugin de gerenciador de código, como o WPCode<\/strong>. Esse método é excelente para reaplicar códigos sem precisar copiá-los e colá-los manualmente.<\/p>Falamos sobre cada um desses métodos em detalhes no nosso tutorial sobre CSS personalizado no WordPress <\/strong><\/a>– dê uma olhada para saber mais.<\/p>Em termos de estilo, existem muitas regras CSS que você pode usar para modificar a aparência do seu child theme. Basta misturar e editar conforme necessário para criar o design desejado.<\/p>
Por exemplo, este trecho de código modifica a cor do plano de fundo do site:<\/p>
body {\nbackground-color: #f3f3f3; \/* Troque #f3f3f3 pela cor desejada *\/\n}<\/pre>Para personalizar a cor da barra lateral, use o seguinte código CSS:<\/p>
.sidebar {\nbackground-color: #dddddd; \/* Troque #dddddd pela cor desejada *\/\n}<\/pre>Veja como você pode atualizar as fontes de todo o seu site:<\/p>
body {\n font-family: 'Arial', sans-serif; \/* Troque por sua fonte desejada *\/\n font-size: 16px; \/* Escolha o tamanho desejado *\/\n color: #333333; \/* Escolha a cor *\/\n}<\/pre>Confira nossa folha de dicas de CSS<\/a><\/strong> para obter propriedades e valores comuns de CSS.<\/p>Adicionando trechos de código personalizados ao functions.php<\/strong><\/h3>Esse método só funciona para temas clássicos ou temas híbridos, que misturam elementos clássicos e de blocos.<\/p>
Para personalizar as funções do seu site, basta adicionar ou ajustar as funções PHP<\/strong><\/a> existentes no arquivo functions.php <\/strong>do seu child theme. Assim como na edição do style.css<\/strong>, você pode fazer isso por meio do gerenciador de arquivos (ou de um cliente FTP), do editor de arquivos do tema ou até mesmo por um plugin de gerenciador de código.<\/p>O tipo de personalização que você pode fazer com as funções PHP varia de acordo com o tema. <\/p>
Por exemplo, o trecho de código abaixo combina as funções add_action() <\/strong>e enqueue_custom_styles() <\/strong>para colocar uma folha de estilo personalizada na fila:<\/p>function enqueue_custom_styles() {\nwp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '\/css\/custom-style.css');\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_styles');<\/pre>Com o código custom_dashboard_greeting()<\/strong>, você pode incluir uma mensagem de saudação personalizada no painel de administração do WordPress:<\/p>função <\/strong>custom_dashboard_greeting() {<\/p>function custom_dashboard_greeting() {\n echo \"Boas vindas ao seu site! Tenha um ótimo dia.\";\n}\nadd_action('admin_notices', 'custom_dashboard_greeting');<\/pre>Como existe uma infinidade de funções para experimentar, você pode mergulhar de cabeça na criatividade. Para te ajudar ao longo do caminho, aqui estão algumas dicas para melhorar seus resultados e tornar as personalizações do PHP mais fáceis:<\/p>
\n- Documente seu código com comentários. <\/strong>Use \/* *\/ <\/strong>para comentários de várias linhas ou \/\/ <\/strong>para comentários de uma única linha, para explicar o que seu código personalizado faz.<\/li>\n\n\n\n
- Agrupe e rotule suas personalizações.<\/strong> Organize suas funções em seções usando comentários para facilitar futuras personalizações e depuração.<\/li>\n\n\n\n
- Evite hardcoding. <\/strong>Em vez de incorporar funcionalidades, configurações ou conteúdo diretamente nos arquivos de tema ou modelos, use add_action() <\/strong>ou add_filter() <\/strong>para aplicar funcionalidades personalizadas com ganchos do WordPress<\/strong><\/a>.<\/li>\n<\/ul>
Modificando ou adicionando arquivos de modelo<\/strong><\/h3>Esse método é ideal quando você precisa personalizar o layout, a estrutura ou o conteúdo de partes específicas do seu site e evitar que as atualizações do tema substituam suas alterações.<\/p>
Primeiro, acesse a pasta do seu tema principal usando o Gerenciador de arquivos ou um cliente FTP e abra a pasta templates<\/strong>. Localize o arquivo responsável pela funcionalidade ou pelo design que você deseja alterar e copie-o para o child theme.<\/p><\/figure><\/div>O WordPress usa uma hierarquia de templates específica para localizar e carregar arquivos com base em sua localização e nomenclatura. Portanto, sempre mantenha a estrutura de diretórios para garantir que suas alterações funcionem.<\/p>
Como criar um child theme no WordPress<\/strong><\/h2>Criar um child theme do WordPress é bastante simples. Nos parágrafos abaixos, vamos detalhar o passo a passo de como fazê-lo manualmente, o que lhe dará controle total sobre a configuração e manterá seu site leve. <\/p>
Outra alternativa é usar um plugin — neste caso, pule para a próxima seção.<\/p>
Pré-requisitos<\/strong><\/p>Antes de começar, verifique se você tem o seguinte:<\/p>
\n- Um tema pai.<\/strong> Verifique se o tema pai que você deseja personalizar está instalado e ativo em seu site do WordPress. Usaremos o tema padrão Twenty Twenty-Three <\/strong>para este tutorial. Consulte nosso guia se precisar de ajuda para instalar um tema do WordPress<\/strong><\/a>.<\/li>\n\n\n\n
- Acesso aos seus arquivos do WordPress. <\/strong>Você pode usar o gerenciador de arquivos do seu plano de hospedagem ou um cliente FTP, como o FileZilla<\/strong><\/a>. O Gerenciador de Arquivos da Hostinger pode ser acessado por meio do hPanel.<\/li>\n\n\n\n
- Backup do site. <\/strong>Crie um backup do seu site WordPress <\/strong><\/a>antes de fazer qualquer alteração para evitar a perda acidental de dados.<\/li>\n\n\n\n
- Um site de teste. <\/strong>A configuração de um ambiente de teste do WordPress<\/strong><\/a> permite que você faça experimentos livremente sem correr o risco de prejudicar o site ao vivo. Clientes do plano WordPress Business<\/strong><\/a> da Hostinger (ou superiores) podem usar a ferramenta de teste do hPanel.<\/li>\n<\/ul>\n
<\/a><\/figure><\/div>1. Crie a pasta do child theme<\/strong><\/h3>Primeiro, vamos preparar a pasta do child theme para armazenar todos os arquivos. Para este tutorial, usaremos o Gerenciador de Arquivos da Hostinger<\/strong><\/a>, que você pode acessar no hPanel.<\/p>No diretório raiz do WordPress (public_html<\/strong>), vá para wp-content<\/strong>→ themes<\/strong>. Em seguida, crie uma nova pasta com um nome parecido com o do seu tema ativo atual. Essa será a pasta do seu child theme.<\/p><\/figure><\/div>2. Crie o arquivo de folha de estilo<\/strong><\/h3>O arquivo de folha de estilo, normalmente conhecido como style.css<\/strong>, controla o design e o layout do seu tema do WordPress. É nele que você define a relação com o tema pai e substitui seus estilos.<\/p>Crie um novo arquivo style.css <\/strong>na pasta do child theme e adicione o seguinte trecho de código a ele.<\/p>\/*\nTheme Name: Twenty Twenty-Three Child\nTheme URI: http:\/\/example.com\/twenty-twenty-three-child\/\nDescription: Twenty Twenty-Three Child Theme\nAuthor: Seu Nome\nAuthor URI: http:\/\/exemplo.com\nTemplate: twentytwentythree\nVersion: 1.0.0\n*\/\n\/* Adicione seus estilos personalizados aqui *\/<\/pre>Substitua o nome, o URI, a descrição e o modelo do tema pelos dados reais do tema pai e salve as alterações.<\/p>
3. Crie o arquivo functions.php e adicione a folha de estilos à fila<\/strong><\/h3>O arquivo functions.php <\/strong>é a espinha dorsal dos recursos do seu tema. Ele permite que você adicione funcionalidades personalizadas ou modifique os recursos existentes no tema principal. Esse arquivo também é responsável por criar a fila dos estilos e scripts do tema principal, garantindo que eles sejam carregados e funcionem corretamente.<\/p>Crie um novo arquivo functions.php <\/strong>na pasta do child theme e adicione o seguinte trecho de código para importar estilos do tema pai.<\/p><?php\n\/\/ Seu código para colocar estilos do tema pai na fila\nfunction enqueue_parent_styles() {\n wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\n?><\/pre>Não se esqueça de salvar as alterações no arquivo.<\/p>
4. Ative o child theme<\/strong><\/h3>Se você criar os arquivos style.css <\/strong>e functions.php <\/strong>corretamente, o child theme deverá aparecer em seu site do WordPress.<\/p>Acesse Aparência<\/strong> → Temas <\/strong>no painel de administração e clique em Ativar<\/strong> no child theme.<\/p><\/figure><\/div>Pronto, seu site WordPress agora está sendo executado com um child theme.<\/p>
\n Dica<\/h4>\n
A pré-visualização do seu child theme está vazia? Você pode corrigir isso fazendo upload de uma imagem chamada screenshot.png <\/strong>na pasta do child theme. Essa imagem servirá como miniatura de visualização de seu tema no painel do WordPress.<\/p>\n <\/div>\n\n\n\n<\/p>Outras maneiras de criar um child theme<\/strong><\/h2>Se você não quiser editar os arquivos do seu site manualmente, um plugin do WordPress <\/strong><\/a>pode simplificar o processo. Mas preste atenção: você tem duas maneiras de fazer isso, que dependerão do tipo do seu tema — portanto, certifique-se de escolher a maneira correta.<\/p>Para verificar se você está usando um tema clássico ou em blocos, acesse a pasta do seu tema por meio do gerenciador de arquivos ou de um cliente FTP e procure um arquivo chamado theme.json<\/strong>. Por exemplo, o tema Twenty Twenty-Three <\/strong>tem esse arquivo, o que indica que ele é um tema baseado em blocos.<\/p><\/figure><\/div>Criando um child theme clássico um plugin<\/strong><\/h3>Se você estiver usando um tema clássico, siga estas etapas para criar seu child theme usando o WP Child Theme Generator<\/strong><\/a>:<\/p>\n- Instale e ative o plugin WP Child Theme Generator<\/strong>. Consulte nosso guia sobre a instalação de plugins do WordPress<\/strong><\/a> se precisar de ajuda.<\/li>\n<\/ol>
<\/figure><\/div>\n- Navegue até Appearance<\/strong> → Child Theme Gen <\/strong>no painel de administração.<\/li>\n\n\n\n
- Selecione o tema pai no campo suspenso e, em seguida, ajuste os detalhes do child theme conforme necessário. Certifique-se de marcar a opção Create and Activate <\/strong>para automatizar a troca.<\/li>\n<\/ol>
<\/figure><\/div>\n- Depois de clicar em Create Child Theme<\/strong>, o plugin te redirecionará para a página Temas<\/strong>, mostrando o child theme ativo.<\/li>\n<\/ol>
Lembre-se de que, embora esse plugin teoricamente funcione com temas baseados em blocos, ele não foi projetado para funcionar com eles. Se o seu tema principal for baseado em blocos, recomendamos o método seguinte.<\/p>
Criando um child theme de blocos usando um plugin<\/strong><\/h3>Para esse método, usaremos um outro plugin gratuito, chamado Create Block Theme<\/strong><\/a>. Esse plugin é compatível com a configuração theme.json<\/strong>, o que o torna ideal para criar temas filhos a partir de temas baseados em blocos. Veja como:<\/p>\n- Instale e ative o plugin Create Block Theme<\/strong>.<\/li>\n<\/ol>
<\/figure><\/div>\n- Acesse Appearance<\/strong> → Create Block Theme <\/strong>em seu painel do WordPress.<\/li>\n\n\n\n
- O plugin fornece várias opções para trabalhar com seu tema ativo. Por enquanto, escolha Create a child of “[nome do seu tema]”.<\/strong><\/li>\n<\/ol>
<\/figure><\/div>\n- Digite o nome, a descrição e o autor do child theme. Clique em Create Child Theme <\/strong>quando terminar.<\/li>\n<\/ol>
<\/figure><\/div>\n- Se o processo for bem-sucedido, o plugin mostrará uma mensagem de confirmação e te levará ao Editor do Site. Você pode verificar novamente acessando Aparência → Temas <\/strong>para ver se agora está usando um child theme.<\/li>\n<\/ol>
Como personalizar seu child theme no WordPress<\/strong><\/h2>Agora que você tem um child theme, é hora de personalizá-lo. Esses métodos de personalização exigem alguma programação, portanto, pode ser útil ter algum conhecimento em CSS<\/strong><\/a>.<\/p>Se você preferir não mexer em código, confira nossas escolhas dos melhores plugins de criação de páginas do WordPress<\/strong><\/a> para simplificar o processo. Você também pode usar o editor de blocos do WordPress, o Gutenberg<\/strong><\/a>, para criar blocos personalizados e modelos reutilizáveis sem codificação.<\/p>Personalizando o CSS<\/strong><\/h3>Se estiver planejando grandes alterações nos estilos do seu child theme, a melhor opção é editar diretamente o arquivo style.css<\/strong>. Ele mantém todo o CSS do tema em um único lugar, facilitando o gerenciamento e a exportação, se necessário. Além disso, você pode usar ferramentas externas, como editores de código<\/strong><\/a>, para obter recursos como realce de sintaxe e controle de versão.<\/p>Por outro lado, o Editor de Temas do WordPressFile<\/a> <\/strong>é mais conveniente para alterações rápidas. Ele permite editar arquivos de tema diretamente do painel, o que é ideal para usuários sem acesso ao FTP ou ao Gerenciador de Arquivos.<\/p>Vá para Ferramentas<\/strong> ou Aparência<\/strong> e localize o Editor de arquivos de tema. Abra a folha de estilo na barra lateral direita e clique em Atualizar arquivo <\/strong>após <\/strong>personalizá-la. <\/p><\/figure><\/div>Se preferir ver uma visualização ao vivo de suas alterações antes de aplicá-las, use o Personalizador de Tema <\/strong>para temas clássicos ou o Editor de Site <\/strong>para acessar a edição completa do site com base em blocos. Ambos podem ser acessados na barra lateral do WordPress, em Aparência <\/strong>– procure por Personalizar <\/strong>ou Editor<\/strong>.<\/p><\/figure><\/div>Outra maneira de adicionar CSS personalizado ao seu child theme é usar um plugin de gerenciador de código, como o WPCode<\/strong>. Esse método é excelente para reaplicar códigos sem precisar copiá-los e colá-los manualmente.<\/p>Falamos sobre cada um desses métodos em detalhes no nosso tutorial sobre CSS personalizado no WordPress <\/strong><\/a>– dê uma olhada para saber mais.<\/p>Em termos de estilo, existem muitas regras CSS que você pode usar para modificar a aparência do seu child theme. Basta misturar e editar conforme necessário para criar o design desejado.<\/p>
Por exemplo, este trecho de código modifica a cor do plano de fundo do site:<\/p>
body {\nbackground-color: #f3f3f3; \/* Troque #f3f3f3 pela cor desejada *\/\n}<\/pre>Para personalizar a cor da barra lateral, use o seguinte código CSS:<\/p>
.sidebar {\nbackground-color: #dddddd; \/* Troque #dddddd pela cor desejada *\/\n}<\/pre>Veja como você pode atualizar as fontes de todo o seu site:<\/p>
body {\n font-family: 'Arial', sans-serif; \/* Troque por sua fonte desejada *\/\n font-size: 16px; \/* Escolha o tamanho desejado *\/\n color: #333333; \/* Escolha a cor *\/\n}<\/pre>Confira nossa folha de dicas de CSS<\/a><\/strong> para obter propriedades e valores comuns de CSS.<\/p>Adicionando trechos de código personalizados ao functions.php<\/strong><\/h3>Esse método só funciona para temas clássicos ou temas híbridos, que misturam elementos clássicos e de blocos.<\/p>
Para personalizar as funções do seu site, basta adicionar ou ajustar as funções PHP<\/strong><\/a> existentes no arquivo functions.php <\/strong>do seu child theme. Assim como na edição do style.css<\/strong>, você pode fazer isso por meio do gerenciador de arquivos (ou de um cliente FTP), do editor de arquivos do tema ou até mesmo por um plugin de gerenciador de código.<\/p>O tipo de personalização que você pode fazer com as funções PHP varia de acordo com o tema. <\/p>
Por exemplo, o trecho de código abaixo combina as funções add_action() <\/strong>e enqueue_custom_styles() <\/strong>para colocar uma folha de estilo personalizada na fila:<\/p>function enqueue_custom_styles() {\nwp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '\/css\/custom-style.css');\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_styles');<\/pre>Com o código custom_dashboard_greeting()<\/strong>, você pode incluir uma mensagem de saudação personalizada no painel de administração do WordPress:<\/p>função <\/strong>custom_dashboard_greeting() {<\/p>function custom_dashboard_greeting() {\n echo \"Boas vindas ao seu site! Tenha um ótimo dia.\";\n}\nadd_action('admin_notices', 'custom_dashboard_greeting');<\/pre>Como existe uma infinidade de funções para experimentar, você pode mergulhar de cabeça na criatividade. Para te ajudar ao longo do caminho, aqui estão algumas dicas para melhorar seus resultados e tornar as personalizações do PHP mais fáceis:<\/p>
\n- Documente seu código com comentários. <\/strong>Use \/* *\/ <\/strong>para comentários de várias linhas ou \/\/ <\/strong>para comentários de uma única linha, para explicar o que seu código personalizado faz.<\/li>\n\n\n\n
- Agrupe e rotule suas personalizações.<\/strong> Organize suas funções em seções usando comentários para facilitar futuras personalizações e depuração.<\/li>\n\n\n\n
- Evite hardcoding. <\/strong>Em vez de incorporar funcionalidades, configurações ou conteúdo diretamente nos arquivos de tema ou modelos, use add_action() <\/strong>ou add_filter() <\/strong>para aplicar funcionalidades personalizadas com ganchos do WordPress<\/strong><\/a>.<\/li>\n<\/ul>
Modificando ou adicionando arquivos de modelo<\/strong><\/h3>Esse método é ideal quando você precisa personalizar o layout, a estrutura ou o conteúdo de partes específicas do seu site e evitar que as atualizações do tema substituam suas alterações.<\/p>
Primeiro, acesse a pasta do seu tema principal usando o Gerenciador de arquivos ou um cliente FTP e abra a pasta templates<\/strong>. Localize o arquivo responsável pela funcionalidade ou pelo design que você deseja alterar e copie-o para o child theme.<\/p><\/figure><\/div>O WordPress usa uma hierarquia de templates específica para localizar e carregar arquivos com base em sua localização e nomenclatura. Portanto, sempre mantenha a estrutura de diretórios para garantir que suas alterações funcionem.<\/p>
Antes de começar, verifique se você tem o seguinte:<\/p>
- \n
- Um tema pai.<\/strong> Verifique se o tema pai que você deseja personalizar está instalado e ativo em seu site do WordPress. Usaremos o tema padrão Twenty Twenty-Three <\/strong>para este tutorial. Consulte nosso guia se precisar de ajuda para instalar um tema do WordPress<\/strong><\/a>.<\/li>\n\n\n\n
- Acesso aos seus arquivos do WordPress. <\/strong>Você pode usar o gerenciador de arquivos do seu plano de hospedagem ou um cliente FTP, como o FileZilla<\/strong><\/a>. O Gerenciador de Arquivos da Hostinger pode ser acessado por meio do hPanel.<\/li>\n\n\n\n
- Backup do site. <\/strong>Crie um backup do seu site WordPress <\/strong><\/a>antes de fazer qualquer alteração para evitar a perda acidental de dados.<\/li>\n\n\n\n
- Um site de teste. <\/strong>A configuração de um ambiente de teste do WordPress<\/strong><\/a> permite que você faça experimentos livremente sem correr o risco de prejudicar o site ao vivo. Clientes do plano WordPress Business<\/strong><\/a> da Hostinger (ou superiores) podem usar a ferramenta de teste do hPanel.<\/li>\n<\/ul>
\n<\/a><\/figure><\/div>1. Crie a pasta do child theme<\/strong><\/h3>
Primeiro, vamos preparar a pasta do child theme para armazenar todos os arquivos. Para este tutorial, usaremos o Gerenciador de Arquivos da Hostinger<\/strong><\/a>, que você pode acessar no hPanel.<\/p>
No diretório raiz do WordPress (public_html<\/strong>), vá para wp-content<\/strong>→ themes<\/strong>. Em seguida, crie uma nova pasta com um nome parecido com o do seu tema ativo atual. Essa será a pasta do seu child theme.<\/p>
<\/figure><\/div>2. Crie o arquivo de folha de estilo<\/strong><\/h3>
O arquivo de folha de estilo, normalmente conhecido como style.css<\/strong>, controla o design e o layout do seu tema do WordPress. É nele que você define a relação com o tema pai e substitui seus estilos.<\/p>
Crie um novo arquivo style.css <\/strong>na pasta do child theme e adicione o seguinte trecho de código a ele.<\/p>
\/*\nTheme Name: Twenty Twenty-Three Child\nTheme URI: http:\/\/example.com\/twenty-twenty-three-child\/\nDescription: Twenty Twenty-Three Child Theme\nAuthor: Seu Nome\nAuthor URI: http:\/\/exemplo.com\nTemplate: twentytwentythree\nVersion: 1.0.0\n*\/\n\/* Adicione seus estilos personalizados aqui *\/<\/pre>
Substitua o nome, o URI, a descrição e o modelo do tema pelos dados reais do tema pai e salve as alterações.<\/p>
3. Crie o arquivo functions.php e adicione a folha de estilos à fila<\/strong><\/h3>
O arquivo functions.php <\/strong>é a espinha dorsal dos recursos do seu tema. Ele permite que você adicione funcionalidades personalizadas ou modifique os recursos existentes no tema principal. Esse arquivo também é responsável por criar a fila dos estilos e scripts do tema principal, garantindo que eles sejam carregados e funcionem corretamente.<\/p>
Crie um novo arquivo functions.php <\/strong>na pasta do child theme e adicione o seguinte trecho de código para importar estilos do tema pai.<\/p>
<?php\n\/\/ Seu código para colocar estilos do tema pai na fila\nfunction enqueue_parent_styles() {\n wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\n?><\/pre>Não se esqueça de salvar as alterações no arquivo.<\/p>
4. Ative o child theme<\/strong><\/h3>
Se você criar os arquivos style.css <\/strong>e functions.php <\/strong>corretamente, o child theme deverá aparecer em seu site do WordPress.<\/p>
Acesse Aparência<\/strong> → Temas <\/strong>no painel de administração e clique em Ativar<\/strong> no child theme.<\/p>
<\/figure><\/div>Pronto, seu site WordPress agora está sendo executado com um child theme.<\/p>
\nDica<\/h4>\n
A pré-visualização do seu child theme está vazia? Você pode corrigir isso fazendo upload de uma imagem chamada screenshot.png <\/strong>na pasta do child theme. Essa imagem servirá como miniatura de visualização de seu tema no painel do WordPress.<\/p>\n <\/div>\n\n\n\n<\/p>
Outras maneiras de criar um child theme<\/strong><\/h2>
Se você não quiser editar os arquivos do seu site manualmente, um plugin do WordPress <\/strong><\/a>pode simplificar o processo. Mas preste atenção: você tem duas maneiras de fazer isso, que dependerão do tipo do seu tema — portanto, certifique-se de escolher a maneira correta.<\/p>
Para verificar se você está usando um tema clássico ou em blocos, acesse a pasta do seu tema por meio do gerenciador de arquivos ou de um cliente FTP e procure um arquivo chamado theme.json<\/strong>. Por exemplo, o tema Twenty Twenty-Three <\/strong>tem esse arquivo, o que indica que ele é um tema baseado em blocos.<\/p>
<\/figure><\/div>Criando um child theme clássico um plugin<\/strong><\/h3>
Se você estiver usando um tema clássico, siga estas etapas para criar seu child theme usando o WP Child Theme Generator<\/strong><\/a>:<\/p>
- \n
- Instale e ative o plugin WP Child Theme Generator<\/strong>. Consulte nosso guia sobre a instalação de plugins do WordPress<\/strong><\/a> se precisar de ajuda.<\/li>\n<\/ol><\/figure><\/div>
- \n
- Navegue até Appearance<\/strong> → Child Theme Gen <\/strong>no painel de administração.<\/li>\n\n\n\n
- Selecione o tema pai no campo suspenso e, em seguida, ajuste os detalhes do child theme conforme necessário. Certifique-se de marcar a opção Create and Activate <\/strong>para automatizar a troca.<\/li>\n<\/ol>
<\/figure><\/div>- \n
- Depois de clicar em Create Child Theme<\/strong>, o plugin te redirecionará para a página Temas<\/strong>, mostrando o child theme ativo.<\/li>\n<\/ol>
Lembre-se de que, embora esse plugin teoricamente funcione com temas baseados em blocos, ele não foi projetado para funcionar com eles. Se o seu tema principal for baseado em blocos, recomendamos o método seguinte.<\/p>
Criando um child theme de blocos usando um plugin<\/strong><\/h3>
Para esse método, usaremos um outro plugin gratuito, chamado Create Block Theme<\/strong><\/a>. Esse plugin é compatível com a configuração theme.json<\/strong>, o que o torna ideal para criar temas filhos a partir de temas baseados em blocos. Veja como:<\/p>
- \n
- Instale e ative o plugin Create Block Theme<\/strong>.<\/li>\n<\/ol><\/figure><\/div>
- \n
- Acesse Appearance<\/strong> → Create Block Theme <\/strong>em seu painel do WordPress.<\/li>\n\n\n\n
- O plugin fornece várias opções para trabalhar com seu tema ativo. Por enquanto, escolha Create a child of “[nome do seu tema]”.<\/strong><\/li>\n<\/ol>
<\/figure><\/div>- \n
- Digite o nome, a descrição e o autor do child theme. Clique em Create Child Theme <\/strong>quando terminar.<\/li>\n<\/ol><\/figure><\/div>
- \n
- Se o processo for bem-sucedido, o plugin mostrará uma mensagem de confirmação e te levará ao Editor do Site. Você pode verificar novamente acessando Aparência → Temas <\/strong>para ver se agora está usando um child theme.<\/li>\n<\/ol>
Como personalizar seu child theme no WordPress<\/strong><\/h2>
Agora que você tem um child theme, é hora de personalizá-lo. Esses métodos de personalização exigem alguma programação, portanto, pode ser útil ter algum conhecimento em CSS<\/strong><\/a>.<\/p>
Se você preferir não mexer em código, confira nossas escolhas dos melhores plugins de criação de páginas do WordPress<\/strong><\/a> para simplificar o processo. Você também pode usar o editor de blocos do WordPress, o Gutenberg<\/strong><\/a>, para criar blocos personalizados e modelos reutilizáveis sem codificação.<\/p>
Personalizando o CSS<\/strong><\/h3>
Se estiver planejando grandes alterações nos estilos do seu child theme, a melhor opção é editar diretamente o arquivo style.css<\/strong>. Ele mantém todo o CSS do tema em um único lugar, facilitando o gerenciamento e a exportação, se necessário. Além disso, você pode usar ferramentas externas, como editores de código<\/strong><\/a>, para obter recursos como realce de sintaxe e controle de versão.<\/p>
Por outro lado, o Editor de Temas do WordPressFile<\/a> <\/strong>é mais conveniente para alterações rápidas. Ele permite editar arquivos de tema diretamente do painel, o que é ideal para usuários sem acesso ao FTP ou ao Gerenciador de Arquivos.<\/p>
Vá para Ferramentas<\/strong> ou Aparência<\/strong> e localize o Editor de arquivos de tema. Abra a folha de estilo na barra lateral direita e clique em Atualizar arquivo <\/strong>após <\/strong>personalizá-la. <\/p>
<\/figure><\/div>Se preferir ver uma visualização ao vivo de suas alterações antes de aplicá-las, use o Personalizador de Tema <\/strong>para temas clássicos ou o Editor de Site <\/strong>para acessar a edição completa do site com base em blocos. Ambos podem ser acessados na barra lateral do WordPress, em Aparência <\/strong>– procure por Personalizar <\/strong>ou Editor<\/strong>.<\/p>
<\/figure><\/div>Outra maneira de adicionar CSS personalizado ao seu child theme é usar um plugin de gerenciador de código, como o WPCode<\/strong>. Esse método é excelente para reaplicar códigos sem precisar copiá-los e colá-los manualmente.<\/p>
Falamos sobre cada um desses métodos em detalhes no nosso tutorial sobre CSS personalizado no WordPress <\/strong><\/a>– dê uma olhada para saber mais.<\/p>
Em termos de estilo, existem muitas regras CSS que você pode usar para modificar a aparência do seu child theme. Basta misturar e editar conforme necessário para criar o design desejado.<\/p>
Por exemplo, este trecho de código modifica a cor do plano de fundo do site:<\/p>
body {\nbackground-color: #f3f3f3; \/* Troque #f3f3f3 pela cor desejada *\/\n}<\/pre>Para personalizar a cor da barra lateral, use o seguinte código CSS:<\/p>
.sidebar {\nbackground-color: #dddddd; \/* Troque #dddddd pela cor desejada *\/\n}<\/pre>Veja como você pode atualizar as fontes de todo o seu site:<\/p>
body {\n font-family: 'Arial', sans-serif; \/* Troque por sua fonte desejada *\/\n font-size: 16px; \/* Escolha o tamanho desejado *\/\n color: #333333; \/* Escolha a cor *\/\n}<\/pre>Confira nossa folha de dicas de CSS<\/a><\/strong> para obter propriedades e valores comuns de CSS.<\/p>
Adicionando trechos de código personalizados ao functions.php<\/strong><\/h3>
Esse método só funciona para temas clássicos ou temas híbridos, que misturam elementos clássicos e de blocos.<\/p>
Para personalizar as funções do seu site, basta adicionar ou ajustar as funções PHP<\/strong><\/a> existentes no arquivo functions.php <\/strong>do seu child theme. Assim como na edição do style.css<\/strong>, você pode fazer isso por meio do gerenciador de arquivos (ou de um cliente FTP), do editor de arquivos do tema ou até mesmo por um plugin de gerenciador de código.<\/p>
O tipo de personalização que você pode fazer com as funções PHP varia de acordo com o tema. <\/p>
Por exemplo, o trecho de código abaixo combina as funções add_action() <\/strong>e enqueue_custom_styles() <\/strong>para colocar uma folha de estilo personalizada na fila:<\/p>
function enqueue_custom_styles() {\nwp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '\/css\/custom-style.css');\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_styles');<\/pre>Com o código custom_dashboard_greeting()<\/strong>, você pode incluir uma mensagem de saudação personalizada no painel de administração do WordPress:<\/p>
função <\/strong>custom_dashboard_greeting() {<\/p>
function custom_dashboard_greeting() {\n echo \"Boas vindas ao seu site! Tenha um ótimo dia.\";\n}\nadd_action('admin_notices', 'custom_dashboard_greeting');<\/pre>Como existe uma infinidade de funções para experimentar, você pode mergulhar de cabeça na criatividade. Para te ajudar ao longo do caminho, aqui estão algumas dicas para melhorar seus resultados e tornar as personalizações do PHP mais fáceis:<\/p>
- \n
- Documente seu código com comentários. <\/strong>Use \/* *\/ <\/strong>para comentários de várias linhas ou \/\/ <\/strong>para comentários de uma única linha, para explicar o que seu código personalizado faz.<\/li>\n\n\n\n
- Agrupe e rotule suas personalizações.<\/strong> Organize suas funções em seções usando comentários para facilitar futuras personalizações e depuração.<\/li>\n\n\n\n
- Evite hardcoding. <\/strong>Em vez de incorporar funcionalidades, configurações ou conteúdo diretamente nos arquivos de tema ou modelos, use add_action() <\/strong>ou add_filter() <\/strong>para aplicar funcionalidades personalizadas com ganchos do WordPress<\/strong><\/a>.<\/li>\n<\/ul>
Modificando ou adicionando arquivos de modelo<\/strong><\/h3>
Esse método é ideal quando você precisa personalizar o layout, a estrutura ou o conteúdo de partes específicas do seu site e evitar que as atualizações do tema substituam suas alterações.<\/p>
Primeiro, acesse a pasta do seu tema principal usando o Gerenciador de arquivos ou um cliente FTP e abra a pasta templates<\/strong>. Localize o arquivo responsável pela funcionalidade ou pelo design que você deseja alterar e copie-o para o child theme.<\/p>
<\/figure><\/div>O WordPress usa uma hierarquia de templates específica para localizar e carregar arquivos com base em sua localização e nomenclatura. Portanto, sempre mantenha a estrutura de diretórios para garantir que suas alterações funcionem.<\/p>
- Agrupe e rotule suas personalizações.<\/strong> Organize suas funções em seções usando comentários para facilitar futuras personalizações e depuração.<\/li>\n\n\n\n
- Documente seu código com comentários. <\/strong>Use \/* *\/ <\/strong>para comentários de várias linhas ou \/\/ <\/strong>para comentários de uma única linha, para explicar o que seu código personalizado faz.<\/li>\n\n\n\n
- Se o processo for bem-sucedido, o plugin mostrará uma mensagem de confirmação e te levará ao Editor do Site. Você pode verificar novamente acessando Aparência → Temas <\/strong>para ver se agora está usando um child theme.<\/li>\n<\/ol>
- O plugin fornece várias opções para trabalhar com seu tema ativo. Por enquanto, escolha Create a child of “[nome do seu tema]”.<\/strong><\/li>\n<\/ol>
- Acesse Appearance<\/strong> → Create Block Theme <\/strong>em seu painel do WordPress.<\/li>\n\n\n\n
- Instale e ative o plugin Create Block Theme<\/strong>.<\/li>\n<\/ol>
- Selecione o tema pai no campo suspenso e, em seguida, ajuste os detalhes do child theme conforme necessário. Certifique-se de marcar a opção Create and Activate <\/strong>para automatizar a troca.<\/li>\n<\/ol>
- Navegue até Appearance<\/strong> → Child Theme Gen <\/strong>no painel de administração.<\/li>\n\n\n\n
- Acesso aos seus arquivos do WordPress. <\/strong>Você pode usar o gerenciador de arquivos do seu plano de hospedagem ou um cliente FTP, como o FileZilla<\/strong><\/a>. O Gerenciador de Arquivos da Hostinger pode ser acessado por meio do hPanel.<\/li>\n\n\n\n
![\"selecionando](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/wordpress-editor-attribute.png\")
<\/figure><\/div>