Una de las cuestione principales en la puesta en marcha de un sitio web es la personalización del aspecto visual del sitio.
Para ello Drupal cuenta con una serie de funcionalidades para la gestión de Temas visuales a partir de la Administración->Apariencia, al como se comentó en la IX entrega del curso

Ahora lo que debemos comentar son los pasos necesarios para la puesta en macha de un tema personalizado y adaptado a nuestras necesidades.

Conviene recordar que siempre será mejor al final crear un subtema de un tema existente que modificar un tema hecho completo por el tema de actualizaciones el mismo, siempre que tengamos que modificar plantillas a mano del tema.

Localización de directorios

El directorio principal para la colocación de temas visuales, relativo a la ruta de instalación de Drupal, es el directorio “sites/all/themes”. En dicha carpeta veremos un directorio por cada tema visual instalado.
Lo primero que deberemos hacer es crear una carpeta con el nombre de nuestro tema visual, digamos que se llamará “ejemplo”.

El fichero .info

Una vez creada la carpeta, necesitaremos crear un fichero con el nombredeltema.info, en nuestro caso como el tema visual se llama ejemplo el fichero se llamará “ejemplo.info”. El fichero como todo en Drupal, deberá estar codificado en UTF-8.
A continuación veremos los parámetros más habituales de configuración que aparecen en el fichero:

• name: nombre del tema
• description
• screenshot: fichero que representa la captura del tema
• version: versión del tema
• core: versión de drupal
• engine: motor de plantillas a utilizar, el típico es phptemplate
• regions[]: nombres de las regiones
• features[]: funcionalidades que permite manejar el tema visual
• stylesheets[]: hojas de estilo referenciadas en el tema
• scripts []: ficheros Javascript referenciados con el tema
• php: versión de PHP

un ejemplo de fichero .info sería:
name = Garland
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = 7.12
core = 7.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css

Definiendo Regiones

Una de las cuestiones fundamentales a la hora de generar una pantilla es definir las regiones que quiere exponer el tema visual a Drupal. Éstas regiones como ya se vió anteriormente marcan zonas, habitualmente divs que permiten agrupar bloques visuales dentro del tema.
Para definir éstas regiones basta con incluir una serie de entradas en el fichero .info, una por cada región que se queira definir, similar a la siguiente…
regions[header]= Header
En este caso se define la región “header” y se le pone el nombre “Header”.
Dicha región deberá ser definida en el fichero “page.tpl.php” que se explica más adelante. Pero con esta inclusión bastará para que Drupal conozca esas regiones para ese tema visual y desde la configuración de bloques podamos asignar los bloques a dichas regiones.

Fichero de Screenshot

Dentro del mismo directorio será necesario incluir una captura de como queda el tema visual, dicho fichero debe llamarse por defecto screenshot.png, pero podemos cambiar su nombre y localización dentro de la carpeta del tema usando el parámetro screenshot dentro del fichero .info

Configuración de funcionalidades

Dentro de la configuración del tema visual, también deberemos gestionar las distintas configuraciones que podemos llega ra tener por defecto dentro del Tema a través de la configuracion en la administración. Las configuraciones típicas son:
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = favicon
features[] = main_menu
features[] = secondary_menu
Dichos valores serán los nombres de los ID de los div que deberíamos colocar el fichero page.tpl.php.

Ficheros de plantilla

Los ficheros principales de pantilla de Drupal 7 suelen tener una terminación en “tpl.php” cuando usamos el motor de plantillas “phptemplate”, y son los siguientes:

• html.tpl.php: almacena la estructura principal del html
• page.tpl.php: almacena la estructura principal del body de la página
• region.tpl.php configura cómo salen las regiones de la plantilla
• block.tpl.php: define cómo salen los bloques
• node.tpl.php: define como salen los contenidos
• comment.tpl.php: define cómo salen los comentarios
• template.php: define hooks de temas
•  logo.png. logotipo por defecto del tema

Todos los ficheros principales de pantilla estan disponibles en el directorio 2modules/system” y son los que podemos usar de base para la generación de un nuevo tema visual.

El fichero page.tpl.php

Copiamos el contenido completo del page.tpl.php, para así poder explicarlo paso a paso:
<div id=”page-wrapper”><div id=”page”>

<div id=”header”><div class=”section clearfix”>

<?php if ($logo): ?>
<a href=”<?php print $front_page; ?>” title=”<?php print t(‘Home’); ?>” rel=”home” id=”logo”>
<img src=”<?php print $logo; ?>” alt=”<?php print t(‘Home’); ?>” />
</a>
<?php endif; ?>

<?php if ($site_name || $site_slogan): ?>
<div id=”name-and-slogan”>
<?php if ($site_name): ?>
<?php if ($title): ?>
<div id=”site-name”><strong>
<a href=”<?php print $front_page; ?>” title=”<?php print t(‘Home’); ?>” rel=”home”><span><?php print $site_name; ?></span></a>
</strong></div>
<?php else: /* Use h1 when the content title is empty */ ?>
<h1 id=”site-name”>
<a href=”<?php print $front_page; ?>” title=”<?php print t(‘Home’); ?>” rel=”home”><span><?php print $site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php endif; ?>

<?php if ($site_slogan): ?>
<div id=”site-slogan”><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!– /#name-and-slogan –>
<?php endif; ?>

<?php print render($page[‘header’]); ?>

</div></div> <!– /.section, /#header –>

<?php if ($main_menu || $secondary_menu): ?>
<div id=”navigation”><div class=”section”>
<?php print theme(‘links__system_main_menu’, array(‘links’ => $main_menu, ‘attributes’ => array(‘id’ => ‘main-menu’, ‘class’ => array(‘links’, ‘inline’, ‘clearfix’)), ‘heading’ => t(‘Main menu’))); ?>
<?php print theme(‘links__system_secondary_menu’, array(‘links’ => $secondary_menu, ‘attributes’ => array(‘id’ => ‘secondary-menu’, ‘class’ => array(‘links’, ‘inline’, ‘clearfix’)), ‘heading’ => t(‘Secondary menu’))); ?>
</div></div> <!– /.section, /#navigation –>
<?php endif; ?>

<?php if ($breadcrumb): ?>
<div id=”breadcrumb”><?php print $breadcrumb; ?></div>
<?php endif; ?>

<?php print $messages; ?>

<div id=”main-wrapper”><div id=”main” class=”clearfix”>

<div id=”content” class=”column”><div class=”section”>
<?php if ($page[‘highlighted’]): ?><div id=”highlighted”><?php print render($page[‘highlighted’]); ?></div><?php endif; ?>
<a id=”main-content”></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?><h1 class=”title” id=”page-title”><?php print $title; ?></h1><?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><div class=”tabs”><?php print render($tabs); ?></div><?php endif; ?>
<?php print render($page[‘help’]); ?>
<?php if ($action_links): ?><ul class=”action-links”><?php print render($action_links); ?></ul><?php endif; ?>
<?php print render($page[‘content’]); ?>
<?php print $feed_icons; ?>
</div></div> <!– /.section, /#content –>

<?php if ($page[‘sidebar_first’]): ?>
<div id=”sidebar-first” class=”column sidebar”><div class=”section”>
<?php print render($page[‘sidebar_first’]); ?>
</div></div> <!– /.section, /#sidebar-first –>
<?php endif; ?>

<?php if ($page[‘sidebar_second’]): ?>
<div id=”sidebar-second” class=”column sidebar”><div class=”section”>
<?php print render($page[‘sidebar_second’]); ?>
</div></div> <!– /.section, /#sidebar-second –>
<?php endif; ?>

</div></div> <!– /#main, /#main-wrapper –>

<div id=”footer”><div class=”section”>
<?php print render($page[‘footer’]); ?>
</div></div> <!– /.section, /#footer –>

</div></div> <!– /#page, /#page-wrapper –>
como puede verse prácticamente todo el contenido del page.tpl.php está dentro del
<div id=”page-wrapper”><div id=”page”>
…
</div></div> <!– /#page, /#page-wrapper –>
Éstos son los div princiaples de la página. todo está dentro de ellos.

Features

Como se ha comentado anteriormente las features u opciones configurables de un tema, son aquellas que van indicadas ene l fichero page.tpl.html como div con el id de la feature que indicamos, por ejemplo:
<?php if ($logo): ?>
<a href=”<?php print $front_page; ?>” title=”<?php print t(‘Home’); ?>” rel=”home” id=”logo”>
<img src=”<?php print $logo; ?>” alt=”<?php print t(‘Home’); ?>” />
</a>
<?php endif; ?>
de esta manera si desde la configuración nos han marcado sacar el logo tipo, el tema presentará ese DIV.

Regiones

Ya comentamos que las regiones definidas en el .info debían tener una representación en el fichero page.tpl.php, he aquí un ejemplo de uso:
<?php if ($page[‘sidebar_first’]): ?>
<div id=”sidebar-first” class=”column sidebar”><div class=”section”>
<?php print render($page[‘sidebar_first’]); ?>
</div></div> <!– /.section, /#sidebar-first –>
<?php endif; ?>
de esta manera estamos condicionando a que si hay bloques que presentar en la región ‘sidebar_first’ imprimimos el div id=”sidebar-first” en cuyo interior realizamos una llamada a la función render pasándole el array $page e indicándole el índice de la región que queremos sacar en ese div ‘sidebar_first’.
Este proceso deberíamos repetirlo con todos aquellos bloques que hayamos definido en el fichero.info.
Un ejemplo de bloque es el contenido que como pude observarse simplemente se llama a la función “render($page[‘content’])” sin condicionar su salida, ya que el contenido debería salir practicamente siempre en la página.

Referencias:

• Drupal  8 theming: https://www.drupal.org/docs/8/theming
• Drupal 8 Estructura de carpetas: https://www.drupal.org/docs/8/theming-drupal-8/drupal-8-theme-folder-structure
• Drupal 8: Añadir regiones: https://www.drupal.org/docs/8/theming/adding-regions-to-a-theme
• Drupal 8 Sub Themes: https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-theme-or-sub-theme-of-sub-theme