Zum Inhalt

Inhaltsverzeichnis • Teil 4 - CMS • Joomla • Template erstellen
⇦ Joomla Erweiterungen / Typo 3 ⇨
23.07.2014 19:44:53

Template erstellen

Vorüberlegungen

Zunächst bauen wir uns ein Grundgerüst für ein Layout. Im Beispiel legen wir ein drei­spaltiges Layout mit Header und Footer an. Die Spalten heißen „sidebarLeft“, „sidebarRight“ und „Content“.

Um ein Template zu erzeugen, sollten sie zunächst ein Arbeitsverzeichnis erstellen und dort die Testdatei template_test.html anlegen. Neben dem Verweis auf eine CSS-Vorlage (im Beispiel css/format.css) sollten in der Datei Divisions (<div>) für „header“, „footer“, „sidebarLeft“, „sidebarRight“ und „Content“ stehen.

Editor - template_text.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Template Test</title>
  <link rel="stylesheet" href="css/format.css" type="text/css" />
</head>

<body>
<div id="wrap">

<div id="header">
  <img src="images/logo.png" />
</div>

<div id="sidebarLeft"><div class="padd">
  <ul class="nav">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a></li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
  </ul>
</div></div>

<div id="content"><div class="padd">
  <h1>Inhalt</h1>
  <p>mit Text und Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
</div></div>

<div id="sidebarRight"><div class="padd">
  <p>Anmeldung</p>
</div></div>

<div id="footer"><div class="padd">
  <p>Fußzeile</p>
</div></div>

</div>
</body>
</html>

Positioniert und gefärbt wird die Webseite in der CSS-Datei format.css, die im Unterverzeichnis css liegen sollte. Die drei Spalten werden dabei mit der Formatierung „float: left;“ erzeugt. Der zusätzliche <div class="padd"> setzt ein Padding im umgebenden <div> ohne das Layout zu zerstören (s. Boxmodell).

Natürlich ist diese Einteilung für das Joomla- Template nicht maßgeblich und kann beliebig an die eigenen Bedürfnisse angepaßt werden.

Editor - format.css
body          { background-color: #f0f0f0; }
#wrap         { margin: 0 auto; background-color: lightblue; border:1px solid black; }
#header       { background-color: lightblue; }
#sidebarLeft  { float: left; width: 20%; background-color: aqua; }
#content      { float: left; width: 60%; background-color: silver; }
#sidebarRight { float: left; width: 20%; background-color: aqua; }
#footer       { clear: both; background-color: lightblue; }
.padd         { padding: 1em; }

Perfektionieren sie erst diese Testdateien, bevor sie mit dem Erzeugen des eigentlichen Templates fortfahren.

In Template umwandeln

Um die Datei template_test.html in ein Template umzuwandeln, müssen sie sie zunächst in index.php umkopieren. Wie sie bereits wissen, ist Joomla in PHP programmiert und entsprechend ist das Template auch in dieser Sprache geschrieben.

Fügen sie ganz oben in die Datei die folgenden, roten Zeilen ein und passen sie den HTML-Header entsprechend an:

Editor - index.php
<?php
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
$itemid = $app->input->getCmd('Itemid', '');

JHtml::_('bootstrap.framework');
JHtmlBootstrap::loadCss();
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <jdoc:include type="head" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/format.css" type="text/css" />
</head>

Die ersten vier Zeilen holen Objekte und Variablen aus dem Joomla Framework. Die nächsten drei binden das Bootstrap Framework ein. Beide werden für den Zugriff auf und die Formatierung des Templates benötigt.

<jdoc:include type="head" /> erweitert den HTML-Header durch Joomla-Definitionen und ihre Eingaben in den entsprechenden Konfigurations­feldern (System / Konfiguration / Globale Metadaten). Damit bleibt der Header variabel anpassbar.

Nun müssen im Body noch die Joomla-Platzhalter statt des Beispieltextes eingefügt werden.

Editor - index.php
<body>
  <div id="wrap">
    <div id="header">
      <a href="<?php echo $this->baseurl ?>">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" />
      </a>
      <jdoc:include type="modules" name="banner" style="xhtml" />
      <jdoc:include type="modules" name="position-1" style="xhtml" />
    </div>
    <div id="sidebarLeft"><div class="padd">
      <jdoc:include type="modules" name="left" style="xhtml" />
      <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div></div>
    <div id="content"><div class="padd">
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
      <jdoc:include type="modules" name="position-3" style="xhtml" />
      <jdoc:include type="component" />
      <jdoc:include type="message" />
      <jdoc:include type="modules" name="debug" />
    </div></div>
    <div id="sidebarRight"><div class="padd">
      <jdoc:include type="modules" name="position-7" style="xhtml" />
      <jdoc:include type="module" name="search" style="xhtml" />
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div></div>
    <div id="footer"><div class="padd">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div></div>
  </div>
</body>
</html>

<jdoc:include type="component" /> ist der Platzhalter für den eigentlichen Inhalt wie Beiträge und/oder Kategorie­übersichten. <jdoc:include type="module" name="search" style="xhtml" /> wird vom Suchmodul verwendet. <jdoc:include type="message" /> zeigt System­nachrichten wie eine fehlgeschagene Anmeldung an. Und <jdoc:include type="modules" name="debug" /> gibt Fehlermeldungen aus, sofern dies in der Konfiguration eingeschaltet ist.

Alle anderen Platzhalter können für Modulpositionen verwendet werden. Die Positionen mit den Nummern sind zur Kompatibilität mit dem Protostar Template eingefügt.

Außerdem ist im Header eine Logo-Grafik (logo.png) eingebunden. Diese Datei liegt im Unterverzeichnis „images“. Konstrukte wie <?php echo $this->baseurl ?> (oder ->template) fügen an dieser Stelle den entsprechenden Basispfad (oder Template-Pfad) von Joomla ein.

Modul Stile (Styles)

Vorschau

Damit man sich eine Vorstellung vom Template machen kann, müssen zwei Vorschaubilder erstellt werden. Dazu machen sie eine Bildschirmkopie der Ausgabe des Template-Tests. Diese werden mit der Breite von 400 Pixeln als „template_preview.png“ und mit 200 Pixeln als „template_thumbnail.png“ gespeichert.

Installation

Damit ist das Template praktisch fertiggestellt. Es können noch die Dateien „component.php“ (Funktions­erweiteerung), „error.php“ (Fehlerseite) und „offline.php“ (Offline-Seite) ergänzt und angepasst werden. Diese können sie aus dem Protostar sowie Standard Templates kopieren oder aus der Beispieldatei extrahieren.

Zuletzt legen sie die Datei templateDetails.xml an, welche der Joomla Installation die Information liefert.

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

<name>Simplate</name>
<creationDate>22. November 2013</creationDate>
<description>Simple Template</description>
**Christian Hartnick</author>
<authorEmail>hilfe@hartnick.de</authorEmail>
<authorUrl>http://hilfe.hartnick.de</authorUrl>
<copyright>Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>2.5.0</version>

<files>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.html</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>favicon.ico</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
  <filename>css/format.css</filename>
  <filename>images/logo.png</filename>
</files>

<positions>
  <position>left</position>
  <position>breadcrumb</position>
  <position>search</position>
  <position>right</position>
  <position>footer</position>
  <position>banner</position>
  <position>position-1</position>
  <position>position-3</position>
  <position>position-7</position>
  <position>position-8</position>
</positions>

</extension>

Wie sie leicht erkennen können, werden hier alle wichtigen Informationen zum Template aufgeführt. Wenn hier Namen und Pfade nicht mit der Realität übereinstimmen, wird die Installation des Templates verweigert!

Zuletzt werden die Dateien und Verzeichnisse gezippt und können dann als Erweiterung installiert werden. (Achtung! Nicht das Verzeichnis sondern alle Dateien und Unterverzeichnisse zippen)

Zusammenfassung

⇦ Joomla Erweiterungen / Typo 3 ⇨
Nach oben