4.4Personalización: CSS adicional & tema hijo
Lo esencial en 30 segundos
- El CSS adicional modifica colores, espaciados o visibilidad sin tocar el tema.
- El inspector del navegador (F12) revela el selector adecuado; hay que ser preciso para no romper el resto.
- Nunca modificar directamente un tema padre: las actualizaciones lo sobrescriben todo. Para algo duradero, las modificaciones van en un tema hijo.
Minicaso hilado — ajustar sin romper
Samir quiere afinar el botón de contacto del taller: un color más cercano al azul de la marca y un espaciado más generoso. Usa el inspector para encontrar el selector y añade unas líneas de CSS adicional. Más adelante, Hassan pedirá una modificación de plantilla más profunda: entonces Samir creará un tema hijo para que el trabajo sobreviva a las actualizaciones.
Continuación del caso 4.3 — la apariencia merece ajustes precisos y duraderos.
1. CSS adicional e inspector
El CSS adicional (Apariencia → Personalizar → CSS adicional, o editor del sitio) permite ajustar la apariencia sin modificar los archivos del tema: color de un botón, espaciado de una sección, ocultación de un elemento decorativo. Es rápido y reversible.
Para apuntar al elemento correcto, el inspector del navegador (F12, clic derecho → Inspeccionar) muestra las clases y los estilos aplicados. Samir escribe un selector preciso —una clase en lugar de una etiqueta global— y verifica la vista previa en ordenador y móvil antes de publicar.
2. Tema hijo y perdurabilidad
El CSS cambia la apariencia, no las funciones. Para modificar una plantilla o añadir funciones hay que tocar el tema, pero nunca directamente el tema padre: su próxima actualización sobrescribiría las modificaciones.
La solución duradera es el tema hijo: hereda del padre y recibe tus archivos (style.css, functions.php, plantillas). Las actualizaciones del padre continúan y tus cambios se mantienen. Samir solo crea un tema hijo cuando la necesidad va más allá del CSS, para evitar una complejidad innecesaria.
🔎 Ejemplo concreto — Ajustar el botón de contacto (caso Samir)
Inspector: botón .btn-contact.
CSS adicional:
.btn-contact { background:#21759b; padding:14px 28px; border-radius:8px; }
Verificación escritorio + móvil.
→ Para modificar la plantilla de la página Colecciones:
crear un tema hijo y copiar allí la plantilla que se va a adaptar.Resultado: un ajuste preciso y conservado.
Lección: se elige la herramienta según la profundidad del cambio.
Vocabulario de la sección
- CSS adicional
- Reglas de estilo añadidas sin tocar el tema, mediante el Personalizador o el editor del sitio.
Ejemplo sencillo: cambiar el color del botón de contacto.
Lo que no es: editar directamente style.css del tema padre.
Reflejo: pequeño ajuste visual = CSS adicional.
- Tema hijo
- Tema que hereda del padre y recibe las modificaciones duraderas.
Ejemplo sencillo: una plantilla de página adaptada en el hijo.
Lo que no es: modificar el padre y perderlo todo en la actualización.
Reflejo: modificación duradera = tema hijo.
- Inspector del navegador
- Herramienta (F12) que muestra el HTML y el CSS de un elemento.
Ejemplo sencillo: encontrar la clase del botón.
Lo que no es: adivinar el selector al azar.
Reflejo: inspeccionar antes de aplicar estilos.
- Selector CSS
- Objetivo de una regla de estilo: clase, identificador o etiqueta.
Ejemplo sencillo: la clase .btn-contact en lugar de la etiqueta button.
Lo que no es: apuntar a todas las etiquetas button del sitio.
Reflejo: lo más preciso posible.
- No modificar el padre
- Regla de oro: las modificaciones directas del tema padre se sobrescriben en las actualizaciones.
Ejemplo sencillo: pasar por el hijo o por el CSS adicional.
Lo que no es: editar el padre «solo una vez».
Reflejo: nunca el padre directamente.
En la práctica — Ajustar finamente la apariencia de forma limpia
- Localiza un elemento que quieras modificar y abre el inspector (F12) para leer su clase.
- Añade una regla específica en el CSS adicional y observa la vista previa.
- Verifica el resultado en móvil y en las demás páginas.
- Si la necesidad va más allá del estilo, crea un tema hijo para las plantillas o funciones.
Guion listo para decir — explicar la personalización limpia (20 s)
«Puedo ajustar colores y espaciados sin tocar el tema, así que sin riesgo en las actualizaciones. Para modificaciones más profundas, uso un tema hijo: tus cambios se mantienen aunque el tema evolucione».
Vincular el método con la tranquilidad futura del cliente.
Modelo copiar-pegar — ficha de personalización
ELEMENTO A MODIFICAR: _______________
SELECTOR ENCONTRADO (inspector): _______________
REGLA CSS AÑADIDA: _______________
VERIFICADO ESCRITORIO / MÓVIL: sí / no
NECESIDAD DE UN TEMA HIJO: sí / no
ARCHIVOS AFECTADOS: _______________Retoque ligero
Bastan unas reglas CSS: color, espaciado, tamaño.
Plantilla específica
Tema hijo para adaptar una plantilla de página.
Funciones añadidas
Tema hijo para functions.php, nunca el padre.
Tema FSE
Los estilos globales y el CSS adicional cubren la mayoría de las necesidades.
✓ Buenas prácticas
- Inspeccionar antes de escribir CSS.
- Ser preciso en los selectores.
- Crear un tema hijo para cualquier modificación profunda.
✗ Errores frecuentes
- Modificar directamente el tema padre.
- Usar selectores demasiado amplios.
- Acumular CSS sin comentarios y difícil de mantener.
Puntos clave
- El CSS adicional ajusta la apariencia sin riesgo.
- El inspector revela el selector adecuado.
- El tema padre no se modifica nunca directamente.
- El tema hijo hace duraderas las modificaciones.
Reto 48 h — aplica mañana
Modifica el color y el espaciado de un botón mediante el CSS adicional, encontrando el selector con el inspector. Verifícalo en móvil. 20 minutos.
- Encuentro un selector con el inspector.
- Añado CSS específico sin romper el sitio.
- Sé cuándo crear un tema hijo.
Preguntas frecuentes
¿Dónde añadir el CSS adicional en un tema de bloques?
En el editor del sitio, mediante los estilos globales o la opción de CSS adicional según el tema. El principio es el mismo: un CSS específico, sin modificar los archivos del tema.
¿Hace falta siempre un tema hijo?
No. Para colores o espaciados basta el CSS adicional. El tema hijo resulta útil para modificar plantillas o añadir funciones que deben sobrevivir a las actualizaciones.
¿Qué ocurre si modifico el tema padre?
Tus modificaciones funcionan hasta la próxima actualización del tema, que las sobrescribe. Por eso se usa el CSS adicional o un tema hijo.
Samir debe modificar el estilo de un tema sin perder sus cambios en la actualización. ¿Qué hace?