Configurar Sidebar o barra lateral con Gutenberg en WordPress

por | Guías de WordPress

Las nuevas plantillas FSE (Full Site Editing), o lo que es lo mismo, «edición completa del sitio», no proporcionan una barra lateral con Gutenberg preconfigurada donde colocar widgets o contenido que se pueda ver en toda la web, independientemente de la sección o página en la que nos encontramos.

Precisamente es lo que intenta conseguir este nuevo método de crear webs, partir de una hoja en blanco en la que hacer lo que queramos.

Pero para la gran mayoría de personas, el sistema actual es complicado si no dispone del conocimiento necesario para manejar los elementos que crean el contenido.

Cómo crear una barra lateral fija con Gutenberg

Los nuevos temas FSE, aún en pañales en 2023, permiten crear diferentes plantillas para mostrar diferentes contenidos dependiendo en que sección de la web nos encontremos.

Como he mencionado antes, para alguien que no sabe como debe estructurarse una página, le resultará difícil empezar a diseñar su web con este sistema. Pero para eso estoy aquí.

Voy a indicarte como debes crear una barra lateral con Gutenberg, donde podrás colocar los widgets, ahora llamados bloques, que necesites mostrar, como un buscador o un listado de las últimas entradas.

En el vídeo está todo el proceso paso a paso y a continuación te muestro un resumen de lo que podrás aprender.

Añadir nueva plantilla

WordPress trae unas plantillas predefinidas que son las que se muestran cuando intalamos WordPress por primera vez, o el tema elegido que queremos utilizar.

Podemos modificar las que aparecen en el listado de todas las plantillas o, como vamos a hacer, crear una nueva plantilla que se replique en todas las entradas que escribamos o que ya tengamos creadas.

Añadir nueva plantilla en Gutenberg

Antes de comenzar a configurar la barra lateral con Gutenberg y el contenido que mostraremos, hay que elegir la cabecera de esta nueva plantilla y el footer.

Configurar las columnas

El siguiente paso el limitar los espacios del contenido y de la barra lateral con Gutenberg. Eso lo hacemos utilizando un bloque de columnas y eligiendo el formato que nos guste más.

Es posible crear la barra lateral a la derecha o a la izquierda, o diseñar una web con dos barras laterales.

loque de columnas para marcar la barra lateral en gutenberg
Configurar el bloque de columnas

Al configurar las columnas podemos elegir la anchura que queremos que tenga desde las opciones del bloque que aparecen en la derecha.

Elegir los bloques a mostrar en la plantilla

Debemos añadir en la columna del contenido los bloques que recogeran la información de cada entrada que escribamos en el «Editor», para que adopte la forma que elijamos.

Los bloques más comunes serían:

  • Título de la entrada.
  • Contenido de la entrada.
  • Comentarios.

Pero también podríamos añadir un bloque de autor, fecha, categoría…

En la columna de la barra lateral no hay restricciones para utilizar cualquier bloque (como pasaba con los widgets), se pueden colocar los que quieras, un buscador, una imagen, un listado de entradas recientes…

Si quieres identificar cada bloque que coloques en la barra lateral con gutenberg, tienes que añadir un bloque de cabecera con el texto que lo identifique.

Bloques para la barra lateral con Gutenberg
Bloques utilizados en la plantilla de la entrada

Configuración del aspecto de la barra lateral

Al previsualizar la página o plantilla te darás cuenta que no tiene márgenes ni espacios entre los bloques y los laterales.

Para crear un diseño adaptable al aspecto de tu web tienes que juntar todos los bloques dentro de un grupo seleccionándolos desde el esquma de bloques y picando en «Agrupar».

Así identificamos de forma individual la cabecera, el footer y el contenido de la página.

Seleccionándo los bloques y grupos podemos modificar las características de cada uno desde la zona de configuración de la derecha, añadiendo colores, espacios y propiedades personalizadas a nuestro gusto.

Propiedades personalizadas del contenido y barra lateral en Gutenberg
Propiedades personalizadas del contenido y barra lateral

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.