Drupal: Themes Teil 7

Im letzten Teil dieser Reihe zu den Drupal-Themes zeige ich euch weitere Template-Dateien, mit denen ihr es immer wieder zu tun bekommen werdet. Vorgestellt werden in diesem Tutorial die node.tpl.php, die field.tpl.php und die block.tpl.php. Zum Abschluss wird ein Blick auf die Datei template.php geworfen, über die sich Funktionen für das Theme definieren lassen. Gezeigt wird das dann übrigens anhand eines Beispiels, bei dem mittels Conditional Comments IE-spezifische CSS-Angaben eingebunden werden.

Wir empfehlen:
Drupal-Training

Los geht es in diesem Tutorial mit der Datei node.tpl.php. Innerhalb dieser Datei legt man die Darstellung der einzelnen Knoten bzw. Nodes fest. Wenn ihr – wie bereits beschrieben – das templates-Verzeichnis aus dem Genesis-Theme in euer Subtheme-Verzeichnis kopiert habt, findet ihr darin bereits eine entsprechende node.tpl.php.

 

Diese könnt ihr euren eigenen Bedürfnissen entsprechend anpassen.

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <div class="node-inner clearfix">
    <?php print render($title_prefix); ?>
    <?php if ($teaser): ?>
      <h2 class="node-title"<?php print $title_attributes; ?>>
        <a href="<?php print $node_url; ?>" rel="bookmark"><?php print $title; ?></a>
      </h2>
    <?php endif; ?>
    <?php print render($title_suffix); ?>
    <?php print $user_picture; ?>
    <?php if ($display_submitted): ?>
      <div class="node-submitted">
        <?php print $submitted; ?>
      </div>
    <?php endif; ?>
    <div class="node-content"<?php print $content_attributes; ?>>
      <?php
        // Hide comments and links and render them later.
        hide($content['comments']);
        hide($content['links']);
        print render($content);
      ?>
    </div>
    <?php if ($content['links']): ?>
      <div class="node-links">
        <?php print render($content['links']); ?>
      </div>
    <?php endif; ?>
    <?php print render($content['comments']); ?>
  </div>
</div>

Innerhalb der node.tpl.php seht ihr zahlreiche Variablen. So kann man beispielsweise über $user_picture das Benutzerbild des Erstellers des Knotens einbinden. Und auch der Name des Knoten-Erstellers lässt sich über $name ganz einfach anzeigen. Eine interessante Funktion verbirgt sich hinter folgendem Eintrag:

hide($content['comments']);

Dadurch wird das aktuelle Element so markiert, als ob es bereits gerendert wurde. Es wird also nicht noch einmal gerendert, also in HTML-Syntax umgewandelt. Somit wird das Element dann auch tatsächlich beim Rendern des Content-Arrays ignoriert.

 

Das Gegenstück dazu sieht übrigens folgendermaßen aus:

<?php print render($content['comments']); ?>

So ausgezeichnete Elemente werden explizit gerendert.

Die field.tpl.php

Die Standarddatei für die Darstellung der Feldinhalte ist die field.tpl.php. Wenn ihr – wie beschrieben – das templates-Verzeichnis vom Genesis-Theme in euer Subtheme kopiert habt, findet ihr darin diese Datei.

 

Standardmäßig sieht die folgendermaßen aus:

<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php if (!$label_hidden) : ?>
    <h3 class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</h3>
  <?php endif; ?>
  <?php foreach ($items as $delta => $item) : ?>
    <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
  <?php endforeach; ?>
</div>

Ausführliche Informationen zu dieser Datei gibt es auf der Seite http://api.drupal.org/api/drupal/modules%21field%21theme%21field.tpl.php/7.

 

Auch in dieser Datei stehen wieder zahlreiche Variablen zur Verfügung bzw. können genutzt werden. Die eigentliche Feldbezeichnung ist in der Variable $label enthalten. Wurde das Feld-Label auf hidden gestellt, kann darauf mit $label_hidden zugegriffen werden.

Die block.tpl.php

Weiter geht es mit der block.tpl.php. Über diese Datei werden die Blöcke ausgegeben. Diese Datei ist – wenn ihr das Genesis-templates-Verzeichnis in euer Subtheme kopiert habt – bereits vorhanden. Mehr zu den Möglichkeiten, die diese Datei bietet, gibt es auf der Seite http://api.drupal.org/api/drupal/modules%21block%21block.tpl.php/7.

 

Dort findet ihr dann auch die möglichen Variablen.

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <div class="block-inner">
    <?php print render($title_prefix); ?>
      <?php if ($title): ?>
        <h2 class="block-title"<?php print $title_attributes; ?>><?php print $title; ?></h2>
      <?php endif;?>
    <?php print render($title_suffix); ?>
    <div class="content"<?php print $content_attributes; ?>>
      <?php print $content ?>
    </div>
  </div>
</div>

Am wichtigsten ist sicherlich die Variable $content. Über diese wird nämlich letztendlich der Inhalt des Blocks ausgegeben. Wollt ihr hingegen auf das Modul zugreifen, das den Block generiert hat, verwendet ihr den Aufruf $block->module.

Die template.php

Um eine Datei, mit der ihr es immer mal wieder zu tun bekommt, soll am Ende dieses Tutorials gehen. Innerhalb der template.php könnt ihr Variablen und Funktionen deklarieren bzw. definieren, die ihr in euren Themes verwenden wollt. Oft wird die template.php beispielsweise verwendet, um unterschiedliche Klassen an Regionen zu vergeben. Wenn ihr die in eurem Subtheme liegende template.php öffnet, findet ihr darin auskommentierte Funktionen.

/**
 * Override or insert variables into all templates.
 */
/* -- Delete this line if you want to use these functions
function genesis_SUBTHEME_preprocess(&$vars, $hook) {
}
function genesis_SUBTHEME_process(&$vars, $hook) {
}
// */

Um eine entsprechende Funktion verwenden zu können, müsst ihr jeweils die folgende Zeile bei dieser Funktion löschen.

/* -- Delete this line if you want to use these functions

Ebenfalls angepasst werden müssen die Funktionsnamen. Standardmäßig stellen die sich innerhalb der template.php folgendermaßen dar. (Zumindest dann, wenn das Genesis-Theme verwendet wird).

function genesis_SUBTHEME_process()

Hier müsst ihr genesis_SUBTHEME jeweils durch den tatsächlichen Namen eures Subthemes ersetzen.

function psdtutorials_process()

Wie sich das praktisch nutzen lässt, kann man am besten anhand eines Beispiels zeigen. Durch die folgenden Schritte wird in die Seite ein IE-spezifisches Stylesheet mittels Conditional Comments eingebunden. Entscheidende Bedeutung kommt dabei dem folgenden Eintrag innerhalb der template.php zu:

/**
 * Override or insert variables into the html templates.
 */
/* -- Delete this line if you want to use these functions
function genesis_SUBTHEME_preprocess_html(&$vars) {
  // Uncomment the folowing line to add a conditional stylesheet for IE 7 or less.
  // drupal_add_css(path_to_theme() . '/css/ie/ie-lte-7.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}
function genesis_SUBTHEME_process_html(&$vars) {
}
// */

Passt diesen Eintrag folgendermaßen an:

function psdtutorials_preprocess_html(&$vars) {
  // Uncomment the folowing line to add a conditional stylesheet for IE 7 or less.
 drupal_add_css(path_to_theme() . '/css/ie/ie-lte-7.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));

}

 

Verändert also den Funktionsnamen, entfernt die Kommentarzeile und die Kommentarzeichen vor der Zeile, die mit drupal_add_css beginnt. Ruft anschließend im Backend Konfiguration>Leistung auf.

Über die Schaltfläche Gesamten Cache leeren wird der Cache gelöscht. Im Frontend-Quellcode der Seite ergibt sich dadurch folgendes Bild:

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/all/themes/psdtutorials/css/ie/ie-lte-7.css?md2qg4" media="all" />

<![endif]-->

Auf diese Weise könnt ihr die template.php z.B. nutzen.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training