Ein einfaches Joomla-Template erstellen

Eine hervorragende Anleitung zum Erstellen eines einfachen Joomla-Templates findet man hier bei http://joomla-templates-erstellen.de, und auch die Joomla-Doku gibt einiges her zm Thema Understanding Joomla Templates. Ich versuche hier trotzdem einmal eine Zusammenfassung der absoluten Basics, damit man mal einen kurzen Überblick bekommt.

Die Vorlage: ein TwentyFourteen-Scribble

Mein Template soll am Ende so aussehen wie mein geliebtes WordPress-Theme Twenty-Fourteen, das ist schön schlicht und ohne Schnickschnack. Das Layout ist simpel:

scribble

scribble

Die Inhalte leihe ich mir mal beim Inselfisch-Kochbuch. Das Logo = Headerbild soll die gesamte Breite von 1260 px einnehmen, darunter kommt der Titel der Seite, evtl. auch der Untertitel = Slogan. Ich habe nur ein einfaches lineares Menü ohne Untermenüs. In die rechte Seitenleiste sollen die neuesten Beiträge, in die linke Seitenleiste meine Rezeptkategorien. In die Mitte kommt der jeweilige Content, der Footer schliesst die Sache nach unten ab. Das war schon alles, auf wieterführende Features wie Breadcrumb Navi oder sekundäres Menü verzichte ich großzügig, der Übersicht halber.

Schritt 1: Die Verzeichnisstruktur erstellen

Zunächst geht das erstmal im Trockenkurs, es gibt einiges an Vorarbeit zu erledigen, ehe man sich die Ergebnisse auch wirklich in Joomla anschauen kann. Wir fangen mal mit dem leichten Teil an: zwei Screenshots von unserem Templateentwurf für die Vorschau im Template-Manager. Einen nenne ich template_preview.png, 400x300px, den zweiten template_thumbnail.png, 200×50 px. Beide kommen in mein Template-Verzeichnis, das hat den Arbeitstitel Evis2014.

template_preview

template_preview

Dann lege ich noch einen Unterordner namens css und einen zweiten namens images an. Das wäre schonmal die komplette Verzeichnisstruktur.

verzeichnisstruktur

verzeichnisstruktur

Die erste Template-Datei: templateDetails.xml

Dreh- und Angelpunkt unseres neuen Templates ist die definierende xml-Datei. Wie die für die einzelnen Joomla-Versionen aussehen sollte, ist hier bei joomla-templates hervorragend dokumentiert, dort ist vor allem auch erklärt welche Komponenten Pflicht sind und welche nur kann.

Meine templateDetails.xml ist sehr schlicht gehalten, Den Header habe ich mir bei joomla-templates kopiert:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="3.0" type="template" client="site">

Darauf folgen die persönlichen Informationen über Templatenamen und Author:

<name>Evis2014</name>
<author>Evi Leu</author>
<creationDate>30. März 2018</creationDate>
<description>Mein Joomla-Nachbau des WordPress-Templates Twenty Fourteen</description>

Jetzt wirds gehaltvoller: man muss Joomla mitteilen, welche Dateien mit im Spiel sind (die Liste werden wir nachher noch abspecken):

<files>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>offline.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>

<filename>css/formate.css</filename>
<filename>images/logo.png</filename>

</files>


Die Dateien existieren natürlich noch gar nicht alle, aber wir werden sie jetzt der Reihe nach anlegen.

Der letzte Abschnitt: die Template Positions (eine Arbeitsversion, das wird sich später noch etwas ändern:

<positions>
<position>oben</position>
<position>left</position>
<position>breadcrumb</position>
<position>search</position>
<position>right</position>
<position>footer</position>
</positions>

Fehlt noch das schliessende Tag für die Extension:

</extension>

Das wars erstmal, und jetzt gehen wir dran, unsere Dateien auch anzulegen.

Die weiteren Template-Dateien

  • index.html: eine leere HTML-Seite
  • component.php, error.php, offline.php : kann man sich von einem anderen Joomla-Template kopieren oder auch weglassen (dazu später mehr)
  • css/formate.css legen wir zunächst als leere Datei im Ordner css an
  • images/logo.png wird unser Headerbild, das sollte 1260px breit sein.

Das sollte für den Anfang mal genügen. Für die index.php, das Grundgerüst unserer Seite, gibts einen neuen Beitrag.