Cómo crear un tema Full Site Editing (FSE) desde cero. Creando la plantilla page.html
Crear la plantilla page.html en WordPress paso a paso
En esta lección aprenderemos a crear una plantilla de página para un tema Full Site Editing. Hasta ahora hemos creado una cabecera y un pie de página reutilizables, pero todavía no los estamos utilizando en ninguna plantilla. El siguiente paso será crear una plantilla para las páginas del sitio e incorporar en ella nuestras Partes de plantilla.
En esta lección crearemos el archivo page.html dentro de la carpeta templates y construiremos su estructura utilizando los bloques Header, Grupo, Título de la entrada, Contenido de la entrada y Pie de página. Al finalizar, tendremos una plantilla de página funcional que utilizará las partes de plantilla que hemos creado en las lecciones anteriores.
Nota: También podríamos haber creado esta plantilla directamente desde el Editor del sitio. Sin embargo, para comprender mejor el funcionamiento interno de los temas FSE, en este ejemplo hemos optado por crear previamente el archivo templates/page.html.
Una vez creado el archivo page.html, WordPress detectará automáticamente la nueva plantilla. Podemos comprobarlo desde Apariencia → Editor → Plantillas.
Header
Grupo
├── Título de la entrada
└── Contenido de la entrada
Pie de página
Se ha insertado los siguientes bloques:
- Header
- Grupo
- Título de la entrada
- Contenido de la entrada
- Pie de página
Los bloques Título de la entrada y Contenido de la entrada son bloques dinámicos. Su función es mostrar información de la página que se está visualizando, por lo que disponen de menos opciones de diseño que otros bloques. Para controlar su anchura y espaciado los introduciremos dentro de un bloque Grupo.
En realidad no es una limitación del tema, es el comportamiento normal de esos bloques dinámicos de WordPress.
Qué hemos aprendido
En esta lección hemos aprendido a crear la plantilla page.html, incorporar las Partes de plantilla header y footer y mostrar el contenido dinámico de las páginas mediante los bloques Título de la entrada y Contenido de la entrada.
En la siguiente parte comenzaremos a trabajar con las plantillas del blog y veremos cómo mostrar automáticamente las entradas del sitio.
Puedes ampliar conocimientos visitando:
Partes de Plantillas
Plantillas
Bloque de Contenido de la entrada
Guía de referencia de theme.json