WordPress, como crear un nuevo tema de bloques

Crear tema de bloques

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).

Instalar Create Block Theme

Instalar Create Block Theme

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

Apariencia > Create Block Theme

Apariencia > Create Block Theme

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

Crear tema en blanco

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.

Activamos nuestro nuevo tema de bloques

Activamos nuestro nuevo tema de bloques

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.

Archivos de un tema de bloques

Archivos de un tema de bloques

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. 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 modificaremos para ir dándole aspecto a nuestro tema. Para ello habrá que familiarizarse con la estructura HTML del tema y, sobre todo, con las clases CSS que vienen incluidas. Para ello lo mejor es visualizar nuestro sitio Web con el tema activado y usar las herramientas de desarrollo de nuestro navegador.
  • 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.

Modificar el aspecto

En futuros artículos iremos viendo como modificar nuestro tema a nuestro gusto. Lo que aprenderemos también nos servirá para modificar temas de terceros. Por ahora, con lo que tenemos, nos podemos limitar a ir añadiendo código CSS a nuestro styles.css para que vaya tomando forma.

Escribe un comentario