Eigene Joomla!-Templates entwickeln – Teil 2

Es ist bereits deutlich geworden, dass Joomla!-Templates eine gewisse Struktur bzw. Ordnung erwarten. Nachdem Sie im ersten Teil diesen grundlegenden Template-Aufbau kennengelernt haben, geht es jetzt um den Inhalt der Templates. Dabei muss man das Template als das verstehen, was es ist: eine Schablone, in die Inhalte geladen werden. Der Content selbst liegt in der Datenbank. Ihre Aufgabe als Template-Entwickler ist es nun, den aus der Datenbank kommenden Inhalt an den gewünschten Positionen auszugeben. Voraussetzung für die Entwicklung eigener Templates ist eine entsprechende Entwicklungsumgebung. Eine Auswahl guter Lösungen finden Sie in diesem Tutorial.

Wir empfehlen:
Joomla!-Training

Bei Joomla! ist im Allgemeinen eine gut durchdachte Struktur wichtig, bei der auf Bereiche und Kategorien geachtet wird. Nur mit guter Planung lässt sich die Seite so gestalten, dass man sie später problemlos verändern und erweitern kann. Bei der Template-Entwicklung ist das ähnlich. Auch hier gilt es gut zu planen.

Die folgende Vorgehensweise hat sich als äußerst praktikabel erwiesen:

  1. Zunächst wird die index.php angelegt. Innerhalb dieser Datei definiert man das Grundlayout der Seite. Dabei gehen Sie genauso vor, als wenn es sich um eine statische HTML-Seite handelt. An dieser Stelle wird tatsächlich nur mit Dummy-Inhalten gearbeitet. PHP-Aufrufe werden noch nicht eingesetzt.
  2. Im nächsten Schritt wird der Kopfbereich der index.php ausgebaut. Hier gibt es dann deutliche Unterschiede zu einer normalen HTML-Webseite. Dort werden bekanntermaßen in den Kopfbereich Informationen wie Dokumenttitel, Zeichensatz usw. eingetragen. Bei Joomla!-Templates funktioniert das anders. Hier verwendet man einen entsprechenden PHP-Aufruf.
  3. Jetzt geht es an die Definition der ersten CSS-Klassen und IDs. Dabei werden zunächst ausschließlich die verwendet, die für das Grundlayout der Seite verantwortlich sind.
  4. Nachdem das Grundlayout steht, können die Module und die eigentlichen Seiteninhalte eingefügt werden.
  5. Sobald Sie wissen, welche Positionen und Dateien im Template verwendet werden, kann die templateDetails.xml angelegt werden.
  6. Weiter geht es mit dem Ausbau der CSS-Datei(en), die um zusätzliche Klassen für Module erweitert werden.
  7. Ganz zum Schluss legt man die Vorschaugrafik für das Template an.

Um Joomla!-Templates aufsetzen zu können, wird eine LAMP- (Linux, Apache, MySQL und PHP) bzw. WAMPP-Umgebung (Windows, Apache, MySQL und PHP) benötigt. Die entsprechenden Elemente können Sie manuell installieren oder Sie verwenden ein Komplettpaket.

Typische Vertreter dieser Gattung sind:

  • XAMPP (http://www.apachefriends.org) – Der Klassiker schlechthin. Dieses Paket richtet unter Windows, Mac und Linux eine entsprechende Entwicklungsumgebung ein. Beachten Sie, dass dieses Paket nicht im Live-Betrieb genutzt werden sollte. Für den Aufbau einer Testumgebung ist das Paket sehr gut geeignet. Dort wo es „ernst“ wird, sollte man aus Sicherheitsgründen auf dessen Einsatz allerdings verzichten.
  • MAMP (http://www.mamp.info) – Dieses Paket wurde speziell für Freunde des Mac entwickelt und installiert Apache, MySQL und PHP.
  • AppServ (http://www.appservnetwork.com/) – Und dann gibt es noch AppServ, das unter Windows eine WAMP-Umgebung installiert.

Während die genannten Pakete ganz allgemein Entwicklungsumgebungen aufsetzen, gibt es auch noch spezielle Joomla!-Lösungen. Diese haben den Vorteil, dass bei denen nicht nur PHP, Apache und MySQL, sondern auch gleich noch Joomla! mit dabei sind.

Sind die Vorarbeiten abgeschlossen, kann es mit der eigentlichen Template-Entwicklung losgehen. Am besten arbeiten Sie dabei direkt in Joomla! Legen Sie sich im templates-Verzeichnis Ihrer Joomla!-Installation ein Verzeichnis an, in dem die Template-Dateien gespeichert werden.

Achten Sie darauf, dass die im ersten Teil dieser Tutorialserie beschriebene Verzeichnisstruktur eingehalten wird.

Die noch fehlenden Dateien wie z.B. die templateDetails.xml kommen dann noch hinzu.

Jetzt kann das Template Schritt für Schritt aufgebaut und später dann direkt in Joomla! getestet werden.
Es ist bereits angeklungen, dass die index.php das Herzstück von Joomla!-Templates bildet. Demzufolge wird auch in diesem Tutorial zunächst deren Aufbau beschrieben. Den Anfang jeder index.php sollten die folgenden Zeilen machen:

<?php
/**
 * pds-tutorials.de
 *
 * @author Daniel Koch
 *
 */
// kein direkter Zugriff
defined('_JEXEC') or die('Zugriff verboten');
?>

Was innerhalb der Kommentarzeichen (/**) steht, bleibt selbstverständlich Ihnen überlassen. Wichtig ist allerdings, dass folgende Definition vorkommt:

defined('_JEXEC') or die('Zugriff verboten');

Dadurch wird der direkte Zugriff auf die index.php verhindert. Versucht jemand die index.php direkt über deren URL aufzurufen, bekommt er die in Klammern angegebene Fehlermeldung zu sehen.

Weiter geht es mit der Angabe zum im Dokument verwendeten Dokumenttyp. Setzt man beispielsweise auf die Transitional-Variante von XHTML, sieht die DOCTYPE-Definition folgendermaßen aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Unter dem angegebenen URL finden Sie die Adresse der XHTML-DTD. Ist im Dokument ein Verweis auf eine DTD vorhanden, sollte der Browser die vorliegende Webseite daraufhin überprüfen, ob diese den in der DTD angegebenen Regeln folgt.

Die Syntax und Semantik von Dokumenttypdefinitionen sind Bestandteil der XML-Spezifikation. Gerade dieser Aspekt führt immer wieder zu Kritik, da die DTD-Syntax selber kein XML ist.
Die klassischen Dokumenttypdefinitionen sind mittlerweile übrigens nicht mehr die einzige Möglichkeit, das Schema für ein Datenmodell zu beschreiben. Denn es gibt auch entsprechende Varianten in einer XML-Syntax. Die bekannteste ist hierbei sicherlich XML Schema.
Was Sie letztendlich für einen Dokumenttyp angeben, bleibt selbstverständlich Ihnen überlassen. Wichtig ist aber, dass das Dokument den in der DTD definierten Regeln folgt. Hier die möglichen HTML- bzw. XHTML-Varianten:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Strict für HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Transitional für HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

Frameset für HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Strict für XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional für XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Frameset für XHTML

Sehr oft wird die Transitional-Variante von XHTML eingesetzt. Das hat den Vorteil, dass dem Browser (oder einem anderen Parser) mitgeteilt wird, dass im Dokument auch solche Elemente verwendet werden, die beispielsweise in der Strict-Variante nicht eingesetzt werden dürfen. Ein typisches Beispiel dafür ist das target-Attribut innerhalb von Hyperlinkdefinitionen. Denn dort ist es in der Strict-Variante nicht erlaubt, bei Transitional aber sehr wohl.
Ausführliche Informationen zu den Dokumenttypen und den jeweils erlaubten Werten, finden Sie unter http://w3.org/.

Im nächsten Tutorial wird die index.php dann weiter ausgebaut.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training