Joomla! Programmierung/Programmierung/Templates/Ein kleines Template mit Joomla!

Aus Joomla! Dokumentation
Wechseln zu: Navigation, Suche

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

Die Grundstruktur[Bearbeiten]

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

  • Folder blue.png css - wird später alle CSS Dateien enthalten
  • Folder blue.png images - wird später alle Bilder enthalten
  • Folder blue.png html - wird später alle Template Overrides enthalten

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

Ihre Ordnerstruktur sollte nun so aussehen:

|_ Folder blue.png templates

|_ Folder blue.png TemplateName
|_ Folder blue.png css
|_ Folder blue.png html
|_ Folder blue.png images
|_ Folder blue.png javascript

index.php[Bearbeiten]

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 File php.png 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[Bearbeiten]

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 File xml.png 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[Bearbeiten]

ToDo Muss noch erstellt werden-

component.php[Bearbeiten]

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[Bearbeiten]

Da nehmen wir erst einmal einfach die File php.png DeinJoomla!/templates/atomic/error.php.

favicon.ico[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Mit der File php.png 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 Folder blue.png html gespeichert werden, um automatisch von Joomla! erkannt zu werden.

Weitere Informationen: modules.php

Sprachdateien[Bearbeiten]

language/de-DE.tpl_templatename.ini[Bearbeiten]

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[Bearbeiten]

Dies ist die englische Sprachdatei, die die Beschreibungstexte aus der File xml.png 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[Bearbeiten]

File ini.png language/de-DE.tpl_templatename.sys.ini und File ini.png 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: File ini.png DeinJoomla!/language/de-DE.tpl_beez_20.sys.ini

template_thumbnail.png[Bearbeiten]

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

template_preview.png[Bearbeiten]

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

templateDetails.xml[Bearbeiten]

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

Weitere Informationen: templateDetails.xml

Zusammenfassung[Bearbeiten]

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:

File zip.png templatename.zip

|_ Folder blue.png css
|_ File css.png template.css
|_ File html.png index.html
|_ Folder blue.png html
|_ File php.png modules.php
|_ File html.png index.html
|_ Folder blue.png images
|_ File html.png index.html
|_ Folder blue.png language
|_ Folder blue.png de-DE
|_ File ini.png de-DE.tpl_templatename.ini
|_ File ini.png de-DE.tpl_templatename.sys.ini
|_ Folder blue.png en-GB
|_ File ini.png en-GB.tpl_templatename.ini
|_ File ini.png en-GB.tpl_templatename.sys.ini
|_ File php.png CHANGELOG.php
|_ File php.png component.php
|_ File php.png error.php
|_ File white.png favicon.ico
|_ File html.png index.html
|_ File php.png index.php
|_ File white.png template_preview.png
|_ File white.png template_thumbnail.png
|_ File xml.png templateDetails.xml

Das Ergebnis[Bearbeiten]

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:

J16 ein kleines template.png

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

"Download" der Dateien[Bearbeiten]

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).