Drupal: Themes Teil 6

Die html.tpl.php kennt ihr nun bereits. Zu einem Theme gehören aber natürlich noch viel mehr Template-Dateien. Welche das sind, wird in diesem und im nächsten Tutorial ausführlich beschrieben. Hat man nämlich erst einmal das Template-Prinzip verinnerlicht und kennt die notwendigen Dateien, kann man Themes im Handumdrehen anpassen und sogar von Grund auf neu entwickeln. In diesem Tutorial lernt ihr die beiden Dateien page.tpl.php und region.tpl.php kennen. Beide Dateien sind entscheidend, wenn es um die Platzierung und die Anzeige von Inhalten im Frontend der Seite geht.

Wir empfehlen:
Drupal-Training

Eine der wichtigsten Template-Dateien ist die page.tpl.php. Wenn ihr – wie im vorherigen Tutorial gezeigt – das Verzeichnis templates aus dem genesis-Verzeichnis in das Verzeichnis eures Subthemes kopiert habt, findet ihr darin eben jene Datei.

 

Der Inhalt der Datei page.tpl ist letztendlich das, was über die Variable $page in der html.tpl.php ausgegeben wird.

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

Der Inhalt der Datei page.tpl.php verdient in jedem Fall eine genauere Betrachtung. Zunächst ein Blick auf den oberen Bereich der Datei.

<?php if ($secondary_menu_links): ?>
      <div id="secondary-menu-wrapper" class="clearfix">
        <div class="secondary-menu-inner"><?php print $secondary_menu_links; ?></div>
      </div>
    <?php endif; ?>

Hier seht ihr ein Syntaxelement, mit dem ihr es im Zusammenhang mit den Drupal-Template-Dateien immer wieder zu tun bekommen werdet. Zu finden ist dort eine typische if-Abfrage. Diese überprüft, ob die Variable $secondary_menu_links vorhanden ist, ob also für das Sekundär-Menü Inhalte angelegt sind. Nur, wenn das der Fall ist, wird das Menü tatsächlich angezeigt bzw. die entsprechenden div-Bereiche werden ins Dokument geschrieben. Jedes Element, das in einer Template-Datei steht, ist mit IDs und/oder Klassen ausgestattet, dank denen diese bequem per CSS formatiert werden können.

Hier ein weiterer Abschnitt aus der page.tpl.php.

<div id="header" class="clearfix">
      <?php if ($site_logo || $site_name || $site_slogan): ?>
        <div id="branding">
          <?php if ($site_logo or $site_name): ?>
            <?php if ($title): ?>
              <div class="logo-site-name"><strong>
                <?php if ($site_logo): ?><span id="logo"><?php print $site_logo; ?></span><?php endif; ?>
                <?php if ($site_name): ?><span id="site-name"><?php print $site_name; ?></span><?php endif; ?>
              </strong></div>
            <?php else: /* Use h2 when the content title is empty */ ?>
              <h2 class="logo-site-name">
                <?php if ($site_logo): ?><span id="logo"><?php print $site_logo; ?></span><?php endif; ?>
                <?php if ($site_name): ?><span id="site-name"><?php print $site_name; ?></span><?php endif; ?>
             </h2>
            <?php endif; ?>
          <?php endif; ?>
          <?php if ($site_slogan): ?>
            <div id="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>
        </div> <!-- /branding -->
      <?php endif; ?>
      <?php if ($page['header']): ?>
        <div id="header-blocks"><?php print render($page['header']); ?></div>
      <?php endif; ?>
    </div>

Wenn ihr euch diese Syntax anseht, werdet ihr schnell feststellen, dass fast immer mit if-Abfragen gearbeitet wird. Wurde also im Backend ein Logo spezifiziert, wird dieses ins Dokument geschrieben.

 

Fehlt eine Logo-Angabe, werden auch keine entsprechenden Daten im Frontend ausgegeben. Die Syntax ist dabei – wenn man sie sich kurz ansieht – weitestgehend selbsterklärend. Lediglich einige Syntaxbesonderheiten sollten noch einmal genauer betrachtet werden.

<?php if ($site_logo || $site_name || $site_slogan): ?>

Hier wird mit Operatoren gearbeitet. Diese Abfrage bedeutet nichts anderes als: Wenn es $site_logo oder $site_name oder $site_slogan gibt, dann gib Folgendes aus.

Zurück zur page.tpl.php. Denn innerhalb dieser Datei werden euch nun auch die allseits bekannten Regionen begegnen.

  <div id="content">
            <?php print render($page['content']); ?>
          </div>
        </div>
      </div>
    </div>
    <?php if ($page['sidebar_first']): ?>
      <div id="sidebar-first" class="sidebar"><?php print render($page['sidebar_first']); ?></div>
    <?php endif; ?>
    <?php if ($page['sidebar_second']): ?>
      <div id="sidebar-second" class="sidebar"><?php print render($page['sidebar_second']); ?></div>
    <?php endif; ?>
  </div>

Innerhalb dieses Bereichs findet ihr wieder einige if-Abfragen. Hier mal ein Beispiel.

<?php if ($page['sidebar_first']): ?>
      <div id="sidebar-first" class="sidebar"><?php print render($page['sidebar_first']); ?></div>
    <?php endif; ?>

 

Es wird überprüft, ob der Region sidebar_first ein Inhalt/Block zugewiesen wurde. Nur dann wird der div-Bereich ins Dokument geschrieben.

 

Die Arbeit mit Regionen lässt sich erfahrungsgemäß am besten anhand eines Beispiels zeigen. Öffnet dazu die bekannte psdtutorials.info.

 

Interessant ist dort der regions-Bereich. Fügt in diesen Bereich eine neue Zeile ein. (Im folgenden Skript fett markiert).

  regions[secondary_content]  = Secondary
  regions[tertiary_content]   = Tertiary
  regions[psd]             = Eine PSD-Region
  regions[footer]             = Footer
  regions[help]               = Help
  regions[page_top]           = Page top
  regions[page_bottom]        = Page bottom

Speichert diese Änderung ab und öffnet anschließend die Datei page.tpl.php. Fügt dort unterhalb von endif des tertiary_content-Bereichs den im folgenden Skript fett markierten Inhalt ein.

<?php if ($page['tertiary_content']): ?>
      <div id="tertiary-content">
        <?php print render($page['tertiary_content']); ?>
      </div>
    <?php endif; ?>
<?php if ($page['psd']): ?>
<div id="psd" class="psd_region">
<?php print render ($page['psd']); ?></div>
<?php endif; ?>
    <?php if ($page['footer'] || $feed_icons): ?>
      <div id="footer">
        <?php print render($page['footer']); ?>
        <?php print $feed_icons; ?>
      </div>
    <?php endif; ?>

 

Nachdem die Änderungen gespeichert wurden, sollte über Konfiguration>Leistung der Cache geleert werden.

 

Ruft anschließend Struktur>Blöcke auf. Ihr solltet dort die neu hinzugekommene Region Eine PSD-Region finden.

Dieser Region könnt ihr – so wie ihr das gewohnt seid – Blöcke zuweisen. Mit Blöcke speichern übernimmt man die Änderungen.

 

Ein anschließender Blick auf den im Frontend generierten Quellcode liefert das gewünschte Ergebnis.

<div id="psd" class="psd_region">
  <div class="region region-psd">
  ...
  </div>
</div>

Auf diese Weise könnt ihr in euer Theme also beliebige Regionen aufnehmen. Für die Darstellung der Regionen ist die Datei region.tpl.php verantwortlich. Überprüft zunächst, ob in eurem Theme eine entsprechende Datei vorhanden ist. Im Genesis-Theme gibt es diese Datei nicht. Stattdessen wird auf die region.tpl.php zurückgegriffen, die im Verzeichnis modules/system liegt. Die Datei enthält denkbar wenig Code.

<?php if ($content): ?>
  <div class="<?php print $classes; ?>">
    <?php print $content; ?>
  </div>
<?php endif; ?>

Entscheidend ist hier vor allem die Variable $content. Denn über diese Variable wird der Inhalt der jeweiligen Region ins Dokument geschrieben. Welche Variablen außerdem für die region.tpl.php zur Verfügung stehen, wird unter http://api.drupal.org/api/drupal/modules–system–region.tpl.php/7 in der Drupal-Dokumentation ausführlich beschrieben. Interessant sind auch die dort aufgeführten Hilfsvariablen. So liefert beispielsweise $logged_in den Wert TRUE zurück, wenn der aktuelle Besucher sich eingeloggt hat.

 

Auch bei der region.tpl.php gilt dann natürlich wieder: Wenn ihr Änderungen an dieser Datei vornehmen wollt, kopiert diese ins templates-Verzeichnis eures Themes.

Die Änderungen, die ihr dann in dieser Datei macht, gelten ausschließlich für dieses Theme.

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