Eigene Joomla!-Templates entwickeln (1)

Dass es auf dem Markt sehr viele Templates für Joomla! gibt, ist sicherlich kein Geheimnis. Die Palette der Angebote reicht dabei von Gratis-Templates bis hin zu den sogenannten Template-Clubs. Und in der Tat sind viele der Templates von sehr guter Qualität. Allerdings kann man es drehen und wenden wie man will, individuell und „einzigartig“ sind die Templates nicht. Wer so etwas sucht, muss sein eigenes Template entwerfen. Und genau darum wird es in dieser Tutorial-Reihe gehen. Es wird davon ausgegangen, dass Sie HTML- und CSS-Kenntnisse besitzen. Idealerweise haben Sie auch bereits ein Layout auf Basis von sauberem CSS- und HTML-Code umgesetzt, das als Ausgangspunkt für den Aufbau des Joomla!-Templates dient.

Wir empfehlen:
Joomla!-Training

Es ist eigentlich gar nicht so schwer, sein eigenes Template zu bauen. Allerdings stellt sich das Ganze doch deutlich komplexer dar, als wenn man ein Webprojekt entwickelt, das beispielsweise aus einer Ansammlung statischer HTML-Seiten besteht. Denn bei den Joomla!-Templates muss man eine bestimmte Struktur einhalten. Verzichtet man auf diese, kann man das Template nicht in Joomla! nutzen und scheitert bereits an der Installation.

In den folgenden Tutorials – mit ein oder zwei Tutorials ist es hier nicht getan – erfahren Sie, wie Templates funktionieren. Es wird gezeigt, wie Parameter definiert, Spalten bei Bedarf ausgeblendet und "unnützer" Code versteckt werden kann.

Um eines vorweg zu nehmen: Die Arbeit mit Joomla!-Templates setzt einige Kenntnisse in Sachen Webgestaltung voraus. Im Einzelnen wären dies:

  • HTML
  • CSS
  • XML
  • PHP

Nun muss man vor allem XML und PHP für den Anfang nicht wirklich beherrschen. Hier reichen Grundkenntnisse sicherlich aus. Hinsichtlich HTML und CSS sollte aber weiterführendes Wissen vorhanden sein.(Als Stichwort sei hier Float genannt. Diese Technik ist für den Aufbau von Spaltenlayouts eigentlich unabdingbar.)

Für die folgenden Tutorials wird vorausgesetzt, dass Sie im Besitz eines Layouts sind, das als Grundlage für das Joomla!-Template fungiert. Dieses Layout sollte "sauberen" HTML-Code enthalten, sehr schlank sein und auf CSS aufbauen. Wichtig ist, dass eine strikte Trennung zwischen Layout und Inhalt stattfindet. Gerade bei der Template-Entwicklung ist das wichtig, da man – durch den Einsatz entsprechender Abfragen – später beispielsweise dynamisch zwischen einem zwei- und einem dreispaltigen Layout wechseln kann. Damit das aber reibungslos klappt, muss das Grundlayout entsprechend sauber entwickelt werden.

Hier ein Auszug aus einer entsprechenden HTML-Datei, in der sich auf das Nötigste beschränkt wird:

<div id="leftwrapper">
      <div id="men">
        <div class="moduletable_menu">
          <ul class="menu">
            Linke Spalte
          </ul>
        </div>
      </div>
</div>

Wie Sie das Grundlayout letztendlich gestalten, bleibt natürlich Ihnen überlassen. Wichtig ist aber, dass die folgenden Aspekte berücksichtigt werden:

  • Es muss genügend Platz für die Menüs gelassen werden.
  • Ein eventuell vorhandenes Logo muss immer sichtbar sein.
  • Achten Sie auf eine schlanke HTML-Struktur.
  • Verzichten sollten Sie auf den Einsatz von Layouttabellen.

Nachdem die Vorarbeiten abgeschlossen sind, geht es an die Umsetzung des Layouts in ein Joomla!-Template.

Die Verzeichnisstruktur
Wenn Sie ein normales Webprojekt anlegen, spielt es keine Rolle, welche Verzeichnisse Sie dabei verwenden. So können Sie dort beispielsweise die Verzeichnisse

  • bilder,
  • stylesheets und
  • php_dateien

einsetzen. Bei Joomla! sieht das Ganze anders aus. Denn hier ist eine feste Verzeichnisstruktur vorgegeben.
Sämtliche Templates Ihrer Joomla!-Installation finden Sie im templates-Verzeichnis.

Dort sehen Sie alle vorhandenen Templates. Wenn Sie Ihr eigenes Template anlegen wollen, müssen Sie dabei die folgende Verzeichnisstruktur einhalten.

[Joomla!]/templates/[Name des Templates]
[Joomla!]/templates/[Name des Templates]/css/
[Joomla!]/templates/[Name des Templates]/images/

Das ist das Minimum an Verzeichnissen, das in jedem Fall vorhanden sein muss. Auf diese Verzeichnisse beschränken müssen Sie sich aber nicht. Denn vielleicht werden Sie später auch JavaScript-Dateien o.ä. verwenden wollen. Für solche und andere Dateien können Sie ebenfalls Verzeichnisse anlegen.

[Joomla!]/templates/psd
[Joomla!]/templates/psd/css/
[Joomla!]/templates/psd/images/
[Joomla!]/templates/psd/scripte/

Noch einmal: Die Verzeichnisse css und images müssen da sein, weitere können aber hinzugefügt werden.

Innerhalb des css-Verzeichnisses werden alle Stylesheet-Dateien verwaltet. images wiederum enthält sämtliche Grafiken, die vom Template verwendet werden.

Die notwendigen Dateien
Nachdem Sie die Verzeichnisstruktur kennengelernt haben, geht es jetzt darum, welche Dateien vorhanden sein müssen, damit aus dem Layout ein echtes Joomla!-Template werden kann. Zunächst ein kurzer Blick auf diese Dateien. In den nächsten Tutorials werden diese dann noch einmal ausführlich unter die Lupe genommen.

Da wäre zunächst die index.php. Dabei handelt es sich um den Dreh- und Angelpunkt des Templates. Die index.php ist die eigentliche Template-Datei. Diese Datei enthält das HTML-Grundgerüst. Darüberhinaus sind darin aber auch PHP-Befehle und Platzhalter definiert, die später von Joomla! dynamisch durch die echten Inhalte ausgetauscht werden.

Als nächstes kommt die template.css. Ihr Template kann und wird wahrscheinlich mehrere CSS-Dateien besitzen. (Spätestens, wenn man mit Parametern arbeitet, kommt man oftmals nicht um unterschiedliche CSS-Dateien herum.) Aber gleichgültig wie viele CSS-Dateien es gibt, die template.css muss in jedem Fall vorhanden sein. Anfangs werden in der template.css nur Ihre eigenen IDs oder Klassen stehen, über die sie das Grundlayout Ihres Templates steuern. Später kommen aber auch noch Joomla!-eigene Klassen hinzu, über die sich dann beispielsweise einzelne Module gezielt formatieren lassen. Beachten Sie, dass Joomla! intern reservierte CSS-Klassen verwendet, die Sie in Ihren eigenen CSS-Dateien überschreiben können. Auch dazu gibt es dann später ausführliche Informationen.

Weiter geht es mit der templateDetails.xml. Dabei handelt es sich um die Datei, in der die das Template betreffenden Metadaten stehen. Anhand dieser Metadaten wird der Grundaufbau des Templates beschrieben. In dieser Datei stehen u.a. der Template-Name, die verwendeten Dateien, die im Template vorhandenen Positionen und mögliche Parameter. Auch wenn es sich bei der templateDetails.xml um eine XML-Datei handelt, sind keine weiterführenden XML-Kentnisse nötig, um sie anzulegen.

Bei der template_thumbnail.png handelt es sich um eine Vorschaugrafik des Layouts. Angezeigt wird diese Grafik im Backend unter Erweiterungen/Templates. Wenn Sie dort mit dem Mauszeiger über einen Template-Namen fahren, sehen Sie dieses Vorschaubild.

Die template_thumbnail.png ist also nichts anderes als ein Screenshot der fertigen Seite. Speichern Sie diese Datei in jedem Fall als PNG-Grafik ab. GIF und JPEG funktionieren hier nicht. Zudem wird eine Größe von 206×150 Pixel empfohlen.

Fazit
Sie haben gesehen, dass man sich beim Aufbau eines Joomla!-Templates an bestimmte Regeln halten muss. Ungewöhnlich ist das sicherlich für all diejenigen, die ihre Projekte bislang ohne Content-Management-System umgesetzt haben. Denn im "normalen Leben" kann man seine Dateien und Verzeichnisse nennen, wie man will. Der Vorteil der strukturierten Joomla!-Variante: Ihr Template können Sie in jeder anderen Joomla!-Installation verwenden.

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