Guía para crear tu propio tema en Drupal

Índice

• Introducción
• Requisitos previos

1. 1. Crear la estructura básica del tema
   1. 1.1 Crear el directorio del tema
   2. 1.2 Crear el archivo info.yml
   3. 1.3 Crear los archivos del tema
2. 2. Agregar estilos y scripts
   1. 2.1 Crear Archivos CSS y JS
   2. 2.2 Registrar Estilos y Scripts
   3. 2.3 Crear y Editar style.css
3. 3. Activar y configurar tu tema
   1. 3.1 Activar el tema
   2. 3.2 Configurar regiones y bloques
4. 4. Personalización avanzada

Introducción

Drupal es un sistema de gestión de contenido (CMS) poderoso y flexible. Una de las características más destacadas de Drupal es su capacidad para personalizar la apariencia de un sitio web mediante la creación de temas. Un tema en Drupal controla el aspecto visual de un sitio, incluyendo el diseño, los colores, las fuentes y la disposición de los contenidos.

Esta guía te llevará a través de los pasos necesarios para crear tu propio tema en Drupal.

Requisitos previos

Antes de comenzar, asegúrate de tener:

• Una instalación funcional de Drupal 9 o superior.
• Conocimientos básicos de HTML, CSS y PHP.
• Acceso al sistema de archivos de tu servidor.

1. Crear la estructura básica del tema

1.1 Crear el Directorio del Tema

El primer paso es crear un directorio para tu tema dentro de la carpeta themes en la raíz de tu instalación de Drupal. Puedes hacerlo en la carpeta themes/custom para mantenerlo organizado.

cd path/to/drupal/themes/custom
mkdir mi_tema
cd mi_tema

1.2 Crear el archivo info.yml

Dentro de tu nuevo directorio de tema, crea un archivo llamado mi_tema.info.yml. Este archivo es crucial, ya que Drupal lo utiliza para reconocer y configurar tu tema. En el archivo mi_tema.info.yml, debemos añadir la configuración de nuestro tema. Hay campos obligatorios y otros opcionales que se utilizan más adelante en el desarrollo del tema.

• name (obligatorio): El nombre legible para humanos. Aparecerá en la página «Apariencia» donde se activa el tema.
• type (obligatorio): Indica el tipo de extensión, es decir, «módulo», «tema» o «perfil». En el caso de los temas, este valor siempre debe configurarse como «tema». Este valor distingue entre mayúsculas y minúsculas.
• base theme (obligatorio en Drupal 9 y últimas versiones, opcional para Drupal 8): Un tema puede heredar los recursos de otro tema si lo especifica como tema base. Se recomienda utilizar stable9. Si se configura como false, no se utilizará ningún tema base.
• core_version_requirement (obligatorio en Drupal 9 y últimas versiones, opcional para Drupal 8): Permite que los módulos, temas y perfiles especifiquen que son compatibles con múltiples versiones principales del núcleo de Drupal.
• core (obligatorio para Drupal 8, opcional si incluye core_version_requirement, no válido para Drupal 9 y posteriores).
• description (opcional): La descripción, que se muestra en la página «Apariencia».
• regions (opcional): Una lista de regiones temáticas (las claves de región no están precedidas por un guion).
• libraries (opcional): Una lista de bibliotecas (que pueden contener recursos CSS y JavaScript) para agregar a todas las páginas donde el tema está activo.

name: 'Mi Tema'
type: theme
description: 'Un tema personalizado para mi sitio web'
core_version_requirement: ^9 || ^10
package: custom
base theme: olivero
regions:
  header: Header
  primary_menu: Primary menu
  secondary_menu: Secondary menu
  highlighted: Highlighted
  breadcrumb: Breadcrumb
  social: Social Bar
  content_above: Content Above
  content: Content
  footer_top: Footer top
  footer_bottom: Footer Bottom
libraries:
  - 'mi_tema/global-styling'
  - 'mi_tema/global-scripts'

1.3 Crear los archivos del tema

El siguiente paso es crear algunos archivos básicos que forman la estructura de tu tema:

• mi_tema.libraries.yml: para declarar los archivos CSS y JS que utilizará tu tema.

  
  global-styling:
    version: 1.x
    css:
      theme:
        css/style.css: {}
  

2. Agregar estilos y scripts

2.1 Crear Archivos CSS y JS

Dentro del directorio del tema, crea un directorio llamado css y un archivo llamado style.css.

mkdir css
touch css/style.css

En este archivo, puedes comenzar a agregar tus estilos personalizados. También puedes crear un directorio llamado js para tus scripts JavaScript.

2.2 Registrar estilos y scripts

Asegúrate de que tus archivos CSS y JS se carguen en tu tema, añadiendo las siguientes líneas en el archivo mi_tema.libraries.yml.

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
global-scripts:
  version: 1.x
  js:
    js/script.js: {}
  dependencies:
    - core/jquery

Y luego, asegúrate de agregar esta biblioteca en mi_tema.info.yml.

3. Activar y configurar tu tema

3.1 Activar el tema

Una vez que hayas configurado tu tema, actívalo desde la interfaz de administración de Drupal:

1. Ve a Apariencia en el menú de administración.
2. Busca tu tema bajo la categoría Custom.
3. Haz clic en Instalar y establecer como predeterminado.

3.2 Configurar regiones y bloques

Después de activar el tema, ve a la sección Estructura > Bloques en la administración para asignar bloques a las regiones que definiste en mi_tema.info.yml. En esta sección, podrás asignar bloques específicos a cada región según tus necesidades.

4. Personalización avanzada

Puedes profundizar aún más personalizando los elementos de Drupal mediante la modificación o adición de más archivos Twig, funciones PHP y mediante el uso de módulos contribuidos o personalizados.

Esta es una guía básica para empezar. Dependiendo de tus necesidades, podrías necesitar explorar temas más avanzados, como la creación de subtemas, la integración de Bootstrap u otros frameworks, o la implementación de funcionalidades específicas mediante módulos personalizados.