Drupal 6 Theming

Theming mit Drupal 6

Anlegen von Template Files

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.

Wie finde ich den Namen des korrekten Templates?

  1. Finde heraus welches Modul für die Ausgabe verantwortlich ist
  2. Entweder stellt das Modul ein Template (tpl.php Datei) bereit. Dann kopiere das Template in den Ordner deines Themes.
  3. oder suche im Modulcode die Funktion, die den betreffenden Bereich rendert und kopiere diesen in die template.php-Datei deines Themes. Die Funktionen beginnen üblicherweise mit dem 'theme_' oder 'preprocess_' Präfix. Diese müssen an den Namen des eigenen Themes angepasst werden. Beispiel: 'theme_breadcrumb' wird in 'meintheme_breadcrumb' geändert.
  4. Ändere in der kopierten Funktion oder im Template den HTML-Code nach deinen wünschen
  5. Lösche den Theme-Cache

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.

Vorhandene theme_ hooks verwenden und überschreiben

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>';
  }
}

 

 

 

 

Eigene theme_ hooks implementieren und preprocess Funktionen nutzen

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>';
}

?>

 

 

Content Templates verwenden

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

Content Template

Solche und ähnliche Anforderungen lassen sich mit dem Content Template Module bewerkstelligen.

Beispiel

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>

 

 

 

Views einbetten

Um Views in bestehende Seiten einzubetten, gibt es zwei Möglichkeiten.

1. Mit dem Insert Views Modul

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] 


2. Mit PHP Code

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)