Login  |Hazte alumno gratis

Sesión 2: estructura de archivos de un tema en Drupal

Publicada el por networknomad

Creación de temas personalizados en Drupal 10

En esta segunda sesión, profundizaremos en la estructura de archivos de un tema en Drupal. Aprenderemos a organizar los archivos y carpetas para facilitar el mantenimiento y la personalización del tema. Una estructura bien organizada hace que el desarrollo de temas en Drupal sea más eficiente y permite realizar cambios de manera más rápida y estructurada.

Objetivo

El objetivo de esta sesión es entender la estructura de archivos y carpetas de un tema en Drupal y establecer los archivos base en las ubicaciones adecuadas. Esto te permitirá añadir estilos, scripts y plantillas de manera organizada para personalizar la apariencia y funcionalidad de tu sitio.

Contenido

  1. Estructura de archivos de un tema en Drupal: Exploraremos la ubicación y función de cada archivo dentro del tema, incluyendo archivos CSS, JavaScript, plantillas Twig y configuración.
  2. Organización de carpetas: Aprenderemos cómo organizar los archivos en carpetas para que Drupal pueda cargarlos adecuadamente.
  3. Configuración de archivos base: Crearemos y configuraremos los archivos esenciales para que el tema esté listo para personalizaciones adicionales.

Componentes clave de la estructura de un tema en Drupal

La estructura de archivos de un tema en Drupal generalmente incluye:

  • Archivo .info.yml: Configura la información básica del tema y sus dependencias.
  • Archivo .libraries.yml: Declara las bibliotecas de CSS y JavaScript que se cargarán en el tema.
  • Carpeta templates: Contiene archivos de plantillas Twig (.html.twig) para personalizar la estructura de los elementos HTML en el sitio.
  • Carpeta css: Almacena los archivos CSS que controlan el diseño y los estilos del tema.
  • Carpeta js: Almacena los archivos JavaScript que agregan interactividad al tema.
  • Carpeta images (opcional): Contiene imágenes utilizadas en el tema, como logotipos o fondos personalizados.

Paso a paso: creación de la estructura básica del tema

Vamos a configurar la estructura de archivos en la carpeta del tema que creaste en la primera sesión.

Organizar la carpeta del tema:

  • Accede a la carpeta del tema que creaste en la primera sesión (mi_tema_personalizado).Dentro de esta carpeta, crea las carpetas necesarias para organizar los archivos CSS, JavaScript, plantillas y otras imágenes que quieras incluir en el tema.

mkdir -p web/themes/custom/mi_tema_personalizado/{css,js,templates,images}
  • Ahora tienes las carpetas css, js, templates y images en el directorio del tema. A continuación, configuraremos los archivos principales en estas carpetas.

Configurar el archivo .libraries.yml:

Abre el archivo mi_tema_personalizado.libraries.yml en la carpeta del tema y define las bibliotecas CSS y JavaScript.

Puedes añadir las siguientes líneas para definir los estilos globales y cualquier script JavaScript personalizado:

global-styling:
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}
  • css/theme/css/style.css: Añade los estilos globales para el tema.
  • js/js/script.js: Añade el script JavaScript principal para el tema.
  • Drupal cargará automáticamente estos archivos cuando el tema esté activo.

Crear y configurar el archivo style.css:

En la carpeta css, crea el archivo style.css. Este será el archivo principal donde definirás los estilos de tu tema.

Puedes agregar algunos estilos básicos para probar su funcionamiento:

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

Crear y configurar el archivo script.js:

En la carpeta js, crea un archivo llamado script.js. Aquí puedes agregar cualquier JavaScript necesario para el tema.

Como ejemplo, añade un simple mensaje en la consola para confirmar que el archivo se carga correctamente:

console.log('Script personalizado cargado correctamente');

Configurar plantillas en la carpeta templates:

La carpeta templates contendrá las plantillas Twig de Drupal. Estas plantillas permiten personalizar la estructura HTML de las distintas partes del sitio.

Como ejemplo, crea un archivo llamado page.html.twig en la carpeta templates para personalizar el diseño de las páginas.

Puedes iniciar con un código básico para el archivo page.html.twig:html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ head_title|safe_join(' | ') }}</title>
  {{ head }}
  {{ styles }}
  {{ scripts }}
</head>
<body>
  <header>
    <h1>{{ site_name }}</h1>
  </header>
  <main>
    {{ page.content }}
  </main>
  <footer>
    <p>© {{ "now"|date("Y") }} - Mi Tema Personalizado</p>
  </footer>
</body>
</html>

Este archivo utiliza variables Twig como {{ site_name }}, {{ page.content }}, y {{ "now"|date("Y") }}, que se interpretarán automáticamente al renderizar la página.

Añadir imágenes (opcional):

Si deseas añadir imágenes, como logotipos o fondos personalizados, guárdalas en la carpeta images.

Puedes referenciar estas imágenes en el archivo style.css o en las plantillas Twig como se muestra a continuación:

/* style.css */
.header {
  background-image: url('../images/header-background.jpg');
  background-size: cover;
}

    Activar y verificar la estructura del tema

    1. Limpiar la caché:
      • Para que Drupal reconozca los cambios, especialmente en los archivos Twig, es recomendable limpiar la caché del sitio.
      • Ejecuta el siguiente comando:shellCopiar códigodrush cache:rebuild
    2. Activar y revisar los cambios:
      • Accede al sitio en el navegador y verifica que los estilos definidos en style.css se apliquen correctamente.
      • Revisa también la consola de tu navegador para confirmar que el mensaje en script.js aparece como esperado.

    Tareas

    Para esta sesión, realiza los siguientes pasos:

    1. Organizar el tema: Crea las carpetas css, js, templates y images en la carpeta de tu tema.
    2. Configurar mi_tema_personalizado.libraries.yml para cargar style.css y script.js.
    3. Crear style.css y script.js en las carpetas correspondientes, y añade contenido básico de prueba.
    4. Crear una plantilla page.html.twig en la carpeta templates para empezar a personalizar la estructura de las páginas.
    5. Limpiar la caché en Drupal y verificar que todos los elementos estén funcionando correctamente en el sitio.

    Esta estructura de archivos te servirá de base para desarrollar el tema con estilos, scripts y plantillas personalizadas en las siguientes sesiones. ¡Buen trabajo organizando la estructura del tema!

    ← Anterior Siguiente →