Drupal. Crear un theme

Enviado por tech4life el Dom, 05/03/2023 - 16:19

Cuando creamos una web con Drupal, muchas veces utilizaremos un theme o tema de los ya existentes y lo adaptaremos un poco a nuestras necesidades, aunque si queremos realizar un diseño muy personalizado en nuestro sitio, lo mejor, aunque no lo más sencillo, es crear un theme propio y personalizado, aunque para ello hagan falta nociones más técnicas. 

Primero de todo empezaremos creando una carpeta con el nombre de nuestro tema dentro de la carpeta /themes/custom de nuestra instalación.

En este caso vamos a crear un tema que se llama mitema.

Dentro de esta carpeta crearemos un fichero que se llamará : mitema.info.yml y escribiremos lo siguiente : 

name: mitema
type: theme
description: 'mitema Custom Theme.'
package: Other
core_version_requirement: ^8 || ^9
base theme : classy

Como véis aqui simplemente indicamos el nombre, el tipo, una descripción, la versión de Drupal y el tema en el que se basa.

El siguiente paso es crear un fichero que se llame mitema.libraries.yml y en él pondremos lo siguiente : 

global-styling:
  version: 1.x
  js:
      js/script.js: {}
  css:
    base:
      css/style.css: {}

Aquí indicamos en que ruta tendremos nuestro fichero de javascript y el de css.

Una vez indicado volvemos a nuestro fichero info.yml para añadir : 

libraries:
  - mitema/global-styling

El siguiente paso que debemos hacer es indicar las regiones de nuestro tema, para ello en nuestro fichero info.yml añadimos lo siguiente:

regions:
  branding: Branding
  navigation: Main navigation
  search: Search
  featured: Featured
  content: Content
  right_sidebar: Right sidebar
  footer_first: Footer First
  footer_second: Footer Second
  footer_third: Footer Third
  footer_bottom: Footer Bottom

Ahora deberemos crear los ficheros js/script.js y el css/style.css . Y para empezar podemos empezar a añadir nuestras clases en el fichero de CSS.

El siguiente paso es crear la estructura de nuestra página, si no indicamos el fichero, se utilizará el que tiene por defecto Drupal o bien nuestro tema base. 

Este fichero se llamará page.html.twig y lo ubicaremos en template/system y en el podemos poner algo como así:

<header aria-label="Site header" class="header" id="header" role="banner">
     {{ page.branding }}
</header>
<section class="main" id="main">
   <main aria-label="Site main content" class="content" id="content" role="main">
     {{ page.content }}
   </main>
</section>
<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
     {{ page.footer_first }}
</footer>

Podemos mirar más ejemplos en los diferentes ficheros page.html.twig que encontraremos tanto en las carpetas de core como en la de otros temas que tengamos instalados.

Por último, iremos a nuestra página de administración, buscaremos los temas (Apariencia), instalaremos nuestro nuevo tema y lo activaremos como nuestro tema predeterminado.

Tip final : En el caso que veamos que nuestro page.html.twig o estructura de la página no se está cargando bien, debemos limpiar la cache de nuestro Drupal desde el menú de administración en la sección de Configuración.

Lenguaje
Nivel

Contenido Relacionado