Ein Template für Joomla erstellen

27-10-2014

Aus einer HTML Vorlage lässt sich sehr schnell ein Template für Joomla erstellen.

Hier erkläre ich, wie man aus einer HTML Seite ein Template für Joomla erstellt. Die offizielle Anleitung: http://docs.joomla.org/Creating_a_basic_Joomla!_template

Als erstes sollte man sich über die Modulpositionen Gedanken machen. Wurde das gemacht kann man eigentlich schon beginnen.

Hier die verwendete HTML - Struktur:

<!doctype html>
<head>
<title>Titel der Webseite</title>
<link rel="stylesheet" href="design.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<div id="news">
</div>
<main id="content">
<article>
</article>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

Als Beispiel erstelle ich auf Basis dieser HTML-Struktur einen einfachen Template namens Demotemplate. Die Modulpositionen definiere ich wie folgt:

  • top (Navigation)
  • news (News)
  • right (Rechter Bereich)
  • footer (Fusszeile)

1. Schritt - Ordner und Dateistruktur erstellen

Im Joomla Ordner hat es ein Ordner templates. Dort platziere ich einen neuen Ordner für mein Template: demotemplate.

Damit das Template funktioniert brauchts die folgenden zwei Dateien:

  • index.php
  • templateDetails.xml

Für meinen Beispiel demotemplate sieht die Ordnerstruktur wie folgt aus:

  • css
  • images
  • javascript
  • index.php
  • templateDetails.xml

Erklärung: Ich habe drei neue leere Ordner für meine Daten erstellt (css, images, javascript), dazu die 2 wichtigen Dateien index.php und templateDetails.xml erstellt.

2. Schritt - Die CSS-Datei erstellen

Ich erstelle die Datei design.css mit den CSS-Code, den ich für das Template brauchen werde und platziere diese Datei im Ordner css.

3. Schritt - Die templateDetails.xml Datei mit Inhalt füllen

Ich kopiere hierfür die templateDetails.xml Datei aus der Anleitung und verändere den Inhalt. Wichtig sind hier folgende Punkte:

  • extension version (Joomla Version angeben)
  • files (alle Dateien und Ordner angeben)
  • positions (alle Modulpositionen angeben)

Für den Demotemplate sieht die templateDetails.xml Datei so aus:

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>demotemplate</name>
<creationDate>2014-10-27</creationDate>
<author>Javier Gonzalez</author>
<authorEmail>admin@javigonzalez.ch</authorEmail>
<authorUrl>http://www.javigonzalez.ch</authorUrl>
<copyright>Javi Gonzalez 2014</copyright>
<license>GNU/GPL</license>
<version>1.0.1</version>
<description>Demo Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>images</folder>
<folder>js</folder>
</files>
<positions>
<position>top</position>
<position>news</position>
<position>right</position>
<position>footer</position>
</positions>
</extension>

4. Schritt - Die index.php Datei mit Inhalt füllen

Ich kopiere hierfür die index.php Datei aus der Anleitung und ändere den Inhalt und erstelle meine Modulpositionen gemäss der templateDetails.xml Datei. Was dabei wichtig ist und nicht verändert werden darf wird in der Anleitung gut erklärt. Folgende Codezeilen sind wichtig:

Head Inhalt von Joomla wird eingefügt:

<jdoc:include type="head" />

Inhalte der Beiträge werden eingefügt:

<jdoc:include type="component" />

Modul mit den entsprechenden Namen wird eingefügt, muss in der templateDetails.xml Datei aufgeführt werden:

<jdoc:include type="modules" name="" />

Für mein Beispiel sieht die index.php Datei wie folgt aus:

<?php defined( ''_JEXEC'' ) or die( ''Restricted access'' );?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/demotemplate/css/design.css" type="text/css" />
</head>
<body>
<header>
</header>
<nav>
<jdoc:include type="modules" name="top" />
</nav>
<div id="news">
<jdoc:include type="modules" name="news" />
</div>
<main id="content">
<article>
<jdoc:include type="component" />
</article>
</main>
<aside>
<jdoc:include type="modules" name="right" />
</aside>
<footer>
<jdoc:include type="modules" name="footer" />
</footer>
</body>
</html>

5. Schritt - Joomla mitteilen dass ein neues Template vorhanden ist

Erweiterungen => Erweiterungen => Überprüfen => Rechter Menü - auf Überprüfen klicken => Template auswählen => Rechter Menü - auf Installieren klicken.

6. Schritt - Template aktivieren

Erweiterungen => Templates => Template als Standard setzen.

Danach muss man nur noch die Module an die Modulposition für diese Template zuweisen, sonst tauchen sie nicht auf.

Erweiterungen => Module => Position vergeben.

Kommentar eingeben