Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Vorwort
1 Einleitung
2 Installation
3 Frontend
4 Backend
5 Inhalte erstellen und verändern
6 Eine erste Webseite
7 Das Website-Design
8 Benutzer und Bereiche
9 Module, Plug-ins, Komponenten
10 Pflege der Webseite
11 Eine Site aufbauen
12 Was macht ein Template aus?
13 Tools zur Template-Erstellung
14 Barrierefreiheit
15 Aus der Trickkiste
16 Joomla! als professionelle Geschäftsplattform
17 Online-Shop: VirtueMart
18 Formulare: BreezingForms und ChronoForms
19 Dokumentenverwaltung: Docman und Attachments
20 Kalender: JEvent und iWebCal
21 Bildergalerien: Zoom Media Gallery und JoomGallery
22 Joomla! als Community-Treff
23 Weblogs: IDoBlog und MMS Blog
24 Wiki: JoomlaWiki
25 Forum: FireBoard
26 Gästebücher
27 Noch mehr Kommunikation
28 Installation beim Webhost
29 Backup und Upgrade
30 Tools
31 Standard-Erweiterungen
32 Mehrsprachigkeit
33 Suchmaschinenoptimierung
34 Statistik
35 Performance
36 Datentransfer und FTP-Modus
37 Sicherheit
38 Troubleshooting
39 Mein erstes Modul
40 Die Joomla!-API
41 Plug-ins erstellen
42 Eine eigene Komponente
A Parameter der unterschiedlichen Menütypen
B Die Joomla!-API
C Glossar
D Inhalt der DVD
Stichwort
Ihre Meinung?

Spacer
<< zurück
Joomla! 1.5 von Anja Ebersbach, Markus Glaser, Radovan Kubani
Das umfassende Handbuch
Buch: Joomla! 1.5

Joomla! 1.5
geb., mit DVD
820 S., 34,90 Euro
Rheinwerk Computing
ISBN 978-3-89842-881-1
Pfeil 12 Was macht ein Template aus?
Pfeil 12.1 HTML-Bereich
Pfeil 12.2 Der CSS-Bereich
Pfeil 12.3 Das Drumherum

»Tanzen ist die senkrechte Ausführung eines waagrechten Verlangens eines aufrechten Individuums!« Unbekannt

12 Was macht ein Template aus?

Um Ihnen einen genaueren Blick hinter die Kulissen eines Templates zu verschaffen, werden wir nun eine eigene Vorlage Schritt für Schritt erstellen. Das Beispiel soll Ihnen nur einige Möglichkeiten näherbringen, und es wird nicht den ganzen Umfang eines vollständig ausgeklügelten Templates erreichen. Dies ist auch kaum sinnvoll, da es bei der Umsetzung keinen vorgeschriebenen Weg gibt. Es gibt jedoch einige Regeln, die Sie beachten müssen.

Die wichtigsten Bestandteile eines Templates sind fünf Komponenten, und diese dürfen nicht fehlen:

1. ein Verzeichnis /images
2. ein Verzeichnis /css
3. die Datei index.php
4. die Datei templateDetails.xml
5. das Bild template_thumbnail.png

Das /images-Verzeichnis wird die Slices, also Grafiken unseres Layouts enthalten. Im Verzeichnis /css bringen wir die Datei template.css unter. Sie enthält die Formatierungen für das Template. Oft finden Sie hier auch die Datei editor.css. Joomla! bietet seit der Version 1.5 die Möglichkeit, auch die Gestaltung des WYSIWYG-Editors über CSS zu steuern. Die Datei index.php enthält die Codierung des Layouts. Die XML-Datei dient als Zusammenfassung relevanter Elemente für das Template. Ihre Benennung muss genau templateDetails.xml lauten. Neben einer kurzen Beschreibung, sollten hier auch die einzelnen Dateien in den jeweiligen Verzeichnissen aufgeführt sein. Das betrachten wir aber im weiteren Verlauf noch genauer. Zu guter Letzt gibt es für das Template noch eine kleine Voransicht, die Sie in der Datei template_thumbnail.png speichern. Diese Datei muss sich auf derselben Ebene mit der PHP und der XML-Datei befinden.

Diese Dateien sollten sich später im Templates-Verzeichnis Ihrer Website befinden. In unserem Beispiel wäre das also joomla/templates. Hier erstellen Sie am besten noch ein eigenes Unterverzeichnis für das neue Template, in dem sich später die fünf Bestandteile befinden müssen.

Bevor wir gleich genauer auf das Template eingehen, sollten Sie Ihre Verzeichnisstruktur erzeugen. Erstellen Sie, wie oben beschrieben, ein Unterverzeichnis für das neue Template. Darin brauchen Sie dann noch zwei weitere Verzeichnisse, nämlich /css und /images.

Das Erstellen des Templates lässt sich in zwei Schritte aufteilen. Wir müssen die PHP-Datei, index.php, erzeugen, die unser Layout im Browser darstellen wird, und wir brauchen die CSS-Datei, template.css, die die Formatierung der einzelnen Elemente enthalten soll.


Rheinwerk Computing - Zum Seitenanfang

12.1 HTML-Bereich topZur vorigen Überschrift

Das Template, also die index.php, sollte im Anfangszustand etwa folgendermaßen aussehen:

01  <?php echo "<?xml version=\"1.0\"?>"; ?> 
02  <?php 
03    defined( '_JEXEC' ) or die( 'Restricted access' ); 
04  ?> 
05  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    Umbruch 
06            Transitional//EN"    Umbruch 
07            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    Umbruch 
08            transitional.dtd"> 
09  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php Umbruch 
10  echo $this->language; ?>" lang="<?php echo $this->language;Umbruch 11  ?>"> 
12  <head> 
13     <jdoc:include type="head" /> 
14     <meta http-equiv="Content-Type" content="text/html;    Umbruch 
15                  <?php echo _ISO; ?>" /> 
16     <link rel="stylesheet" href="templates/<?php echo $thisUmbruch  
17  ->template ?>/css/template.css" type="text/css" /> 
18  </head> 
19  <body> 
20  </body> 
21  </html>

Ein leeres Template beinhaltet einige Dinge, die speziell für Joomla! eine wichtige Rolle spielen. Diese Informationen müssen auf jeden Fall vorhanden sein.

  • Der erste wichtige Punkt betrifft die Sicherheit Ihres Templates. Die Zeilen 2–4 schützen Ihre Template-Dateien vor fremden Zugriffen und Änderungen.
  • Die Zeilen 16 und 17 definieren die Verbindung zu unserer CSS-Datei, die wir später noch erstellen werden. Ohne diesen Link würde Ihre Seite unformatiert im Webbrowser dargestellt werden.

Damit wäre das Grundgerüst für unser HTML-Template geschaffen. Sie können diese Datei mit einem einfachen Texteditor oder einem HTML-Editor erstellen. Der Großteil dieser Template-Datei besteht aus HTML. Die wenigen PHP-Variablen werden Sie auch ohne große PHP-Kenntnisse schnell anwenden können.

Die nächsten Einträge werden wir im <body>-Bereich vornehmen. Es müssen nun unterschiedliche Bereiche erstellt werden, in denen sich später z. B. das Menü, der Header, der Content oder die rechte Spalte befinden sollen. Diese Bereiche erzeugen Sie, indem Sie entweder eine Tabelle mit der entsprechenden Anzahl Zellen aufziehen, oder Sie verwenden Div-Layer.

Tabellen bzw. Layouttabellen wurden lange Zeit zur Gestaltung des Layouts verwendet. Auch jetzt bieten sie noch den Vorteil, dass sie bei älteren Browsern das Layout in der gewünschten Form umsetzen. Ihre Verschachtelung und die absoluten Größenangaben widersprechen jedoch dem Prinzip der Barrierefreiheit [Dabei handelt es sich um ein Designprinzip, bei dem versucht wird, die Nutzung einer Webseite unabhängig von körperlichen und technischen Hürden zu ermöglichen. ] . Daher sollten Tabellen möglichst nur noch verwendet werden, um tabellarische Daten darzustellen. Dagegen lassen sich Ebenen frei positionieren und sind im Vergleich zu Tabellen barrierefrei. In unserem Beispiel werden wir daher das Layout überwiegend mithilfe von Div-Layern erstellen. Die fertigen Template-Dateien finden Sie auch auf der DVD im Verzeichnis template/la-joomla.

Kommen wir nun zum eigentlichen Hauptteil. In unserer index.php werden wir nun die Zeilen 21 und 22 um einige Codesegmente erweitern. Es fehlen uns noch die Joomla!-Variablen und die Layer, mit denen wir unser Layout umsetzen möchten.

<body> 
<div id="container"> 
  <div id="tanzheader"> 
    <h1 id="tanz_header_logo"> 
    <?php echo $mainframe->getCfg('sitename');?> </h1> 
    <h1 id="tanz_header2”><?php echo $mainframe Umbruch 
    ->getCfg('sitename');?> 
    </h1> 
  </div>

Wir beginnen mit einem Layer, der als Container für die weiteren Layer dienen wird. Details zu den einzelnen Ebenen legen wir später in der entsprechenden CSS-Datei fest. Anschließend folgt der Layer für unsere Kopfzeile. Die Anweisung <?php echo $mainframe->getCfg('sitename');?> gibt den Namen der Site wider.

In der Ebene contentarea werden die weiteren Bereiche der Website definiert:

  <div id="contentarea"> 
    <div id="tanz_menu"><jdoc:include type="modules" name="left" 
/> 
    </div> 
    <div id="ornament">Ornament</div> 
    <div id="content">:: <jdoc:include type="module" 
name="breadcrumbs" /><br/><br/> 
unser inhalt :: <jdoc:include type="component" /> 
<br/><br/> 
    </div> 
    <div id="foto">foto</div> 
    <div id="extra"><jdoc:include type="modules" name="right" /> 
    </div> 
  </div>

Zunächst kommt im Layer tanz_menu das Menü der Website. Dazu wird das Joomla!-Modul "left" aufgerufen. Dieses Modul besteht aus Hauptmenü, Login und Syndicate. Wird einer dieser Bereiche nicht benötigt, muss er über das Joomla!-Backend abgeschaltet werden (siehe Kapitel 9, »Module, Plug-ins, Komponenten«). Direkt an den Layer tanz_menu schließt sich der kleine Layer ornament an. Hier wird sich später eine Grafik befinden. Den nächsten großen Bereich stellt der eigentliche Inhalt dar. Als Erstes wird der Klickpfad über die Anweisung <jdoc:include type="module" name="breadcrumbs" /> ausgegeben. Danach wird mit <jdoc:include type="component" /> der Inhalt dargestellt.

Außerdem werden noch die zwei Layer der rechten Spalte definiert. Der zweite Layer enthält die Anweisung zum Aufruf der Module »Umfrage« und »Wer ist online«. Auch hier können Sie über das Backend entscheiden, welches der Module tatsächlich im Frontend sichtbar sein soll.

Jetzt bleiben uns nur noch die Fußzeile und der Abschluss des HTML-Dokuments:

  <div id="footer"> 
    <div align="center"> 
    </div> 
  </div> 
</div> 
</body> 
</html>

Der Footer ist in diesem Fall leer. Hier können Sie direkte Links auf Beiträge erstellen, die nicht über ein Menü verfügbar sein müssen. Einen direkten Link auf einen Joomla!-Beitrag erstellen Sie, indem Sie einfach die URL mit der entsprechenden Artikel-ID angeben, z. B. <a href="index.php?option=com_content&view=article&id=45">AGB</a>. Dieser Link verweist auf einen Beitrag mit der ID 45. Die ID ermitteln Sie, indem Sie in der Beitragsübersicht in der letzten Spalte des jeweiligen Beitrags die Nummer suchen. Über die direkte URL-Angabe können Sie auch komplette Bereiche ansprechen: index.php?option=com_content&view=section&id=8&Itemid=56

In diesem Beispiel wird der Bereich mit der ID 8 aufgerufen. Die Verknüpfung mit der Itemid=56 zeigt uns, dass gleichzeitig das Menü mit der ID 56 aktiv ist.

In unserem Beispiel wäre das der Bereich »Training« mit dem Menüpunkt Training:

Abbildung 12.1 Der Bereich mit der ID 8

Abbildung 12.2 Das Menü mit der ID 56

In unserem Beispiel haben wir fünf Module (»Hauptmenü«, »Anmelden«, »Syndication«, »Umfragen« und »Wer ist online«) auf zwei Modulpositionen (»left« und »right«) verwendet. Joomla! hatte in den Vorgängerversionen 27 vordefinierte Modulpositionen, auf die wir zurückgreifen können. Diese finden Sie weiterhin in verschiedenen Templates und in der Standardpositionierung der Kernmodule. Allerdings gab es sehr viele ausdrucksschwache Modulpositionen, wie »user1-9« oder »icon«. Mittlerweile können die Positionen für jedes Template individuell bestimmt werden. Die Positionen müssen einfach in der XML-Datei definiert werden (vgl. Abschnitt 12.3, »Das Drumherum«) und werden dann von Joomla! importiert.

Das ist allerdings nicht der einzige Unterschied zu der Vorgängerversion von Joomla!. Es gibt speziell im Bereich der index.php-Datei geänderte Aufrufe und neue Möglichkeiten im Vergleich zu älteren Joomla!-Versionen. In der folgenden Tabelle finden Sie eine Auflistung der wichtigsten Unterschiede zum Aufruf bestimmter Funktionen:


Tabelle 12.1 Neue Befehle für den Aufruf von Modulen und Funktionen

Joomla! 1.0 Joomla! 1.5

mosCountModules();

$this->countModules()

mosShowHead();

<jdoc:include type="head" />

$mosConfig_live_site;

$this->template

mosLoadModules ( 'left', –1);

<jdoc:include type="modules" name="left" style="raw" />

mosMainBody();

<jdoc:include type="component" />


Tabelle 12.2 fasst noch einmal alle wichtigen Aufrufe mit den verschiedenen Optionen und Attributen zusammen.


Tabelle 12.2 Befehle und Attribute für den Aufruf von Modulen

Aufruf Funktion

Das »type«-Attribut gibt den Typ an, der ausgegeben werden soll.

<jdoc:include type="component" />

Das Element »component« erscheint einmalig in unserem Template (im Bereich <body></body>) und ist verantwortlich für die Ausgabe des eigentlichen Inhalts im Content-Bereich.

<jdoc:include type="head" />

Das gilt auch für den Typ »head«. Über diesen Typ werden im <head>-Bereich der index.php die nötigen Skripten, Stile und Meta-Daten aufgerufen bzw. abgelegt.

<jdoc:include type="installation" />

Dieser Aufruf wird nur für das Joomla!-Installer-Template benötigt.

<jdoc:include type="message" />

»message« wird nur einmal im Template benötigt und gibt Fehler- bzw. Systemmeldungen aus.

Das Element module gibt ein einzelnes Modul an der entsprechenden Stelle im Template aus. Der Modultyp wird durch name= bestimmt, und die Darstellung kann abhängig vom Modul im Backend konfiguriert werden. Achten Sie darauf, dass es im Backend auch tatsächlich freigegeben wurde.

<jdoc:include type="module" name="breadcrumbs" />

Gibt den Klickpfad aus.

Mit dem zusätzlichen style-Attribut haben Sie bei einigen Modulen die Möglichkeit die Darstellungsform über das Template zu bestimmen. Folgende Möglichkeiten stehen zur Verfügung: table, horz, xhtml, rounded und outline.

<jdoc:include type="module" name="submenu" style="rounded" id="submenu-left" />

Hier wird der Modulposition »submenu« zusätzlich die ID »submenu-left« übertragen. So können die Elemente speziell über CSS oder PHP/Javascript angesprochen werden.

Möchten Sie einer Position mehrere Module zuweisen können, benötigen Sie das Attribut modules.

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

Auf der Position »top« können Sie nun verschieden Module positionieren.




Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück
  Zum Katalog
Zum Katalog: Joomla! 1.5 - Das umfassende Handbuch





Joomla! 1.5 -
Das umfassende Handbuch

Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Joomla! 3.5






 Joomla! 3.5


Zum Katalog: Top-Rankings bei Google und Co






 Top-Rankings bei
 Google und Co


Zum Katalog: Erfolgreiche Websites






 Erfolgreiche Websites


Zum Katalog: WordPress 4






 WordPress 4


Zum Katalog: Webseiten erstellen für Einsteiger






 Webseiten erstellen
 für Einsteiger


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2009
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de