Esta publicación explica cómo crear un tema con Drupal 7, a partir de su funcionamiento y componentes. Veamos con un ejemplo sencillo.
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.
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.
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 .