{"id":79699,"date":"2025-07-17T16:09:02","date_gmt":"2025-07-17T14:09:02","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=79699&preview=true&preview_id=79699"},"modified":"2025-07-22T11:28:24","modified_gmt":"2025-07-22T09:28:24","slug":"personalizar-bloques-en-tema-hijo","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/personalizar-bloques-en-tema-hijo\/","title":{"rendered":"Estilos personalizados para temas de bloques de WordPress utilizando un tema hijo"},"content":{"rendered":"

Los temas de bloques<\/a> y theme.json<\/a><\/code> te dan mucha flexibilidad, lo que puede hacer que parezca que los temas hijos<\/a> han quedado obsoletos. Pero siguen siendo esenciales en muchos casos.<\/p>\n

Usar un tema hijo sigue siendo la mejor opci\u00f3n si deseas tener un control real sobre el dise\u00f1o de tu sitio sin tocar los archivos principales del tema padre.<\/p>\n

En este art\u00edculo, utilizaremos el tema Twenty Twenty-Five<\/a> como base y te guiaremos en la creaci\u00f3n de un tema hijo de bloques con su propio style.css<\/code> y functions.php<\/a><\/code>. Aprender\u00e1s a anular estilos de forma segura, a definir estilos de bloque personalizados e incluso a configurar tus propias variaciones de estilo. No se trata s\u00f3lo de un truco de estilo \u2014 sino de un paso seguro hacia la creaci\u00f3n de tu propio tema de bloques completo en el futuro.<\/p>\n

Aunque este ejercicio puede parecer sencillo, exploraremos algunos puntos m\u00e1s delicados que pueden resultar complicados. Vamos a empezar creando un tema hijo personalizado y, a continuaci\u00f3n, implementaremos una variaci\u00f3n de estilo personalizada.<\/p>\n

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

Registrar un tema hijo de bloques<\/h2>\n

Registrar un tema hijo de bloques es mucho m\u00e1s sencillo que registrar uno cl\u00e1sico<\/a>.<\/p>\n

T\u00e9cnicamente, no es necesario registrarlo. El registro se produce autom\u00e1ticamente cuando una carpeta de tema hijo con el nombre adecuado contiene un archivo theme.json<\/code> y un archivo style.css<\/code>.<\/p>\n

Entonces, \u00bfpor qu\u00e9 sigue siendo necesario el archivo style.css<\/code>?<\/p>\n

Como siempre, incluye un encabezado obligatorio (que se muestra a continuaci\u00f3n) que contiene metadatos<\/a> que WordPress utiliza para identificar el tema, incluyendo su nombre y el tema padre al que pertenece. Aunque los estilos y la configuraci\u00f3n se gestionan ahora en theme.json<\/code>, style.css<\/code> sigue desempe\u00f1ando un papel fundamental para que WordPress reconozca tu tema, aunque no contenga CSS propiamente dicho.<\/p>\n

\/*\nTheme Name: Twenty Twenty-Five Child\nDescription: Child theme for the Twenty Twenty-Five theme\nTemplate: twentytwentyfive\n*\/<\/code><\/pre>\n
Un archivo functions.php<\/code> no es necesario a menos que quieras poner en cola scripts<\/a> o a\u00f1adir funcionalidad basada en PHP. Eso lo haremos m\u00e1s adelante.<\/p>\n
Si no est\u00e1s familiarizado con theme.json<\/code> o quieres un repaso r\u00e1pido, consulta nuestra gu\u00eda sobre c\u00f3mo Trabajar con propiedades y pares clave-valor en theme.json<\/a>.<\/p>\n
Realizar tres cambios b\u00e1sicos en nuestro tema hijo.<\/h2>\n
Empecemos actualizando los colores globales del fondo y del texto, adem\u00e1s de dar estilo al bloque Bot\u00f3n.<\/p>\n
En el archivo theme.json<\/code> del tema hijo (que sirve como estilo por defecto), definimos lo siguiente:<\/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
Mientras que los colores de fondo y de texto se aplican a todas las variaciones de estilo, el estilo del bloque Bot\u00f3n s\u00f3lo se aplica a la variaci\u00f3n por defecto<\/strong>.<\/p>\n
\"Tema
Tema hijo utilizando la variaci\u00f3n de estilo por defecto en el Editor de Sitios.<\/figcaption><\/figure>\n
Anular variaciones de estilo<\/h3>\n
Para aplicar el mismo estilo de bot\u00f3n en diferentes variaciones, lo mejor es crear un archivo .json<\/code> que coincida con la convenci\u00f3n de nomenclatura de variaciones del tema padre.<\/p>\n
Por ejemplo, para anular el borde del bot\u00f3n en la variaci\u00f3n de estilo Evening<\/em>, crea un archivo llamado 01-evening.json<\/code> en el directorio ra\u00edz de tu tema hijo (o dentro de una subcarpeta \/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
Aqu\u00ed hemos utilizado un borde discontinuo m\u00e1s ancho para que el bot\u00f3n destaque. Como se trata de estilos m\u00e1s espec\u00edficos, anulan los generales de theme.json<\/code>.<\/p>\n