Desarrollo de temas Drupal

drupal-header

Esta publicación explica cómo crear un tema con Drupal 7, a partir de su funcionamiento y componentes. Veamos con un ejemplo sencillo. 

1. Crear una estructura base para el tema

Para crear un tema es necesario seguir una estructura y buenas prácticas. Asi que lo primero es tener una carpeta de temas:

[código de inicio] nombre del proyecto/temas/nombre de su tema [código final]

 

Tras ello, ejecute el siguiente archivo:

  • archivo theme-name.info — Este archivo contendrá toda la información sobre su tema, como nombre, descripción, núcleo, configuración y regiones.
  • screenshot.png — Esta es una captura de pantalla de su tema que se utiliza en el panel de administración.
  • logo.png — su logo, si está usando alguno.

 

 Cada variable tiene su función:

  • name-un nombre legible de su tema.
  • description- una descripción de su tema.
  • core– versión de Drupal para la cual está diseñada.
  • regions– las regiones de bloques disponibles. El nombre de la máquina de la región está incluido entre corchetes (por ejemplo regions[sidebar_first]) para insertar la región en sus archivos de plantilla. La etiqueta que le asigne se usará en la interfaz de administración cuando asigne bloques a sus regiones.
  • stylesheets– sus archivos CSS.
  • scripts– cualquier guion requerido por su plantilla.

 

Revise este ejemplo completo:

 

name = Nombre del tema
description = Tema HTML5 vacío, para comenzar al desarrollar temas personalizados.
version = 7.x-3.x
core = 7.x

stylesheets[all][] = dist/css/main.css
scripts[] = dist/js/main.js
; también puede hacerse con stylesheets-remove[] ans stylesheets-override[]: 

regiones[encabezado] =
Regiones de encabezado[contenido] =
Regiones de contenido[pie de página] =
Regiones de pie de página[sidebar_first] = Primeras regiones de la barra lateral
[ayuda] =
Regiones de ayuda[resaltadas ] =
Regiones resaltadas[sidebar_second] = Segundas
regiones de la barra lateral[page_top] =
Regiones de la parte superior de la página[page_bottom] = Parte inferior de la página

Consulta en este enlace para más información sobre las opciones .info.

2. Cree sus plantillas

Posteriormente, configure una carpeta de plantillas con las siguientes bases:

  • html.tpl.php
  • página.tpl.php

Procure que los archivos HTML tengan la siguiente estructura: 

 

<!DOCTYPE html>
<html<?php print $rdf_namespaces;?>>
<head>
<link rel="perfil" href="<?php print $grddl_profile; ?>" />
<meta name=" viewport" content="width=device-width, initial-scale=1.0">
<?php print $head; ?>
<título><?php print $head_title; ?></título>
<?php print $estilos; ?>
<?php print $scripts; ?>
</head>
<body>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Saltar a principal contenido' ); ?></a>
</div>
< ?php imprimir $página_superior;
?> <?php imprimir $página; ?>
<?php print $pagina_inferior; ?>
</cuerpo>
</html>

 

Tenga una configuración similar para la plantilla de página. Allí encontrará la estructura de encabezado, contenido y pie de página.

 

<div id="header">
<a href="<?php print $front_page;?>">
<img src="/<?php print $directory;?>/images/logo.png" alt ="<?php print $nombre_del_sitio;?>" height="80" width="150" />
</a>

<?php if ($menú_principal): ?>
<?php print theme('enlaces', $ menú principal); ?>
<?php endif; ?>

</div>

<div id="contenido">
<?php print render($title_prefix); ?>
<?php if ($título): ?><h1><?php print $título; ?></h1><?php endif; ?>
<?php print render($title_suffix); ?>

<?php print render($mensajes); ?>
<?php si ($pestañas): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>

<?php print render($pagina['contenido']); ?>
</div>

<?php if ($página['sidebar_first']): ?>
<div id="sidebar">
<?php print render($página['sidebar_first']); ?>
</div>
<?php endif; ?>

<div id="pie de página">
<?php if ($página['pie de página']): ?>
<?php print render($página[' pie de página']); ?>
<?php endif; ?>
</div>

[bloqueo de código final]


Finalmente, edite libremente la página y el archivo HTML. D e hecho, puede usar el formato que prefiera.

Conclusión

Los temas en Drupal 7 cuentan con componentes para la construcción de un tema desde cero, utilizando el motor de temas de plantilla PHP. Así que anímese a diseñar uno como desee. 

Puede interesarle: Implementación de temas WordPress con Sage .