interfaz
Bootstrap 5 | Generar subtheme por interfaz
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Bootstrap sigue siendo una de las mejores alternativas, al momento de maquetar webs responsivas, ya que no necesitas tener conocimientos avanzados, para lograr maquetar de manera rápida, atractiva y funcional cualquier proyecto web.
Al combinar las características y funcionalidades con Drupal, con Bootstrap, podrás realizar casi cualquier tipo de proyecto web, sin invertir demasiado tiempo, en añadirle una apariencia que cumpla con todos los estándares necesarios actualmente, para que obtengas los mejores resultados a nivel de la experiencia de usuario, posicionamiento, etc.
En este tutorial, te explicaré todo lo que necesitarás acerca de la instalación del tema Bootstrap 5 y de cómo puedes generar, un subtema o tema personalizado para tus proyectos de Drupal 9 o superiores, sin tener que avandonar la interfaz de usuario de Drupal.
Requerimientos:
- Tener un proyecto de Drupal 9 o superior funcionando.
- Tener acceso a la consola.
- Tener la posibilidad de ejecutar Composer, para la descarga e instalación de temas y módulos.
Descarga e instalación de Bootstrap 5 para Drupal.
Paso 1 - Descarga del Theme Bootstrap 5
Una vez tengamos nuestro proyecto de Drupal 9 en funcionamiento, lo próximo será visitar la Página Oficial de Bootstrap 5, y a continuación, copiaremos el comando de instalación, para pegarlo y ejecutarlo en nuestra consola.
Una vez terminada la descarga, podrás comprobar que se han descargado todos los archivos necesarios, visitando en tu proyecto Drupal 9, la carpeta ubicada en "/web/themes/contrib", con el nombre bootstrap5.
Paso 2 - Instalación del tema base
Para poder generar el subtheme basado en Bootstrap 5, primero tendremos que activarlo. Para ello, nos dirigiremos a la página de configuración de los Themes en Drupal, ubicada en la url "/admin/appearance", donde veremos el listado de los módulos descargados, instalados y no instalados.
Como sólo queremos instalar el Theme Bootstrap 5, porque lo necesitamos para generar el Subtheme, nos desplazaremos en la misma pantalla, hasta encontrarlo en el listado de módulos desinstalados y haremos clic en la opción Activar.
Paso 3 - Generar el Subtheme o Tema personalizado
La mayor ventaja, con respecto a otras versiones anteriores de Bootstrap para Drupal, es la opción de generar el Subtheme, sin la necesidad de avandonar la interfaz de usuario, ni ejecutar código a nivel de la consola, como require cuando trabajamos con Bootstrap Barrio.
Para generar un Subtheme, haremos clic en el enlace de configuración, de Bootstrap 5, nos desplazaremos hasta el final de la página y buscaremos la pestaña llamada Subtheme, una vez desplegada la pestaña, podremos ver las opciones relacionadas con la ubicación, el nombre del subtheme y el nombre del sistema o nombre máquina.
Paso - Comprobación
Tan pronto como hayamos hecho clic en el botón Crear, se generarán los archivos de nuestro Subtheme, en la ubicación detallada al principio de la pestaña, es decir, dentro de "themes/custom"; si abrimos los archivos del proyecto, podremos verificar, que efectivamente, tendremos una carpeta con el nombre del subtheme y todos los archivos para su funcionamiento, una vez se haya activado.
Para activar el nuevo Subtheme, solo tendremos que volver a la página de configuración, ubicada en "/admin/appearance", donde esta vez, encontraremos el recién generado subtheme, con todas las opciones de su tema base, donde podremos configurarlo y, además, añadir otras opciones específicas, disponibles en la pantalla de configuración de éste.
Una vez tengamos añadidas todas las personalizaciones adicionales, podremos volver a nuestra página principal y comprobaremos dichos cambios.
También podremos agregar más cambios, a través de los archivos CSS o Sass, que se han generado durante el proceso.
Si quieres saber cómo trabajar con los Themes y Subthemes en Drupal, tienes disponbile este curso gratuito, donde he recopilado los principales videos y documentación relacionada, para que puedas profundizar, de forma rápida y aplicar lo aprendido en tus proyectos:
Para acceder al curso, HAZ CLIC AQUI
Drupal 8 | Themes y subthemes
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Llegados a este punto, nos toca ocuparnos del aspecto de nuestro proyecto, para ofrecer una presentación de acuerdo a nuestras expectativas, debemos tomar en cuenta que esta web deberá verse en diferentes dispositivos y que es muy importante prestar atención en todos los detalles para que nada "se rompa" a nivel gráfico cuando el usuario la visite, por ejemplo desde un Ipod.
En Drupal, la parte que controla es aspecto de nuestra web está a cargo de los "Temas" o "Themes", que son el conjunto de archivos necesarios para realizar este tipo de configuración.
Drupal ofrece desde su Página Oficial, la posibilidad de descargar toda clase de Temas, para que podamos utilizarlos y modificarlos, según las necesidades del proyecto. Hoy en día, debido al aumento del uso de dispositivos móviles, es prácticamente obligatorio, diseñar webs que sean adaptables a cualquiera de estos dispositivos, esto es conocido como diseño "Responsivo" o "Responsive".
Dentro de las alternativas gratuitas, disponibles para Drupal, está el Theme Mayo, que ofrece una alternativa relativamente muy sencilla, de implementar una web con diseño responsivo, sin la necesidad de manipular nada de código.
Su configuración al completo se hace a través de la interfaz de Drupal, donde una vez descargado e instalado, sólo nos faltará personalizarlo mediante unos cuantos clics, hasta obtener el resultado que andamos buscando o al menos el más aproximado a éste.
Para trabajar con módulos o temas en Drupal, pueden emplearse varios métodos, aunque a partir de la versión 8, se recomienda el uso del gestor de paquetes Composer, porque nos facilitará todos los procesos de instalación, descarga y dependencias; en este caso, voy a enseñarte la forma tradicional, hacemos clic derecho sobre el en enlace comprimido del archivo y seleccionaremos copiar enlace.
Luego nos iremos a Drupal, en la url "/admin/appearance", donde seleccionaremos la opción Instalar nuevo tema. Si ya tienes instalado el módulo Admin Toolbar, podrás hacerlo tal y como se muestra en la imagen.
A continuación, pegaremos en la siguiente pantalla, la url que hemos copiado y haremos clic en el botón Instalar.
Una vez terminado el proceso de instalación del Theme, podremos activarlo llendo a la url "/admin/appearance", donde se muestran todos los Themes disponibles para su activación, además de los que están activados actualmente y el Theme que utiliza drupal para su interfaz de administración.
Si nos desplazamos a la parte inferior de esta pantalla, encontraremos el Theme Mayo, dentro del listado de Themes Desinstalados, y podremos Instalarlo como Theme principal haciendo clic en el enlace debajo de su imagen.
Después de activar el Theme, es recomendable que Vaciemos la Cache de Drupal para que podamos ver todos los cambios ejecutados en nuestro proyecto.
Si nos vamos a la página principal de nuestro proyecto, podremos comprobar el cambio inmediatamente, además de validar el aspecto que se mostrará en dispositivos de varios tamaños.
Otra opción con la que contamos para personalizar el aspecto de nuestras webs de Drupal, es el Theme Bootstrap, en este caso, específicamente hemos optado por, crear nuestro propio tema personalizado o Subtheme, tomando como base, el Theme Bootstrap Barrio, ya que además de heredar las características del Bootstrap 4 original, permite la aplicación de varias configuraciones mediante la interfaz, como hicimos con el Theme Barrio.
Esta vez, para trabajar con la creación y configuración de nuestro Subtheme, utilizaremos el gestor de paquetes Composer, que comentábamos al principio de este artículo.
Para realizar esta clase de operaciones, abriremos la consola y, una vez colocados dentro de la carpeta de nuestro proyecto, podremos ejecutar el siguiente comando para que comience la descarga de los archivos que vamos a utilizar:
Siempre que utilicemos el gestor de paquetes Composer para descargar nuestros Themes o Módulos, creará automáticamente, si no existe, una carpeta llamada Contrib, referente a módulos o Themes contribuidos de Drupal. De esta forma mantiene separados los módulos y Themes, cuyo contenido no deberíamos modificar nunca directamente, del resto de módulos y Themes creados a partir de ellos y modificados por nosotros.
A continuación, nos dirigiremos a la Página Oficial de Bootstrap Barrio, para leer y seguir los pasos necesarios en la creación del Subtheme.
Después de copiar los datos en el archivo create_subtheme.sh y seguir el resto de los pasos descritos en su página oficial, tendremos que llamar al archivo desde nuestra consola para que genere todos los demás componentes necesarios en nuestro nuevo Subtheme.
En el momento en que termina la ejecución del archivo llamado desde nuestra consola, si volvemos a las carpetas de Drupal, dentro de la Carpeta "themes/contrib", podremos ver nuestro Subtheme listo para ser activado, desde url "/admin/appearance", tal y como hicimos anteriormente con el Theme Mayo.
Encontraremos en la parte inferior de la pantalla, todos los themes disponibles para ser utilizados en nuestro proyecto y, dentro del listado de Themes desinstalados, estará, si todo ha ido bien, nuestro Theme personalizado.
Ahora podrás comprobar que tu nuevo Subtheme, además de tener diseño Responsivo, te brinda la posibilidad de personalizarlo al completo, para darle un aspecto funcional, práctico y novedoso a tus proyectos en Drupal.
Cambiar el nombre del idioma en in language switcher (English > En)
Al instalar nuestro sitio multi-idioma en Drupal, en algunos casos nos encontraremos con la necesidad de que el selector de idiomas (Language Switcher), que viene con Drupal, muestre los nombres abreviados para cada indioma, ya que por defecto mostrará su nombre completo. En principio, para cambiarlo sólo deberíamos acceder a la url de configuración del módulo Language, previamente activado, accediendo a "/admin/config/regional/language" y allí seleccionar EDITAR y cambiar el nombre del idioma Ej. English a EN, pero esto no funciona correctamente y sólo te cambia el resto de los idiomas.
Para solucionarlo, tendremos que añadir en nuestro archivo TUTEMA.theme, la siguiente función, cambiando sólamente en nombre equivalente a tu tema.
