Joomla! Programmierung/Programmierung/Templates/Template J15

In diesem Tutorial wird gezeigt, wie Sie ein Joomla!1.5.xx Template erstellen.

Die Grundstruktur

Als ersten Schritt sollten Sie im Joomla! Template Ordner einen neuen Ordner erstellen:  templates/TemplateName. Darin werden alle Dateien des Templates gespeichert. Als nächstes müssen Sie drei Verzeichnisse anlegen:

•  css - wird später alle CSS Dateien enthalten
•  images - wird später alle Bilder enthalten
•  html - wird später alle Overrides enthalten

Bei Bedarf können Sie noch einen Ordner  js erstellen, der später alle Javascriptdateien enthalten wird.

Ihre Ordnerstruktur sollte nun so aussehen:

^|_  templates

^|_  TemplateName

^|_  css

^|_  html

^|_  images

^|_  js

index.php

Dies ist die Hauptdatei des Templates. Sie befindet sich direkt im Hauptordner des Templates und enthält das komplette HTML Grundgerüst der Joomla! Homepage. Hier wird festgelegt, in welchen Bereich des Bildschirms Inhalte (= Beiträge), Menüs, Logo, Banner, eine Suche usw. (=Module) geschrieben werden.

Innerhalb dieser Datei können Sie auf das JDocumentHTML Objekt $this zugreifen, das verschiedene Informationen bereit hält. Wichtig ist hier $this->basename, $this->template und $this->direction, die den Joomla! Ordner, den Templatename und die Schreibrichtung liefern. Mit $this->countModules() kann festgestellt werden, ob bestimmte Module für diese Seite vorhanden sind (Anwenden wie $this->getBuffer('message')).

Weitere Informationen: JDocumentHTML

Falls ein Template Einstellungen im Backend möglich macht (Parameter-Einträge befinden sich in der XML-Manifest-Datei des Templates), kann in der  index.php auf diese Parameter mit $this->params->get('parametername'); zugegriffen werden.

Auf diese Weise kann man zum Beispiel Template-Bereiche bzw. Positionen ein- und ausschalten, bestimmte Unter-Stylesheets laden.

In folgendem Tutorial wird ein einfaches Template mit einer Modulposition und der Komponentenausgabe erstellt. Erstellen Sie eine index.php und speichern Sie diese in den Hauptordner des Templates.

Weitere Informationen: index.php

template.css

In der template.css werden alle Styledefinitionen des Templates gespeichert. Je nach Templatebeschaffung ist es evtl. empfehlenswert die CSS Definitionen auf mehrere Dateien zu verteilen. Diese müssen später natürlich auch in der  templateDetails.xml definiert werden. In diesem Tutorial ist nur eine Auswahl an Klassen und ID's aufgezeigt, die das hier dargestellte Template betreffen. Joomla! selbst hat noch unzählige weitere davon, die Sie am besten mit den Entwicklerwerkzeugen herausfinden.

Weitere Informationen: template.css

params.ini

In der  params.ini werden von Joomla! die Parameter des Templates gespeichert, wie sie über die XML-Manifest-Datei des Templates als Default-Werte vorgegeben bzw. über die Template-Einstellungen im Admin-Bereich gespeichert worden sind. Sie sollten darauf achten, dass diese Datei immer beschreibbar ist.

title=Meine Homepage

component.php

Die Datei tritt in Aktion, wenn man die Buttons "Drucken" oder "E-Mail" betätigt. Sie wird durch den GET-Parameter tmpl=component aufgerufen.

Standardmäßig beinhaltet der body nur <jdoc:include type="message" /> <jdoc:include type="component" /> . Es könnten ein individueller Seitenkopf, -fuß oder eventuell doch zu druckende Module hinzugefügt werden. (Gestaltung siehe index.php.)

Durch den Parameter tmpl ergeben sich beliebige weitere Möglichkeiten der Gestaltung. Die aufgerufene Datei muß nicht component.php heißen, sondern kann einen beliebigen anderen Namen haben. Der Parameter tmpl=foobar ruft z.B. die Datei foobar.php im Template auf. Man kann also beliebig viele weitere Ansichten mit anderen Modulanordnungen, CSS usw. anlegen.

modules.php

Mit der  modules.php können eigene Module Chrome erstellt werden. Somit kann der "Rahmen" in dem ein Modul ausgegeben wird fast beliebig angepasst werden. Diese Datei muss im Ordner  html gespeichert werden, um automatisch von Joomla! erkannt zu werden.

Weitere Informationen: modules.php

Sprachdateien

admin/de-DE.tpl_templatename.ini

Dies ist die deutsche Sprachdatei, die die Beschreibungstexte aus der templateDetails.xml übersetzt.

Bitte beachten Sie, dass Sie beim Gebrauch einer Sprachdatei das Template über den Joomla-Installer im Backend installieren müssen, um die Sprachdateien zu aktivieren. Es reicht nicht aus, das Template einfach nur per FTP oder auf anderem Weg in die Joomla-Installation zu kopieren, weil die Sprach-Dateien zum Funktionieren nach administrator/languages/ verschoben werden müssen.

TITLE TEXT=Titeltext
SET A TITLE FOR THE PAGE=Titel der Seite

admin/en-GB.tpl_templatename.ini

Dies ist die englische Sprachdatei, die die Beschreibungstexte aus der  templateDetails.xml übersetzt.

TITLE TEXT=Title Text
SET A TITLE FOR THE PAGE=Set a title for the page

favicon.ico

Ein Favicon ist ein kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, das in der Adresszeile eines Browsers links von der URL angezeigt wird um den Wiedererkennungswert der Seite zu erhöhen.

Weitere Informationen: Favicon in der Wikipedia

template_thumbnail.png

Wenn Sie ein Bild mit den Maßen 206x150px als template_thumbnail.png erstellen, wird dieses als Vorschau im Backend Templatemanager angezeigt.

index.html

Eine index.html sollte in jedem Verzeichnis vorhanden sein, um einen direkten Aufruf der Ordner zu unterbinden.

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

templateDetails.xml

Die  templateDetails.xml ist für die Installation des Templates und die Parameter verantwortlich.

Weitere Informationen: templateDetails.xml

Zusammenfassung

Nun müssen Sie alle Dateien zippen und können Ihr erstes selbstgemachtes Template installieren. Alternativ können Sie die Dateien auch direkt in den entsprechenden Order auf Ihrem Server speichern. Achten Sie darauf, dass die Dateien folgende Struktur im ZIP einhalten:

 templatename.zip

^|_  admin

^|_  de-DE.tpl_templatename.ini

^|_  en-GB.tpl_templatename.ini

^|_  css

^|_  template.css

^|_  index.html

^|_  html

^|_  modules.php

^|_  index.html

^|_  images

^|_  index.html

^|_  index.php

^|_  component.php

^|_  templateDetails.xml

^|_  params.ini

^|_  de-DE.tpl_templatename.ini

^|_  en-GB.tpl_templatename.ini

^|_  template_thumbnail.png

^|_  favicon.ico

^|_  index.html

Das Ergebnis

Wenn Sie das Template installiert haben, müssen Sie als letzten Schritt das Template als "Standard" setzen. Auf Ihrer Homepage sollte dann in etwa Folgendes zu sehen sein:

Nun können Sie anfangen die  template.css und die  index.php zu erweitern und anzupassen, bis Sie Ihr gewünschtes Template besitzen.

Das kann sehr gut auch mit EasyCreator gemacht werden. Dort ist dieses Template enthalten: Der erste Schritt.