Curso de Drupal 7 (XIII): Temas visuales

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 7 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 VII 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.

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:

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:

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="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 -->
como puede verse prácticamente todo el contenido del page.tpl.php está dentro del
...
É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:

    <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:

    <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: