Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 2
En la primera parte de este curso aprendimos a crear un tema FSE desde cero y construimos su estructura básica. Creamos los archivos mínimos necesarios para que WordPress reconociera el tema, configuramos thene.json y dimos forma a la página de inicio utilizando exclusivamente el Editor del sitio.
A partir de este momento vamos a empezar a crear los elementos que forman la estructura de cualquier sitio web desarrollado con WordPress. Aunque puedan parecer independientes, la cabecera, el pie de página y las plantillas trabajan conjuntamente para ofrecer una experiencia de navegación coherente en todas las páginas del sitio. Comprender cómo se relacionan entre sí es uno de los pasos más importantes para desarrollar temas Full Site Editing de forma profesional.
Originalmente, todo este contenido se encontraba reunido en un único capítulo. Sin embargo, durante la evolución de este curso comprobé que cada uno de estos elementos merece una explicación más detallada. Por ese motivo, la antigua Parte 2 se ha dividido en tres capítulos independientes. De esta forma resulta más sencillo seguir el proceso paso a paso, localizar cualquier explicación cuando la necesites y profundizar en cada concepto sin mezclar varios temas en una misma lección.
En los siguientes capítulos aprenderemos a construir la cabecera del tema mediante una Parte de plantilla (Template Part) reutilizable. Veremos cómo organizar el logotipo y el menú de navegación, cómo utilizar los bloques Grupo y Fila para crear una estructura limpia y flexible y cómo configurar el espaciado mediante theme.json. Al finalizar este capítulo tendrás un header preparado para reutilizarse automáticamente en todas las plantillas del tema.
Una vez creada la cabecera, construiremos el pie de página siguiendo exactamente la misma filosofía. Descubrirás por qué WordPress utiliza Partes de plantilla para evitar duplicar contenido y cómo un único cambio en el footer puede actualizarse automáticamente en todas las páginas del sitio. También veremos una estructura sencilla que podrás ampliar posteriormente con iconos sociales, enlaces adicionales o cualquier otro contenido que necesite tu proyecto.
Finalmente, aprenderemos a crear la primera plantilla de nuestro tema: page.html. Hasta ese momento habremos construido un header y un footer reutilizables, pero todavía no estarán siendo utilizados por ninguna plantilla. En este último capítulo veremos cómo crear la plantilla para las páginas, insertar en ella las Partes de plantilla que hemos desarrollado anteriormente y utilizar los bloques dinámicos de WordPress para mostrar automáticamente el contenido correspondiente a cada página. También explicaremos una incidencia habitual relacionada con los cambios en theme.json y cómo resolverla cuando el Editor del sitio no refleja correctamente las modificaciones realizadas.
Qué aprenderemos en esta Parte 2
Parte 2-1 — Creando el header del tema
Aprenderás a crear la cabecera utilizando una Parte de plantilla reutilizable, organizar el logotipo y el menú de navegación y configurar correctamente su estructura y espaciado.
Parte 2-2 — Creando el footer del tema
Construiremos un pie de página reutilizable que podrá utilizarse en todas las plantillas del tema y que podrás ampliar fácilmente en el futuro.
Parte 2-3 — Creando la plantilla page-html
Crearemos la primera plantilla completa del tema utilizando el header y el footer desarrollados en los capítulos anteriores e incorporaremos los bloques dinámicos necesarios para mostrar el contenido de las páginas.