Joomla! 2.5 (Teil 33): Eigene Templates entwickeln (4)

Nachdem das Grundlayout definiert, die Kopfdateien und die CSS-Dateien geladen sind, geht es nun darum, wie sich die eigentlichen Joomla!-Inhalte einbinden lassen. In diesem Tutorial erfahrt ihr, wie ihr den Hauptinhalt und Module in euer Template integrieren und ausgeben könnt.

Wir empfehlen:

Das jdoc-Element habt ihr bereits kenngelernt.

Zum Einbinden der Kopfdaten wird diesem Element das type-Attribut mit dem Wert head zugewiesen. Das ist aber längst nicht die einzige Möglichkeit, um eine Verbindung zwischen Template und Joomla! herzustellen. Natürlich sollen auch die im Backend angelegten Artikel/Beiträge im Frontend angezeigt werden. Verwendet wird dafür ebenfalls das jdoc-Element.

Wenn ihr das Beispiel-Template aus den vorherigen Tutorials verwendet, sucht darin nach folgendem Bereich:

Das ist der eigentliche Inhalt

Ändert diesen folgendermaßen ab:

Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

So einfach lassen sich also die Hauptinhalte einbinden.

Module einbinden

Neben dem Hauptinhalt kann man bekanntermaßen auch Module einbinden. Damit das möglich wird, müssen drei Dinge erledigt werden:

• In der templateDetails.xml muss es die Positionen geben.
• In der index.php werden die Modulpositionen definiert.
• Die Module werden im Backend den Positionen zugewiesen.

Auch zum Einfügen von Modulen wird das jdoc-Element verwendet. Das Element muss die beiden Attribute type und name besitzen. Der Wert von type bestimmt, was letztendlich geladen werden soll. Bei einem Modul lautet er jeweils modules. Über das name-Attribut gibt man den eigentlichen Positionsnamen an.

Die Namen sind frei wählbar. Dennoch haben sich mittlerweile einige Standardnamen durchgesetzt. In vielen Templates werden beispielsweise position-0, position-1 usw. verwendet. Ebenso kann man aber auch „sprechende“ Namen angeben. Ein paar dieser Modulnamen werden von Joomla! übrigens standardmäßig angezeigt, wenn man die Position für ein Modul einstellt.

Die in der linken Spalte angezeigten Werte sind die, die in der templateDetails.xml definiert wurden. Hinter dem Template-Namen stehen dann allerdings noch einmal Positionsnamen in Klammern. Diese werden von Joomla! immer dann automatisch gesetzt, wenn auf Standardnamen zurückgegriffen wird. Trägt man in seine templateDetails.xml beispielsweise den Positionsnamen left ein, macht Joomla! daraus in einem deutschsprachigen Backend Links.

Hier einige typische Positionsnamen:

• search – Suche
• breadcrumb – Brotkrumen-Menü
• left – Linke Seite
• right – Rechte Seite
• top – Oben
• bottom – Unten

Ein Hinweis in diesem Zusammenhang: Auch wenn eine Modulposition search heißt, bedeutet das nicht, dass darin automatisch oder ausschließlich das Such-Modul angezeigt wird. Folgendes wäre ebenso möglich:

Wenn ihr jetzt Erweiterungen>Module aufruft und den Modulnamen von Suche anklickt, gibt es dort das Feld Position wählen.

Klickt auf die betreffende Schaltfläche. Innerhalb des Fensters werden jetzt sämtliche Modulpositionen angezeigt.

Wenn ihr das Suchen-Modul in der Position Halligalli platziert, wird es dort angezeigt. Es spielt also tatsächlich keine Rolle, wie die Modulposition heißt. Ihr solltet euch (und anderen) aber den Gefallen tun, logische Positionsnamen zu verwenden.

Als optionales drittes Attribut kann dem jdoc-Element style übergeben werden. Darüber bestimmt man letztendlich, wie die Ausgabe des Moduls erfolgen soll. So kann man das betreffende Modul beispielsweise in einer HTML-Tabellenstruktur ausgeben. Denkbar ist aber auch die Ausgabe in runden Ecken.

• xhtml – Das Modul wird mittels div-Elementen ausgegeben. Das erzeugt den saubersten Quellcode. Das Modul wird dabei mit einem div-Element der Klasse moduletable umgeben. Die Überschrift – wenn sie denn aktiviert wurde – ist oberhalb des div-Elements in einer h3-Überschrift zu sehen. Bei Menüs heißt die Klasse moduletable_menu. Gibt man kein style-Attribut an, wendet Joomla! automatisch xhtml an.
• rounded – Ermöglicht die Definition runder Ecken. Aber Achtung: Durch rounded werden lediglich die div-Container bereitgestellt, die für die Definition runder Ecken benötigt werden. Die runden Ecken selbst muss man über die CSS-Datei definieren.
• table – Hierdurch wird das Modul in einer Tabelle ausgegeben.
• horz – Gibt das Modul horizontal aus. Dabei wird jedes Modul in einer Zelle einer umgebenden Tabelle angezeigt.
• none – Das Modul wird ohne etwaige Formatierungen ausgegeben. Das gilt insbesondere auch für CSS-Klassen und -IDs.

Wenn ihr das Modul also beispielsweise innerhalb einer Tabellenstruktur ausgeben wollt, sähe das folgendermaßen aus:

Wenn ihr euch anschließend den im Frontend generierten Quellcode anseht, ergibt sich dort folgendes Bild:

Joomla! gibt das Modul also tatsächlich innerhalb einer Tabellenstruktur aus. Das sollte in der Regel – nicht zuletzt natürlich auch vor dem Hintergrund barrierearmer Seiten – vermieden werden.

Deutlich besser erscheint da die XHTML-Variante.

Wobei ihr style="xhtml" nicht explizit angeben müsst, da Joomla! bei fehlendem style-Attribut automatisch die XHTML-Version annimmt. Der in diesem Fall im Frontend generierte Quellcode sieht dann so aus:

• test
• mayer
• schmidt
• admin

Auf diese Weise bietet euch Joomla! also die Möglichkeit, verschiedene Arten der Ausgabe im Frontend für eure Module zu verwenden. Wem die angebotenen Varianten nicht ausreichen, der kann über sogenannte Module Chromes eigene Stile definieren. Das soll jedoch nicht Teil dieses Tutorials sein.

Das folgende Beispiel zeigt noch einmal zusammenfassend, wie eine index.php aussehen könnte, nachdem die Dummy-Inhalte durch Modulpositionen ersetzt wurden.

Ruft man diese Datei im Frontend auf, wird deutlich, dass jetzt tatsächlich Inhalte ausgegeben werden.

Wir empfehlen: