Eigene Joomla!-Templates entwickeln – Teil 3

Nachdem im vorherigen Tutorial die Deklaration des Dokumenttyps im Vordergrund stand, geht es jetzt mit dem Namensraum weiter. Anschließend folgt die Definition des Kopfbereichs. Was dann noch auf dem Weg hin zu einem vollständigen Kopfbereichs fehlt, sind der Joomla!-Dateikopf und die MooTools. All das wird in diesem Tutorial gezeigt.

Wir empfehlen:
Joomla!-Training

In diesem Tutorial wird erstmals eine Interaktion zwischen Template und Joomla! hergestellt. Damit das klappt, müssen sich die Template-Dateien an dem richtigen Platz befinden bzw. in Joomla! eingebunden sein. Da die Templates zum jetzigen Zeitpunkt noch nicht vollständig sind, lassen sie sich nicht über das Joomla!-Backend installieren. Das ist aber momentan auch gar nicht nötig. Denn Sie können auch ohne Installation dafür sorgen, dass Joomla! und Template zusammenarbeiten. Dafür ist nur etwas Handarbeit angesagt. Wichtig ist, dass Sie in Ihrem Webspace innerhalb der Joomla!-Installation die entsprechenden Dateien anlegen. Wie die Verzeichnisstruktur im Detail aussieht, wurde bereits in einem vorherigen Kapitel beschrieben.

Beachten Sie, dass Sie folgenden Schritte in dieser Form ausschließlich auf Testumgebungen durchgeführt werden sollten.
Legen Sie also im templates-Verzeichnis Ihrer Joomla!-Installation ein neues Verzeichnis an. Dieses Verzeichnis ist die "Heimat" Ihrer  neuen Templates.

Wichtig ist, dass dort eine index.php vorhanden ist. In dieser index.php befindet sich die HTML-Grundstruktur Ihres Templates. Damit sind die Vorarbeiten zunächst einmal abgeschlossen. Zu sehen ist das Template im Backend jetzt übrigens noch nicht.

Damit das klappt, muss die templateDetails.xml angelegt und mit den passenden Werten ausgestattet werden. Dazu dann aber später mehr. Jetzt wird zunächst noch der Kopfbereich der index.php ausgebaut.
Im vorherigen Tutorial wurde der Dokumenttyp angegeben. Weiter geht es mit der Definition des Namenraums. Wenn Sie ein XHTML-Dokument vor sich haben, dann sieht der Namensraum folgendermaßen aus:

http://www.w3.org/1999/xhtml

Beachten Sie, dass Sie ein XHTML-Dokument nur dann nach XHTML-strict validieren können, wenn ein entsprechender Namensraum angegeben wird. Sie sollten sich also von vornherein angewöhnen, einen Namensraum zu definieren. Das betreffende Attribut für die Angabe des Namensraums lautet xmlns und wird folgendermaßen verwendet:

<html xmlns="http://www.w3.org/1999/xhtml">

Damit ist die Definition des einleitenden html-Elements allerdings noch nicht vollständig. Denn auch die im Dokument verwendete Sprache muss angegeben werden. Und genau hier beginnt – zumindest theoretisch – das Zusammenspiel zwischen Joomla! und dem Template. Denn natürlich könnte man die Dokumentsprache fest in die index.php schreiben. Eleganter ist es aber freilich, wenn man die im Joomla!-Backend eingestellte Sprache ausliest und dynamisch in die index.php schreiben lässt.

Die verwendete Sprache wird über das lang-Attribut angegeben. Um die im Backend eingestellte Sprache auszulesen, wird die folgende Syntax verwendet:

<?php echo $this->language; ?>

Hierüber wird auf den language-Wert von Joomla! zugegriffen. Insgesamt sieht die Definition dann in der index.php folgendermaßen aus:

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

Vielleicht wundern Sie sich, dass das lang-Attribut zwei Mal auftaucht, nämlich einmal als xml:lang und einmal als lang. Beide Varianten erfüllen denselben Zweck. Allerdings  bevorzugen XHTML-Parser in aller Regel xml:lang. Dieses Attribut wird aber wiederum von reinen HTML-Parsern nicht interpretiert. Daher hat es sich durchgesetzt, dass man beide Attribute parallel angibt.

Angenommen, im Backend wird jetzt als Sprache Deutsch eingestellt. Dann sieht die im Frontend generierte Ausgabe innerhalb der index.php folgendermaßen aus:

Dem lang– und dem xml:lang-Atttribut wurde als Wert de-de zugewiesen. Anders sieht das Ganze aus, wenn Englisch eingestellt wird. Dann nämlich ergibt sich folgendes Bild:

Hier wurde dann automatisch das Sprachkürzel en-gb eingefügt. Auf diese Weise wird die Sprache immer automatisch den aktuellen Gegebenheiten angepasst.
Insgesamt sollte die Syntax innerhalb der index.php jetzt folgendermaßen aussehen:

<!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; ?>" >

Die Definition des Dokumenttyps, des Namensraums und der Dokumentsprache sind damit abgeschlossen. Weiter geht es mit dem eigentlichen Kopfbereich, also dem, was innerhalb des head-Elements steht.

Kopfbereich definieren
Eine erste Interaktion fand bereits zwischen Template und Joomla! statt. Jetzt wird noch einen Schritt weitergegangen. Denn nun wird das erste Joomla!-Modul eingebunden. (An dieser Stelle gleich der Hinweis, dass das Einfügen von Modulen noch in dem ein oder anderen Tutorial ausführlicher beschrieben wird.)

<head>
   <jdoc:include type="head" />
</head>

Über diese Syntax wird der Kopfbereich von Joomla! eingebunden. Die Zeile <jdoc:include type="head" /> bewirkt dabei die folgende Ausgabe:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>PSD-Tutorials</title>
<link href="/db_business/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/db_business/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/db_business/templates/business_template_980/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript" src="/db_business/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/db_business/media/system/js/caption.js"></script>

Ohne bereits jetzt zu weit ins Detail zu gehen: Mit Joomla! 1.5 wurde eine neue Syntax zum Einbinden von Modulen eingeführt. Verwendet wird jetzt das jdoc-Element. In Joomla! 1.0 sah das noch ganz anders aus. Dort wurde das folgendermaßen gelöst:

<?php mosLoadModules('user3',-2);?>

Diese Syntax ist veraltet. Überall, wo in einem Template für Joomla! 1.5 also Module angezeigt werden sollen, müssen Sie auf die neue Syntax zurückgreifen. Insgesamt sollte Ihre index.php jetzt aus den folgenden Elementen bestehen. (Zusätzlich natürlich zu dem allgemeinen Grundlayout, das Sie wahrscheinlich bereits definiert haben.)

<?php
/**
 */

// kein direkter Zugriff
defined( '_JEXEC' ) or die( 'Zugriff verboten' );
?>
<!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" />
</head>
<body>
<!-- Inhalt der index.php //-->
</body>
</html>

Diese wenigen Zeilen genügen bereits, um im Frontend einen vollständigen Kopfbereich zu generieren.
Eine hilfreiche Ergänzung sollten Sie noch aufnehmen. Erweitern Sie die PHP-Syntax oberhalb des einleitenden html-Elements.

<?php
/**
 */
// kein direkter Zugriff
defined( '_JEXEC' ) or die( 'Zugriff verboten' );
// Mootools laden
JHTML::_('behavior.mootools');
?>

Dadurch werden die sogenannten MooTools-Skripte geladen.

Diese brauchen Sie beispielsweise, wenn bestimmte Bildergalerien o.ä. verwendet werden. Auch zu diesem Thema gibt es natürlich noch ausführliche Informationen.

Fazit
Das Grundgerüst der index.php steht. Was jetzt noch fehlt, ist das Laden bestimmter Module und des eigentlichen Dateiinhalts. Wie das funktioniert und was dafür an zusätzlichen Definitionen nötig ist, wird in den nächsten Tutorials weiter beschrieben.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training