{"id":72344,"date":"2025-07-17T11:32:12","date_gmt":"2025-07-17T14:32:12","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=72344&preview=true&preview_id=72344"},"modified":"2025-07-22T09:36:19","modified_gmt":"2025-07-22T12:36:19","slug":"personalizar-bloco-com-child-theme","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/personalizar-bloco-com-child-theme\/","title":{"rendered":"Estilo Personalizado para Temas de Blocos do WordPress Usando um Tema Filho (Child Theme)"},"content":{"rendered":"

Os temas em bloco<\/a> em arquivo theme.json<\/a><\/code> oferecem muita flexibilidade, o que pode dar a impress\u00e3o de que os temas filhos (child themes)<\/a> se tornaram obsoletos. No entanto, eles ainda s\u00e3o fundamentais em muitos cen\u00e1rios.<\/p>\n

Usar um tema filho (child theme) continua sendo a melhor escolha se voc\u00ea deseja controle real sobre o design do seu site sem modificar os arquivos principais do tema principal (parent theme).<\/p>\n

Neste artigo, usaremos o tema Twenty Twenty-Five<\/a> como base e mostraremos como criar um tema filho (child theme) de blocos com seus pr\u00f3prios style.css<\/code> e functions.php<\/a><\/code>. Voc\u00ea aprender\u00e1 a substituir estilos com seguran\u00e7a, definir estilos de bloco personalizados e at\u00e9 mesmo configurar suas pr\u00f3prias varia\u00e7\u00f5es de estilo. N\u00e3o se trata apenas de um truque de estilo, mas de uma etapa s\u00f3lida para que voc\u00ea possa criar seu pr\u00f3prio tema de bloco completo no futuro.<\/p>\n

Embora este exerc\u00edcio pare\u00e7a simples, exploramos alguns pontos espec\u00edficos que podem causar confus\u00e3o. Vamos come\u00e7ar criando um tema filho (child theme) personalizado e depois implementando uma varia\u00e7\u00e3o de estilo customizada.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Registrando um tema filho (child theme) de blocos<\/h2>\n

Registrar um tema filho (child theme) de blocos \u00e9 muito mais simples do que registrar um cl\u00e1ssico<\/a>.<\/p>\n

Tecnicamente, voc\u00ea n\u00e3o precisa registr\u00e1-lo manualmente. O registro acontece automaticamente quando a pasta do tema filho (child theme) tem o nome adequado e cont\u00e9m os arquivos theme.json<\/code> e um arquivo style.css<\/code>.<\/p>\n

Ent\u00e3o, por que o arquivo style.css<\/code> ainda \u00e9 necess\u00e1rio?<\/p>\n

Como antes, ele inclui um cabe\u00e7alho obrigat\u00f3rio (mostrado abaixo) que cont\u00e9m metadados<\/a> que o WordPress usa para identificar o tema, incluindo seu nome e o tema principal (parent theme) que ele estende. Embora os estilos e as configura\u00e7\u00f5es agora sejam tratados em theme.json<\/code>, style.css<\/code> ainda desempenha um papel fundamental para que o WordPress reconhe\u00e7a seu tema, mesmo que n\u00e3o contenha CSS.<\/p>\n

\/*\nTheme Name: Twenty Twenty-Five Child\nDescription: Child theme for the Twenty Twenty-Five theme\nTemplate: twentytwentyfive\n*\/<\/code><\/pre>\n
Um arquivo functions.php<\/code> n\u00e3o \u00e9 necess\u00e1rio, a menos que voc\u00ea queira enfileirar scripts<\/a> ou adicionar funcionalidades baseadas em PHP. Faremos isso mais adiante.<\/p>\n
Se voc\u00ea n\u00e3o estiver familiarizado com o theme.json<\/code> ou quiser se atualizar rapidamente, consulte nosso guia sobre Trabalhando com Propriedades e Pares de Valores-chave no theme.json<\/a>.<\/p>\n
Fazendo tr\u00eas altera\u00e7\u00f5es b\u00e1sicas em nosso tema filho (child theme)<\/h2>\n
Vamos come\u00e7ar atualizando as cores globais de fundo e texto, al\u00e9m de estilizar o bloco de Bot\u00e3o.<\/p>\n
No arquivo theme.json<\/code> do tema secund\u00e1rio (que serve como estilo padr\u00e3o), definimos o seguinte:<\/p>\n
{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Black\",\n          \"slug\": \"black\",\n          \"color\": \"#000000\"\n        },\n        {\n          \"name\": \"Yellow\",\n          \"slug\": \"yellow\",\n          \"color\": \"#FFFF00\"\n        },\n        {\n          \"name\": \"Purple\",\n          \"slug\": \"purple\",\n          \"color\": \"#800080\"\n        },\n        {\n          \"name\": \"White\",\n          \"slug\": \"white\",\n          \"color\": \"#FFFFFF\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"var(--wp--preset--color--black)\",\n      \"text\": \"var(--wp--preset--color--yellow)\"\n    },\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var(--wp--preset--color--purple)\",\n          \"text\": \"var(--wp--preset--color--white)\"\n        },\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--yellow)\",\n          \"width\": \"2px\",\n          \"style\": \"solid\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Embora as cores de fundo e de texto se apliquem a todas as varia\u00e7\u00f5es de estilo, a estiliza\u00e7\u00e3o do bloco de Bot\u00e3o se aplica apenas \u00e0 varia\u00e7\u00e3o padr\u00e3o<\/strong>.<\/p>\n
\"Tema
Tema filho (child theme) usando a varia\u00e7\u00e3o de estilo padr\u00e3o no Editor de Site.<\/figcaption><\/figure>\n
Substitui\u00e7\u00e3o de varia\u00e7\u00f5es de estilo<\/h3>\n
Para aplicar o mesmo estilo de bot\u00e3o em diferentes varia\u00e7\u00f5es, \u00e9 melhor voc\u00ea criar um arquivo .json<\/code> que corresponda \u00e0 conven\u00e7\u00e3o de nomenclatura de varia\u00e7\u00e3o do tema principal (parent theme).<\/p>\n
Por exemplo, para substituir a borda do bot\u00e3o na varia\u00e7\u00e3o de estilo Evening (Noite<\/em>), crie um arquivo chamado 01-evening.json<\/code> no diret\u00f3rio raiz do tema filho (child theme) (ou dentro de uma subpasta \/styles<\/code>):<\/p>\n
{\n  \"version\": 3,\n  \"title\": \"Evening\",\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--white)\",\n          \"width\": \"3px\",\n          \"style\": \"dashed\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Aqui, usamos uma borda mais larga e tracejada para destacar o bot\u00e3o. Como esses estilos s\u00e3o mais espec\u00edficos, eles substituem os estilos gerais de theme.json<\/code>.<\/p>\n