Cómo crear un tema personalizado de Drupal 9 en 9 sencillos pasos

Drupal 9 ofrece a los desarrolladores y propietarios de sitios la flexibilidad de crear componentes a medida que se pueden unir para crear experiencias digitales atractivas. Los temas son bloques de diseño de Drupal que representan la apariencia visual de un sitio web. Drupal 9 viene con opciones de temas centrales y temas de terceros, siendo el más popular el tema Bootstrap. Sin embargo, si ninguno de los temas de Drupal 9 es adecuado para usted, probablemente debería considerar el desarrollo de temas personalizados. Con los temas personalizados de Drupal 9, puede adaptar su diseño a los requisitos exactos.

Drupal 9 proporciona Bartik como el tema de interfaz para Drupal, pero si necesita un tema personalizado de Drupal 9, puede crear su propio desarrollo de tema de Drupal 9, mejorando así sus habilidades de tematización de Drupal. La forma más fácil de entender realmente el desarrollo de temas de Drupal 9 es practicar y crear uno desde cero.

Drupal 8 ya ha alcanzado el final de su vida útil. Ahora es el momento de migrar a Drupal 9. Sin embargo, si todavía está intentando crear un tema personalizado en Drupal 8, estos pasos también funcionarán para una configuración de Drupal 8.

Introducción al desarrollo de temas personalizados para Drupal 9

Comencemos con la creación de un tema de Drupal 9 para nuestro sitio web de Drupal.
PASO 1: Primero, necesitamos crear un tema personalizado en la carpeta 'web / themes / custom' . Nombraremos la carpeta como custom_theme .

PASO 2: A continuación, necesitaremos crear un archivo info.yml . Necesitamos especificar las claves básicas para ello. Especifiquémoslo aquí -

 CÓDIGO:
nombre : Tema personalizado
tipo : tema
descripción : 'Tema personalizado para mi sitio web'.
paquete : Otro
core_version_requirement : ^ 8 || ^ 9

PASO 3 : Ahora, creemos un archivo libraries.yml para especificar todas las bibliotecas que necesitamos (CSS Y JS) para nuestro tema personalizado de Drupal 9. También crearemos el directorio CSS y JS y sus archivos para vincularlo aquí. Vamos a nombrar la biblioteca como estilo global .

 CÓDIGO:
estilo global :
versión : 1.x
js :
js / script.js : {}
css :
tema :
css / style.css : {}

PASO 4: Después de crear el archivo libraries.yml , necesitamos vincularlo a nuestro tema. Para esto lo vamos a agregar en el archivo info.yml que luego lo aplicará a todo el tema.

 CÓDIGO:
bibliotecas :
- tema_personalizado / estilo global

Entonces, la clave será bibliotecas y la ruta será el nombre del tema - ' tema_personalizado ' / nombre de biblioteca - 'estilo global' .

PASO 5: A continuación, necesitamos heredar el 'Tema base'. En nuestro caso, heredaremos el tema ' elegante ' que es un tema central de Drupal. Entonces, la clave será el tema base en info.ym l.

 CÓDIGO:
tema base : elegante

PASO 6: Ahora, definiremos las 'regiones' para nuestro tema. En info.yml , tenemos que definirlo bajo la clave 'regiones'.

 CÓDIGO:
regiones :
branding : Branding
navegación : navegación principal
búsqueda : Buscar
destacado : Destacado
contenido : Contenido
right_sidebar : barra lateral derecha
footer_first : Pie de página primero
footer_second : Segundo pie de página
footer_third : Tercer pie de página
footer_bottom : Pie de página inferior

En la tecla 'regiones', puede definir sus regiones para el tema personalizado de Drupal. Aquí,
branding: es el id de la región que debe ser letras minúsculas.
Branding: es el nombre de la región que puede estar en mayúsculas.

PASO 7: Después de haber definido nuestras regiones para nuestro tema personalizado de Drupal, necesitamos anular page.html.twig para tomar nuestras 'regiones' en lugar de las de los temas con clase. Crearemos el directorio templates / system bajo el cual crearemos el page.html.twig .

 CÓDIGO:
< encabezado aria-label = "Encabezado del sitio" class = "encabezado" id = "encabezado" role = "banner" >
{{page.branding}}
{{page.navigation}}
{{page.search}}
</ encabezado >
< section class = "destacado" id = "destacado" rol = "complementario" >
{{page.featured}}
</ sección >
< section class = "main" id = "main" >
< main aria-label = "Contenido principal del sitio" class = "content" id = "content" role = "main" >
{{ contenido de página }}
</ main >
< aparte class = "right - sidebar" id = "sidebar" role = "complementario" >
{{page.right_sidebar}}
</ aparte >
</ sección >
< footer aria-label = "Site footer" class = "footer" id = "footer" role = "contentinfo" >
< div class = "footer - top" >
{{page.footer_first}}
{{page.footer_second}}
{{page.footer_third}}
</ div >
< div class = "footer - bottom" >
{{page.footer_bottom}}
</ div >
</ pie de página >

En page.html.twig, crearemos la estructura HTML para nuestras regiones. Como puede ver en {{page.branding}}, aquí,

página : es la clave para representar 'regiones' en la página

branding- Es la región que hemos definido en el archivo info.yml .

Así que ahora, hemos creado nuestras regiones y las hemos renderizado en la página.

Paso 8: Vaya a Apariencia en su sitio Drupal. Puede ver su tema personalizado de Drupal presente en la sección Temas desinstalados .

Debe hacer clic en la opción ' Instalar y establecer como predeterminado ' para instalar su tema Drupal en el sitio.

Una vez instalado, vaya a Estructura -> Diseño de bloque . Su tema personalizado aparecerá debajo del diseño de bloque.

Verá un enlace para ' Demostrar regiones de bloques (tema personalizado) '. Haga clic en el enlace. Puede ver todas las regiones que había declarado en el info.yml y agregado en page.html.twig

Paso 9: ¡Ya casi ha terminado con la creación de temas en Drupal 9! A continuación, debe aplicar estilos en el CSS para cada región según su diseño. Usaremos CSS en este caso; Incluso puede usar SCSS si lo desea. Simplemente inspeccione la región de marca; debería ver la clase de región y luego agregar el CSS a esa clase.

 . encabezado {
 pantalla : flex ;
 justificar-contenido : espacio-entre ;
 relleno : 10 px ;
}


. encabezado . region {
 relleno : 5 px ;
}


. encabezado . region-branding {
 flexión : 0 1 20 %;
}


. encabezado . region-navigation {
 flexión : 0 1 50 %;
}


. encabezado . region-search {
 flexión : 0 1 30 %;
}


. región . block-region {
 relleno : 15 px ;
}


. destacado {
 relleno : 40 px 20 px ;
 color de fondo : rojo indio ;
}


. principal {
 relleno : 50 px 0 ;
 pantalla : flex ;
 justificar-contenido : espacio-entre ;
}


. principal. contenido {
 flexión : 0 1 65 %;
}


. principal. right - sidebar {
 flexión : 0 1 30 %;
}
		



. pie de página - top {
 pantalla : flex ;
 justificar-contenido : espacio-entre ;
 relleno : 10 px ;
}


. pie de página - arriba . region {
 relleno : 5 px ;
}


. región-pie-primera,. región-pie-segundo,. region-footer-third {
 flexión : 0 1 30 %;
}

El resultado:

¡Tu tema personalizado de Drupal 9 está listo!

Si necesita escribir algún gancho o crear sugerencias para su archivo twig, puede agregar el archivo .theme en su tema personalizado de Drupal (que se muestra a continuación).