Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 10
Durante las nueve primeras partes de esta serie hemos creado las principales plantillas HTML en WordPress para nuestro tema Full Site Editing, aprendiendo cómo WordPress las utiliza para mostrar el contenido en cada situación.
Sin embargo, aunque el tema ya es completamente funcional, todavía queda un paso muy importante. Todas las modificaciones realizadas desde el Editor del sitio se almacenan en la base de datos de WordPress y, por tanto, no forman parte del tema que estamos desarrollando.
En este capítulo aprenderemos a trasladar el contenido de esas plantillas a sus correspondientes archivos HTML dentro de la carpeta templates. De esta forma, el tema será completamente independiente de la instalación en la que se ha creado y podrá reutilizarse, distribuirse o instalarse en cualquier otro sitio WordPress.
Al finalizar esta parte, todas las plantillas creadas durante la serie estarán integradas en el propio tema, completando así una de las fases más importantes del desarrollo de un tema Full Site Editing.
¿Por qué debemos guardar las plantillas en el tema?
Hasta ahora hemos creado todas las plantillas utilizando el Editor del sitio de WordPress. Esta forma de trabajar es muy cómoda, ya que nos permite diseñar visualmente cada plantilla sin necesidad de escribir código.
Sin embargo, existe un detalle que muchas veces pasa desapercibido: los cambios realizados desde el Editor no se guardan directamente en los archivos del tema.
WordPress almacena estas modificaciones en la base de datos como una personalización del tema activo. Esto significa que, aunque las plantillas funcionen correctamente, el código no se encuentra dentro de la carpeta templates de nuestro tema.
Esta situación puede convertirse en un problema si queremos:
- Utilizar el tema en otra instalación de WordPress.
- Compartir el tema con otros usuarios.
- Publicarlo en un repositorio.
- Mantener una copia de seguridad del código.
- Trabajar con un sistema de control de versiones como Git.
En todos estos casos, el tema debe contener sus propias plantillas para que funcione de forma completamente independiente.
Por este motivo, una vez terminada la creación de las plantillas, es recomendable trasladar su contenido a los archivos HTML correspondientes del tema.
¿Cómo vamos a hacerlo?
En este capítulo iremos abriendo cada una de las plantillas creadas durante la serie desde el Editor del sitio. A continuación copiaremos su contenido y lo pegaremos en el archivo HTML correspondiente dentro de la carpeta templates de nuestro tema.
Una vez trasladadas todas las plantillas, comprobaremos que el tema sigue funcionando correctamente y, por último, eliminaremos las personalizaciones almacenadas en la base de datos para que WordPress utilice únicamente los archivos incluidos en el tema.
Al finalizar este proceso, nuestro tema será completamente autónomo y podrá instalarse en cualquier sitio WordPress sin depender de la instalación en la que fue desarrollado.
La estructura de nuestro tema quedará similar a la siguiente:
Copiando las plantillas HTML de WordPress al tema
Plantilla ‘Índice’
En nuestro caso, la plantilla Índice (index.html) permanece prácticamente vacía. Esto se debe a que, a lo largo de la serie, hemos ido creando plantillas más específicas para cada tipo de contenido, por lo que WordPress apenas necesita recurrir a ella.
Aun así, es recomendable conservar este archivo dentro del tema, ya que actúa como plantilla de respaldo cuando no existe otra más específica.
Copiando la plantilla ‘Página de inicio’
Comenzaremos trasladando la plantilla Página de inicio al archivo correspondiente de nuestro tema, front-page.html.
Aunque durante la serie hemos creado esta plantilla utilizando el Editor del sitio, el objetivo ahora es que pase a formar parte del propio tema. Para ello copiaremos su contenido y lo pegaremos en el archivo front-page.html situado dentro de la carpeta templates.
Una vez guardado el archivo, la plantilla quedará integrada en el tema y podremos reutilizarla en cualquier instalación de WordPress sin necesidad de volver a crearla.
Seguiremos los siguientes pasos:
- Accede a Apariencia → Editor.
- Haz clic en Plantillas.
- Abre la plantilla Página de inicio.
- Pulsa el menú de los tres puntos.
- Selecciona Editor de código.
- Copia todo el contenido.
- Pégalo en templates/front-page.html.
- Guarda el archivo.
En las siguientes imágenes puedes ver el proceso completo. Primero abrimos la plantilla Página de inicio desde el Editor del sitio y, a continuación, cambiamos al Editor de código para copiar todo su contenido.
Copia todo el código y pégalo en templates/front-page.html.
Guarda el archivo y comprueba que no se ha modificado ningún bloque durante el proceso. A partir de este momento, la plantilla Página de inicio ya forma parte del tema y podremos conservarla junto al resto de archivos del proyecto.
Copiando la plantilla ‘Inicio del blog’
La plantilla Inicio del blog corresponde al archivo templates/home.html de nuestro tema.. Esta plantilla es la encargada de mostrar el listado de entradas cuando WordPress utiliza una página para el blog.
El procedimiento es exactamente el mismo que hemos seguido con la plantilla Página de inicio.
La única diferencia es que, en este caso, el contenido deberá copiarse al archivo: templates/home.html.
Utilizaremos este mismo procedimiento para trasladar el resto de plantillas del Editor a sus correspondientes archivos HTML del tema.
Correspondencia entre plantilla y archivo
| Nombre de la plantilla en el Editor | Archivo del tema |
|---|---|
| Índice | index.html |
| Página de inicio | front-page.html |
| Inicio del Blog | home.html |
| Páginas | page.html |
| Todos los archivos | archive.html |
| Resultados de búsqueda | search.html |
| Página: 404 | 404.html |
Más adelante, cuando continuemos la serie, añadiremos las siguientes:
| Nombre de la plantilla en el Editor | Archivo del tema |
|---|---|
| Entradas individuales | single.html |
| Autor | author.html |
| Categoría | category.html |
| Etiqueta | tag.html |
| Fecha | date.html |
¿Qué ocurre si modificamos o eliminamos una plantilla desde el Editor?
Una vez copiadas las plantillas a los archivos HTML del tema, es importante comprender cómo actúa WordPress cuando realizamos cambios desde el Editor del sitio.
Si eliminamos todos los bloques y guardamos la plantilla
Aunque la plantilla quede completamente vacía, WordPress seguirá utilizando esa versión almacenada en la base de datos.
Esto significa que no volverá automáticamente al archivo HTML del tema, ya que la personalización continúa existiendo y tiene prioridad sobre el contenido de la carpeta templates.
Si restablecemos la plantilla
Si restablecemos una plantilla, WordPress elimina únicamente la versión personalizada almacenada en la base de datos. A partir de ese momento, tanto el sitio web como el Editor del sitio utilizarán el archivo HTML correspondiente incluido en la carpeta templates del tema.
Cualquier modificación realizada posteriormente en ese archivo se reflejará tanto en el frontal como en el Editor, siempre que se respete la estructura de los bloques de WordPress.
Si restablecemos todas las plantillas
Cuando todas las plantillas personalizadas han sido restablecidas, WordPress dejará de utilizar las versiones almacenadas en la base de datos y trabajará exclusivamente con los archivos HTML del tema.
Este es el comportamiento que normalmente buscamos cuando terminamos de desarrollar un tema Full Site Editing.
Si modificamos el archivo HTML del tema
Una vez restablecida una plantilla, cualquier modificación realizada en su archivo HTML se reflejará directamente en el sitio web, ya que al no existir una versión personalizada en la base de datos, WordPress trabajará con el archivo incluido en la carpeta templates del tema.
Importante: si, después de restablecer una plantilla, vuelves a modificarla y guardarla desde el Editor del sitio, WordPress creará de nuevo una versión personalizada en la base de datos. A partir de ese momento, esa versión volverá a tener prioridad sobre el archivo HTML incluido en el tema.
Nota: si editamos manualmente el contenido de un archivo HTML del tema, debemos respetar la estructura de los bloques (<!-- wp:... -->). Si modificamos elementos internos, como cambiar un encabezado h1 por h3, el Editor del sitio puede marcar el bloque como «contenido inesperado o no válido», aunque el frontal del sitio se muestre correctamente el cambio al h3.
Conclusión
En este capítulo hemos aprendido a trasladar las plantillas creadas con el Editor del sitio y a guardar las plantillas HTML en WordPress dentro de nuestro tema.
Aunque WordPress permite diseñar visualmente cada plantilla, mantenerlas dentro de la carpeta templates nos ofrece importantes ventajas: el tema deja de depender de la base de datos, resulta más sencillo de mantener y puede instalarse o distribuirse en cualquier sitio WordPress sin perder las personalizaciones realizadas.
En la próxima parte continuaremos ampliando nuestro tema creando la plantilla Entradas individuales (single.html), donde aprenderemos a mostrar el contenido completo de cada entrada mediante bloques dinámicos.
Puedes ampliar conocimientos visitando:
Editor del sitio
Jerarquía de plantillas
Plantillas
Editor de bloques de WordPress