Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 1
Introducción
En esta guía aprenderás a crear un tema Full Site Editing (FSE) desde cero utilizando WordPress 7.0. Partiremos de una instalación limpia y construiremos la estructura mínima necesaria para que WordPress reconozca el tema como un tema de bloques.
En la entrada anterior vimos las diferencias entre un tema clásico y un tema Full Site Editing.
Después de trabajar siempre con temas clásicos, decidí crear uno desde cero para entender cómo funciona realmente esta nueva forma de construir sitios web con WordPress.
Mi objetivo no era desarrollar un tema completo ni listo para producción, sino descubrir cuál es la estructura mínima necesaria para que WordPress lo reconozca y permita editarlo desde el Editor del sitio.
A lo largo de esta entrada voy a mostrar los archivos que he utilizado, los problemas que me he encontrado durante las pruebas y cómo los he ido resolviendo.
Requisitos
- WordPress 7.0 o superior.
- Entorno local (LocalWP en mi caso).
- Conocimientos básicos de HTML y CSS.
- Editor de código (Visual Studio Code en mi caso).
Lo que vamos a construir
Durante esta práctica vamos a crear un tema llamado fse-pba. Tendrá una cabecera, un pie de página y una plantilla principal y más plantillas que iremos viendo a lo largo de esta entrada. No será un tema totalmente terminado, pero sí una base perfecta para experimentar con Full Site Editing.
Crear la estructura básica de un tema FSE
Bastará con crear en la raíz del proyecto un fichero style.css y una carpeta llamada ‘templates’ que contenga un fichero index.html.
Sin embargo, el tema mínimo realmente útil que yo utilizaría para comenzar una práctica sería:
Aunque WordPress puede reconocer un tema FSE con únicamente un archivo style.css y una plantilla templates/index.html, durante las pruebas fui añadiendo otros archivos para hacerlo más práctico y acercarlo a un proyecto real.
En los temas clásicos, la plantilla de respaldo es index.php. En un tema Full Site Editing esa función la desempeña templates/index.html, por lo que será el primer archivo que veremos en nuestro proyecto, después de añadir la cabecera al style.css.
Creando una cabecera en el style.css
Una vez creada la estructura básica del tema, vamos a editar el archivo style.css.
Este encabezado es suficiente para que WordPress reconozca el tema.
Este archivo contiene la información que WordPress utiliza para identificar el tema en la pantalla Apariencia → Temas.
/*
Theme Name: FSE
Author: FranSanto
Version: 1.0
Text Domain: fse-pba
*/
Si has desarrollado temas clásicos anteriormente, comprobarás que esta cabecera es prácticamente idéntica a la utilizada en cualquier otro tema de WordPress.
Aunque los temas Full Site Editing utilizan plantillas HTML y el archivo theme.json, el fichero style.css sigue siendo necesario para que WordPress reconozca el tema.
Si ahora vamos al navegador para ver nuestro proyecto, veremos algo así:
Este resultado es completamente normal. Aunque el tema ya está activo, la plantilla templates/index.html todavía no contiene ningún bloque, por lo que WordPress no tiene nada que mostrar.
Plantilla de inicio
Por cada archivo .html que vayamos creando dentro de la carpeta templates, WordPress lo reconocerá automáticamente como una plantilla del tema.
Estas plantillas pueden consultarse desde Apariencia → Editor → Plantillas, donde también podremos modificarlas visualmente desde el Editor del sitio.
Como todavía no hemos añadido ningún bloque al archivo templates/index.html, WordPress muestra una plantilla vacía. Vamos a solucionarlo añadiendo nuestro primer bloque.
Primer bloque en la plantilla ‘Índice’
Para nuestra primera prueba hemos añadido un bloque Grupo con un ancho de contenido de 900px. Dentro de él hemos insertado un párrafo con el texto «Ola k ace» y lo hemos alineado al centro.
Una vez guardados los cambios, este será el resultado en la parte pública del sitio:
Nuestro proyecto sigue siendo muy sencillo, pero ya hemos dado un paso importante: hemos pasado de una plantilla vacía a una página capaz de mostrar contenido.
Configurando theme.json
Hasta ahora nuestro tema funciona, pero sigue utilizando la configuración predeterminada de WordPress. Vamos a ver algunos aspectos globales del diseño, en el archivo theme.json definiremos los colores y los anchos de contenido que utilizaremos en el proyecto.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
palette": [
{
"slug": "blanco",
"name": "Blanco",
"color": "#ffffff"
},
{
"slug": "negro",
"name": "Negro",
"color": "#000000"
},
{
"slug": "principal",
"name": "Principal",
"color": "#cc454e"
}
]
},
"layout": {
"contentSize": "900px",
"wideSize": "1300px"
}
}
}
Definiendo una paleta de colores
La sección color.palette permite crear una paleta personalizada para el tema. En nuestro caso hemos definido únicamente tres colores:
- Blanco (#ffffff)
- Negro (#000000)
- Principal (#cc454e)
Estos colores estarán disponibles en los bloques que permitan seleccionar colores de texto, fondo o enlaces.
contenSize define el ancho normal del contenido.
wideSize define el ancho utilizado por los bloques alineados como ancho amplio.
"defaultPalette": false → Oculta la paleta predeterminada "custom": false → Impide elegir colores presonalizados
Creando la plantilla front-page.html
Hasta ahora nuestro tema únicamente dispone de la plantilla index.html, por lo que todas las peticiones son gestionadas por ella.
Vamos a crear una plantilla específica para la portada del sitio.
Creamos el archivo templates/front-page.html.
Una vez guardado el archivo, WordPress lo detectará automáticamente y lo añadirá a la lista de plantillas disponibles.
Al hacer clic en editar nos presenta una serie de patrones donde elegir, cerramos la ventana y editamos.
Los recursos incluidos en este archivo se proporcionan únicamente para facilitar el seguimiento de esta práctica. Puedes utilizarlos libremente durante el desarrollo del tema.
Queremos conseguir algo así:
Editamos la plantilla Página de inicio e insertamos un bloque Fondo. A continuación le asignamos una altura mínima de 100vh, de forma que ocupe toda la altura visible del navegador. Finalmente seleccionamos la imagen que utilizaremos como fondo.
Dentro de ese bloque de ‘Fondo’ metemos:
Una vez creada esta estructura podremos personalizar los colores, la tipografía y los espacios desde el Editor del sitio para obtener nuestro primer bloque hero.
- h1: Transformo tu idea en una presencia digital que impacta, 45px
- Espacio: 30px.
- Párrafo: Diseños modernos, rápidos y pensados para destacar, 24px.
- Espacio: 50px.
- Botón: Entrar. pading 20px 125px
Durante las pruebas descubrí que el Editor del sitio no siempre permite ajustar el padding del botón exactamente como necesitamos. En estos casos resulta más práctico utilizar CSS personalizado
Al seleccionar la variación Relleno para nuestro botón, WordPress añade automáticamente la clase is-style-fill. Aprovecharemos esta clase para personalizar su apariencia mediante CSS sin afectar a otros botones del sitio.
Durante las pruebas observé que, aunque el botón utilizaba la variación Relleno, WordPress no añadía la clase is-style-fill al HTML generado. Para poder aplicar estilos CSS específicos al botón, añadí manualmente esta clase desde las opciones avanzadas del bloque.
Podríamos haber utilizado cualquier nombre para la clase (boton-principal, herp-button, etc.). En este ejemplo hemos utilizado is-style-fill porque describe el aspecto que queremos dar al botón.
Aunque se trata de un tema Full Site Editing, seguimos pudiendo utilizar CSS tradicional para personalizar aquellos aspectos que no podemos controlar cómodamente desde el Editor del sitio o mediante theme.json.
/*
Theme Name: fse-pba
Author: FranSanto
Version: 1.0
Text Domain: fse-local
*/
.is-style-fill .wp-block-button__link {
padding: 20px 125px !important;
}
Hasta este momento hemos utilizado el archivo style.css para añadir algunos estilos personalizados a nuestro tema. Sin embargo, al recargar la página comprobamos que dichos estilos no se aplican.
Aunque WordPress utiliza la cabecera de style.css para reconocer el tema, esto no significa que la hoja de estilos se cargue automáticamente en el frontal del sitio. Para asegurarnos de que nuestros estilos se aplican correctamente, debemos encolar el archivo desde functions.php.
<?php
function fse_local_styles() {
wp_enqueue_style(
'fse-local-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'fse_local_styles' );
Registrando una fuente local en theme.json
Hasta este momento hemos utilizado la tipografía predeterminada de WordPress.
Playwrite IT Moderna será la fuente principal de nuestro proyecto, vamos a registrarla en theme.json para que pueda utilizarse en todo el sitio y desde el propio Editor del sitio.
En lugar de cargar la fuente desde un servicio externo, vamos a almacenarla localmente dentro del tema. Esta práctica ofrece varias ventajas:
- El tema no dependerá de servicios de terceros para cargar la tipografía.
- Reduciremos las peticiones externas realizadas por el navegador.
- Tendremos un mayor control sobre los recursos que utiliza el proyecto.
- La fuente seguirá funcionando aunque el servicio externo deje de estar disponible.
- Resulta más sencillo distribuir el tema con todos los recursos necesarios incluidos en su estructura.
- Favorece el cumplimiento de determinadas políticas de privacidad al evitar solicitudes a servidores externos.
Descargaremos la fuente desde Google Webfonts Helper.
Si necesitas ayuda para descargar una fuente de Google Fonts y alojarla localmente en tu proyecto, puedes consultar la entrada Cómo incluir Google Fonts localmente en WordPress, donde explico paso a paso el procedimiento utilizado para obtener los archivos necesarios.
Una vez descargada la fuente, la incorporamos a la estructura del proyecto dentro de la carpeta assets/fonts.
Para que WordPress pueda utilizar esta fuente desde el Editor del sitio, debemos registrarla en el archivo theme.jon.
"layout": {
"contentSize": "900px",
"wideSize": "1300px"
},
"typography": {
"fontFamilies": [
{
"fontFamily": "\"Playwrite IT Moderna\", sans-serif",
"name": "Playwrite IT Moderna",
"slug": "playwrite-it-moderna",
"fontFace": [
{
"fontFamily": "Playwrite IT Moderna",
"fontWeight": "400",
"fontStyle": "normal",
"src": [
"file:./assets/fonts/playwrite-it-moderna-v11-latin-regular.woff2"
]
}
]
}
]
}
Tras registrar la fuente en theme.json, esta pasa a formar parte de la configuración global del tema. Como resultado, los bloques de texto utilizan automáticamente Playwrite IT Moderna sin que tengamos que asignarla manualmente a cada uno de ellos
Con esto damos por finalizada la plantilla front-page.html. Aunque se trata de una portada sencilla, nos ha permitido conocer algunos de los elementos más importantes de un tema Full Site Editing:
- La creación de plantillas HTML.
- El uso del Editor del sitio.
- La configuración global mediante theme.json.
- La incorporación de fuentes locales.
- La personalización mediante CSS cuando el editor no ofrece todas las opciones necesarias.
Por el momento hemos dejado el botón ‘Entrar’ sin destino. Más adelante veremos cómo enlazarlo con otras partes del sitio.
Quizás te estés preguntando qué pasa con los archivos .html, ya que no hemos escrito una sola línea de código en ellos.
No te preocupes. Más adelante veremos cómo pasar las plantillas que hemos creado desde el Editor del sitio a sus correspondientes archivos .html, de forma que el tema quede completamente integrado dentro de nuestra estructura de ficheros.
Puedes ampliar conocimientos visitando:
Guía de Referencia de theme.json
Block Themes Handbook
Theme Developer Handbook