Joomla! Programmierung/Programmierung/Templates/Ein kleines Template mit Joomla!1.6.xx

In diesem Tutorial wird gezeigt, wie Sie ein Joomla!1.6.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 Template Overrides enthalten

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

Ihre Ordnerstruktur sollte nun so aussehen:

^|_  templates

^|_  TemplateName

^|_  css

^|_  html

^|_  images

^|_  javascript

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 [[../../../../Framework/JDocumentHTML|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: [[../../../../Framework/JDocumentHTML|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 $templateparams = $app->getTemplate(true)->params;('parametername'); eingebunden 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 mehreren Modulpositionen und der Komponentenausgabe erstellt. Die Template-Parameter "sitetitle" und "sitedescription" können mit Text versehen werden. Daneben wird an zwei Menüpunkten gezeigt, wie man sie mit CSS individuell gestalten kann. 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

CHANGELOG.php

ToDo Muss noch erstellt werden-

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.

error.php

Da nehmen wir erst einmal einfach die  Joomla!1.6/templates/atomic/error.php.

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

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>

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

language/de-DE.tpl_templatename.ini

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

SIDE_TITLE=Seitentitel
SIDE_TITLE_SET=Gib der Seite einen Titel
SIDE_DESCRIPTION=Beschreibung der Seite
SIDE_DESCRIPTION_SET=Schreibe eine kurze Beschreibung der Seite

language/en-GB.tpl_templatename.ini

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

SIDE_TITLE=Side title
SIDE_TITLE_SET=Set a title for the page
SIDE_DESCRIPTION=Description of the Side
SIDE_DESCRIPTION_SET=Write a short description of the side

language/.....sys.ini

 language/de-DE.tpl_templatename.sys.ini und  language/en-GB.tpl_templatename.sys.ini beinhalten die Übersetzungen für die Modulpositionen und den Installationsprozess. Siehe dazu auch System Sprachdatei für Übersetzung von Administratormenü und Installation (.sys.ini).

Beispiel:  Joomla!1.6/language/de-DE.tpl_beez_20.sys.ini

template_thumbnail.png

Dieses Bild (mit den Maßen 215x176px) wird im Backend Templatemanager in der Registerkarte "Templates" angezeigt.

template_preview.png

Ein Klick auf das eben genannte Bild öffnet das template_preview.png(mit den Maßen 641x526px in einer Lightbox.

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. Achten Sie darauf, dass die Dateien folgende Struktur im ZIP einhalten:

 templatename.zip

^|_  css

^|_  template.css

^|_  index.html

^|_  html

^|_  modules.php

^|_  index.html

^|_  images

^|_  index.html

^|_  language

^|_  de-DE.tpl_templatename.ini

^|_  en-GB.tpl_templatename.ini

^|_  CHANGELOG.php

^|_  component.php

^|_  de-DE.tpl_templatename.ini

^|_  de-DE.tpl_templatename.sys.ini

^|_  en-GB.tpl_templatename.ini

^|_  en-GB.tpl_templatename.sys.ini

^|_  error.php

^|_  favicon.ico

^|_  index.html

^|_  index.php

^|_  template_preview.png

^|_  template_thumbnail.png

^|_  templateDetails.xml

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.

"Download" der Dateien

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

Alle verwendeten Dateien können von http://anonymous@joomlacode.org/svn/nafuwiki/trunk/templates_J1.6/kms-blueprint "SNV Ausgechecken ..." herunter geladen werden. (Die Logindaten sind, wie überall auf joomlacode, User: "anonymous" - ohne Passwort).