Drupal: Themes Teil 5

Will man Änderungen am Theme dauerhaft vornehmen, reicht die vorgestellte Variante über den Firebug nicht aus. Stattdessen muss man in die sogenannten Template-Dateien eingreifen. Was es mit denen auf sich hat und welche für die Arbeit mit Drupal-Themes wichtig sind, wird in diesem Tutorial gezeigt.

Wir empfehlen:
Drupal-Training

Wer sich mit Drupal-Themes beschäftigt, wird früher oder später auf den Begriff Template Engines stoßen. Zunächst einige allgemeine Hinweise zu dieser Thematik. Eine Template Engine ist eine Software, die eine Datei bzw. das Template verarbeitet und definierte Platzhalter mit den entsprechenden Inhalten ausfüllt. Wenn ihr mit Word oder Writer arbeitet, kennt ihr sicherlich die dort anzutreffenden Seriendruckfelder. Dabei werden Platzhalter verwendet. Diese Platzhalter wiederum werden dann in den entsprechenden Dokumenten durch die tatsächlichen Werte ersetzt. Ganz ähnlich sieht das Ganze auch bei den Template Engines aus. Dort arbeitet man allerdings nicht mit Seriendruckfeldern, sondern mit Template-Variablen. Eingesetzt wird in Drupal die Template-Engine PHPTemplate.

Anders, als ihr es vielleicht von klassischen HTML-Webseiten gewohnt seid, bekommt ihr es bei Drupal-Themes gleich mit mehreren Dateien zu tun. Denn zur Vorbereitung einer Seite für die Ausgabe im Browser werden von Drupal normalerweise mehrere Template-Dateien hintereinander aufgerufen.

Im Zusammenhang mit Drupal-Themes werden euch immer wieder tpl.php-Dateien begegnen. Zunächst ein Blick auf die html.tpl.php.

Innerhalb dieser Datei befindet sich das HTML-Grundgerüst der Seite.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"
  <?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<?php // modify the layout by changing the id, see layout.css ?>
<body id="genesis-1c" <?php print $attributes;?>>
  <?php if (!$in_overlay): // Hide the skip-link in overlay ?>
    <div id="skip-link">
      <a href="#main-content"><?php print t('Skip to main content'); ?></a>
    </div>
  <?php endif; ?>
  <?php print $page_top; ?>
  <div id="container" class="<?php print $classes; ?>">
    <?php print $page; ?>
  </div>
  <?php print $page_bottom; ?>
</body>
</html>

 

Entscheidend ist, bevor man Themes anpasst, das Verständnis des Drupal-Grundprinzips für Themes. Die html.tpl.php gibt es in der Drupal-Standardinstallation im Verzeichnis modules/system.

 

Diese Datei sollte man nicht ändern, da die Änderungen beim nächsten Drupal-Update natürlich wieder verloren gehen (könnten). Die Standard html.tpl.php wird immer dann verwendet, wenn es im jeweiligen Theme keine eigene html.tpl.php gibt. Erinnert euch, dass ihr mit einem Subtheme von Genesis arbeitet. In Genesis gibt es eine eigene html.tpl.php.

 

Daher wird auch auf diese Datei zugegriffen, wenn ihr mit einem Genesis-Subtheme arbeitet. Nun sollen die Anpassungen allerdings nur am Subtheme vorgenommen werden. Damit das funktioniert, kopiert ihr das Verzeichnis sites/all/themes/genesis/templates in euer Subtheme-Verzeichnis.

 

Damit habt ihr die Template-Dateien, mit denen ihr direkt arbeiten könnt. Öffnet anschließend die in diesem templates-Verzeichnis liegende html.tpl.php in einem Editor eurer Wahl. In der HTML-Syntax werden euch entsprechende Platzhalter auffallen. Werft dazu einen Blick in den head-Bereich der Seite.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"
  <?php print $rdf_namespaces; ?>>

Bevor einige PHP-Aufrufe näher vorgestellt werden, einige allgemeine Hinweise zur Syntax. Innerhalb der HTML-Struktur werden PHP-Bereiche speziell gekennzeichnet. Dabei leitet die Zeichenkette < ?php den PHP-Bereich ein. Mit ?> wird er wieder beendet. Über print werden die Angaben ins Dokument geschrieben. Variablen sind in PHP durch ein vorangestelltes Dollarzeichen markiert. Dieses "PHP-Grundwissen" genügt nun bereits, damit man sich etwas ausführlicher mit der Syntax von Drupal-Themes vertraut machen kann.

Mit $language->language und $language->dir findet ihr die ersten PHP-Variablen. Über $language->language wird die Dokumentsprache angegeben. Ist im Backend Deutsch eingestellt, wird automatisch de ausgegeben. $language->dir gibt die Sprachrichtung aus. Üblicherweise wird dort ltr (left to right) stehen. Die Schrift läuft also von links nach rechts. Bei arabischsprachigen Seiten könnte dort hingegen rtl (right to left), also von rechts nach links, stehen.

Der im Frontend generierte Code sieht folgendermaßen aus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" version="XHTML+RDFa 1.0" dir="ltr"
Weiter geht es mit diesem Eintrag:
<head profile="<?php print $grddl_profile; ?>">

Das sieht im Frontend dann so aus:

<head profile="http://www.w3.org/1999/xhtml/vocab">

Darüber wird ein GRDDL-Profil (Gleaning Resource Descriptions from Dialects of Languages) angegeben. Über ein solches Profil können RDF-Agents Daten extrahieren.

Im nächsten Schritt werden die allgemeinen Kopfdaten ins Dokument geschrieben.

<?php print $head; ?>

 

Enthalten sind darin u.a. allgemeine Metadaten.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta about="/drupal/de/artikel/willkommen" property="sioc:num_replies" content="0" datatype="xsd:integer" />
<link rel="shortcut icon" href="http://localhost/drupal/misc/favicon.ico" type="image/vnd.microsoft.icon" />
<meta content="Willkommen" about="/drupal/de/artikel/willkommen" property="dc:title" />
<link rel="shortlink" href="/drupal/de/node/33" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="canonical" href="/drupal/de/artikel/willkommen" />

Weiter geht es mit dem Titel der Seite.

<title><?php print $head_title; ?></title>

Im Frontend-Code sieht das im Endeffekt so aus:

<title>Willkommen | psd-tutorials.de</title>

Suchmaschinen und Browser verwenden diesen Titel.

 

Auch die Stylesheets werden über einen Platzhalter ins Dokument geschrieben.

<?php print $styles; ?>

Das Theme lädt daraufhin die notwendigen CSS-Dateien.

<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_p3syK-T8t8V3ZGjB8swO5jedvKfBvVtkoAjYdXNLClw.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_1F_DWBEe6Y_Lcyjyw2nPG4eT_LqzZlakOP7KI72f2lc.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_2tTaFkDpg4SwEzf7fKntXDus0W90gh3TRtU3OOCMM_w.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_nRO6Ys3khj3ugc-sJVpMesAwCuAesICrUvNM0FcBfos.css" media="all" />

Und genauso wie die CSS- werden auch die JavaScript-Dateien dynamisch ins Dokument geschrieben. Verantwortlich ist dafür ebenfalls ein entsprechender PHP-Aufruf.

<?php print $scripts; ?>

Hier ein mögliches Ergebnis dieser Syntax im Frontend:

<script type="text/javascript" src="http://localhost/drupal/sites/default/files/js/js_3jHghlMLrjr9xXAC0JufqSSch3oAbkZstSqYdc4uuck.js"></script>>
<script type="text/javascript" src="http://localhost/drupal/sites/default/files/js/js_yBooQ7AJkK6sDqhu5cy003gG6ik9Ps-P4Ov8YpNnU5w.js"></script>
<script type="text/javascript" src="http://localhost/drupal/sites/default/files/js/js_2KlXA4Z5El1IQFVP

Innerhalb der html.tpl.php werden euch noch zahlreiche andere PHP-Variablen auffallen. Werft zunächst aber – um die Datei der Reihe nach durchzugehen – noch einen Blick auf das einleitende body.

<body id="genesis-1c" <?php print $attributes;?>>

 

Dort findet ihr die betreffende ID, die zuvor ausschließlich im Firebug verändert wurde. Ihr könnt diese ID nun euren Wünschen entsprechend anpassen. Welche Optionen zur Verfügung stehen, wurde bereits beschrieben.

 

Die verfügbaren IDs findet ihr in der layout.css des Genesis-Themes. Sollten die Änderungen im Frontend nicht sichtbar sein, müsst ihr zunächst unter Konfiguration>Leistung den Cache leeren.

Innerhalb der html.tpl.php findet ihr weitere PHP-Variablen.

<?php print $page_top; ?>
  <div id="container" class="<?php print $classes; ?>">
    <?php print $page; ?>
  </div>
  <?php print $page_bottom; ?>

Darüber werden verschiedene Templates in die Seite eingebunden. Der wichtigste Block ist dabei sicherlich $page. Denn damit wird fast der gesamte Inhalt der Seite integriert. Mehr zu der sich hinter diesem Aufruf verbergenden Datei page.tpl.php dann im nächsten Tutorial.

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