Como modificar un tema de bloques de WordPress – 2

En el anterior artículo, vimos los conceptos básicos para modificar un tema de bloques de WordPress. Concretamente, vimos como añadir un teléfono a la cabecera de nuestro sitio Web, y como darle aspecto (al viejo estilo) mediante CSS. Si no has visto dicho artículo es importante que lo leas antes de continuar, ya que en el presente articulo no vamos a ver algunos conceptos importantes que ya se trataron en dicho artículo. En este artículo vamos a profundizar lo ya visto, y vamos a aprender como crear un «fragmento», «trozo» o «parte» de plantilla. Y después lo utilizaremos para crear una nueva plantilla para nuestro tema de bloques.

Concretamente, vamos a crear una barra lateral (sidebar) y después vamos a crear una plantilla para las entradas de nuestro blog que haga uso de dicha barra lateral.

Añadir una nueva parte de plantilla

Empezaremos creando una nueva parte de plantilla, concretamente una barra lateral. Para ello debemos de ir a Apariencia > Editor, y después hacemos click sobre Patrones.

Pulsamos sobre le botón de «Añadir nuevo patrón» y después seleccionamos la opción de «Añadir nueva parte de plantilla».

Después, le damos un nombre a nuestra nueva parte de plantilla (en nuestro caso, «Barra lateral» o similar) y pulsamos el botón azul de «Añadir» que hay debajo del todo.

En el editor, pulsamos el botón de «Resumen del documento» (el de la flecha roja de la siguiente imagen) para visualizar la «Lista de vista» y poder trabajar cómodamente. Y vamos añadiendo (y si hace falta arrastrando) bloques hasta tener algo así:

Obviamente, puedes crear la barra lateral a tu gusto. En mi caso he creado un bloque de tipo Grupo por cada «zona» de la barra lateral. En la primera zona tengo el buscador, en la segunda la lista de categorías con un encabezado para ponerle «Categorias» de título, y en la tercera tengo los iconos de las redes sociales junto a un encabezado para ponerle «¡Siguenos!» o algo similar a modo de título, y un párrafo para colocar un texto animando a los usuarios a seguirnos en las redes sociales.

Fíjate que he colocado estos 3 grupos dentro de otro bloque de tipo Grupo. Aunque no sería necesario hacer esto último, si lo considero algo recomendable de hacer. Sobre todo, por si después queremos añadirle un atributo ID o una clase para después darle aspecto mediante CSS (este tipo de cosas las vimos en el artículo anterior).

Una vez estemos contentos con nuestra barra lateral, guardamos y volvemos a Apariencia > Editor.

Añadir una nueva plantilla a nuestro tema de bloques

Ahora que ya tenemos listo nuestro «trozo» de plantilla, vamos a crear una nueva plantilla en nuestro tema de bloques donde usaremos nuestra barra lateral.

Lo primero es darle click al botón de «Añadir una nueva plantilla».

Después, WordPress nos permitirá elegir que tipo de plantilla vamos a crear. Y para comprenderlo bien, es importante primero aclarar el concepto de plantilla.

Una plantilla es básicamente un «tipo de página». En mi ejemplo estoy usando un nuevo tema de bloques en blanco, que solo tiene un «tipo de página». Pero existen otros tipos de página.

WordPress define una serie de plantillas por defecto para los diferentes tipos de página; página de inicio, inicio del blog, entradas individuales, etc. Cada uno de estos tipos de página predefinidos se utilizan «donde toca», y tienen un nombre de archivo concreto. Pero siempre podemos crear plantillas adicionales (sin un uso concreto dentro de WordPress), y cuando creamos una entrada o una página, asignarles una de estas plantillas a nuestro gusto.

Así que, tenemos 2 tipos de plantillas, las predefinidas (con un uso concreto dentro de WordPress) y las personalizadas.

En este ejemplo, vamos a crear una plantilla de las predefinidas. Concretamente, la plantilla que se utiliza como pagina principal del blog (ojo, no confundir con la pagina principal del sitio Web, que puede ser otra diferente). Para ello, en la pantalla que nos aparece, debemos de elegir la opción «Inicio del blog».

El siguiente paso es indicarle si queremos crear el diseño de nuestra plantilla desde cero, o si queremos utilizar otra plantilla como base para la nueva plantilla. Por comodidad, partiremos de la única plantilla que tenemos (en el tema en blanco de WordPress que creamos en un anterior articulo).

De nuevo, para poder editar con comodidad nuestra plantilla, pulsamos el botón de «Resumen del documento» (el de la flecha roja de la siguiente imagen) para visualizar la «Lista de vista». Como puedes ver, entre el header y el footer tenemos un bloque llamado «Bucle de consulta» que es el contenido de la página en cuestión.

Como queremos colocar la barra lateral al lado de las entradas del blog, debemos añadir bloques hasta tener un diseño similar al de la imagen inferior. En mi caso, voy a utilizar un par de columnas, y voy a colocar el bloque de «Bucle de consulta» arrastrándolo dentro de la primera columna (debes de arrastrarlo, no intentes crearlo de cero). Fíjate que tengo las columnas dentro de un bloque de tipo Grupo, y que he marcado la opción de dicho bloque indicada con la flecha roja (para que luego el diseño salga bien centrado).

En la otra columna, ahora debemos de añadir un tipo de bloque llamado «Parte de plantilla».

Después, pulsamos el botón azul de «Elegir» para seleccionar la barra lateral que hemos creado en el anterior paso.

¡Y ya tendríamos nuestra plantilla finalizada!

Pasos finales

Todos estos cambios que hemos hecho, no están guardados (todavía) en los archivos del tema. Tal y como vimos en el artículo anterior, podemos guardar los cambios en los archivos utilizando el plugin Create Block Theme.

Si lo haces, verás que tienes un nuevo archivo (home.html) en la carpeta templates de tu tema. También podrás ver que hay una nueva carpeta llamada parts, que contiene las «partes de plantilla» de nuestro tema (en este caso, contiene un archivo con nuestra barra lateral).

Finalmente, para poder utilizar nuestra plantilla es necesario crear en WordPress una nueva página en blanco (ha de ser una página, no vale una entrada) e indicar en Ajustes > Lectura que dicha página es la página para las entradas.

Al hacer este paso, WordPress ya sabe que para dicha página debe de utilizar la plantilla que hemos creado.

Al visualizar la página, se nos mostrarán las últimas entradas de nuestro blog y, a su lado, nuestra nueva y flamante barra lateral.

Seguramente, quieras mejorar el aspecto. En el siguiente artículo, podrás aprender como modificar el aspecto de un tema de bloques de WordPress.