Das kleinste Joomla-Template der Welt

Das kleinste Joomla-Template der Welt

Von 12.09.16

Um ein eigenes Template program­mieren zu können, muss man wissen wie das CMS seine Templates benö­tigt. Ich zeige euch heute anhand eines Beispiels, das kleinste funk­ti­ons­tüch­tige und das kleinste sinn­volle Joomla-Template. Fangen wir mit den Grund­lagen eines Joomla-Template an.

Grundlagen

Damit ein Template “funk­tio­niert” sollte es den Inhalt aus der Daten­bank des CMS darstellen. Für ein Joomla-Template braucht ihr eigent­lich nur 2 Dateien: eine index.php und eine templateDetails.xml. Die XML-Datei ist nötig um das Template in Joomla zu instal­lieren, hier werden auch die Eigen­schaften des Templates fest­ge­legt. Die index.php ist für die spätere Ausgabe zuständig. Hier wird fest­ge­legt wie das HTML aussehen soll und wo der Inhalt ausge­geben wird. In Joomla gibt es zwei verschie­dene “Inhalts­typen”, die Beiträge und die Module.

Das ist nicht ganz gleich wie in Word­Press, hier gibt es  Beiträge, Seiten und Widgets. Beiträge in Joomla können sowohl in einer Kate­gorie erscheinen, also als Blog, als auch einfache Seiten sein. Ein Beitrag kann sowohl in einer Kate­gorie ausge­geben wird, als auch gleich­zeitig als Seite aufge­rufen werden. Außerdem sind Module auch nicht gleich wie die Widgets in Word­Press, beides gibt es in verschie­denen Typen, also einfache Text-Felder, Blog-Feeds, Slider oder Ähnli­ches. Wie auch immer, mit einem Modul wird in Joomla auch das Menü ausge­geben und man kann Module einzelnen Seiten im Menü zuzu­ordnen. Über zusätz­lich Kompo­nenten kann man sogar Module je nach Datum und Uhrzeit einblenden oder ausblenden. Außerdem können Module auf verschie­denen Modul­po­si­tionen ausge­geben werden, jedoch kann ein Modul nicht gleich­zeitig auf mehreren Posi­tionen ausge­geben werden.

Die Modul­po­si­tionen müssen in der templateDetails.xml defi­niert sein und im Template ausge­geben werden. Um ein funk­tio­nie­rendes Template zu haben, sollten wir mindes­tens eine Postion defi­nieren und den Beitrag ausgeben.

Das kleinste funktionstüchtige Joomla-Template

Die ersten Zeilen sind nötig um eine valide XML-Datei zu bekommen, danach wird nur das Template benannt und ein paar Infor­ma­tionen ange­geben. Unter <files></files> werden die zum Template gehö­rigen Dateien aufge­zählt. Hier soll­test du wirk­lich alle Dateien und Ordner aufzählen, nur dann kann das Template später im Joomla-Backend kopiert werden. Unter <positions></positions> werden die Modul­po­si­tionen defi­niert. Die Benen­nung der Posi­tionen sollte nach ihrer späteren Posi­tion und Funk­tion im Template benannt werden. Denn mit “posi­tion-9” kann niemand etwas anfangen, als ob du dass auswendig lernst. 😉

Die XML-Datei


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">
   <name>KJT</name>
   <version>1.0</version>
   <creationDate>11.09.2016</creationDate>
   <author>Selma</author>
   <files>
      <filename>index.php</filename>
      <filename>templateDetails.xml</filename>
   </files>
   <positions>
      <position>menu</position>
   </positions>
</extension>

Das ist die XML-Datei für das Template, das ist wirk­lich die mini­male Version. In den meisten Templates wird die XML-Datei deut­lich größer sein und noch weitere Optionen beinhalten, aber so funk­tio­niert es schon.

Die PHP-Datei

In der PHP-Datei wird das HTML-Gerüst der Seite fest­ge­legt. Ganz oben wird in dem einzigen wirk­li­chen PHP-Bereich befindet sich ein Aufruf von Joomla. Hier wird geprüft ob das Skript auch korrekt aufge­rufen wird, genauer gesagt wird geprüft ob das Skript sich in Joomla-Umfeld befindet. Damit Joomla im <head></head> der HTML-Strucktur einige Skripte und Infor­ma­tionen plat­zieren kann muss dieser Teil enthalten sein: <jdoc:include type="head" />. Im <body></body> der Datei wird eine Modul­po­si­tion für das Menü mit <jdoc:include type="modules" name="menu" style="xhtml" /> aufge­rufen. Danach werden mit <jdoc:include type="message" /> Joomla-Meldungen ausge­geben, wie z.B. Fehler­mel­dungen. Und dann (endlich) wird der Joomla-Beitrag ausge­geben: <jdoc:include type="component" />. Fertig.

<?php defined('_JEXEC') or die; ?>
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <jdoc:include type="head" />
</head>
<body>
   <jdoc:include type="modules" name="menu" style="xhtml" />
   <jdoc:include type="message" />
   <jdoc:include type="component" />
</body>
</html>

Und das die PHP-Datei, einfach gerade genug HTML für eine Webseite. Falls du mir nicht glaubst, probier es aus. Diese beiden Datein reichen um das Template in Joomla zu instal­lieren und zu nutzen. Die Ausgabe ist natür­lich sehr primitiv und nicht sehr hübsch 😉

Das kleinste sinnvolle Joomla-Template

Anzu­raten ist es auch, dass du mehr Modul­po­si­tionen im Template hast. Du kannst zwar pro Posi­tion beliebig viele Module ausgeben, aber du möch­test ja nicht alle Inhalte einfach unter­ein­ander haben. Häufig hast du mindes­tens noch eine Posi­tion für Bilder im Header, Menüs im Footer und Infos in der Sidebar deiner Webseite.

Um das Template wirk­lich nutzen zu können sollte man CSS-Dateien und auch eine Java­Script-Datei einbinden. Aber für das grund­le­gende Aussehen der Webseite empfiehlt es sich, am Anfang, auf ein Frame­work zurück­zu­greifen. Als Frame­work bezeichnet man eine Samm­lung von vorde­fi­nierten Stylings für HTML-Elemente, häufig liefern solche Frame­works auch grund­le­gende Java­Script-Funk­tio­na­li­täten mit. Als Beispiel bietet sich Boot­strapFoun­da­tion for Sites, PURE.css, Cutstrap und Skeleton (um nur ein paar zu nennen). Der Umfang der Frame­works ist sehr unter­schied­lich und leider auch die HTML-Struktur und CSS-Klassen. Welches Frame­work zu dir passt musst du selbst entschieden. Auf der einen Seite helfen dir die Frame­works schnell gute Ergeb­nisse zu erzielen, auf der anderen Seite kann du nicht immer die rich­tigen Voraus­set­zungen schaffen. Beispiels­weise kannst du die Ausgabe nicht immer zu 100% beein­flussen.

Und eine Warnung muss in dem Fall auch ausge­spro­chen werden, weil Joomla Boot­strap 2 nutzt. Boot­strap 3 gibt es schon seit Jahren und gerade wurde die Vorab­ver­sion von Boot­strap 4 veröf­fent­licht. Für dich bedeutet das, dass nicht alles sofort gut aussieht weil Joomla nicht die benö­tigten CSS-Klassen nutzt.

Zusam­men­ge­fasst: Das kleinste (sinn­volle) Joomla-Template sollte also auf jeden Fall mehr Modul­po­si­tionen enthalten, CSS für die Optik und Java­Script für Funk­tionen.

Kommentar verfassen