Die einfachste und wichtigste Art um die HTML Struktur von Drupal Webseiten anzupassen, ist das erstellen von eigenen Templates.
Praktisch alle wichtigen Bereiche von Drupal lassen sich mit eigenen Templates anpassen.
Templatefiles werden immer im Theme-Ordner platziert.
Um unterschiedliche Templates pro Nodetype anzulegen, können separate Templatefiles angelegt werden. Drupal erkennt diese aufgrund des Namens:
Alle Nodes:
node.tpl.php
Nodes eines Content Types
node-page.tpl.php
Eine Liste der Core Templates ist hier zu finden.
Wem dies zu kompliziert ist, sollte das devel Modul installieren und den Theme developper aktivieren:
Im Frontend aktivieren:
Anschliessend kann man mit der Maus über den entsprechenden Bereich im Frontend fahren und sieht den Namen des Templates oder der Funktion.
Dank der Theme Registry können in Drupal 6 alle vorhandenen hook_theme und template_preprocess Funktionen überschrieben werden. Mittels dem bereits beschriebenen 'Theme developer Modul' vom Drupal, können auf die preprocess Funktionen eifnach ermittelt werden.
Es empfielt sich, immer die originale Funktion aus dem Modulcode in das eigene template.php File des Themes zu kopieren und anschliessend anzupassen.
Praktisches Beispiel anhand der theme_breadcrumb Funktion.
1. theme_breadcrumb suchen
Die Funktion befindet in der theme.inc im Ordner /includes.
/** * Return a themed breadcrumb trail. * * @param $breadcrumb * An array containing the breadcrumb links. * @return a string containing the breadcrumb output. */ function theme_breadcrumb($breadcrumb) { if (!empty($breadcrumb)) { return '<div class="breadcrumb">'. implode(' » ', $breadcrumb) .'</div>'; } }
2. theme_breadcrumb in template.php kopieren und in mytheme_breadcrumb umbenennen. Alternativ kann auch phptemplate_breadcrumb verwendet werden. Dann gilt die Funktion für alle phptemplate-basierten Templates.
/** * Return a themed breadcrumb trail. * * @param $breadcrumb * An array containing the breadcrumb links. * @return a string containing the breadcrumb output. */ function phptemplate_breadcrumb($breadcrumb) { if (!empty($breadcrumb)) { return '<span class="othercssclass">'. implode(' » ', $breadcrumb) .'</span>'; } }
3. Optional phptemplate_preprocess_breadcrumb erweitern
/** * Implementation of $themeenginename_preprocess_$hook(). * Variables we set here will be available to the breadcrumb template file. */ function phptemplate_preprocess_breadcrumb(&$variables) { $variables['breadcrumb_delimiter'] = '#'; }
4. phptemplate_preprocess_breadcrumb mit neuer Variable anpassen
function phptemplate_breadcrumb($breadcrumb) { if (!empty($breadcrumb)) { return '<span class="othercssclass">'. implode(" $breadcrumb_delimiter ", $breadcrumb) .'</span>'; } }
Um eigene Theming Funktionen in einem Modul zu implementieren, müssen folgende Schritte durchgeführt werden.
1. theme_hook verwenden, um die Theme Funktionen in der Drupal Theme Registry bekannt zu machen. Wichtig: Jede Änderung wird erst dann sichtbar, wenn der Cache geleert wurde. Dies erreicht man am einfachsten, in dem man das Devel-Modul installiert und den Block auf der Webseite einfügt. Dann hat man immer die Möglichkeit, den Cache zu leeren.
function mymodule_theme() { return array( 'mymodule' => array( 'template' => 'mymodule_overview', 'arguments' => array('node' => null), ), 'mymodule_details' => array( 'template' => 'mymodule_details', 'arguments' => array('node' => null), ), 'mymodule_file' => array( 'arguments' => array('file' => NULL), 'file' => 'formatter.inc', ), ); }
Der Beispielcode registriert zwei theme hooks. Als Parameter wird jeweils die $node Variable übergeben.
2. template_preprocess Funktionen implementieren. Mit den Preprocess Funktionen können alle Variablen aufbereitet werden, die im Template zur Verfügung stehen sollen. Damit wird eine saubere Trennung zwischen Code und Design erreicht. Auf die Variablen greifen wir im letzten Schritt zu.
function template_preprocess_mymodule(&$variables) { $node = $variables['node']; $variables['title'] = l($node->title, 'node/'.$node->nid); $variables['detaillink'] = l(t('Details'), 'node/'.$node->nid); } function template_preprocess_mymodule_details(&$variables) { $node = $variables['node']; $variables['title'] = l($node->title, 'node/'.$node->nid); }
3. Modul-Template Files anlegen und auf die vorbereiteten Variablen zugreifen
File mymodule.tpl.php
<?php /** * * Template für normale Ansicht */ ?> <h1><?php print $title ?></h1> <?php $view = views_get_view('liste'); print $view->execute_display('default', array($node->nid)); ?> <br /> <?php print $detaillink ?> ?>
File mymodule_details.tpl.php
/** * * Template für Detailansicht */ ?> <h1><?php print $title ?></h1> <?php $view = views_get_view('liste'); print $view->execute_display('all', array($node->nid)); ?>
4. Template Funktionen ohne template File implementieren. Wie man in der Theme Registry sehen kann, unterscheidet sich der letzte Hook von den Beiden ersten. Hierbei handelt es sich um eine Theme Funktion die auf eine Template Datei verzichtet und einfach den entsprechenden gerenderten HTML Code zurückgibt.
Datei formatter.inc (im gleichen Verzeichnis wie mymodule.module)
<?php /** * file formatter */ function theme_filefield_file($file) { if (empty($file['fid'])) { return ''; } $path = $file['filepath']; $url = file_create_url($path); $options = array( 'attributes' => array( 'type' => $file['filemime'], 'length' => $file['filesize'], ), ); if (empty($file['data']['description'])) { $link_text = $file['filename']; } else { $link_text = $file['data']['description']; $options['attributes']['title'] = $file['filename']; } return '<div class="filefield-file clear-block">'. $icon . l($link_text, $url, $options) .'</div>'; } ?>
Praktisch alle Drupal Webseiten machen Gebrauch von CCK. Was jedoch die Ausgabe von CCK Feldern auf der Webseite betrifft, ist man stark eingeschränkt. Zwar kann man einzelne Felder und Labels ein- und ausblenden. Eine freie Positionierung der Felder steht jedoch nicht zur Verfügung. So werden beispielsweise Postleitzahl und Ort wie folgt dargestellt:
PLZ: 8400
Ort: Winterthur
Wünschenswert wäre jedoch folgende Darstellung:
PLZ und Ort: 8400 Winterthur
Solche und ähnliche Anforderungen lassen sich mit dem Content Template Module bewerkstelligen.
Im vorliegenden Fall wird ein Portrait mit Foto mittels <div> Tags neu ausgerichtet:
Um das obige Beispiel zu realisieren ist folgender Code im Body Template notwendig:
<h1><?php print check_plain($node->title) ?></h1> <div class="profile-image"> <?php print $node->field_image[0]['view'] ?> </div> <div class="profile-box"> <h4><?php print $node->content['field_street']['field']['#title'] ?>:</h4> <?php print $node->field_street[0]['view'] ?> <br/> <?php print $node->field_plz[0]['view'] ?> <?php print $node->field_residence[0]['view'] ?> <br/> <?php print $node->content['field_phone']['#children'] ?> <?php print $node->content['field_mobile']['#children'] ?> <?php print $node->content['field_fax']['#children'] ?> </div>
Um Views in bestehende Seiten einzubetten, gibt es zwei Möglichkeiten.
Mit dem 'Insert Views Module' können Views über ein beliebiges Textfeld eingefügt werden. Besonders geeignet sind dazu felder wie der Bodytext eines Nodes.
Um das Modul zu verwenden, muss der Filter im betreffenden Eingabeformat (z.B. Full HTML) freigeschaltet werden.
Danach können Views mit folgendem Syntax eingefügt werden:
[view:name of view] [view:name of view=name of display] [view:name of view=name of display=arg1,arg2,arg3]
Views können auch mittels PHP Code direkt in Template Files oder Content Template Files eingebunden werden:
Als Parameter wird die NodeId übergeben.
<?php $view = views_get_view('myliste'); print $view->execute_display('default', array($node->nid)); ?>
(Nur für Views 2)