Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 11

En esta Parte 11 aprenderemos a crear la plantilla single en WordPress para definir cómo se mostrarán las entradas individuales de nuestro sitio. Continuaremos así desarrollando el tema Full Site Editing (FSE) que hemos construido a lo largo de esta serie.

Hasta ahora hemos comenzado creando cada archivo HTML dentro de la carpeta templates y posteriormente hemos utilizado el Editor del sitio de WordPress para añadir y organizar los bloques de cada plantilla. En esta parte vamos a cambiar el procedimiento para conocer otra forma de trabajar con las plantillas de un tema de bloques.

Crearemos directamente desde Apariencia → Editor → Plantillas la plantilla encargada de mostrar las entradas individuales del blog. Para construirla utilizaremos diferentes bloques dinámicos que nos permitirán mostrar automáticamente información como el título, la imagen destacada, la fecha, el autor y el contenido de cada entrada.

Una vez terminado el diseño, trasladaremos el código generado por WordPress al archivo single.html dentro de la carpeta templates, aplicando así lo aprendido en el capítulo anterior y consiguiendo que la nueva plantilla forme parte de nuestro tema.

Al finalizar esta parte, nuestro tema Full Site Editing dispondrá de una plantilla específica para las entradas individuales y, además, habremos aprendido dos formas diferentes de crear y desarrollar plantillas en WordPress.

¿Qué es la plantilla single en WordPress?

La plantilla single.html es la encargada de definir cómo se muestran las entradas individuales de nuestro sitio cuando utilizamos un tema Full Site Editing.

A diferencia de otras plantillas que muestran conjuntos de contenidos, como home.html o archive.html, single.html está pensada para mostrar una única entrada completa.

Dentro de ella podemos utilizar bloques dinámicos para mostrar automáticamente la información correspondiente a cada entrada, como el título, la imagen destacada, la fecha de publicación, el autor, el contenido, las categorías o las etiquetas.

De esta forma podemos definir una única estructura que WordPress utilizará para mostrar todas las entradas del blog, sin necesidad de diseñar individualmente cada una de ellas.

¿Qué vamos a construir?

A diferencia de las plantillas anteriores, esta vez no comenzaremos creando el archivo single.html dentro de la carpeta templates. Crearemos la plantilla directamente desde Apariencia → Editor → Plantillas, aprendiendo así otra forma de trabajar con las plantillas de un tema Full Site Editing.

Nuestra plantilla estará formada por los bloques necesarios para mostrar la información principal de cada entrada:

Crear la plantilla

Entramos en: Apariencia → Editor → Plantillas y pulsamos Añadir plantilla.

WordPress nos mostrará los tipos de plantilla que podemos crear. Para nuestro caso debemos elegir la correspondiente a las Entradas individuales.

Hacemos clic en Entradas individuales.

Construyendo la estructura de la plantilla

Una vez creada, entramos en ella y abrimos la Vista de lista. Antes de preocuparnos por colores, tamaños, márgenes o tipografías, vamos a construir toda su estructura.

Personalizando la plantilla

Utilizando las opciones disponibles en el Editor del sitio, configuraremos los diferentes bloques para adaptar la plantilla single de WordPress al diseño general de nuestro tema Full Site Editing.

Comenzaremos por el Grupo que contiene toda la información de la entrada y continuaremos con cada uno de los bloques que forman la plantilla.

Personalizando el Grupo

El Grupo es el contenedor principal de nuestra entrada y contiene todos los bloques comprendidos entre la cabecera y el pie de página.

Seleccionamos el bloque Grupo desde la Vista de lista y utilizamos las opciones de la barra lateral para establecer la disposición y dimensiones que tendrá el contenido de nuestras entradas.

Personalizando el Título

En nuestro caso mantendremos el bloque Título con su configuración actual, aunque desde el Editor del sitio podemos modificar diferentes aspectos de su apariencia.

Entre las principales opciones de personalización disponibles se encuentran:

• Alineación del título.
• Nivel del encabezado (h1, h2, h3, etc.).
• Tipografía, pudiendo modificar aspectos como el tamaño, la apariencia, la altura de línea o el espaciado entre letras, según las opciones habilitadas por el tema.
• Color del texto y, cuando esté disponible, del fondo.
• Dimensiones, como márgenes y relleno.
• Anchura y alineación del bloque dentro de la plantilla.
• Opciones avanzadas, como la clase CSS adicional.

En nuestro caso solo realizaremos una modificación: estableceremos el título como encabezado H1.

Personalizando la Imagen destacada

El bloque Imagen destacada muestra automáticamente la imagen destacada asignada a cada entrada.

En nuestro caso mantendremos su configuración actual, aunque el Editor del sitio permite personalizar diferentes aspectos del bloque:

• Resolución de la imagen.
• Relación de aspecto.
• Anchura y altura.
• Escala de la imagen.
• Alineación.
• Enlace de la imagen.
• Bordes y radio de las esquinas.
• Márgenes y otras dimensiones disponibles.
• Opciones avanzadas, como la incorporación de una clase CSS adicional.

Personalmente solo haría una modificación, aplicar un radio a los bordes superiores de la imagen.

Al tratarse de un bloque dinámico, WordPress mostrará automáticamente la imagen destacada correspondiente a cada entrada.

Personalizando la Fecha y el Autor

Los bloques Fecha de la entrada y Nombre del autor se encuentran dentro de un bloque Fila, lo que nos permite mostrarlos horizontalmente y mantener agrupada la información relacionada con la publicación.

En nuestro caso mantendremos su configuración actual, aunque ambos bloques disponen de diferentes opciones para adaptar su apariencia al diseño de la plantilla.

Entre las principales opciones de personalización disponibles se encuentran:

• Alineación de los elementos.
• Tipografía, pudiendo modificar el tamaño, apariencia, altura de línea y otras opciones disponibles.
• Color del texto y del fondo.
• Espaciado entre los elementos.
• Dimensiones, como márgenes y relleno cuando estén disponibles.
• Enlaces, permitiendo configurar determinados comportamientos propios de cada bloque.
• Opciones avanzadas, como la incorporación de clases CSS adicionales.

Si observamos la imagen anterior, podemos comprobar que la fecha aparece en formato anglosajón. Como nuestro sitio está en español, resulta más apropiado mostrarla siguiendo el orden día, mes y año.

Para modificarlo, seleccionamos el bloque Fecha de la entrada y, desde sus opciones de configuración, elegimos un formato de fecha adecuado para nuestro sitio.

En nuestro caso utilizaremos el formato día, mes y año, consiguiendo que la fecha se muestre de una forma más natural para los visitantes de nuestro sitio.

En el bloque Nombre del autor mantendremos la configuración predeterminada, ya que su apariencia se integra correctamente con el resto de la información de la entrada.

Personalizando el Contenido

El bloque Contenido es el encargado de mostrar el contenido principal de cada entrada, incluyendo los párrafos, imágenes, encabezados y demás bloques que hayamos utilizado al crearla.

Al tratarse de un bloque dinámico, no añadiremos ningún contenido directamente desde la plantilla. WordPress mostrará automáticamente el contenido correspondiente a la entrada que esté visitando el usuario.

En nuestro caso mantendremos su configuración actual, aunque desde el Editor del sitio podemos modificar algunos aspectos relacionados con su disposición y presentación.

Personalizando las Categorías y Etiquetas

Los bloques Categorías y Etiquetas permiten mostrar la información utilizada para clasificar y organizar cada entrada del blog. Al tratarse de bloques dinámicos, WordPress mostrará automáticamente las categorías y etiquetas asignadas a la entrada que esté visitando el usuario.

En nuestra plantilla hemos colocado ambos bloques dentro de una Fila, de forma que esta información pueda mostrarse agrupada y mantener una estructura ordenada.

Desde el Editor del sitio podemos personalizar diferentes aspectos de estos bloques:

• Tipografía, modificando el tamaño, apariencia, altura de línea y otras opciones disponibles.
• Color del texto, los enlaces y el fondo, según las opciones disponibles.
• Separador utilizado cuando una entrada pertenece a varias categorías o contiene varias etiquetas.
• Enlaces, permitiendo acceder desde cada categoría o etiqueta a su correspondiente archivo.
• Dimensiones, como márgenes y relleno cuando estén disponibles.
• Opciones avanzadas, como la incorporación de clases CSS adicionales.

Para diferenciar visualmente las categorías de las etiquetas, asignaremos un color diferente a cada uno de los bloques.

Seleccionamos el bloque Categorías y desde Color → Texto elegimos el color principal de nuestro tema (#cc454e). A continuación, seleccionamos el bloque Etiquetas y establecemos el color negro (#000000).

De esta forma mantenemos ambos elementos dentro de la misma Fila, pero conseguimos que el visitante pueda distinguirlos visualmente con mayor facilidad.

Personalizando Entrada anterior y Entrada siguiente

Los bloques Entrada anterior y Entrada siguiente permiten navegar entre las diferentes entradas del blog sin necesidad de regresar al archivo de entradas.

En nuestra plantilla los hemos colocado inicialmente como dos bloques independientes. Ahora vamos a mejorar su disposición para que formen una navegación más clara.

Insertamos un bloque Fila y colocamos dentro los dos bloques. A continuación, seleccionamos la Fila y, desde las opciones de Estructura de la barra lateral derecha, elegimos Espacio entre los elementos. De esta forma, Entrada anterior quedará situada a la izquierda y Entrada siguiente a la derecha.

Finalmente, configuramos los bloques Entrada anterior y Entrada siguiente para mostrar las flechas de navegación. De esta forma, además de indicar mediante el texto hacia qué entrada podemos desplazarnos, reforzamos visualmente el sentido de la navegación.

El resultado será una navegación sencilla, con Entrada anterior situada a la izquierda y Entrada siguiente a la derecha, utilizando el color principal de nuestro tema.

Guardando la plantilla single de WordPress en nuestro tema

Una vez terminada y personalizada nuestra plantilla single en WordPress, solo nos queda incorporarla definitivamente a nuestro tema.

Para ello, abrimos las opciones de la plantilla y copiamos el código de bloques que WordPress ha generado. A continuación, creamos dentro de la carpeta templates de nuestro tema el archivo single.html y pegamos en él todo el código copiado.

Este procedimiento es el mismo que hemos utilizado y explicado en capítulos anteriores, por lo que no volveremos a desarrollarlo paso a paso.

Una vez creado templates/single.html, podemos restablecer la plantilla desde el Editor del sitio, eliminando así la versión almacenada en la base de datos y haciendo que WordPress utilice la plantilla incluida en nuestro tema.

Con este último paso, nuestra plantilla single.html pasa a formar parte de los archivos del tema y queda disponible independientemente de las modificaciones realizadas previamente desde el Editor.

Puedes ampliar conocimientos visitando:

Plantillas
Editor de plantillas
Editor del sitio
Bloques temáticos

Más tutoriales de WordPress