Cómo añadir plantillas y partes de plantilla al tema Miniblock OOAK

En esta lección vamos a ver cómo añadir plantillas y partes de plantilla al tema Miniblock OOAK. Miniblock OOAK es un tema de bloques (que puedes obtener en el repositorio oficial, filtrando por Edición Completa del sitio) básico que solo viene con la plantilla «Index», a modo de página de inicio o landing page. Vamos a ver cómo añadirle plantillas y partes de plantilla, como ejercicio de la función de Edición del sitio. Necesitarás WordPress 5.9 o instalar el plugin Gutenberg en un sitio de pruebas. Si necesitas aclarar alguno de los términos asociados a Gutenberg, consulta el FAQ.

Utilizaremos una serie de archivos JSON (uno por cada plantilla) que encontrarás en el zip que puedes descargar aquí. Una vez que, descargues el zip y lo descomprimas, obtendrás los siguientes archivos que usaremos después.

• 404.json
• archivo.json
• cabecera.json
• indice.json
• pagina.json
• pie.json
• post-individal.json

1. Instalar el tema Miniblock OOAK

En el GIF puedes observar cómo se instala el tema de bloques Miniblock OOAK. Solo tienes que ir al repositorio oficial de temas de WordPress y filtrar por «Edición completa del sitio».

2. Instalar el plugin Reusable Blocks Extended

Con el plugin Reusable Block Extended conseguirás más facilidad a la hora de manejar bloques reutilizables. Pero aquí lo usaremos, además, para importar los archivos json que debes de tener ya en el disco duro de tu equipo local.

Una vez instalado y activado, siguiendo el GIF, verás un nuevo apartado -en el administrador de WordPress- denominado «Blocks». Si necesitas editar cualquiera de las plantillas importadas, acude a ese apartado y modifícalo usando bloques de Gutenberg.

3. Importar los archivos JSON

En el GIF vemos cómo se importa el archivo indice.json para obtener la plantilla «INDICE» en forma de bloque reutilizable. Disponer de bloques reutilizables posee la ventaja de poder usarlos para insertarlos dentro de las plantillas del editor del sitio, como veremos más adelante. Operando de la misma manera, importa todos los archivos json.

Ya estamos en disposición de añadir plantillas y partes de plantilla al tema de bloques Miniblock OOAK.

4. Añadir la plantilla «Front Page»

La plantilla «Front-page» es la correspondiente a la página de inicio. Recuerda que en un sitio de WordPress no es obligatorio que exista una página de inicio (la página de inicio puede ser la del blog, que se denomina «Index» o índice).

En este GIF puedes ver cómo se crea, desde el Editor del sitio, una nueva plantilla. Recordemos que Miniblock OOAK, solo viene con la plantilla «Index» pero personalizada en realidad como una página de inicio. Esto es así porque la plantilla Index es la que se muestra por defecto, si no existe una Front-page y, en Miniblock se ha querido simplificar al máximo.

Hay que ir a ver todas las plantillas (Browse all templates), hacer clic en «Add New» y elegir la «Front-Page». De ese modo, ya tenemos dos plantillas: la original «Index» (que convertiremos en la del blog) y una nueva para la página de inicio (la Front-page).

5. Editar la plantilla Index y copiarla en el portapapeles

Lo que queremos es mover el contenido de la plantilla Index a la Front-page, con el propósito de que la Index contenga la página del blog.

Usaremos la vista de lista del editor, lo que nos permite ver a vista de pájaro la estructura de bloques y manejar éstos mucho más fácilmente.

En el GIF, observa cómo, mediante los tres puntos suspensivos -a la derecha del bloque de Grupo que contiene todos los bloques de la plantilla- lo copiamos a portapapeles.

6. Editar la plantilla Front-page y pegar el contenido del portapapeles

En el GIF se muestra cómo editamos la plantilla Front-page, y en el primer párrafo vacío pegamos el contenido del portapapeles (simplemente con CTRL-V o CMD-V, según estés en Windows o en Mac).

Esto es muy interesante porque estás descubriendo el potencial que tienen los bloques.

Ahora las plantillas Index y Front-end tienen lo mismo. Lo siguiente es borrar el contenido de Index y pegar el bloque reutilizable correspondiente a la plantilla INDICE y que hemos creado a partir del archivo indice.json.

7. Editar la plantilla Index, borrar su contenido e insertar el bloque reutilizable «Indice»

Fíjate en el GIF cómo usamos la vista de lista para borrar el bloque de Grupo que contiene todos los bloques de la plantilla «Index». De esto se desprende un «truco» muy útil. Cuando crees diseños de Gutenberg, utiliza siempre un bloque de Grupo contenedor.

Una vez con la plantilla limpia, empleamos el insertador de bloques, eligiendo el bloque reutilizable «INDICE» desde la pestaña «Reusable» (donde están todos los bloques reutilizables).

Todos los bloques que aparecen en esa pestaña, están también en la sección «Blocks» y se pueden editar desde ahí. La sección «Blocks» recuerda que la tienes porque instalamos el plugin Reusable Block Extended. Ahora la plantilla «Index» está preparada para mostrar la entradas del blog. Solo tendrías que crear una página que se llame «Blog» (por ejemplo) y asignarle la plantilla «Index».

Examina ahora los bloques que componen las plantillas Index y Front-end. Si quieres hacer cambios puedes hacerlos directamente con la Edición del sitio.

8. Añadir todas las plantillas predeterminadas

A partir del editor del sitio, podemos añadir las plantillas que estén predeterminadas en el tema. En este caso, podremos añadir las plantillas Page, Archive, 404 y Search. Su explicación es:

• Page. Si vamos a tener páginas como la de About, Contacto, etc.
• Archive. Si vamos a tener páginas de categorías, etiquetas, etc.
• 404. Si vamos a tener una página de no encontrado.
• Search. Si vamos a tener una página de resultados de búsqueda.

En el GIF, creamos la plantilla Page e insertamos el contenido del bloque reutilizable «PAGINA», correspondiente al archivo pagina.json.

Como ejercicio, puedes crear el resto de las plantillas (Archive y 404). No se creó un archivo json específico de Search porque se utiliza por defecto, si existe, el de Archive.

9. Añadir la plantilla para los posts individuales

Seguramente nos gustará tener plantillas diferentes para las páginas y para los posts individuales. Sin embargo, la plantilla para éstos últimos no existe en las predeterminadas. Así que no podemos hacerlo desde el editor del sitio, sino desde el editor de contenidos.

En el GIF, vamos a la página de ejemplo «Sample Page» y se observa que en la configuración de la página, hay un enlace que dice «New» en el apartado de Templates (donde se asignan las plantillas a las páginas). Así podemos crear una nueva plantilla, le damos nombre y la podemos editar. Lo primero sería borrar los bloques que provienen de la página «Sample Page». Y, luego, usamos el insertador de bloques para añadir el bloque reutilizable «POST INDIVIDUAL». Salvamos y listo.

Partimos de una plantilla modelo pero puedes modificarlas a tu gusto.

10. Crear partes de plantilla (Header y Footer)

Ya sabemos añadir plantillas y partes de plantilla a un tema de bloques.

Para crear partes de plantillas, como puede ser la cabecera y el pie de las páginas del sitio web, iremos de nuevo al Editor del Sitio y elegiremos «Template Parts».

En el GIF, creamos la parte de plantilla Header insertando el bloque reutilizable CABECERA.

El pie puedes crearlo igualmente, eligiendo Footer y el bloque reutilizable «PIE».

Conclusiones

Te hemos realizado unos modelos de plantilla, en archivos JSON, para que puedas partir de algo a la hora de añadir plantillas y partes de plantilla a un tema de bloques. Desde ahí, puedes importarlos a tu WordPress como bloques reutilizables y después insertarlos en las plantillas que vayas creando.

De esa forma, hemos convertido el tema de bloques Miniblock OOAK que era solo una landing page en todo un sitio web listo para ser personalizado con Gutenberg.

Por supuesto, es solo un ejercicio para comprender un poco más el funcionamiento de la Edición completa del sitio.

Comparte en Mastodon:

Y aún hay más…

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

¡Quiero suscribirme!