En esta publicación hablaremos sobre el desarrollo de temas para Drupal. También vamos a explicar un ejemplo simple de un tema de Drupal, así que comencemos.

Crear una estructura base para el tema

Para crear un tema es necesario seguir una estructura, es organizar nuestro tema de la mejor manera y seguir las buenas prácticas. Primero, es necesario crear nuestra carpeta de temas:

projectname/themes/yourthemename

Aquí, es necesario crear el siguiente archivo:

  • theme-name.info file — 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 para humanos de su tema.

description – una descripción de su tema.

core – La versión de Drupal para la cual es diseñado.

regions – las regiones de bloque disponibles, El nombre machine de la región es incluido se incluye entre corchetes (por ejemplo regions[sidebar_first]). Esto se usará 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 script requerido por su plantilla.

Aquí puede encontrar un 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[]

regions[header] = Header
regions[content] = Content
regions[footer] = Footer
regions[sidebar_first] = Sidebar first
regions[help] = Help
regions[highlighted] = Highlighted
regions[sidebar_second] = Sidebar second
regions[page_top] = Page top
regions[page_bottom] = Page bottom

Más información sobre las opciones .info

Cree sus plantillas

Necesita crear una carpeta de plantillas. En el interior, debe tener las siguientes plantillas base:

  • html.tpl.php
  • page.tpl.php

Se recomienda que los archivos html tengan la siguiente configuración:


<!DOCTYPE html>
<html<?php print $rdf_namespaces;?>>
<head>
<link rel=”profile” href=”<?php print $grddl_profile; ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body>
<div id=”skip-link”>
<a href=”#main-content” class=”element-invisible element-focusable”><?php print t(‘Skip to main content’); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>

Se recomienda una configuración similar para la plantilla de página, donde puede 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 $site_name;?>” height=”80″ width=”150″ />
</a>

<?php if ($main_menu): ?>
<?php print theme(‘links’, $main_menu); ?>
<?php endif; ?>

</div>

<div id=”content”>
<?php print render($title_prefix); ?>
<?php if ($title): ?><h1><?php print $title; ?></h1><?php endif; ?>
<?php print render($title_suffix); ?>

<?php print render($messages); ?>
<?php if ($tabs): ?><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($page[‘content’]); ?>
</div>

<?php if ($page[‘sidebar_first’]): ?>
<div id=”sidebar”>
<?php print render($page[‘sidebar_first’]); ?>
</div>
<?php endif; ?>

<div id=”footer”>
<?php if ($page[‘footer’]): ?>
<?php print render($page[‘footer’]); ?>
<?php endif; ?>
</div>

Siéntase libre de editar la página y el archivo html, puede usar cualquier formato que prefiera.

 

Conclusión

Esta publicación le explicó cómo funciona los temas en Drupal 7, también explicó los diversos componentes de un tema de Drupal y cómo proceder con la construcción de un nuevo tema desde cero utilizando el motor de temas de plantilla PHP predeterminado. Hay muchas otras cosas que puede hacer con su tema. Esperemos que esto sea suficiente para comenzar con su propio tema y personalizarlo como desee.

Puede ser interesante para usted Implementación de temas WordPress con Sage.

LEER
Comenzando con Elixir y Phoenix

Comentarios