La versión en inglés de este artículo: HOWTO: build your frontpage with regions
Esta manera de construir la Home de un sitio web con Drupal se realiza a través del tema que estemos utilizando. Para ello, utilizaremos tres archivos del tema:
- template.php
- page.tpl.php
- styles.css
Paso 1. En primer lugar deberemos crear las regiones de la home en el template.php. Por defecto, Drupal crea varias regiones y nosotros añadiremos varias más (para más información sobre cómo crear regiones puedes visitar la página oficiar de Drupal). Así que abrimos el archivo template.php y añadimos las regiones que necesitamos para la home. Utilizaremos como ejemplo la home de la web www.economiasolidaria.org (todavía sin publicar):
<?php
function nombredeltema_regions() {
return array(
'centro' => t('centro'),
'right' => t('right sidebar'),
'content' => t('content'),
'footer' => t('footer'),
'frontpage_top_izq' => t('Home-arriba-izq'),
'frontpage_top_der' => t('Home-arriba-der'),
'frontpage_bottom_izq' => t('Home-abajo-izq'),
'frontpage_bottom_der' => t('Home-abajo-der'),
'frontpage_bottom_cent'=> t('Home-abajo-cent'),
);
}
?>
En este ejemplo hemos creado cinco zonas diferentes para la home, pero podríamos crear cuantas quisiéramos según el diseño con el que estemos trabajando. Una vez hemos creado las regiones en el template.php guardamos y comprobamos que drupal lo está reconociendo. Para ello, en la administración de drupal iremos a
Administración > Construcción del sitio > Bloques
Y comprobaremos que las nuevas regiones existen, tal y como lo podemos observar en la imagen
(Insertar imagen)
Paso 2. A continuación abriremos el fichero page.tpl.php. y creamos el código. Tal y como se puede observar en el siguiente ejemplo, en primer lugar creamos la condición de frontpage, es decir, que sólo se pintará si nos encontramos en la página principal de la web. Y a continuación crearemos los contenedores que necesitemos según nuestro diseño. En este caso deseamos una primera fila con dos regiones (en nuestro caso está pensado para que cada espacio sea para un bloque) y una segunda fila con tres espacios (o bloques).
<?php if ($is_front) : ?>
<?php endif; ?>
Este código lo colocaremos en el lugar que deseemos en el page.tpl.php. En el ejemplo que estamos siguiendo deseamos que la home mantenga toda la estructura de menús de la web y que el espacio central del contenido sea el que se diferencie en la home. Por esta razón, las regiones de la frontpage las colocamos en el mismo contenedor donde pintamos $content.
Paso 3. Abrimos el style.css y creamos los estilos para los contenedores y clases generadas en el page.tpl.php. En el CSS señalamos dónde y como se pintarán cada una de las regiones. Este sería el ejemplo de los estilos con los que venimos trabajando:
#top{
height:200px;
width:750px;
background-color:#3A541C;
margin:0px;
padding:0px;
}
#f_top_izq{
width:64%;
float:right;
margin:0px;
padding:0px;
}
#f_top_der{
width:35%;
height:200px;
background-color:#3A541C;
color:#fff;
font:bold 12px/150% sans-serif, Tahoma, Arial;
margin:0px;
padding:0px;
}
Paso 4. Por último sólo nos queda crear los bloques y activarlos en Bloques. En función de los contenidos que deseemos mostrar en la home activaremos alguno de los bloques disponibles o con las vistas crearemos aquellos que precisemos.