»Tanzen ist die senkrechte Ausführung eines waagrechten Verlangens eines aufrechten Individuums!« Unbekannt

12 Was macht ein Template aus?

Um Ihnen einen genaueren Blick hinter die Kulissen eines Templates zu verschaffen, werden wir nun eine eigene Vorlage Schritt für Schritt erstellen. Das Beispiel soll Ihnen nur einige Möglichkeiten näherbringen, und es wird nicht den ganzen Umfang eines vollständig ausgeklügelten Templates erreichen. Dies ist auch kaum sinnvoll, da es bei der Umsetzung keinen vorgeschriebenen Weg gibt. Es gibt jedoch einige Regeln, die Sie beachten müssen.

Die wichtigsten Bestandteile eines Templates sind fünf Komponenten, und diese dürfen nicht fehlen:

1.	ein Verzeichnis /images

2.	ein Verzeichnis /css

3.	die Datei index.php

4.	die Datei templateDetails.xml

5.	das Bild template_thumbnail.png

Das /images-Verzeichnis wird die Slices, also Grafiken unseres Layouts enthalten. Im Verzeichnis /css bringen wir die Datei template.css unter. Sie enthält die Formatierungen für das Template. Oft finden Sie hier auch die Datei editor.css. Joomla! bietet seit der Version 1.5 die Möglichkeit, auch die Gestaltung des WYSIWYG-Editors über CSS zu steuern. Die Datei index.php enthält die Codierung des Layouts. Die XML-Datei dient als Zusammenfassung relevanter Elemente für das Template. Ihre Benennung muss genau templateDetails.xml lauten. Neben einer kurzen Beschreibung, sollten hier auch die einzelnen Dateien in den jeweiligen Verzeichnissen aufgeführt sein. Das betrachten wir aber im weiteren Verlauf noch genauer. Zu guter Letzt gibt es für das Template noch eine kleine Voransicht, die Sie in der Datei template_thumbnail.png speichern. Diese Datei muss sich auf derselben Ebene mit der PHP und der XML-Datei befinden.

Diese Dateien sollten sich später im Templates-Verzeichnis Ihrer Website befinden. In unserem Beispiel wäre das also joomla/templates. Hier erstellen Sie am besten noch ein eigenes Unterverzeichnis für das neue Template, in dem sich später die fünf Bestandteile befinden müssen.

Bevor wir gleich genauer auf das Template eingehen, sollten Sie Ihre Verzeichnisstruktur erzeugen. Erstellen Sie, wie oben beschrieben, ein Unterverzeichnis für das neue Template. Darin brauchen Sie dann noch zwei weitere Verzeichnisse, nämlich /css und /images.

Das Erstellen des Templates lässt sich in zwei Schritte aufteilen. Wir müssen die PHP-Datei, index.php, erzeugen, die unser Layout im Browser darstellen wird, und wir brauchen die CSS-Datei, template.css, die die Formatierung der einzelnen Elemente enthalten soll.

12.1 HTML-Bereich

Das Template, also die index.php, sollte im Anfangszustand etwa folgendermaßen aussehen:

01  <?php echo "<?xml version=\"1.0\"?>"; ?> 
02  <?php 
03    defined( '_JEXEC' ) or die( 'Restricted access' ); 
04  ?> 
05  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     
06            Transitional//EN"     
07            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-     
08            transitional.dtd"> 
09  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php  
10  echo $this->language; ?>" lang="<?php echo $this->language; 11  ?>"> 
12  <head> 
13     <jdoc:include type="head" /> 
14     <meta http-equiv="Content-Type" content="text/html;     
15                  <?php echo _ISO; ?>" /> 
16     <link rel="stylesheet" href="templates/<?php echo $this  
17  ->template ?>/css/template.css" type="text/css" /> 
18  </head> 
19  <body> 
20  </body> 
21  </html>

Ein leeres Template beinhaltet einige Dinge, die speziell für Joomla! eine wichtige Rolle spielen. Diese Informationen müssen auf jeden Fall vorhanden sein.

Der erste wichtige Punkt betrifft die Sicherheit Ihres Templates. Die Zeilen 2–4 schützen Ihre Template-Dateien vor fremden Zugriffen und Änderungen.

Die Zeilen 16 und 17 definieren die Verbindung zu unserer CSS-Datei, die wir später noch erstellen werden. Ohne diesen Link würde Ihre Seite unformatiert im Webbrowser dargestellt werden.

Damit wäre das Grundgerüst für unser HTML-Template geschaffen. Sie können diese Datei mit einem einfachen Texteditor oder einem HTML-Editor erstellen. Der Großteil dieser Template-Datei besteht aus HTML. Die wenigen PHP-Variablen werden Sie auch ohne große PHP-Kenntnisse schnell anwenden können.

Die nächsten Einträge werden wir im <body>-Bereich vornehmen. Es müssen nun unterschiedliche Bereiche erstellt werden, in denen sich später z. B. das Menü, der Header, der Content oder die rechte Spalte befinden sollen. Diese Bereiche erzeugen Sie, indem Sie entweder eine Tabelle mit der entsprechenden Anzahl Zellen aufziehen, oder Sie verwenden Div-Layer.

Tabellen bzw. Layouttabellen wurden lange Zeit zur Gestaltung des Layouts verwendet. Auch jetzt bieten sie noch den Vorteil, dass sie bei älteren Browsern das Layout in der gewünschten Form umsetzen. Ihre Verschachtelung und die absoluten Größenangaben widersprechen jedoch dem Prinzip der Barrierefreiheit [Dabei handelt es sich um ein Designprinzip, bei dem versucht wird, die Nutzung einer Webseite unabhängig von körperlichen und technischen Hürden zu ermöglichen. ] . Daher sollten Tabellen möglichst nur noch verwendet werden, um tabellarische Daten darzustellen. Dagegen lassen sich Ebenen frei positionieren und sind im Vergleich zu Tabellen barrierefrei. In unserem Beispiel werden wir daher das Layout überwiegend mithilfe von Div-Layern erstellen. Die fertigen Template-Dateien finden Sie auch auf der DVD im Verzeichnis template/la-joomla.

Kommen wir nun zum eigentlichen Hauptteil. In unserer index.php werden wir nun die Zeilen 21 und 22 um einige Codesegmente erweitern. Es fehlen uns noch die Joomla!-Variablen und die Layer, mit denen wir unser Layout umsetzen möchten.

<body> 
<div id="container"> 
  <div id="tanzheader"> 
    <h1 id="tanz_header_logo"> 
    <?php echo $mainframe->getCfg('sitename');?> </h1> 
    <h1 id="tanz_header2”><?php echo $mainframe  
    ->getCfg('sitename');?> 
    </h1> 
  </div>

Wir beginnen mit einem Layer, der als Container für die weiteren Layer dienen wird. Details zu den einzelnen Ebenen legen wir später in der entsprechenden CSS-Datei fest. Anschließend folgt der Layer für unsere Kopfzeile. Die Anweisung <?php echo $mainframe->getCfg('sitename');?> gibt den Namen der Site wider.

In der Ebene contentarea werden die weiteren Bereiche der Website definiert:

  <div id="contentarea"> 
    <div id="tanz_menu"><jdoc:include type="modules" name="left" 
/> 
    </div> 
    <div id="ornament">Ornament</div> 
    <div id="content">:: <jdoc:include type="module" 
name="breadcrumbs" /><br/><br/> 
unser inhalt :: <jdoc:include type="component" /> 
<br/><br/> 
    </div> 
    <div id="foto">foto</div> 
    <div id="extra"><jdoc:include type="modules" name="right" /> 
    </div> 
  </div>

Zunächst kommt im Layer tanz_menu das Menü der Website. Dazu wird das Joomla!-Modul "left" aufgerufen. Dieses Modul besteht aus Hauptmenü, Login und Syndicate. Wird einer dieser Bereiche nicht benötigt, muss er über das Joomla!-Backend abgeschaltet werden (siehe Kapitel 9, »Module, Plug-ins, Komponenten«). Direkt an den Layer tanz_menu schließt sich der kleine Layer ornament an. Hier wird sich später eine Grafik befinden. Den nächsten großen Bereich stellt der eigentliche Inhalt dar. Als Erstes wird der Klickpfad über die Anweisung <jdoc:include type="module" name="breadcrumbs" /> ausgegeben. Danach wird mit <jdoc:include type="component" /> der Inhalt dargestellt.

Außerdem werden noch die zwei Layer der rechten Spalte definiert. Der zweite Layer enthält die Anweisung zum Aufruf der Module »Umfrage« und »Wer ist online«. Auch hier können Sie über das Backend entscheiden, welches der Module tatsächlich im Frontend sichtbar sein soll.

Jetzt bleiben uns nur noch die Fußzeile und der Abschluss des HTML-Dokuments:

  <div id="footer"> 
    <div align="center"> 
    </div> 
  </div> 
</div> 
</body> 
</html>

Der Footer ist in diesem Fall leer. Hier können Sie direkte Links auf Beiträge erstellen, die nicht über ein Menü verfügbar sein müssen. Einen direkten Link auf einen Joomla!-Beitrag erstellen Sie, indem Sie einfach die URL mit der entsprechenden Artikel-ID angeben, z. B. <a href="index.php?option=com_content&view=article&id=45">AGB</a>. Dieser Link verweist auf einen Beitrag mit der ID 45. Die ID ermitteln Sie, indem Sie in der Beitragsübersicht in der letzten Spalte des jeweiligen Beitrags die Nummer suchen. Über die direkte URL-Angabe können Sie auch komplette Bereiche ansprechen: index.php?option=com_content&view=section&id=8&Itemid=56

In diesem Beispiel wird der Bereich mit der ID 8 aufgerufen. Die Verknüpfung mit der Itemid=56 zeigt uns, dass gleichzeitig das Menü mit der ID 56 aktiv ist.

In unserem Beispiel wäre das der Bereich »Training« mit dem Menüpunkt Training:

Hier klicken, um das Bild zu vergrößern

Abbildung 12.1 Der Bereich mit der ID 8

Hier klicken, um das Bild zu vergrößern

Abbildung 12.2 Das Menü mit der ID 56

In unserem Beispiel haben wir fünf Module (»Hauptmenü«, »Anmelden«, »Syndication«, »Umfragen« und »Wer ist online«) auf zwei Modulpositionen (»left« und »right«) verwendet. Joomla! hatte in den Vorgängerversionen 27 vordefinierte Modulpositionen, auf die wir zurückgreifen können. Diese finden Sie weiterhin in verschiedenen Templates und in der Standardpositionierung der Kernmodule. Allerdings gab es sehr viele ausdrucksschwache Modulpositionen, wie »user1-9« oder »icon«. Mittlerweile können die Positionen für jedes Template individuell bestimmt werden. Die Positionen müssen einfach in der XML-Datei definiert werden (vgl. Abschnitt 12.3, »Das Drumherum«) und werden dann von Joomla! importiert.

Das ist allerdings nicht der einzige Unterschied zu der Vorgängerversion von Joomla!. Es gibt speziell im Bereich der index.php-Datei geänderte Aufrufe und neue Möglichkeiten im Vergleich zu älteren Joomla!-Versionen. In der folgenden Tabelle finden Sie eine Auflistung der wichtigsten Unterschiede zum Aufruf bestimmter Funktionen:

**Tabelle 12.1** Neue Befehle für den Aufruf von Modulen und Funktionen
Joomla! 1.0	Joomla! 1.5
mosCountModules();	$this->countModules()
mosShowHead();	<jdoc:include type="head" />
$mosConfig_live_site;	$this->template
mosLoadModules ( 'left', –1);	<jdoc:include type="modules" name="left" style="raw" />
mosMainBody();	<jdoc:include type="component" />

Tabelle 12.2 fasst noch einmal alle wichtigen Aufrufe mit den verschiedenen Optionen und Attributen zusammen.

**Tabelle 12.2** Befehle und Attribute für den Aufruf von Modulen
Aufruf	Funktion
Das »type«-Attribut gibt den Typ an, der ausgegeben werden soll.
<jdoc:include type="component" />	Das Element »component« erscheint einmalig in unserem Template (im Bereich <body></body>) und ist verantwortlich für die Ausgabe des eigentlichen Inhalts im Content-Bereich.
<jdoc:include type="head" />	Das gilt auch für den Typ »head«. Über diesen Typ werden im <head>-Bereich der index.php die nötigen Skripten, Stile und Meta-Daten aufgerufen bzw. abgelegt.
<jdoc:include type="installation" />	Dieser Aufruf wird nur für das Joomla!-Installer-Template benötigt.
<jdoc:include type="message" />	»message« wird nur einmal im Template benötigt und gibt Fehler- bzw. Systemmeldungen aus.
Das Element module gibt ein einzelnes Modul an der entsprechenden Stelle im Template aus. Der Modultyp wird durch name= bestimmt, und die Darstellung kann abhängig vom Modul im Backend konfiguriert werden. Achten Sie darauf, dass es im Backend auch tatsächlich freigegeben wurde.
<jdoc:include type="module" name="breadcrumbs" />	Gibt den Klickpfad aus.
Mit dem zusätzlichen style-Attribut haben Sie bei einigen Modulen die Möglichkeit die Darstellungsform über das Template zu bestimmen. Folgende Möglichkeiten stehen zur Verfügung: table, horz, xhtml, rounded und outline.
<jdoc:include type="module" name="submenu" style="rounded" id="submenu-left" />	Hier wird der Modulposition »submenu« zusätzlich die ID »submenu-left« übertragen. So können die Elemente speziell über CSS oder PHP/Javascript angesprochen werden.
Möchten Sie einer Position mehrere Module zuweisen können, benötigen Sie das Attribut modules.
<jdoc:include type="modules" name="top" />	Auf der Position »top« können Sie nun verschieden Module positionieren.

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.