Joomla! 2.5 (Teil 32): Eigene Templates entwickeln (3)

Eine der wichtigsten Dateien jedes Joomla!-Templates ist die templateDetails.xml. Diese Datei enthält alle wichtigen Informationen für den Joomla!-Installer. Der liest aus der templateDetails.xml beispielsweise Informationen über die zum Template gehörenden Dateien und Verzeichnisse aus. Außerdem werden in dieser Datei die im Template verwendeten Positionen angegeben, in denen sich die Joomla!-Module platzieren lassen.

Wir empfehlen:
Joomla!-Training

Neben der index.php bildet die templateDetails.xml das Kernstück jedes Joomla!-Templates. Wie es das Suffix xml bereits vermuten lässt, handelt es sich dabei um eine XML-Datei. Aber keine Bange, fortgeschrittene XML-Kenntnisse werden für die Definition einer templateDetails.xml nicht benötigt.

Vermieden werden müssen innerhalb der templateDetails.xml Syntaxfehler jedweder Art. Schleichen sich nämlich Fehler ein, lässt sich das Template nicht installieren und der Installer gibt eine entsprechende Fehlermeldung aus.

 

Wie jedes XML-Dokument wird auch die templateDetails.xml über den sogenannten XML-Prolog eingeleitet.

Innerhalb des Prologs werden die verwendete XML-Version (das ist immer 1.0) und die Zeichenkodierung angegeben.

Die Zeichenkodierung wird über das Attribut encoding bestimmt.

XML interpretiert, wenn nichts anderes angegeben wurde, den Inhalt einer Datei gemäß dem Zeichensatz UTF-8. Bei dieser Variante werden alle Zeichen in variabel lange Kodierungen umgesetzt. Das hat den Vorteil, dass sich bei den ersten 128 Zeichen der Unicode mit den 7 Bit des ASCII-Codes deckt. Positiv kommt außerdem hinzu, dass einfache Texteditoren dadurch auch XML-Dateien erstellen können.

Weiter geht es mit der Definition der Document-Typ-Deklaration, kurz DTD.


Innerhalb einer solchen DTD sind die Elemente und Attribute enthalten, die im aktuellen Dokument verwendet werden dürfen. Für Joomla! 2.5 kann auf die DTD für die 1.6er-Version zurückgegriffen werden. (Es bleibt abzuwarten, ob es noch eine entsprechende DTD geben wird. Möglicherweise verabschiedet man sich auch ganz von einer solchen DTD und greift beispielsweise auf XML Schema zurück).

Nach der DTD wird das Wurzelelement definiert.


...

Über das version-Attribut gibt man die Joomla!-Version an. type legt fest, dass es sich um ein Template handelt. Das client-Attribut bestimmt, ob es sich um ein Seiten-Template oder um eins für den Administrationsbereich handelt. Üblicherweise werdet ihr site angeben. Wenn ihr tatsächlich ein Administrator-Template entwickeln wollt, notiert ihr als client-Wert administrator.

 

Die Metadaten

Weiter geht es mit der Definition der Metadaten. Diese werden von Joomla! an verschiedenen Stellen verwendet. So sieht man sie beispielsweise direkt nach der Installation des Templates.

 

Aber auch im Administrationsbereich innerhalb der Template-Übersicht werden diese Angaben genutzt.

Über diese Metadaten gibt man allgemeine Informationen zum Template an. Das sind der Template-Name, Erstelldatum, E-Mail-Adresse usw.

psd-tutorials
12 April 2012
Daniel Koch
kontakt@medienwerke
http://www.medienwerke.de
Copyright (C) 2005 - 2012 Open Source Matters, 
Inc. All rights reserved.
GNU General Public License version 2 
or later; see LICENSE.txt
2.5.0
Ein medienwerke.de-Template

Das, was innerhalb von description steht, wird während der Template-Installation angezeigt. (Achtung: Im Beispiel wurde absichtlich eine syntaktisch fehlerhafte E-Mail-Adresse eingetragen, um bei der Darstellung auf dieser Seite keinen Fehler zu generieren. Im richtigen Leben könnt ihr natürlich eine korrekte E-Mail-Adresse angeben).

Die Dateien und Verzeichnisse angeben

Ihr müsst explizit die zum Template gehörenden Verzeichnisse und Dateien innerhalb des files-Bereichs ausführen. Dieser Bereich ist dabei sehr fehleranfällig. Vergesst ihr beispielsweise, ein Verzeichnis zu notieren, wird dieses auch nicht mit installiert. Tragt ihr hingegen eine Datei ein, die nicht existiert, gibt es während der Template-Installation eine Fehlermeldung.

Ein typischer files-Bereich sieht folgendermaßen aus:


   css
   images
   index.html
   index.php
   templateDetails.xml
   template_preview.png
   template_thumbnail.png
   favicon.ico

Die Verzeichnisse gibt man über die folder-Elemente an. Die Dateien, die innerhalb dieser Verzeichnisse liegen, müssen nicht explizit aufgeführt werden. Im aktuellen Fall würden also automatisch alle Grafiken, die im images-Verzeichnis liegen, berücksichtigt werden. Gleiches gilt für die CSS-Dateien, die im css-Verzeichnis gespeichert sind. Alle Dateien, die nicht innerhalb der Verzeichnisse, sondern auf der obersten Template-Ebene liegen, müssen jeweils in einem einzelnen filename-Element stehen.

Innerhalb von files müssen folgende Elemente berücksichtigt werden:

• Alle im Template enthaltenen Verzeichnisse und Dateien.
• Alle im Template verwendeten PHP-Dateien.
• Alle im Template verwendeten HTML-Dateien.
• Alle im Template verwendeten CSS-Dateien.
• Alle im Template verwendeten Grafiken.

Die verwendeten Positionen

Wenn ihr im Backend unter Erweiterungen>Module auf einen Modulnamen klickt, ist euch dort sicherlich bereits das Feld Position auswählen aufgefallen.

 

Wenn ihr darauf klickt, bietet euch Joomla! die verfügbaren Positionen an, in denen das Modul platziert werden kann.

 

Die Positionen, die ihr in eurem Template verwenden wollt, gebt ihr innerhalb der templateDetails.xml an. (Bei der Definition der Positionen handelt es sich übrigens um ein Zusammenspiel aus index.php und templateDetails.xml. Ausführliche Informationen zu den Dingen, die die index.php betreffen, gibt es dann in einem späteren Tutorial).

Bei den innerhalb der index.php definierten Positionen handelt es sich letztendlich um Platzhalter, die im Frontend durch die eigentlichen Joomla!-Inhalte ersetzt werden.

Das umschließende Element für die Definition der Positionen ist positions.


   

Innerhalb von positions werden die einzelnen Positionen in eigenen position-Elementen notiert. Angenommen, ihr habt die Position right in eurer index.php vorgesehen. Die position-Angabe sähe folgendermaßen aus:

right

Auf diese Weise gebt ihr sämtliche Positionen an.


  debug
  left
  right
  top

Weitere Angaben sind tatsächlich nicht nötig, damit die Positionen im Backend ausgewählt werden können.

 

Eine einfache templateDetails.xml könnte folgendermaßen aussehen: (Achtung: Im Beispiel wurde absichtlich eine syntaktisch fehlerhafte E-Mail-Adresse eingetragen, um bei der Darstellung auf dieser Seite keinen Fehler zu generieren. Im richtigen Leben könnt ihr natürlich eine korrekte E-Mail-Adresse angeben).




psd-tutorials
12 April 2012
Daniel Koch
kontakt@medienwerke
http://www.medienwerke.de
Copyright (C) 2005 - 2012 Open Source Matters, 
Inc. All rights reserved.
GNU General Public License version 2 
or later; see LICENSE.txt
2.5.0
Ein medienwerke.de-Template
     
        css
        images
        index.html
        index.php
        templateDetails.xml
        template_preview.png
        template_thumbnail.png
        favicon.ico
     
     
        debug
        left
        right
        top
     

Das ist zugegebenermaßen eine minimale templateDetails.xml. So fehlen darin beispielsweise noch Template-Parameter und mögliche Sprachdateien. Dennoch könnt ihr mit der jetzt vorliegenden templateDetails.xml bereits euer Template über das Backend installieren. Legt dazu noch die beiden Dateien template_preview.png und template_thumbnail.png an. (Ausführliche Informationen dazu gab es im vorherigen Tutorial).

 

Insgesamt sollte die Verzeichnisstruktur folgendermaßen aussehen:

psd-tutorials
–images
–css
—-index.php
—-template_preview.png
—-template_thumbnail.png
—-templateDetails.xml

Macht aus diesem Verzeichnis ein Zip-Archiv und ruft im Backend Erweiterungen>Erweiterungen auf. Dort kann das Template wie jedes andere Template installiert werden.

 

Stellt es anschließend als Standard-Template ein. Ruft dazu Erweiterungen>Templates auf und klickt in der Standard-Spalte auf den Stern in der Zeile des Templates.

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