Joomla! 2.5 (Teil 30): Eigene Templates entwickeln (1)

Natürlich lassen sich vorhandene Templates anpassen, keine Frage. Nur stößt man früher oder später natürlich an gewisse Grenzen. Spätestens dann stellt sich die Frage: ein fertiges Template kaufen oder doch lieber eins selbst entwickeln? Wo ihr Templates kaufen könnt, wurde bereits gezeigt. In diesem und den nächsten Tutorials geht es um die Template-Entwicklung. Ihr erfahrt, wie Joomla!-Templates strukturiert sind, wie sich Inhalte laden lassen und wie ihr eigene Template-Parameter definieren könnt. In diesem ersten Teil geht es darum, welche Verzeichnisse und Dateien für ein Joomla!-Template eigentlich benötigt werden.

Wir empfehlen:
Joomla!-Training

Installiert man Templates über das Backend, geschieht das über Zip-Archive. Bei solchen Installationen bleibt natürlich verborgen, was im Hintergrund passiert. Dabei sind einige Aspekte entscheidend, wenn man eigene Templates entwickeln will:

• Welche Dateien werden benötigt?
• Gibt es eine feste Template-Struktur?
• Wie werden die in Joomla! hinterlegten Inhalte geladen?

Um eines vorwegzunehmen: 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 tatsächlich Grundkenntnisse. Wer also weiß, wie sich PHP- und XML-Dateien anlegen lassen, kann durchaus Joomla!-Templates erstellen.

 

Was jedoch benötigt wird, sind HTML- und CSS-Kenntnisse. Diese werden – und darauf sei an dieser Stelle explizit hingewiesen – nicht Bestandteil dieser Tutorial-Reihe sein. Gute Anleitungen zu diesem Thema gibt es unter anderem hier bei psd-tutorials.de.

 

Die notwendigen Verzeichnisse und Dateien

Wenn ihr „normale“ Webseiten erstellt, seid ihr in der Wahl der Dateien und Verzeichnisse völlig frei. So könnte die Verzeichnisstruktur beispielsweise folgendermaßen aussehen:

images
javascript
includes

Bei Joomla! sieht das Ganze anders aus. Denn hier sind eine feste Verzeichnisstruktur und bestimmte Dateinamen vorgegeben. Zentrale Anlaufstelle für die Templates ist das templates-Verzeichnis innerhalb eurer Joomla!-Installation.

Innerhalb dieses Verzeichnisses liegen sämtliche zur aktuellen Joomla!-Installation gehörenden Templates.

 

Jedes Joomla!-Template sollte mindestens die folgende Verzeichnisstruktur aufweisen:

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

Das ist die Minimalform. Wer beispielsweise den Einsatz umfangreicher JavaScript-Dateien plant und auch seine CSS-Dateien übersichtlich in einem zentralen Verzeichnis verwalten will, kann natürlich zusätzliche Verzeichnisse anlegen. (Wobei ich in jedem Fall zu einem eigenen css-Verzeichnis raten würde).

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

Eine solche Struktur wird euch dabei helfen, auch umfangreichere Templates aufzubauen. Wenn ihr mit Overrides arbeiten wollt, müsst ihr zusätzlich mit dem Verzeichnis html arbeiten.

Ihr solltet in jedem der Template-Verzeichnisse eine index.html anlegen. Diese Datei verhindert das direkte Aufrufen der Verzeichnisse. Diese index.html ist nichts anderes als eine leere/weiße HTML-Datei und könnte folgendermaßen aussehen:

<html>
<body bgcolor="#fff">
</body>
</html>

 

Legt eine solche index.html in jedem Fall auch auf der obersten Ebene eures Templates an.

 

Neben den genannten Verzeichnissen gibt es auch bestimmte Dateien, die in jedem Verzeichnis enthalten sein sollten bzw. sein müssen.

Da wäre zunächst die index.php. Das ist die zentrale Template-Datei schlechthin. Diese Datei ist es nämlich, die letztendlich für die Anzeige der Inhalte im Frontend verantwortlich ist.

 

Innerhalb der index.php wird üblicherweise das HTML-Grundgerüst der Seite definiert. Dieses Grundgerüst ist mit PHP-Platzhaltern ergänzt, die im Frontend durch die eigentlichen Joomla!-Inhalte ersetzt werden.

Auch wenn das Template mehrere CSS-Dateien besitzen kann, die template.css sollte enthalten sein. Innerhalb dieser Datei werden die Formatierungen für Klassen und IDs definiert. An dieser Stelle gleich der Hinweis, dass Joomla! auch noch eigene CSS-Dateien besitzt und diese ggf. auf das Template anwendet. Ausführliche Informationen dazu gab es bereits im Verlauf dieser Tutorial-Reihe.

Im Joomla!-Backend werden zu den Templates – wenn vorhanden – Vorschaugrafiken angezeigt. Da wäre zunächst die kleine Variante.

 

Das ist einfach ein Screenshot der Seite. Für diese Ansicht ist die Grafik template_thumbnail.png verantwortlich. Normalerweise sollte die Grafik eine Größe von 206 x 150 Pixel haben. Ganz wichtig: Das Grafikformat PNG ist Pflicht. GIF oder JPEG funktionieren hier nicht.

Wird dieser kleine Screenshot angeklickt, öffnet das eine größere Ansicht des Templates.

 

Hierbei handelt es sich um eine größere Variante der Template-Vorschau. Die Dateiausmaße sollten ca. 800 x 600 Pixel betragen. Diese Datei wird unter dem Namen template_preview.png gespeichert.

Gibt es bei der Anzeige der Inhalte im Frontend Probleme, könnt ihr eine eigene Fehlerseite definieren. Dabei handelt es sich um die error.php. Typischerweise greift diese Seite bei 404-Fehlern usw.

Joomla! bietet die Möglichkeit, Inhalte ohne "umgebende" Elemente wie Navigation oder Kopfzeile auszugeben. Genutzt wird das beispielsweise für die Druck- und die Seite-weiterempfehlen-Funktion. Die component.php ist sozusagen eine abgespeckte index.php.

Entscheidende Bedeutung kommt der templateDetails.xml zu. In dieser Datei befindet sich eine Art Bauanleitung für euer Joomla!-Template. Benötigt wird diese Datei vom Joomla!-Installer u.a. dafür, alle notwendigen Dateien und Verzeichnisse an die richtigen Stellen zu kopieren. Innerhalb der templateDetails.xml sind außerdem sämtliche zum Template gehörenden Template-Positionen enthalten.

Neben diesen Dateien solltet ihr dann noch die bekannte favicon.ico anlegen.

Die Schritte zum Template

Um die folgenden Tutorials nachvollziehen zu können, muss das Template bereits installiert werden. Nur dann werden die Inhalte tatsächlich dynamisch eingebunden. Für euch bedeutet dies Folgendes:

• Legt die notwendige Verzeichnisstruktur an.
• Passt die Inhalte der index.php so an.
• Definiert die templateDetails.xml.
• Legt die benötigten Screenshot-Dateien an.
• Macht aus dem vollständigen Template-Verzeichnis ein Zip-Archiv.
• Installiert das Zip-Archiv über das Backend.
• Anschließend können alle weiteren Angaben ergänzt werden.

In früheren Joomla!-Versionen war das etwas einfacher. Da konnte man die Templates einfach per FTP ins templates-Verzeichnis kopieren. Jetzt muss man diese aber explizit installieren.

Um euch den Einstieg zu erleichtern, habe ich eine einfache HTML-Struktur vorbereitet, die ihr als Ausgangspunkt für die weiteren Tutorials verwenden könnt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
  <head>
  <title>Planbar</title>
  <link rel="stylesheet" href="css/template.css" type="text/css" />
  </head>
  <body>
  <!-- Das ist der äußere Container -->
  <div id="wrapper">
  <!-- Das ist der Kopfbereich -->
  <div id="topwrapper">
      <div id="corporatelogo"></div>
      <div id="topright">
        <div id="topmen">Das obere Men&uuml;</div>
        <div id="toplogo"></div>
      </div>
      <div class="clear"></div>
    </div>  
  <!-- Das ist das Ende des Kopfbereichs -->
  <!--Das ist der mittlere Hauptbereich -->
  <div id="mainwrapper_full">
      <div id="leftwrapper">
        <div id="men">
          <div class="moduletable_menu">
            <ul class="menu">
              Linke Spalte
            </ul>
          </div>
        </div>
      </div>
      <div id="contentwrapper_full">      
  <div id="content">Das ist der eigentliche Inhalt</div>    
  </div>
      <div id="rightwrapper">
        <div class="moduletable">Die rechte Spalte</div>
      </div>
      <div class="clear"></div>  
  </div>
    <!--Das ist das Ende des mittleren Hauptbereichs -->
  <!-- Das ist der Fußbereich -->
    <div id="footer">&copy; PlanBar 2012</div>
  <!-- Das ist das Ende des Fußbereichs -->
  </div>
  <!--Ende des äußeren Containers -->
  </body>
</html>

Selbstverständlich ist das nur optional. Ihr könnt die folgenden Tutorials natürlich auch mit eurem eigenen HTML-Grundgerüst nachvollziehen.

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