Sesión 1: introducción a la creación de temas en Drupal

Creación de temas personalizados en Drupal 10

Bienvenido a la primera sesión de esta guía sobre creación de temas personalizados en Drupal 10. En esta sesión inicial, te familiarizarás con la estructura de un tema en Drupal, aprendiendo sobre los archivos y carpetas que lo componen, su función, y cómo crear una configuración básica para empezar a personalizar el aspecto de tu sitio.

Objetivo

El objetivo de esta sesión es comprender los elementos esenciales de un tema de Drupal y crear la estructura inicial que te permitirá comenzar el desarrollo de tu propio tema. Al final de esta sesión, tendrás un tema básico listo para empezar a configurarlo y personalizarlo.

Contenido

1. Componentes esenciales de un tema de Drupal: Exploraremos los archivos y carpetas fundamentales que forman parte de cualquier tema.
2. Cómo funcionan los temas en Drupal: Entenderemos cómo Drupal gestiona los temas y cómo se conectan con los módulos y la estructura del sitio.
3. Personalización de elementos clave: Veremos qué partes del tema puedes modificar para personalizar el diseño, estructura y estilo del sitio.

Conceptos básicos de los temas en Drupal 10

Un tema en Drupal es una colección de archivos que define la apariencia visual de un sitio web. Los temas consisten en archivos de configuración, plantillas, hojas de estilo CSS, y archivos JavaScript, entre otros. Estos archivos están organizados en una estructura específica para que Drupal pueda interpretarlos y utilizarlos correctamente.

Componentes de un tema de Drupal

• Archivo .info.yml: Es el archivo de configuración principal del tema, donde se define el nombre del tema, su descripción, las dependencias, las bibliotecas de estilos y scripts, y otras configuraciones.
• Carpeta de plantillas (templates): Contiene archivos Twig (.html.twig) que definen la estructura HTML de los elementos del sitio. Estos archivos permiten personalizar la presentación de las páginas, bloques, y otros componentes.
• Carpeta de CSS y JS: En estas carpetas, puedes añadir tus archivos de estilos (CSS) y scripts (JavaScript) para modificar el diseño y agregar funcionalidades interactivas.
• Archivo .libraries.yml: Este archivo se utiliza para organizar y declarar las bibliotecas de CSS y JavaScript que se cargan en tu tema. A través de este archivo, puedes definir cómo y cuándo se deben cargar estos recursos.

Cómo crear un tema básico en Drupal

Para crear un tema en Drupal, debes crear una carpeta en el directorio de temas y, dentro de ella, un archivo .info.yml para definir la configuración principal del tema.

Crear la carpeta del tema:Navega a la carpeta de temas en tu instalación de Drupal. Puedes usar una de estas dos rutas:

Para temas contribuidos por la comunidad y personalizados: web/themes/contrib o web/themes/custom.Para un tema específico del sitio: themes/custom dentro de tu instalación de Drupal.

En este caso, usaremos web/themes/custom, una práctica recomendada para temas personalizados. Dentro de web/themes/custom, crea una nueva carpeta para tu tema. Dale un nombre que identifique tu tema, por ejemplo, mi_tema_personalizado.

mkdir web/themes/custom/mi_tema_personalizado

Crear el archivo .info.yml:

Dentro de la carpeta del tema (mi_tema_personalizado), crea un archivo llamado mi_tema_personalizado.info.yml.

Este archivo .info.yml es esencial, ya que Drupal lo utiliza para reconocer y cargar el tema. Define la configuración principal, como el nombre, descripción, tipo de tema y las dependencias.

Abre el archivo con tu editor de texto preferido y añade la configuración básica:

name: 'Mi Tema Personalizado'
type: theme
description: 'Un tema personalizado de ejemplo para Drupal 10.'
package: Custom
core_version_requirement: ^10
base theme: classy
libraries:
  - mi_tema_personalizado/global-styling
regions:
  header: 'Header'
  navigation: 'Navigation'
  content: 'Content'
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  footer: 'Footer'

• regions: Define las regiones del tema (por ejemplo, header, footer, content). Estas regiones se pueden utilizar para colocar bloques en diferentes partes de la página.
• name: Define el nombre del tema que se mostrará en la interfaz de administración de Drupal.
• type: Debe estar definido como theme para que Drupal lo identifique como un tema.
• description: Describe brevemente el propósito del tema.
• package: Agrupa el tema en la categoría «Custom» en el área de administración.
• core_version_requirement: Especifica la versión de Drupal para la que se diseñó el tema, en este caso, Drupal 10.
• base theme: Puedes elegir un tema base, como classy, para tener una estructura prediseñada sobre la que construir el tema.
• libraries: Define las bibliotecas de CSS o JavaScript que se cargarán. Aquí, hemos agregado una llamada global-styling para estilos globales.

Crear un archivo de estilos básico (opcional en esta sesión):

Para que el tema tenga algunos estilos iniciales, puedes crear un archivo CSS.

En la carpeta mi_tema_personalizado, crea una subcarpeta llamada css y dentro de ella un archivo llamado style.css.

mkdir web/themes/custom/mi_tema_personalizado/css
touch web/themes/custom/mi_tema_personalizado/css/style.css

Luego, agrega esta línea en el archivo .libraries.yml para que Drupal cargue el archivo CSS:

global-styling: css: theme: css/style.css: {}

Ahora, cuando actives el tema, Drupal cargará automáticamente este archivo CSS, aplicando cualquier estilo que hayas definido.

1. Activar el tema en Drupal:
   • Ve a la interfaz de administración de Drupal y navega a Apariencia.
   • En la lista de temas, deberías ver tu tema Mi Tema Personalizado.
   • Haz clic en «Instalar y establecer como predeterminado» para activar y utilizar tu tema en el sitio.
2. Verificar la configuración básica del tema:
   • Visita el sitio para confirmar que el tema está activo. Aunque aún no tendrá estilos avanzados ni personalizaciones, tu tema personalizado ahora está funcionando.
   • Comprueba que la estructura y las regiones definidas están listas para colocar bloques y empezar con las personalizaciones en las siguientes sesiones.

Tareas

Para esta primera sesión, realiza los siguientes pasos:

1. Crear la carpeta del tema en web/themes/custom y darle un nombre.
2. Configurar el archivo .info.yml con las propiedades básicas: nombre, tipo, descripción, paquete, dependencias y regiones.
3. Crear un archivo CSS básico (opcional en esta sesión) y configurarlo en el archivo .libraries.yml.
4. Activar el tema en Drupal y confirmar que funciona correctamente en el sitio.

Con estos pasos iniciales completados, tu tema estará listo para personalizar en futuras sesiones. Esta configuración básica es el punto de partida para añadir estilos, plantillas Twig y funciones avanzadas. ¡Felicidades por completar la primera sesión!