6.3. Crea tu propio tema de Drupal basado en el tema Stable.

A partir de este artículo, comenzaremos a crear nuestro propio tema en Drupal. En esta sección del tutorial, analizaremos los conceptos básicos sobre la creación de temas en Drupal: qué archivos están involucrados, cómo incluir y utilizar CSS y JavaScript. Nuestro tema se basará en el tema base del núcleo Stable. Si deseas aprender Drupal, Stable es un excelente punto de partida. No deberías comenzar con Bootstrap, ya que surgirán constantemente dudas y errores. En la próxima sección del tutorial, con nuestros conocimientos sobre creación de temas en Drupal, comenzaremos a trabajar con Bootstrap.

Aquí tienes la documentación oficial:

https://www.drupal.org/theme-guide/8

Crear una carpeta para nuestro tema

Todos los temas nuevos deben ir en la carpeta /themes. Puedes usar la ruta clásica de Drupal 7 como sites/all/themes, pero lo más recomendable es usar la nueva estructura de archivos de Drupal y colocarla en /themes.

Yo crearé la carpeta /themes/drupalbook, tú puedes nombrar tu tema como desees:

Crear un archivo con la información básica: drupalbook.info.yml

Dentro de la carpeta de nuestro tema, creamos el archivo theme_name.info.yml:

Este artículo ofrece información detallada sobre el formato YAML:

https://en.wikipedia.org/wiki/YAML

Presta atención a dos cosas:

1) No uses tabulaciones para la sangría, solo espacios.

2) Las sangrías deben ser de 1 o más espacios (es decir, name: valor, pero no name: valor con tabulador).

Inserta en el archivo drupalbook.info.yml:

name: Drupalbook
type: theme
base theme: stable
description: Mi primer tema Drupal.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Encabezado
  content: Contenido  # Este región es obligatoria
  sidebar_first: 'Barra lateral'
  footer: Pie de página

Vamos a ver qué significa cada línea.

name: el nombre de nuestro tema. El nombre de máquina del tema es el mismo que el de la carpeta y el archivo drupalbook.info.yml — en este caso, drupalbook.

type: el tipo de proyecto; aquí es un tema.

base theme: heredamos del tema base Stable. Si fuese un tema desde cero, se pondría "false".

description: una descripción que se muestra en el panel de administración.

core: la versión del core de Drupal para la que está diseñado este tema.

libraries: aquí incluimos las librerías necesarias. Las declararemos en el archivo drupalbook.libraries.yml que crearemos después.

regions: regiones de nuestro tema. La región "content" es obligatoria. Si el nombre de la región tiene dos o más palabras, no olvides envolverlo entre comillas. Los nombres de máquina usan guiones bajos.

Ahora creamos la librería del tema.

Archivo drupalbook.libraries.yml

Agrega las siguientes líneas en drupalbook.libraries.yml:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Y ahora analizamos línea por línea:

global-styling: es el nombre de la librería que definimos en drupalbook.info.yml.

css: aquí incluimos los archivos CSS. Para el CSS de impresión indicamos "media: print".

js: aquí se incluyen los archivos JavaScript. jQuery es opcional en Drupal, así que si lo necesitamos, debemos agregarlo como dependencia.

dependencies:
  - core/jquery

Creamos las carpetas css, js y colocamos allí los archivos:

css/style.css

css/print.css

js/custom.js

Como heredamos del tema Stable, también heredamos sus plantillas. Ahora ve a la sección Apariencia en el sitio:

/admin/appearance

Limpia la caché y habilita nuestro tema:

Ahora tenemos nuestro nuevo tema Drupalbook funcionando en el sitio: