Joomla-Tipps.net

Joomla 1.5 Template Tutorial

Ein einfaches leeres Template

Um die Inhalte eines Templates zu verstehen, sehen wir uns zuerst ein leeres Joomla! Template an.

Die Templatedateien

Die Dateien müssen in das /templates Verzeichnis der Joomla!-Installation kopiert werden. Wenn zum Beispiel zwei Templates installiert sind, sieht das Verzeichnis so aus:

/templates/element
/templates/voodoo

Beachten sie, daß der Verzeichnisname des Templates der gleiche wie der Name des Templates sein muss, in diesem Fall element und vodoo. Offensichtlich sind diese casesensitiv und dürfen keine Umlaute beinhalten. Innerhalb des Template-Verzeichnisses befinden sich folgende Dateien:

/element/templateDetails.xml
/element/index.php

templateDetails.xml

index.php

In den meisten Templates werden weitere Dateien benutzt. In der Regel (aber von Joomla! nicht vorgeschrieben) werden diese wie folgt benannt und gespeichert:

/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png

Beispiele:

templateDetails.xml

In der templateDetails.xml müsen alle Dateien enthalten sein, die im Template eingebunden werden. Weiterhin sind dort Informationen über den Autoren und ein Copyright vorhanden. Manche davon werden im Backend Template Manager angezeigt.

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<creationDate>August 2007</creationDate>
<author>Barrie North</author>
<copyright>GPL</copyright>
<authorEmail> compassdesigns@gmail.com</authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description>First example template for Chapter 9 of the Joomla Book<
/description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
<params>
<param name="colorVariation" type="list" default="white" label="Color
            Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
</param>
</params>
</install>

• <install version="1.5" type="template">.
Anweisung für den Joomla!-Installer, die Option type="template" informiert ihn darüber, daß ein Template installiert werden soll.
• <name>TemplateTutorial15</name>.
Der Name des Templates. Dieser hier angegebene Name wird benutzt, um das Verzeichnis im Joomla! Templates Verzeichnis anzulegen. Deshalb dürfen hier keine Zeichen enthalten sein, mit denen das Dateisystem nicht umgehen kann, z.B. Leerzeichen. Wenn Sie das Template manuell installieren, müssen Sie ein Verzeichnis anlegen, dessen Name identisch mit dem hier angegebenen ist.
• <creationDate>August 2007</creationDate>
Das Datum, an dem das Template kreiert wurde. In diesem ist ein bestimmtes Format nicht vorgeschrieben und kann z.B. so aussehen: May 2005, 08-June-1978, 01/01/2004 etc.
• <author>Barrie North</author>.
Der Name des Templateautoren
• <copyright>GPL</copyright>. Alle Copyright-Informationen sind hier aufgeführt. Ein Beitrag hierzu im Joomla! Forum: Licensing Primer for Developers & Designers
• <authorEmail>...</authorEmail>.
Die E-Mail Adresse, unter welcher der Autor erreicht werden kann.
• <authorUrl>www.compassdesigns.net</authorUrl>
Die Website des Autoren
• <version>1.0</version>.
Die Version des Templates
• <files></files>. Der "files" Abschnitt beinhaltet alle Dateien wie z.B. PHP Dateien oder das Previewbild des Templates. Jede hier aufgeführte Datei ist von <filename> </filename> umgeben.

  <files>
  <filename>index.php</filename>
  <filename>templateDetails.xml</filename>
  <filename>js/somejsfile.js</filename>
  <filename>images/threecol-l.gif</filename>
  <filename>images/threecol-r.gif</filename>
  <filename>css/customize.css</filename>
  <filename>css/layout.css</filename>
  <filename>css/template_css.css</filename>
  </files>
  

  Alle Bilddateien, welche vom Template genutzt werden, sind hier aufgeführt. Wieder ist jeder Eintrag von <filename> </filename> umgeben. Die Pfadinformationen sind relativ zum Wurzelverzeichnis (Root) des Templates angegeben. Beispiel: Wenn sich die Bilder im Unterverzeichnis /images befinden, wäre der korrekte Pfad: <filename>images/my_image.jpg</filename> Hier befinden sich auch die Stylesheets. Wieder ist der Dateiname in <filename> </filename> eingerahmt und der Pfad relativ zum Root des Templates angegeben

index.php

Die index.php beinhaltet eine Kombination von X(HTML) und PHP, in der alles hinsichtlich des Layouts und der Präsentation der Seiten festgelegt ist. Zuerst sehen wir uns den kritischen Teil an, der für ein valides Template notwendig ist: Den DOCTYPE zu Beginn der index.php. An erster Stelle der index.php befindet sich folgendes:

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Die erste PHP-Zeile stellt sicher, daß der Code aus Sicherheitsgründen nicht direkt aufgerufen werden kann.

Der DOCTYPE einer Webseite ist maßgeblich daran beteiligt, wie die Seite im Browser angezeigt wird und wie im besonderen CSS interpretiert wird. Eine Aussage von alistapart.com:

[Information on W3C's site about doctypes is] "written by geeks for "geeks. And when I say geeks, I don't mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She's Got Mail.

Wie auch immer gibt es mehrere DOCTYPEs, die Sie nutzen können. Grundsätzlich informiert der DOCTYPE den Browser darüber, wie eine Webseite interpretiert wird, "strict" oder "transitional" beispielsweise.

Seit dem Beginn des WWW bieten verschiedene Browser auch eine unterschiedliche Unterstützung von CSS. Dies heißt zum Beispiel, daß der Internet Explorer 6 nicht die Anweisung "min-width" versteht, mit ihr wird die minimale Seitenbreite vorgegeben. Um diesen Effekt zu erzeugen, sind "hacks" im CSS notwendig.

Strict bedeutet, daß HTML oder XHTML genau den Standards entsprechend interpretiert wird. Ein transitional DOCTYPE erlaubt dagegen einige kleinere Abweichungen vom Standard.

Um die Sache noch zu komplizieren, gibt es einen sogenannten Quirksmode. Wenn der DOCTYPE falsch, veraltet oder einfach nicht angegeben ist, wechselt der Browser in den Quirksmode. Dies bezeichnet den Versuch des IE, rückwärts kompatibel zu sein, er interpretiert die Seite in Gestalt des IE 4.

• Der Aufruf des DOCTYPE erfolgt direkt von der W3C Webseite. Der Link endet so:

  DTD/xhtml1-strict.dtd

  Dieser relative Link muss dann in einen mit vollem Pfad umgesetzt werden
• Microsoft hat für den IE 6 eine Einstellung, um den Quirksmode einzuschalten. Dies geschieht, indem sich eine XML Anweisung vor dem DOCTYPE befindet.

  Hier ein XML-Statement (nach dem DOCTYPE):

  <html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="<?php echo $this->language; ?>"
  lang="<?php echo $this->language; ?>" >
  

Die Betrachtung des Quirksmode ist wichtig. In diesem Tutorial werden wir ausschließlich für den IE6+ entwickeln. Wir stellen also sicher, daß der Browser sich im Standard-Modus befindet. Dies minimiert das spätere Einbringen von Hacks.

Nützliche Links, welche helfen, DOCTYPE und Quirksmode zu verstehen

• http://www.quirksmode.org/css/quirksmode.html
• http://www.alistapart.com/stories/doctype
• http://www.w3.org/QA/2002/04/Web-Quality
• http://forum.joomla.org/index.php/topic,7537.0.html
• http://forum.joomla.org/index.php/topic,6048.0.html

Mehr über die index.php

Sehen wir uns die Struktur des Kopfteils (Header) näher an. Wir wollen diesen so klein wie möglich halten, aber dennoch ausreichend für eine produktive Seite.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted
access' ); ?>
<!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"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/template.css" type="text/css" />
</head>

Den DOCTYPE haben wir bereits besprochen. Die Anweisung <?php echo $this->language; ?> lädt die Sprache aus der globalen Konfiguration.

Die nächste Zeile sorgt für die Einbindung weiterer Zeilen für den HEAD Bereich.

<jdoc:include type="head" />

Auch hier werden die Informationen ausgegeben, die in der globalen Konfiguration eingestellt worden sind.

<title>Welcome to the Frontpage</title>
<meta name="description" content="Joomla! - the dynamic portal engine
and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content
Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="http://www.compassdesigns.
net/content/frontpage/feed/1/rss/" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="http://www.compassdesigns.
net/content/frontpage/feed/1/atom/" rel="alternate"
type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.
5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.


5RC2/media/system/js/caption.js"></script>

Viele dieser Ausgaben werden dynamisch abhängig von der aufgerufenen Seite (dem Artikel) aufgebaut. Sie beinhalen Metatags, das Favicon, RSS-Feed und einige Standard Javascript-Dateien.

Die letzte Zeile baut die Links zum Template-CSS auf.

<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/template.css" type="text/css" />

Die ersten zwei Dateien system.css und general.css beinhalten Joomla! Styles. Die letzte Datei beinhaltet das CSS des Templates, hier template.css genannt. Der PHP Code <?php echo $this->template ?> gibt den Namen des aktuellen Templates zurück. Durch diese Schreibweise im Gegensatz zur Angabe der tatsächlichen Pfade macht den Code universeller. Wenn Sie ein neues Template entwickeln, können Sie den kompletten Code einfach kopieren und müssen sich nicht um die Änderung kümmern.

Es können mehrere CSS Dateien für das Template angegeben werden. Zum Beispiel browserspezifische, dieses CSS wird vom IE6 eingebunden:

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]-->

Hier ein Beispiel für die Nutzung eines Template Parameter

<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/<?php echo $this->params->get('colorVariation'); ?>.css"
type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/<
?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

Ein leerer Template Body

Dies ist einfach. Sind Sie bereit?

Alles, was wir benötigen, sind Joomla! Statements, welche den Inhalt von Modulen und dem Mainbody ausgeben.

<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>

Wenn Sie sich jetzt die Seite ansehen, wirkt sie nicht sehr beeindruckend:

9.3 Template ohne Styles

Das Template gibt folgende Inhalte aus:

1. Name der Seite
2. Top Module
3. Left Module
4. Main Content
5. Right Module

Sie werden bemerkt haben, daß wir zum ersten Mal Joomla! spezifische Anweisungen benutzt haben, um die Ausgabe zu erzeugen:

<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

Die PHP echo-Anweisung gibt eine Zeichenkette aus der configuration.php aus. Hier ist es der Seitenname. Genauso einfach könnten wir folgendes ausgeben:

The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>

Die jdoc-Anweisung fügt diversen XHTML Code ein, sowohl von Modulen als auch von Komponenten.

Die folgende Zeile fügt die Ausgabe einer Komponente ein. Welche Komponente es ist, wird vom Menülink festgelegt.

<jdoc:include type="component" />

Diese Zeile fügt die Ausgabe einer Modulposition ein.

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

Die komplette Syntax:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Wir werden uns die verschiedenen Optionen noch später genauer ansehen.

CSSTemplateTutorialStep1

Dieses Template besteht aus zwei Dateien, die index.php und die templateDetails.xml. Ich habe alle Referenzen zu anderen Dateien entfernt, um eine Ausgabe ohne CSS zu erzeugen. Dies ist ein nützliches Template für Diagnosezwecke. Sie können es installieren und Fehler untersuchen, die bei einer Komponente oder einem Modul auftreten.