Joomla! 2.5 (Teil 31): Eigene Templates entwickeln (2)

Nachdem das Grundgerüst des Templates steht, geht es nun mit dem Ausbau der index.php weiter. Ihr erfahrt in diesem Tutorial, wie ihr die Kopfdaten dynamisch laden könnt. Dazu gehören u.a. die im Backend eingestellte Sprache und der Namensraum. Außerdem wird gezeigt, wie ihr CSS-Dateien einbindet. Der Clou dabei: Sämtliche Dinge werden dynamisch geladen. Somit sind eure Templates unabhängig von den Gegebenheiten der jeweiligen Joomla!-Installation. Ihr könnt eure Templates dann also auf unterschiedlichen Systemen verwenden.

Wir empfehlen:
Joomla!-Training

Die eigentlichen Joomla!-Inhalte werden über die index.php geladen. Bei dieser index.php handelt es sich zunächst einmal um eine PHP-Datei, in der üblicherweise das HTML-Grundgerüst des Templates definiert ist. (Es gibt auch Templates, bei denen in der index.php ausschließlich include()-Befehle stehen, über die wiederum andere PHP-Dateien geladen werden. Der Einfachheit halber wird hier aber der klassische Weg vorgestellt).

Am Anfang der index.php sollte stets folgende Syntax stehen:

Dadurch wird der direkte Aufruf dieser Datei verhindert. Probiert es dennoch jemand, bekommt er die innerhalb der Klammern definierte Fehlermeldung zu sehen.

 

Diese Syntax gebt ihr also immer am Anfang der index.php an.

Im nächsten Schritt wird der Dokumenttyp bestimmt. Wenn ihr ein XHTML-1.0-Transitional-Dokument definiert, dann sähe das folgendermaßen aus:


Über den Dokumenttyp gebt ihr letztendlich bekannt, an welchen Sprachstandard sich euer Dokument hält.

Dadurch wird im aktuellen Beispiel dem Parser mitgeteilt, dass auch einige Elemente verwendet werden, die beispielsweise in der strengeren Strict-Variante von XHTML nicht erlaubt sind. Man braucht Transitional beispielsweise, wenn man innerhalb von Hyperlinkdefinitionen mit dem target-Attribut arbeiten will.

Wer ein HTML5-Dokument definieren will, verwendet folgende Dokumenttyp-Angabe:


 

Die verwendete Sprache

Ihr könnt im Backend unter Erweiterungen>Sprachen>Installiert – Site die im Frontend verwendete Sprache angeben.

 

Genau diese Sprache lässt sich dann im Frontend auslesen. Verwenden lässt sich das dann als Wert für die beiden Attribute xml:lang und lang. Zugreifen lässt sich auf die Sprachwerte über $this->language. Und genau damit könnt ihr jetzt eine erste Interaktion zwischen der index.php und Joomla! herstellen.


Die im Backend eingestellte Sprache wird so automatisch im Frontend übernommen. So würde der im Frontend generierte Quellcode folgendermaßen aussehen, wenn im Backend als Sprache German (Germany-Switzerland-Austria) eingestellt worden wäre.


Dem lang– und dem xml:lang-Attribut wurde als Wert de-de zugewiesen. Anders sieht das Ganze aus, wenn (britisches) Englisch eingestellt wird.

 

Dann nämlich ergibt sich folgendes Bild:


Nun könnte man sich natürlich die Frage stellen, warum man die Sprache nicht fest im Template kodiert. Stellt euch vor, dass euer Template später auch auf englischen Webseiten verwendet wird. Wenn ihr auf die dynamische Variante setzt, wird immer die richtige Sprache angezeigt.

Die Laufrichtung bestimmen

Über das dir-Attribut lässt sich die Laufrichtung angeben, die in einem Dokument verwendet wird. Interessant ist das für die Internationalisierung von Inhalten. Dieses Attribut kann zwei mögliche Werte haben.

ltr – Das ist der Standardwert. Der Text läuft von link nach rechts.
rtl – Der Text fließt von rechts nach links.

Der Textfluss lässt sich über $this->direction ermitteln.


  

Der daraus im Frontend generierte Quellcode sieht folgendermaßen aus:


  

Dank dieser beiden Abfragen wird das html-Element jetzt vollständig dynamisch generiert.

 

Die Kopfdaten laden

Nach dem html– folgt das head-Element. In diesem Element werden die allgemeinen Kopfdaten von Joomla! geladen. Dazu gehören beispielsweise die Meta-Angaben und die vom System automatisch ausgelieferten CSS-Dateien.

Im weiteren Verlauf dieser Tutorial-Reihe wird euch das jdoc-Elemente noch sehr oft begegnen. Über dieses Element lassen sich Joomla!-Inhalte einbinden. Wie einfach sich dieses Element nutzen lässt, zeigt das folgende Beispiel:


     

Das sieht zugegebenermaßen wenig spektakulär aus. Wenn ihr euch aber den im Frontend generierten Quellcode der Seite anseht, ergibt sich folgendes Bild.


  
  
  
  
  
  
  Home
  
  
  
  
  
  
  
  

Der kleine Aufruf genügt also, um sämtliche Kopfdaten dynamisch einzubinden.

 

CSS-Dateien einbinden

Für die Gestaltung der Seite wird (natürlich) auf CSS gesetzt. Wie eingangs dieser Reihe bereits beschrieben, solltet ihr mindestens eine CSS-Datei, nämlich die template.css, laden. Meistens bindet man jedoch drei Dateien ein.

system.css – Darin sind allgemeine Joomla!-eigene Stylesheets enthalten.
general.css – Darin sind die Stylesheets für die vom System ausgegebenen Meldungen enthalten. Typischerweise handelt es sich um Elemente wie div.tooltip oder .img_caption.left.
template.css – Bei der template.css handelt es sich um die Datei, in der alle Template-spezifischen Formatierungen enthalten sind, die für das Grundlayout benötigt werden.

Dabei sind die ersten beiden CSS-Dateien typische Systemdateien, die bereits mit dem Joomla!-System-Template ausgeliefert werden. Sie liegen standardmäßig im Verzeichnis system/css.

 

Ein typischer link-Bereich könnte folgendermaßen aussehen:

baseurl;?>/templates/system/css/system.css" type="text/css" />
baseurl;?>/templates/system/css/general.css" type="text/css" />
baseurl;?>/templates/template ?>/css/template.css" type="text/css" />

Bei genauerer Betrachtung dieser Syntax fällt etwas auf:

baseurl; ?>

Darüber lässt sich der absolute Pfad der Joomla!-Installation ermitteln. Der im Frontend generierte Quellcode sieht folgendermaßen aus:




Durch $this->baseurl wird automatisch der Pfad ermittelt. Im aktuellen Fall lautet dieser joomla25. Wo liegt hier aber der Vorteil? Ihr könnt ein so ausgestattetes Template ohne weitere Angaben in einer anderen Joomla!-Installation verwenden, unabhängig davon, wie dort der absolute Pfad der Installation lautet. Das ist natürlich praktisch, schließlich müsste man sonst jedes Mal die link-Definitionen anpassen, wenn das Template in einer anderen Umgebung eingebunden werden soll.

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