Índice
- 1. Crear la estructura básica del tema
- 2. Agregar estilos y scripts
- 3. Activar y configurar tu tema
- 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
|
Text
|
|
|---|---|
|
themes
|
|
en la raíz de tu instalación de Drupal. Puedes hacerlo en la carpeta
|
Text
|
|
|---|---|
|
themes/custom
|
|
para mantenerlo organizado.
mkdir mi_tema
cd mi_tema
1.2 Crear el archivo
Text
info.yml
|
Text
|
|
|---|---|
|
info.yml
|
|
Dentro de tu nuevo directorio de tema, crea un archivo llamado
|
Text
|
|
|---|---|
|
mi_tema.info.yml
|
|
. Este archivo es crucial, ya que Drupal lo utiliza para reconocer y configurar tu tema. En el archivo
|
Text
|
|
|---|---|
|
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.
-
Textname
(obligatorio): El nombre legible para humanos. Aparecerá en la página «Apariencia» donde se activa el tema.
-
Texttype
(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.
-
Textbase 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
Textstable9. Si se configura como
Textfalse, no se utilizará ningún tema base.
-
Textcore_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.
-
Textcore
(obligatorio para Drupal 8, opcional si incluye
Textcore_version_requirement, no válido para Drupal 9 y posteriores).
-
Textdescription
(opcional): La descripción, que se muestra en la página «Apariencia».
-
Textregions
(opcional): Una lista de regiones temáticas (las claves de región no están precedidas por un guion).
-
Textlibraries
(opcional): Una lista de bibliotecas (que pueden contener recursos CSS y JavaScript) para agregar a todas las páginas donde el tema está activo.
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:
-
Textmi_tema.libraries.yml
: para declarar los archivos CSS y JS que utilizará tu tema.
Textglobal-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
|
Text
|
|
|---|---|
|
css
|
|
y un archivo llamado
|
Text
|
|
|---|---|
|
style.css
|
|
.
touch css/style.css
En este archivo, puedes comenzar a agregar tus estilos personalizados. También puedes crear un directorio llamado
|
Text
|
|
|---|---|
|
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
|
Text
|
|
|---|---|
|
mi_tema.libraries.yml
|
|
.
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
|
Text
|
|
|---|---|
|
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:
- Ve a Apariencia en el menú de administración.
- Busca tu tema bajo la categoría Custom.
- 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
|
Text
|
|
|---|---|
|
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.
