viernes, 15 de abril de 2016

Crear un tema para Drupal 8 desde cero

Hola y bienvenido a Drupalandia querido amigo.

Voy a realizar una serie de artículos donde desarrollaremos un tema para Drupal 8 desde cero y paso a paso.



Comenzaremos tratando algunos aspectos fundamentales y necesarios para comprender como desarrollar themes para Drupal 8. No quiero entrar mucho en detalle sobre todas las partes que conforman Drupal 8 ya que la serie se extendería demasiado. Pero si voy a explicar cada concepto a medida que vayamos avanzando.

Índice:
  1. Crear un tema para Drupal 8 desde cero
  2. Trabajar con librerías, regiones y bloques en Drupal 8
  3. Introducción a los templates en Drupal 8
  4. Corregimos dos errores del Tema 
  5. El módulo Kint para Drupal 8 es Genial

En este primer capítulo vamos comenzar con algunos ajustes básicos que debemos realizar en Drupal para que el desarrollo sea lo más amigable posible.

Aclaración: para seguir esta serie de tutoriales lo único que necesitas es una instalación limpia de Drupal 8.

Comencemos...

Los temas en un principio se crean utilizando Twig como motor de plantilla y YAML para los archivos de configuración.

Ambas tecnologías son muy utilizadas en el desarrollo web por lo que no voy a explicar sus características. Como he mencionado antes voy a ir explicando cada parte en su debido momento.

Si quieres aprender más sobre Twig (que deberías) te recomiendo este manual que realmente está muy completo.

Para documentarte sobre YAML, en este enlace puedes encontrar buena información.

Configuración básica de Drupal 8 para desarrolladores


Cuando vamos a desarrollar, lo más común es que el sistema de cache no nos permita ver lo cambios que estamos realizando en el sitio.  Por ello lo primero que haremos es desactivar la cache, para no tener que vaciarla manualmente cada vez que realicemos algún cambio.

Para ello vamos a duplicar el archivo default.service.yml que se encuentra dentro de la ruta sites/default y le asignaremos el nombre service.yml. Dentro este archivo encontramos múltiples opciones de configuración.

Encuentra el parámetro que se llama twig.config y dentro de este habrá otros parámetros los cuales tendremos que dejar de la siguiente manera.


  • debug: true
  • auto_reload: true
  • cache: false

Ahora cualquier cambio que realicemos en los archivos twig del tema se verán reflejados en Drupal sin la necesidad de vaciar la cache.

Otra cosa que debemos hacer es desagrupar los archivos css y js, ya que Drupal 8 los combina para mejorar el tiempo de carga del sitio. Pero si los dejamos combinados no podremos acceder a cada uno de estos archivos para ir depurando el código.

Dentro del sitio Drupal navega hasta Configuración -> Rendimiento y desmarca los checkbox correspondientes:



Por último, necesitamos tener acceso a las variables de PHP desde dentro de los archvios twig. Por ello, dentro de la estructura de directorios del sitio, dirígete a sites/default/settings,php.

Para poder realizar cambios en este archivo primero debes modificar los permisos, has click secundario en el archivo y selecciona propiedades, luego desmarca la casilla de solo lectura.



Ahora sí, al final del archivo agrega la siguiente línea: $settings['twig_debug'] = TRUE; y guarda los cambios.


Bueno, con esto ya tenemos el sitio listo para comenzar a desarrollar nuestro tema de Drupal 8.

Estructura básica de un tema para Drupal 8


Comencemos creando las carpetas y archivos imprescindibles que todo tema necesita para funcionar.

  1. Dentro de la carpeta themes (en la raíz del sitio) crea una nueva carpeta llamada custom. Dentro de ella almacenaremos todos los temas que vayamos creando nosotros mismos.
  2. A su vez, dentro de la carpeta custom vamos a crear otra carpeta con el nombre del tema, en mi caso el tema se llamará poxi.
  3. Dentro de la carpeta del tema creamos el primer archivo de configuración: poxi.info.yml. Reemplaza poxi por el nombre de tu tema.


    Comencemos a escribir las primeras líneas en el archivo de configuración (poxi.info.yml) que acabamos de crear.

    name: Poxi
    type: theme
    description: "Probando la creacion de temas en Drupal 8"
    core: 8.x
    package: custom
    version: 1.0

    Realmente es muy intuitivo lo que se indica en cada línea, solo cópialas en tu archivo y cambia el parámetro name con el nombre de tu propio tema.

    Dentro de esta carpeta también voy a poner un archivo llamado screenshot.png, que es la imagen que se mostrara en el área de administración de temas de Drupal 8.

    Aquí te dejo la imagen con el nombre screenshot.png, cópiala dentro de la carpeta del tema:



    Con lo que llevamos hecho hasta el momento deberíamos tener lo siguiente:


    Si ahora nos dirigimos a Apariencia (dentro de la administración de Drupal), podremos ver que encontramos el tema que acabamos de crear.



    Claro está que si activamos el tema no mostrará nada en la pantalla, ya que solo configuramos las opciones básicas para que Drupal pueda detectar nuestro tema.

    Aquí podemos tomar dos caminos: Crear un tema desde cero con todo el trabajo que ello conlleva o basarnos en un tema ya creado para reducir el esfuerzo y ser más productivo.

    Yo me voy a basar en un tema que Drupal 8 nos proporciona precisamente para utilizarlo como base. 

    Heredar temas en Drupal 8


    Para basarnos en un tema ya creado, lo recomendable es que heredemos el tema y luego realicemos las modificaciones que creamos necesarias para poder personalizarlo a nuestro gusto.

    Dentro del core de Drupal contamos con un tema llamado classy, que es una buena base para comenzar el desarrollo. De hecho, los temas Bartik y Seven lo utilizan como base, por lo que no es necesario ni siquiera instalarlo.

    Para heredar del tema classy agregamos la siguiente línea al final del archivo poxi.info.yml

    base theme: classy

    Una vez agregada, guardamos los cambios y nos dirigimos a la sección de Apariencia dentro del sitio. Procedemos a instalar y activamos el tema haciendo click en Instalar y seleccionar por defecto.

    Con esto ya podemos dirigirnos a la página principal del sitio y veremos cómo nuestro tema muestra de una forma muy básica el contenido de Drupal.

    Así deberías tener el archivo final de configuración que hemos creado (poxi.info.yml):

    name: Poxi
    type: theme
    description: "Probando la creacion de temas en Drupal 8"
    core: 8.x
    package: custom
    version: 1.0
    base theme: classy

    Hasta aquí el primer capítulo de la serie, en el próximo comenzaremos a configurar las regiones, los bloque y agregar librerías dentro del tema.

    Ya sabes que ante cualquier duda o error que tenga puedes dejarme un comentario y con gusto te ayudaré en lo que pueda. ¡Hasta la próxima!