2.2Personalizador & editor de sitio (FSE)
Lo esencial en 30 segundos
- Tema clásico → Personalizador (Apariencia → Personalizar): logo, colores, cabecera, widgets, con vista previa directa.
- Tema de bloques → editor de sitio completo (FSE): se editan la cabecera, el pie de página y las plantillas con los bloques Gutenberg.
- Los estilos globales ajustan colores y fuentes de todo el sitio en un solo lugar; las partes de plantilla se editan una vez y se aplican en todas partes.
Minicaso hilado — con los colores del taller
Samir quiere aplicar la identidad visual del Atelier Bahja: un azul profundo, un arena cálido y una fuente sobria. Según el tema elegido, la herramienta es distinta. También debe modificar la cabecera para colocar el logo y el menú, sin tocar el código. Esta sección le muestra los dos mundos de personalización y los reflejos comunes.
Continuación del caso 2.1 — el tema está elegido, lo adaptamos a la marca.
1. ¿Personalizador o FSE?
El Personalizador (Apariencia → Personalizar) equipa los temas clásicos: un panel lateral con vista previa en directo permite ajustar el logo, los colores, la cabecera, los menús y los widgets. Cada cambio se muestra de inmediato y luego se publica.
Los temas de bloques utilizan el editor de sitio completo (FSE, Apariencia → Editor): en él se modifican la cabecera, el pie de página y las plantillas de páginas con los bloques Gutenberg. Ya no hace falta código para cambiar la estructura global. Samir identifica primero su caso: si existe Apariencia → Editor, el tema es FSE.
2. Estilos globales y partes de plantilla
Los estilos globales (FSE → Estilos) centralizan los colores y las fuentes de todo el sitio: modificar la paleta actualiza el conjunto de las páginas sin rehacerlas una a una. Es la garantía de una coherencia visual inmediata y de un mantenimiento sencillo.
Las partes de plantilla (template parts) son los elementos reutilizados: cabecera, pie de página. Se editan una vez y el cambio se aplica a todas las páginas que los utilizan. Samir coloca en ellas el logo, el menú principal y los datos de contacto del taller, y después comprueba el resultado en móvil.
🔎 Ejemplo concreto — Aplicar la identidad del taller (caso Samir)
Tema de bloques → Apariencia → Editor.
1. Estilos → paleta: azul profundo + arena cálido.
2. Tipografía: fuente sobria para los títulos y el texto.
3. Partes de plantilla → cabecera: logo + menú.
4. Pie de página: datos de contacto + aviso legal.
→ Publicar y comprobar en móvil.Resultado: una identidad coherente en todo el sitio.
Lección: los estilos globales evitan rehacer cada página.
Vocabulario de la sección
- Personalizador
- Herramienta de los temas clásicos: ajustes de apariencia con vista previa en directo.
Ejemplo sencillo: ajustar el logo y los colores del taller.
Lo que no es: buscarlo en un tema de bloques donde ha desaparecido.
Reflejo: tema clásico = Personalizador.
- Editor de sitio (FSE)
- Herramienta de los temas de bloques: editar todo el sitio con los bloques Gutenberg.
Ejemplo sencillo: modificar la cabecera y el pie de página sin código.
Lo que no es: creer que el FSE solo afecta a las entradas.
Reflejo: tema de bloques = FSE.
- Plantilla (template)
- Estructura de un tipo de página (inicio, entrada, 404), reutilizada para todos los contenidos de ese tipo.
Ejemplo sencillo: la plantilla de entrada se aplica a todos los consejos.
Lo que no es: recrear la estructura para cada entrada.
Reflejo: una plantilla para un tipo de página.
- Estilos globales
- Colores y fuentes de todo el sitio, ajustados en un solo lugar.
Ejemplo sencillo: cambiar la paleta actualiza todas las páginas.
Lo que no es: recolorear cada bloque página por página.
Reflejo: coherencia = estilos globales.
- Parte de plantilla
- Elemento reutilizado (cabecera, pie de página) editado una vez y aplicado en todas partes.
Ejemplo sencillo: la cabecera con logo y menú.
Lo que no es: modificar la cabecera en cada página por separado.
Reflejo: cabecera y pie = partes de plantilla.
En la práctica — Personalizar según el tema
- Identifica tu caso: si existe Apariencia → Editor, es FSE; si no, Apariencia → Personalizar.
- FSE: Estilos → cambia la paleta y la tipografía globales.
- FSE: edita la cabecera (logo, menú) y el pie de página mediante las partes de plantilla.
- Clásico: ajusta logo, colores y cabecera en el Personalizador y publica.
Guion listo para decir — explicar la personalización (25 s)
«Ajusto sus colores y sus fuentes una sola vez, y todo el sitio los adopta automáticamente. La cabecera y el pie de página también se modifican sin código: si cambia un número o el logo, basta con una sola actualización.»
Insistir en el mantenimiento: lo que es global evita olvidos.
Modelo copiar-pegar — identidad visual
TIPO DE TEMA: clásico / bloques
COLOR PRINCIPAL: _______________
COLOR SECUNDARIO: _______________
FUENTE DE LOS TÍTULOS: _______________
FUENTE DEL TEXTO: _______________
CABECERA: logo + menú
PIE DE PÁGINA: datos de contacto + aviso legalTema clásico
Todo pasa por el Personalizador; los widgets siguen aparte.
Tema de bloques
FSE para la cabecera, el pie y las plantillas; estilos globales para la identidad.
Identidad fuerte
Definir primero la paleta y la tipografía, y después componer las páginas.
Rediseño
Hacer copia de seguridad antes de cambiar los estilos globales de un sitio en línea.
✓ Buenas prácticas
- Identificar el tipo de tema antes de buscar la herramienta.
- Ajustar la identidad en los estilos globales.
- Editar la cabecera y el pie mediante las partes de plantilla.
✗ Errores frecuentes
- Buscar el Personalizador en un tema FSE.
- Recolorear cada página bloque por bloque.
- Olvidar comprobar el resultado móvil tras la personalización.
Puntos clave
- Clásico → Personalizador; bloques → FSE.
- El FSE edita todo el sitio con los bloques.
- Los estilos globales garantizan la coherencia.
- Las partes de plantilla se editan de una vez para siempre.
Reto 48h — aplícalo mañana
En un sitio local, cambia la paleta y la tipografía globales y luego modifica la cabecera para colocar un logo y un menú. Comprueba que todas las páginas siguen el cambio. 25 minutos.
- Sé qué herramienta utilizar según el tema.
- Modifico los colores y las fuentes globalmente.
- Edito la cabecera y el pie sin código.
Preguntas frecuentes
¿Dónde ha ido el Personalizador?
En un tema de bloques (FSE), lo sustituye Apariencia → Editor. Es normal: los ajustes de apariencia pasan por los estilos globales y las partes de plantilla.
¿Puedo cambiar los colores sin tocar el contenido?
Sí: los estilos globales actúan sobre la apariencia, no sobre los textos ni las imágenes. Un cambio de paleta se refleja en todas partes sin reescribir las páginas.
¿Los cambios se ven de inmediato?
En el Personalizador y en el FSE se trabaja con una vista previa; nada es público hasta que se publica. En un sitio en línea, comprueba siempre después de publicar.
El tema del taller es un tema de bloques. ¿Dónde ajusta Samir los colores y fuentes de todo el sitio?