WordPress, como crear un nuevo tema de bloques

En este mismo blog ya hemos visto con anterioridad como crear un tema de WordPress desde cero sin saber PHP. Este tipo de temas actualmente se conocen como temas clásicos, ya que desde la versión 5.9 WordPress soporta un nuevo tipo de temas llamados temas de bloques (block themes). En este artículo vamos a ver como crear de forma fácil un nuevo tema de bloques «desde cero».

El plugin Create Block Theme

Create Block Theme es un plugin oficial, desarrollado por los creadores de WordPress, que nos va a permitir crear un nuevo tema de bloques en un «plis plas».

Para ello, el primer paso será buscar e instalar dicho plugin (obviamente).

Una vez instalado, la opción que nos interesa (crear un nuevo tema) la podemos encontrar dentro del menú Apariencia.

De las opciones que nos aparecerán, debemos de seleccionar la de «Crear tema en blanco«…

Y después, en las numerosas opciones que nos aparecerán en la derecha, la única importante (y obligatoria) es la de «Nombre del tema». Así que tenemos que darle un nombre a nuestro tema, y si queremos, podemos aprovechar e indicar también una descripción y el autor. No tenemos que preocuparnos por el resto de datos, ya que además de ser opcionales, no es nada que no se pueda acabar añadiendo con posterioridad.

Abajo de esta página, después de todas las opciones, encontramos un botón de «Generar». Le damos al botón y ya tenemos nuestro tema de bloques «en blanco» creado.

Podemos activarlo de forma similar a cualquier otro tema dentro de Apariencia > Temas.

Una vez activado nuestro tema, veremos que tiene unos estilos extremadamente básicos y que es feo a rabiar. Obviamente, lo siguiente que tenemos que hacer es mejorar su aspecto y ampliar sus características. Aunque esto es algo que veremos en futuros artículos. Por ahora nos vamos a limitar a revisar que archivos componen el tema.

Estructura de archivos de un tema de bloques básico

Antes de tocar nada, es recomendable echar un vistazo a los archivos que se han generado. Dentro de nuestra carpeta de WordPress tendremos una carpeta llamada wp-content y dentro otra llamada themes. Dentro de esta última, encontraremos una carpeta con el nombre de nuestro tema. Todos los archivos de nuestro tema se encuentran dentro.

Vamos a revisar que tenemos aquí:

• parts – en esta carpeta encontraremos archivos HTML con partes de nuestro sitio Web. Concretamente encontraremos un archivo para la cabecera y otro para el pie de página. Podemos añadir otras partes como por ejemplo una barra lateral si es necesario, pero eso es algo que no veremos en este artículo.
• templates – los templates son los «tipos de página» que tendrá nuestro tema. Por ejemplo, podemos tener un template para las entradas, otro diferente para las páginas, otro diferente para la página de inicio, etc. Todo depende de nuestras necesidades. Por defecto, el plugin nos ha creado un único template genérico.
• readme.txt – este archivo no es muy importante, lo puedes abrir con un editor de texto para ver que información tiene y modificarlo si es necesario.
• screenshot.png – esta imagen es la que aparece en WordPress como miniatura de nuestro tema. Como aún no le hemos dado un aspecto no tiene sentido preocuparse por cambiarla todavía, la puedes cambiar por tu logo si lo crees conveniente, pero respeta las dimensiones y el formato de la imagen.
• style.css – este es el archivo con el aspecto de nuestro tema (o al menos, lo era en los temas clásicos). Probablemente lo encontraremos vacío, exceptuando por un comentario CSS al principio del archivo con información muy importante sobre el tema, como su nombre, descripción, etc. Estos son algunos de los datos que nos preguntaba el plugin cuando íbamos a crear el tema y que podemos modificar aquí en cualquier momento. Aunque parezca un simple comentario CSS es información importante que WordPress utiliza, así que hay que tener cuidado al modificar esta información.  Obviamente, este será probablemente el primer archivo que queramos modificar para ir dándole aspecto a nuestro tema, pero los temas de bloques de WordPress ya no lo utilizan, así que para poder usarlo tendremos que hacer algunos ajustes.
• theme.json – este es otro archivo de texto con información muy importante. Se trata de un archivo en formato JSON (JavaScript Object Notation) y aunque podemos abrirlo con un editor de texto y modificarlo, hay que tener mucho cuidado de no alterar su estructura JSON, o dejará de funcionar. Es en este archivo donde los temas de bloques guardar el aspecto (el equivalente al código CSS). Pero por ahora, y por sencillez, no lo vamos a utilizar.

Modificar el aspecto

Para poder modificar el aspecto de nuestro tema de bloques utilizando el archivo style.css, debemos de crear en la carpeta de nuestro tema un archivo llamado functions.php con el siguiente contenido.

<?php
add_action('init', 'my_custom_css_stylesheet');
function my_custom_css_stylesheet() {
  wp_register_style( 'custom-css', get_template_directory_uri() . '/style.css' );
}
wp_enqueue_style( 'custom-css' );

Una vez hecho esto, ya podemos ir añadiendo código CSS a nuestro style.css para que vaya tomando forma nuestro tema. Obviamente, te tocará familiarizarte con la estructura del mismo y las clases CSS que utiliza.

Si quieres profundizar más, puedes continuar con el siguiente artículo sobre como modificar un tema de bloques de WordPress.