Verzeichnis

13.3 Templates selbst erstellen

Submitted by Hagen Graf on 31. December 2007 - 16:29

Jetzt wollen wir ein Template selbst erstellen. Bis zum fertigen Template-Paket gibt es viele Dinge zu beachten. Wir gehen in mehreren Schritten vor.

ACHTUNG: Für die Template Entwicklung in diesem Kapitel gibt es freie Filme aus dem Joomla! 1.5 Video-Training.

13.3.1 Konzept

Bevor Sie etwas tun, sollten Sie ein Konzept erstellen. Gerade im Bereich der Template-Erstellung fängt die Arbeit mit einer Skizze oder einer Grafik an. Ob Sie diese Skizze mit einem Bildbearbeitungsprogramm wie dem kommerziellen Adobe Photoshop⁷, dem in Windows enthaltenen Microsoft Paint, dem Open Source-Programm Gimp⁸ oder tatsächlich mit einem Zettel und Buntstiften erstellen, ist Ihre Sache.

Feste Größe oder variabel (fluid) oder beides?

Sie können zwei Arten von Templates erstellen. Templates, die sich in der Struktur der Größe des Browserfensters anpassen, und Templates, die eine feste vorgegebene Größe haben. Ein Beispiel zum flexiblen Layout: Wenn jemand 2.048 Pixel Platz auf seinem Bildschirm hat und das Browserfenster maximiert, so wird Ihre Seite entsprechend auseinandergezogen. Wenn Sie grafische, nicht skalierbare Elemente wie Logos und Schriftzüge in Ihrem Template benutzen, kann das sehr eigenartig aussehen. Sie haben also keine echte Kontrolle über das Aussehen.

Die andere Variante ist, sich für eine bestimmte Auflösung zu entscheiden und alle Elemente auf das Pixel genau im Template zu positionieren. Das hat den Vorteil, dass Ihre Homepage immer so aussieht, wie Sie das wollen. Leider wissen Sie nicht, mit welcher Bildschirmauflösung Ihre Seite betrachtet wird. Auf einem Bildschirm mit der Auflösung von 800 x 600 Pixel ist Ihre Seite bildschirmfüllend. Auf einem großen Bildschirm mit 1400 x 1050 Pixel belegt sie nur etwa ein Viertel der Fläche und sieht etwas verloren aus.

Sie müssen die Vor- und Nachteile abwägen und können sich dann für eine Variante entscheiden, oder aber Sie denken in Richtung Barrierefreiheit (siehe Kapitel 14) und bieten beide Varianten an. Sie kennen bestimmt Websites, auf den denen man die Schriftgröße verändern kann. Neben den Buttons zur Schriftgröße gibt es auch oft einen Button zur Einstellung unterschiedlicher Layouts (Abbildung 13.1).

Abbildung 13.1: Layout Umschaltung

Wenn Sie die feste Größe bevorzugen, sollten Sie eine Größe wählen, die auf den meisten Bildschirmen darstellbar ist, also 800 x 600 Pixel. Da der Browser noch eine Scrollleiste auf der rechten Seite besitzt und das Browserfenster noch eingerahmt ist, ist die Ihnen zur Verfügung stehende Breite sogar noch etwas kleiner, so dass Sie in der Breite maximal 780 Pixel haben sollten.

Struktur

Sie haben es mit strukturierten Daten zu tun und sollten sich zunächst eine allgemeine Aufteilung überlegen. Joomla! benutzt normalerweise eine Struktur wie in Abbildung 13.2.

Abbildung 13.2: Idee einer Struktur

Teil 1

Bereich 1: Hier steht Ihr Logo oder ein Bild und der Seitenname.
Bereich 2: Hier befindet sich das Suchfeld.
Bereich 3: Hier ist der verlinkte Navigationspfad (Breadcrumbs).

Teil 2

Bereich 4: In der linken Spalte werden die wichtigsten Menüs angezeigt.
Bereich 5: Hier befindet sich der eigentliche Seiteninhalt.
Bereich 6: Die rechte Spalte bietet Platz für zusätzliche Menüs.

Teil 3

Bereich 7: Die Fußzeile

13.3.2 HTML-Umsetzung

Jetzt müssen Sie das Konzept in HTML und CSS umsetzen. Abhängig vom Bildbearbeitungsprogramm, mit dem Sie es erstellt haben, gibt es vielleicht eine Möglichkeit, das Bild automatisch in HTML-Code zu exportieren. Sie können die Umsetzung auch per Hand in einem Texteditor oder in einem HTML-Editor wie Dreamweaver⁹ oder einem der zahlreichen freien HTML-Editoren¹⁰ erstellen.

Der Quellcode der HTML-Umsetzung sieht etwa so aus wie in Listing 13.1. Der Code ist bewusst einfach gehalten und entspricht im Kopfbereich nicht dem XHTML-Standard¹¹. Der Dateiname dieser Layoutdatei muss index.php sein, da sie von Joomla! per PHP auf eingebettete Befehle untersucht wird.

Im Head-Bereich des Codes wird die spätere CSS-Datei des individuellen Templates eingebunden (siehe Listing 13.2). In dieser CSS-Datei befindet sich momentan nur ein Befehl, der die Schriftart bestimmt.

Hinweis von Leser Michael Grasedyck
In dem Beispiel joomla150buch.zip (index.php) wird ein statischer Link zur CSS-Datei benutzt, deswegen hatte das Beispiel bei mir im ersten Anlauf nicht funktioniert.
Wird die CSS-Datei mit
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
eingebunden klappt es immer.

<html>
<head>
  <link 
  href="/joomla150/templates/joomla150buch/css/template.css"   
  rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="Teil1">Kopfbereich/header
   <div id="Bereich1">Bereich1</div>
   <div id="Bereich2">Bereich2</div>
 </div>
 <div id="Teil2">Hauptanzeigebereich/main
   <div id="Bereich3">breadcrumbs</div>
   <div id="Bereich6">rechte Seite</div>
   <div id="Bereich4">linke Seite</div>
   <div id="Bereich5">Inhalt</div>
 </div>
 <div id="Teil3">Fusszeile /footer
   <div id="Bereich7">Bereich7</div>
 </div>
</body>
</html>

Listing 13.1: HTML-Datei /index.php

  body { font-size: 12px;
    font-family: Helvetica,Arial,sans-serif;
    }

  #Teil1 { border: 2px dotted green;
    width: 100%;
    height: 4em;
    }

  #Teil2 { border: 2px dotted yellow;
    float: left;
    width: 100%;
    }

  #Teil3 { border: 2px dotted red;
    float: left;
    width: 100%;
    }

  #Bereich1 { border: 1px dashed silver;
    margin: 0pt 0pt 1.2em;
    width: 18em;
    background-color: rgb(238, 238, 238);
    float: left;
    }

  #Bereich2 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    float: right;
    width: 16em;
    }

  #Bereich3 { border: 1px dashed silver;
    background-color: rgb(238, 238, 238);
    }

  #Bereich4 { border: 1px dashed silver;
    margin: 0pt 0pt 1.2em;
    float: left;
    width: 15em;
    }

  #Bereich5 { border: 1px dashed silver;
    margin: 0pt 12em 1em 16em;
    padding: 0pt 1em;
    }

  #Bereich6 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    float: right;
    width: 12em;
    background-color: rgb(238, 238, 238);
    }

  #Bereich7 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    }

Listing 13.2: CSS-Datei /css/template.css

Dieses erste Template werden Sie komplett per Hand im Joomla!-Verzeichnis erstellen. Wenn das Template fertig ist, können Sie ein gepacktes Installationspaket daraus machen, das dann auch von Dritten (oder Ihnen selbst) per Joomla!-Installer installiert werden kann. Speichern Sie die HTML-Layoutdatei unter dem Namen index.php im ebenfalls neu angelegten Verzeichnis [PfadzuJoomla]/templates/joomla150buch/. Die Datei template.css im Verzeichnis [PfadzuJoomla]/templates/joomla150buch/css/.

Damit ist die Grundstruktur Ihres Templates fertig. Jetzt müssen Sie Joomla! mithilfe einer XML-Datei das Template näher erklären, damit es im Template-Administrationsbereich angezeigt wird.

13.3.3 Verzeichnisstrukturen des Templates

Nun wird es Zeit, uns um gewisse Konventionen zu kümmern. Wie bereits angesprochen, muss das Template in einer besonderen Verzeichnisstruktur abgelegt sein.

[PfadzuJoomla]/templates/[Name des Templates]/
[PfadzuJoomla]/templates/[Name des Templates]/css/
[PfadzuJoomla]/templates/[Name des Templates]/images/

Der Name des Templates sollte keine Umlaute, Leerzeichen und sonstige Sonderzeichen enthalten. Wenn das Template später als Paket installiert wird, erzeugt der Template Installer daraus ein Verzeichnis. Abhängig vom Betriebssystem kann das bei exotischen Zeichenkombinationen zu Problemen führen. Außerdem sollte der Name aussagekräftig sein. Ich habe als Template-Namen joomla150buch genommen.

Im Template-Verzeichnis müssen verschiedene Dateien mit bestimmten Namen vorhanden sein.

Layoutdatei

/templates/joomla150buch/index.php

Das ist die HTML-Layoutdatei, die wir schon erstellt haben. Sie muss die Endung .php haben, da die dynamischen Joomla!-Modulelemente, die wir noch einfügen werden, von PHP interpretiert werden müssen.

Vorschaubild

/templates/joomla150buch/template_thumbnail.png

Diese Datei enthält das Vorschaubild Ihres Templates für die Auswahlvorschau in der Joomla!-Administration unter dem Menü Erweiterungen - Template Manager. Vorschaubilder haben das Format 200 x ca. 150 Pixel. Sie können diese Datei später erzeugen, wenn Sie Ihr Template sehen können.

Metadaten des Templates

/templates/joomla150buch/templateDetails.xml

Diese Datei stellt die Bauanleitung für den Template Installer dar und enthält die Installationen für die Template-Auswahl im Template-Manager. Hier beschreiben Sie, welche Dateien Ihres Templates wohin kopiert werden sollen, wer der Autor ist und weitere Metadaten über das Template. Bei der späteren Installation des Templates über den Joomla!-Installer liest PHP diese Datei aus und kopiert die Dateien an den Platz, der in der XML-Datei angegeben worden ist. Für das Beispiel-Template können Sie die Datei in Listing 13.3 verwenden und mit eigenen Daten versehen. Sie müssen für jede Datei, die Sie im Template benutzen, einen entsprechenden XML-Container mit dem Dateinamen und dem richtigen Pfad füllen.

<files>
  <filename>   
    ... Dateiname einer Datei im TemplateRoot-Verzeichnis eingeben ... 
  </filename>
  <filename>
    ... für jede Datei einen filename-Container 
  </filename>
</files>

Die anderen Container der XML-Datei dienen der Beschreibung des Templates. Hier das komplette funktionsfähige Listing der XML-Datei (Listing 13.3):

<install version="1.5" type="template">
  <name>joomla150buch</name>
  <version>1.0</version>
  <creationDate>11.11.2007</creationDate>
  <author>Hagen   Graf</author>
  <copyright>GNU/GPL</copyright>
  <authorEmail>hagen@cocoate.com</authorEmail>
  <authorUrl>http://www.cocoate.com</authorUrl>
  <version>0.1</version>
  <description>... Beschreibung</description>
  <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>css/template.css</filename>
  </files>
</install>

Listing 13.3: templateDetails.xml

ACHTUNG
In der Datei templateDetails.xml müssen/können/sollten Sie die Positionen und die Parameter Ihres Templates festlegen. Hinweise zu diesem Thema finden Sie hier.

Erstellen Sie die Datei templateDetails.xml ebenfalls im Verzeichnis [PfadzuJoomla]/ templates/joomla150buch/.

CSS-Datei

/templates/joomla150buch/css/template.css

Sie können mehrere CSS-Dateien für Ihr Template benutzen. Die Namensgebung und die Gestaltung der CSS-Datei steht Ihnen frei. Es gibt jedoch Standardbezeichnungen für verschiedene CSS-Elemente. Eine Tabelle dazu finden Sie im Anhang. Für Ihren ersten Versuch benötigen Sie nur eine CSS-Datei.

Grafiken, Bilder

/templates/joomla150buch/images/[beliebige Bilddateien]

In diesem Verzeichnis können Sie beliebige Bilddateien, die Sie in Ihrem Template benötigen, eintragen. Der Installer kopiert die Dateien dann in den images-Ordner.

13.3.4 Erster Probelauf

Wenn Sie alle Strukturen im Unterverzeichnis [PfadzuJoomla]/templates/ nachvollzogen haben (Abbildung 13.3), können Sie bereits Ihr neues Template in der Joomla!-Administration im Menü Erweiterungen - Template sehen und zum Standard erklären (Abbildung 13.4).

Abbildung 13.3: Verzeichnisstruktur und Dateien des joomla150buch-Templates

Abbildung 13.4: Neues Template im Manager

Wenn Sie Ihre Website aufrufen, sehen Sie Ihr neues Template (Abbildung 13.5). Leider werden noch keine Inhalte dargestellt. Da diese Inhalte dynamisch erzeugt werden, müssen Sie sie jetzt Stück für Stück in Ihr neues Template integrieren.

Abbildung 13.5: Aufruf im Browser

13.3.5 Integration der Joomla!-Module

Die Integration der Joomla!-Module erfolgt über in den HTML-Code eingebettete Befehle. Der Namensraum jdoc wird von Joomla! verwendet, um verschiedene Elemente in den Templates einblenden zu können. Wenn Sie im Kopfbereich der Layoutdatei index.php die (hier kursiv hervorgehobene) Zeile

einfügen, erscheint bereits der Titel der Seite und das Newsfeed-Symbol korrekt (Abbildung 13.6).

Abbildung 13.6: Favicon und Seitentitel

Wenn Sie den HTML-Quellcode dieser Seite aufrufen, stellen Sie fest, dass Joomla! die gesamten Metadaten, die Sie in der Administration eingegeben haben, in den HTML-Code geschrieben hat (siehe Listing 13.4). Außerdem werden die RSS-Feeds per Link-Tag eingebunden und in Browsern wie Firefox, die diese Technik unterstützen, als Feed-Symbol angezeigt.

...
<head>
<base href="http://localhost/joomla150/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots"   content="index, follow" />
<meta name="keywords"   content="joomla, joomla!, Joomla, Joomla!, J!" />
<meta name="description" content="Joomla! - dynamische 
    Portal-Engine und Content-   Management-System"   />
<meta name="generator" content="Joomla!
    1.5 - Open Source Content Management" />
<title>Welcome to the Frontpage</title>
<link href="/joomla150/index.php?format=feed&amp;type=rss"
      rel="alternate" type="application/rss+xml"
      title="RSS 2.0" />
<link href="/joomla150/index.php?format=feed&amp;type=atom"
      rel="alternate" type="application/atom+xml"
      title="Atom 1.0" />
<script type="text/javascript"
        src="/joomla150/media/system/js/mootools.js"></script>
<script type="text/javascript"
        src="/joomla150/media/system/js/caption.js"></script>
...

Listing 13.4: Joomla!-Metadaten

Nachdem das so gut funktioniert hat, kommen wir gleich zu den anderen relevanten jdoc-Tags-Einschüben.

Der Befehl

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

beispielsweise erwartet als Parameter type den Typ des Einschubs, in unserem Fall modules. Der Parameter name kennzeichnet die Position des Moduls (top, right, left, user1, ...) auf der Website. Diese Position können Sie Ihrem Modul im Modulbereich, erreichbar über das Menü Erweiterungen - Module, zuordnen. Der Parameter style schließlich enthält einen Wert, der die Art des aus dem Modul gelieferten HTML-Codes betrifft. Der Wert none beispielsweise liefert die reine HTML-Ausgabe ohne umgebende <div>-Tags (siehe nachfolgende Tabelle).

Parameter	Rückgabe
table	Das Modul wird in einer Tabellenspalte dargestellt
horz	Das Modul wird horizontal in der Zelle einer umgebenden Tabelle ausgegeben
xhtml	Das Modul wird in einem div-Element XHTML-konform ausgegeben
rounded	Die Ausgabe erfolgt in einem Format, mit dem sich runde Ecken darstellen lassen. Die Klasse des div-Elements ändert sich von moduletable zu module.
beezDivision	Spezieller Schalter für das Beez-Template. Hier besteht die Möglichkeit, die Überschriftengröße (header) zu verändern. Der Schalter steht außerhalb des Beez-Templates nicht zur Verfügung. <jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />
none	Das Modul wird ohne Formatierung ausgegeben

Tabelle 13.1: Modul-Parameter

Eine Beschreibung der jdoc-Einschübe in der Datei index.php sehen Sie in Listing 13.5.

ACHTUNG: Die <jdoc> Befehle müssen in einer Zeile stehen - Keine Zeilenumbrüche!

<html>
<head>
  <jdoc:include   type="head" />
  <link   
    href="/joomla150/templates/joomla150buch/css/template.css"   
    rel="stylesheet" 
    type="text/css"   />
</head>
<body>
  <div id="Teil1">Kopfbereich / header
    <div id="Bereich1">Bereich1 
      <jdoc:include type="modules" name="user3" style="xhtml" />
    </div>
    <div id="Bereich2">Bereich2  
      <jdoc:include type="modules" name="top" style="xhtml"   />
    </div>
  </div>
  <div id="Teil2">Hauptanzeigebereich / main
    <div id="Bereich3">breadcrumbs  
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />     </div>
    <div id="Bereich6">rechte Seite 
      <jdoc:include type="modules" name="right" style="xhtml" />     </div>
    <div id="Bereich4">linke Seite   
      <jdoc:include type="modules" name="left" style="xhtml" />     </div>
    <div id="Bereich5">Inhalt  
      <jdoc:include type="component" style="xhtml"/>     </div>
  </div>
  <div id="Teil3">Fusszeile   /footer 
    <div id="Bereich7">Bereich7
      <jdoc:include type="modules" name="footer" style="xhtml"   />
    </div>
  </div>
</body>
</html>

Listing 13.5: index.php mit jdoc-Einschüben

Wenn Sie die Website mit dem geänderten HTML-Code auf dem lokalen Server aufrufen, sehen Sie bereits die dynamischen Inhalte. Ihr neues Template wurde mit allen Daten gefüllt. Das Ergebnis sieht natürlich optisch noch verbesserungswürdig aus, aber immerhin: Das Prinzip hat jetzt schon mal funktioniert (Abbildung 13.7).

Abbildung 13.7: Template mit dynamischen Daten

Jetzt müssen wir das Template noch in ein Installationspaket packen.

13.3.6 Ein Template-Paket erstellen

Um Ihr Template weitergeben zu können, müssen Sie es in ein Zip-Archiv verpacken. Bevor Sie das tun, erstellen Sie noch ein aktuelles Vorschaubild Ihres Templates (template_thumbnail.png) in der Größe 227 x ca. 162 Pixel. Im Template-Bereich sollte dieses Vorschaubild jetzt beim Überfahren des Namenslinks angezeigt werden (Abbildung 13.8).

Abbildung 13.8: Vorschaubild des joomla150buch-Templates

Packen Sie jetzt alle Template-Dateien von joomla150buch inklusive Ihrer Unterverzeichnisse in ein Zip-Archiv.

Markieren Sie dazu alle Dateien und Ordner im Ordner

[PfadzuJoomla]/templates/joomla150buch/

und packen Sie alles in die Datei joomla150buch.zip.

Sichern Sie den Ordner und die ZIP-Datei.

Deinstallation des Templates

Das von Ihnen erstellte Paket können Sie an andere weitergeben oder selbst installieren. Um die Installation ausprobieren zu können, müssen Sie das eben erstellte Template wieder aus dem Joomla!-System entfernen.

Um es entfernen zu können, müssen Sie zunächst ein anderes Template als Standard festlegen. Klicken Sie in das Menü Erweiterungen - Template, wählen Sie das gewünschte Template aus und klicken Sie auf das Icon Standard.

Jetzt können Sie Ihr Template deinstallieren. Besuchen Sie das Menü Erweiterungen - Installieren/Deinstallieren und klicken Sie dort auf den Reiter Templates. Wählen Sie Ihr gerade erstelltes Template joomla150buch aus und klicken Sie auf das Icon Deinstallieren (Abbildung 13.9).

Abbildung 13.9: Deinstallation des Templates

13.3.7 Installation mit dem Joomla!-Template Installer

Nachdem Sie alle Spuren der Entwicklung beseitigt und ihr Werk gesichert haben, rufen Sie den Menüpunkt Erweiterungen - Installieren/Deinstallieren auf.

Dort können Sie Ihr ZIP-Paket installieren. Wählen Sie die Datei joomla150buch.zip aus und installieren Sie sie durch einen Klick auf den Button Datei hochladen & installieren. Der Installer meldet die erfolgreiche Installation des Templates. In der Erfolgsmeldung wird Ihnen die Beschreibung aus der XML-Datei angezeigt (Abbildung 13.10).

Abbildung 13.10: Installation der Template-Paketdatei

Wenn Sie jetzt in den Template-Bereich wechseln, sollte das joomla150buch-Template installiert und auswählbar sein (Abbildung 13.8).

13.3.8 Welcher Quellcode kommt aus Joomla!?

Nachdem wir nun die härtesten Hürden bei der Template-Erstellung genommen, wollen wir kurz in einen Blick in den HTML-Code werden, den Joomla! zurückliefert.

Joomla! erzeugt natürlich Code, der in die von uns erzeugten Container eingeblendet wird. Dieser Code besteht aus HTML mit eingesprenkelten CSS-Klassen und -IDs. Joomla! enthält unter anderem zwei CSS-Dateien, die bestimmte Klassen und IDs beschreiben und in jedes Template eingebunden werden sollten.

Es handelt sich dabei um die Dateien /templates/system/css/system.css und /templates/ system/css/general.css.

Sie werden in das Template im <head>-Bereich mit den folgenden Befehlen eingebunden:

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

In beiden Dateien finden Sie die Klassen und IDs, die im weiteren Verlauf des Kapitels auftauchen werden.

Die Modulposition links im Detail

Nehmen wir uns die linke Modulleiste mal etwas genauer vor (Abbildung 13.11).

Abbildung 13.11: Template – Module an der Position links

Das ist der HTML-Code in der Layoutdatei index.php:

<div id="Bereich4">linke Seite <jdoc:include type="modules" name="left" style="xhtml" />

Das <div>-Tag für diesen Bereich wird über eine CSS id mit dem Namen Bereich4 formatiert.

Wenn Sie sich mal den ausgelieferten HTML-Code in einem Browser ansehen (Rechtsklick auf die Website, Quellcode anzeigen), sehen Sie natürlich viel mehr Code, der von Joomla! durch den jdocs-Aufruf erzeugt wurde (Listing 13.6).

... weitere HTML Befehle
<div id="Bereich4">linke Seite
  <div class="moduletable_menu">
    <h3>Hauptmenü</h3>
    <ul class="menu">
      <li id="current" class="active item1">
        <a href="http://localhost/joomla150/">Startseite</a>
      </li>
      <li class="item2">
        <a href="/joomla150/joomla-license">Joomla! License</a>
      </li>
    </ul>
  </div>
... weitere HTML Befehle

Listing 13.6: Auszug aus dem ausgelieferten HTML-Quellcode

Auffallend bei diesem Code sind die CSS-Klassen menu, active item1, item2. Im Kapitel 7.2 sind wir auf die zusätzlichen CSS-Suffixe in den Modul-Parametern eingegangen. Hier ist offensichtlich so ein Fall. In einer CSS-Datei des Standard-Templates rhuk_milkyway werden Sie auch sofort fündig¹²:

div.module_menu h3{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #eee;
  margin: -23px -4px 5px -5px;
  padding-left: 10px;
  padding-bottom: 2px;
}
div.module_menu {
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}
div.module_menu div   div div {
  padding: 10px;
  padding-top: 30px;
  padding-bottom: 15px;
  width: auto;
}
div.module_menu div   div div div {
  background: none;
  padding:   0;
}
div.module_menu ul {
  margin: 10px 0;
  padding-left: 20px;
}
div.module_menu ul li a:link, 
div.module_menu ul li a:visited {
  font-weight: bold;
}

Diese CSS-Blöcke sorgen in diesem Fall für die abgerundeten Ecken der Menüs. Es gibt noch weitere Einträge in der CSS-Datei, die die Überschrift dritter Ordnung (<h3></h3>) und eine unsortierte Liste (die Menülinks) für diesen Fall formatieren.

So weit, so gut. Diese Art der Formatierung ist gewollt, und die Ausgabe der benötigten <div>-Tags kann noch über das Attribut style verändert werden. In unserem Beispiel-Template haben wir den Parameter style xhtml benutzt, in diesem Template wird der Parameter style rounded benutzt. Er liefert das entsprechende vierteilige <div>-Tag.

Diese Art der Code-Erzeugung eignet sich sehr gut zum Formatieren per CSS. Wenn Sie etwas weiterlesen im Quellcode, werden Sie jedoch auch wieder über Tabellen stolpern! Die Content Komponente arbeitet noch mit Tabellen! An dieser Stelle beginnt Ihr Problem, wenn Sie den Content (der Inhalt in der Mitte) individuell ohne Tabellen formatieren wollen. Joomla! hat aber auch hier eine Lösung.

Template Overrides (HTML-Ausgabe anpassen, ohne die Core-Dateien zu verändern)

Um das Problem mit der Tabellenausgabe in den Griff zu bekommen, müssten Sie jetzt normalerweise die Joomla!-Core-Dateien ändern. Ihr Content wäre zwar frei von Tabellen, aber beim nächsten Update von Joomla! könnte es sein, dass die Datei wieder überschrieben wird.

Als Lösung für das Problem gibt es seit Joomla! 1.5.0 erstmals die so genannten views. Jede Komponente enthält einen zusätzlichen Ordner view, dort finden Sie viele unterschiedliche Sichten auf die Ausgabe der Logik-Komponente. Bei der Content-Komponente com_content sind das beispielsweise archive, article, category, frontpage und section. Diese fünf Ordner enthalten Dateien, die verschiedene Sichten des Inhalts zur Verfügung stellen. Sie erinnern sich bestimmt an die Tabellen- und die Blogsicht. Jeder dieser fünf Ordner enthält auch einen Ordner tmpl und dieser wiederum verschiedene Dateien, die für die Darstellung zuständig sind (Abbildung 13.12).

kap13_0200_views.bmp
Abbildung 13.12: Verzeichnisstruktur views

Um diesen Weg zu nutzen, benötigen Sie ein zusätzliches Verzeichnis in Ihrem Template-Verzeichnis. Wenn wir bei diesem Beispiel bleiben, muss das Verzeichnis com_content/article heißen, da Sie das Layout der content-Komponente in der Darstellungsform article verändern wollen.

Sie müssen also die Dateien in

[PfadzuJoomla}/components/com_content/view/article/tmpl/*.*

in Ihr neues Template-Verzeichnis kopieren und können sie dann an Ihre Bedürfnisse anpassen.

[PfadzuJoomla}/templates/[ihrTemplate]/html/com_content/article

Sie können diesen Weg gut im Beez-Template nachvollziehen. Hier liegen die oben angesprochenen Dateien in

[PfadzuJoomla}/templates/beez/html/com_content/article

und überschreiben damit die Core-Dateien, ohne sie zu verändern (override).

Joomla! sucht im Template-Verzeichnis zunächst nach diesen Dateien. Sind sie vorhanden, werden sie genutzt. Sind sie nicht vorhanden, werden die Core-Dateien aus den Komponenten genutzt.

7 http://www.adobe.de/products/photoshop/

8 http://www.gimp.org/

9 http://de.wikipedia.org/wiki/Dreamweaver

10 http://www.drweb.de/editoren/

11 http://de.wikipedia.org/wiki/Xhtml

12 [PfadzuJoomla!]templates/rhuk_milkyway/css/template.css

72031 Aufrufe
1 Anhang
French

2.7 Joomla!-Installation

Submitted by Hagen Graf on 17. December 2007 - 12:27

Um Joomla! installieren zu können, benötigen Sie zunächst den Quellcode. Laden Sie das Paket Joomla_1.5.7-Stable-Full_Package (hängt unten an dem Kapitel als Anhang) und speichern es auf Ihrem System^¹².

In welches Verzeichnis installieren?

Sie müssen sich überlegen, ob Sie Ihr Joomla! direkt in das Dokumentenverzeichnis installieren wollen oder in ein Unterverzeichnis. Das ist wichtig, weil Sie vermutlich eine möglichst kurze URL zu Ihrer Homepage möchten.

Beispiel

Wenn Sie Joomla! direkt in das Dokumentenverzeichnis Ihres Webservers (/htdocs) auspacken, so startet Ihre Webseite, wenn Sie auf Ihrem lokalen PC http://localhost/ bzw. auf Ihrem Server im Internet Ihren Domainnamen http://www.meinehomepage.de/ aufrufen. Erstellen Sie unterhalb von /htdocs/ noch ein weiteres Verzeichnis, beispielsweise /htdocs/joomla150/ und entpacken das Paket dort, so müssen Sie im Browser http://localhost/joomla150/ eingeben. Lokal ist das kein Problem, auf einer produktiven Seite im Internet sieht das nicht so gut aus.

In Ihrer lokalen XAMPP lite-Umgebung unter Windows liegen bereits einige HTML-Dateien und Unterverzeichnisse in /htdocs, die beispielsweise die Begrüßungsseite von XAMPP lite anzeigen (Abbildung 2.1.6). In Ihrer lokalen Linux-Umgebung wird Ihnen ebenfalls eine Startseite, abhängig von der Distribution und den Webservereinstellungen, angezeigt.

Verzeichnis

Ich schlage daher vor, Sie erstellen sich ein Unterverzeichnis mit dem Namenjoomla150 unterhalb Ihres Dokumentenverzeichnisses. In Windows nehmen Sie dazu den Windows Explorer, in Linux entweder die Shell, den KDE Konqueror oder den Midnight Commander.

[home]/htdocs/joomla150/

Im Windows Explorer sollte Ihr Verzeichnisbaum nun folgendermaßen aussehen (Abbildung 2.1.9):

Abbildung 2.1.9: Joomla!-Dateiverzeichnis

Wenn Sie in Ihrem Browser http://localhost/joomla150/ eingeben, erscheint in der XAMPP lite-Variante eine Seite mit einem leeren Inhaltsverzeichnis (Abbildung 2.1.10).

Abbildung 2.1.10: Apache-Verzeichnisanzeige

Unter Linux oder bei einer anderen Konfiguration kann es sein, dass Sie eine Meldung erhalten, der zufolge Sie keinen Zugriff auf dieses Verzeichnis haben. Das hängt mit der Konfiguration des Webservers zusammen. Aus Sicherheitsgründen ist die automatische Verzeichnisanzeige in der Apache-Konfiguration oft deaktiviert. Ein potenzieller Angreifer könnte aus diesen Informationen viele interessante Schlüsse über die Verzeichnisstruktur und die Dateien auf Ihrer Homepage ziehen und sie dann gezielt angreifen.

Auf virtuellen Webservern bei Providern dürfen Sie auf die Konfigurationsdatei des Apache Webservers aus Sicherheitsgründen meistens nicht zugreifen. Falls doch, sollten Sie aus oben genannten Gründen die Inhaltverzeichnisse deaktiviert lassen bzw. nur für bestimmte Verzeichnisse einschalten, in denen Sie Dateien zum Download anbieten.

Entpacken

Jetzt können Sie endlich das Dateipaket Joomla_1.5.7-Stable-Full_Package.zip (hängt unten an dem Kapitel als Anhang) in das vorbereitete Verzeichnis auspacken (Abbildung 2.1.11). Unter Windows XP und Windows Vista können Sie dieses Paket direkt mit dem Datei-Explorer auspacken. Unter allen anderen Windows-Versionen benötigen Sie ein separates Packprogramm wie beispielsweise das freie Programm TUGZip¹³.

Abbildung 2.1.11: Joomla!-Quellcode-Dateien

Diese Struktur ist auf allen Betriebssystemen die gleiche. Unterschiede bestehen nur in der Darstellung. In Abbildung 2.1.12 sehen Sie beispielsweise eine Darstellung im FTP-Client FileZilla¹⁴ unter Windows Vista. Im linken Fenster sehen Sie Ihren lokalen PC, im rechten Fenster das Dokumentenverzeichnis Ihres entfernten Webservers.

Abbildung 2.1.12: Joomla!-Dateien im FTP-Client FileZilla

Joomla!-Webinstaller

Ab jetzt geht alles blitzschnell, weil der Joomla!-Webinstaller das Kommando übernimmt. Rufen Sie die URL http://localhost/joomla150/ auf.

Schritt 1 – Sprachauswahl

Der Webinstaller meldet sich in deutscher Sprache mit der Sprachauswahl. Die Sprachauswahl ist der erste von insgesamt sieben Installationsschritten. Legen Sie hier die gewünschte Sprache fest und klicken den Button Weiter (Abbildung 2.1.13).

Abbildung 2.1.13: Installer – Sprachauswahl

Schritt 2 – Installationsprüfung

Sie sehen die Installationsprüfung (Abbildung 2.1.14). Diese Prüfung soll Ihnen helfen zu beurteilen, ob sich Ihre Serverumgebung für die Installation von Joomla! eignet.

Abbildung 2.1.14: Installer – Installationsprüfung

Wenn Sie überwiegend grüne Testergebnisse sehen, so ist das schon mal ein gutes Zeichen. Abhängig von Ihrer Konfiguration kann es hier Unterschiede geben. Der Joomla!-Installer berücksichtigt die Konfigurationseinstellungen von Webserver (in unserem Fall Apache), PHP und dem Betriebssystem. Auf Unix-artigen Systemen (Linux, Mac OS X) müssen Sie auf Schreibberechtigungen achten. Dies gilt insbesondere für die Datei configuration.php. Sie wird am Ende der Installation mit Ihren individuellen Werten erzeugt. Hat der Installer keine Schreibrechte im Ordner, kann Joomla! die Datei nicht erstellen, und die Installation schlägt fehl. Versuchen Sie, in diesem Fall die Rechte entsprechend zu konfigurieren und klicken Sie auf den Button Prüfung wiederholen.

Exkurs

Bei Mehrbenutzerbetriebssystemen (Windows, Linux, Mac OSX) werden die Dateirechte für Dateien und Ordner meist mit den Worten Lesen, Schreiben, Lesen/Ausführen, Ändern und Vollzugriff umschrieben. Jedes Betriebsystem verwaltet die Rechte auf eine leicht unterschiedliche Weise.

Unterscheiden kann man bei Windows die Art der Verwaltung vor Windows NT (Windows 98, Windows ME) und nach Windows NT (Window XP, Windows Vista). Nach Windows NT wurden für Dateien, Ordner und Prozesse Access Control Lists (ACLs), Zugangskontrolllisten, eingeführt. Wenn diese ACLs nicht gesetzt sind, erhält jeder Benutzer Vollzugriff auf jedes Objekt. Daher ist auf diesen Betriebssystemen das Arbeiten mit XAMPP lite und Joomla! so »einfach«. In Windows Vista wurde unter anderem die Sicherheit bei der Ausführung
von Prozessen erhöht, daher müssen Sie beispielsweise den Betrieb eines Webservers und eines Datenbankservers erst explizit erlauben.

Bei Unix-artigen Systemen (Linux, Max OS X) werden die Zugriffsrechte über drei Benutzergruppen (Inhaber, Gruppe und Sonstige) und die Rechte (Lesen, Schreiben und Ausführen) eingeteilt. Die Benutzerzuordnungen werden über den Befehl chown geregelt, die Dateirechte über den Befehl chmod. Beide Befehle finden Sie in Ihrem FTP-Programm (meist über einen Rechtsklick auf den Namen der Datei, deren
Rechte Sie ändern möchten). Eine ausführliche Erklärung sowie eine Übersicht über die Zusammensetzung der Rechte finden Sie beispielsweise unter http://de.wikipedia.org/wiki/Unix-Dateirechte.

Bei virtuellen Servern bei einem Provider kann es, je nach Konfiguration des Servers, manchmal vorkommen, dass der Webserver mit anderen Rechten und Gruppenzuordnungen als der FTP-Benutzer läuft. Wenn Sie nun eine Datei über Joomla! hochladen, wird diese mit den Rechten des Webservers (z.B. mit dem User wwwrun) gespeichert. Wenn Sie mit Ihrem FTP-Benutzer (z.B. bertrand) diese Datei dann löschen wollen, kann es u.U. passieren, dass Sie das nicht dürfen, weil Ihr FTP-Benutzer sich in einer anderen Benutzergruppe als der Webserver befindet.

Wenn Sie mit der XAMPP lite-Lösung unter Windows arbeiten, sollte es bei Ihnen so aussehen wie bei mir. Klicken Sie auf den Button Weiter, und Sie befinden sich im Schritt Lizenz.

Schritt 3 – Lizenz

Jede Software wird unter bestimmten Bedingungen lizenziert. Bei Joomla! handelt es sich um dieGNU/GPL Lizenz in der Version 2.0 (Abbildung 2.1.15).

Exkurs

Eine deutsche Übersetzung dieser Lizenz finden Sie unter http://www.gnu.de/documents/gpl-2.0.de.html.

Machen Sie sich ruhig die Mühe und schauen sich die deutsche Übersetzung dieser Lizenz an. Es ist momentan wohl einer der berühmtesten Texte in der Welt der Software.

Abbildung 2.1.15: Installer – Lizenz

Schritt 4 – Datenbank

Im vierten Schritt Datenbankkonfiguration werden Ihre Datenbank-Parameter abgefragt (Abbildung 2.1.16). In der XAMPP lite-Serverumgebung können Sie beliebig viele Datenbanken anlegen und haben einen MySQL-Benutzer mit dem Namen root ohne Passwort. Der Benutzer root ist der MySQL-Administrator und darf alles in einem MySQL-System. Ohne Passwort ist so eine Installation ein erhebliches Sicherheitsrisiko. Lokal ist es m.E. am Anfang in Ordnung, um das System schnell zum Laufen zu bringen. Sie sollten langfristig Ihre XAMPP lite-Installation im Sicherheitscheck mit Passworten versehen^¹⁵.

Abbildung 2.1.16: Installer – Datenbankkonfiguration

Tragen Sie bei einer lokalen XAMPP lite-Installation folgende Werte ein:

Computer Name: localhost
Benuztername: root
Passwort: [leer lassen – Achtung Sicherheitsrisiko!]

Wählen Sie jetzt noch den Datenbanknamen aus. In der lokalen XAMPP lite-Umgebung lassen sich beliebig viele Datenbanken anlegen, weil der Benutzer root das Recht dazu hat. In einer produktiven Umgebung auf einem Datenbankserver bei einem Provider haben Sie vermutlich ein festes Kontingent von Datenbanken, und die Datenbankzugangsdaten sind in der Regel vorgegeben.

Aus diesem Grund kann ich im Installer den Namen einer Datenbank angeben, die noch nicht existiert (joomla150).

Durch einen Klick auf das grüne Dreieck vor Erweiterte Einstellungen können Sie weitere Optionen einblenden.

Sie können wählen, ob die Tabellen einer evtl. bereits bestehenden Joomla!-Installation in dieser Datenbank gelöscht oder gesichert und mit dem Präfix bak_ versehen werden sollen.

Das MySQL-Tabellenpräfix ist eine praktische Sache. Vor jeden Tabellenamen, den der Webinstaller erzeugt, schreibt er den Text, den Sie in das entsprechende Feld eingeben. Standardmäßig schlägt der Webinstaller jos_ vor.

Das hat einen einfachen Grund. Manchmal erhalten Sie bei einem Internetprovider nur eine MySQL-Datenbank. Wenn Sie nun zwei Joomla!-Seiten betreiben wollen, hätten Sie ein Problem, da Sie ja die Tabellen nicht voneinander unterscheiden können. Durch das Tabellenpräfix ist es möglich, die Tabellen verschiedener Joomla!-Installationen auseinanderzuhalten (jos_mueller_ oder jos_schulze_). Hier sollten Sie den Standard jos_ übernehmen. Das Präfix wird außerdem genutzt, um gesicherte Daten zu kennzeichnen (bak_).

Schritt 5 – FTP-Konfiguration

Um Probleme mit Zugriffsrechten und einem evtl. eingeschalteten PHP Safe Mode gleich im Keim zu ersticken, gibt es seit Joomla! 1.5 die Möglichkeit, die FTP-Funktionen von PHP für den Upload und das Handling von Dateien zu benutzen. In der lokalen Installation mit XAMPP lite ist das nicht notwendig. Wenn Sie Joomla! auf einem virtuellen Webserver eines Providers installieren, geben Sie hier die FTP-Daten ein, die Ihnen Ihr Provider zur Verfügung gestellt hat. Wenn Ihr Provider diese Funktion erlaubt, so ist es aus Sicherheitsgründen ist ratsam, unterschiedliche FTP-Konten für sich als Benutzer und Joomla! anzulegen und das Joomla!-FTP-Konto nur für das entsprechende Joomla!-Verzeichnis freizuschalten (Abbildung 2.1.17).

Abbildung 2.1.17: Installer – FTP-Konfiguration

Schritt 6 – Konfiguration

Dieser Hauptkonfigurationsschritt ist dreigeteilt.

Im ersten Teil der Konfiguration wird der Name Ihrer Website abgefragt. Dieser Name taucht beispielweise in der Titelzeile des Browserfensters auf, wenn jemand Ihre Website aufruft. Der Name wird auch an verschiedenen anderen Stellen benutzt, beispielsweise bei Bestätigungsmails an registrierte Benutzer. Ich nehme für unsere Beispielseite den Namen Joomla! 1.5.0 (Abbildung 2.1.18).

Im zweiten Teil werden die Pfade der Website, die Administrator-E-Mail und das Administrator-Passwort abgefragt. Notieren Sie sich das Passwort am besten auf einen Zettel (aber kleben Sie ihn nicht an den Bildschirm oder unter die Tastatur :-)).

Abbildung 2.1.18: Installer – Konfiguration – E-Mail, Passwort

Im dritten Teil legen Sie die Art der Daten fest, die Ihre Joomla!-Installation enthalten soll (Abbildung 2.1.19).

Installation der Beispieldaten

Das Wichtigste sind die Daten Ihrer Installation. Joomla! ermöglicht und empfiehlt es auch ausdrücklich, dass Anfänger die Beispieldaten installieren. Sie erhalten damit ein Gefühl für das Programm und können gefahrlos experimentieren.

Lade lokales SQL-Script

Oft hat man bereits lokal eine Joomla!-Website erstellt und möchte nun genau diese Daten in seiner Online-Datenbank haben. In diesem Fall können Sie hier die aus der lokalen Version exportierte .sql-Datei angeben, die Ihre Joomla!-Daten enthält. Achten Sie darauf, dass diese Datei genau das Joomla! 1.5-Datenbankschema enthält und UTF8-kodiert ist. Mehr zu diesem Thema finden Sie im Anhang.

Lade Migrationsskript

Diese Option macht aus einer älteren Joomla! 1.0.x-Installation eine Joomla! 1.5-Version. Näheres zum Umstieg erfahren Sie im Anhang.

Die Installation von Beispieldaten ist als Standard ausgewählt. Wir werden im weiteren Verlauf des Buches diese Variante betrachten.

Abbildung 2.1.19: Installer – Konfiguration – Daten

Klicken Sie auf den Button Beispieldaten installieren. Der Installer lädt die Daten in Ihre Datenbank und ändert die Anzeige (Abbildung 2.1.20). Der Vorgang ist ein wenig unscheinbar, aber zur Installation der Beispieldaten notwendig. Der Button verschwindet, und ein kleines Textfenster erscheint.

Abbildung 2.1.20: Installer – Konfiguration – Beispieldaten

Klicken Sie jetzt auf den Button Weiter, und die Daten werden übernommen.

Schritt 7 – Abschluss

Der siebte und letzte Schritt gratuliert zur erfolgreichen Installation (Abbildung 2.1.21). Ich gratuliere auch. In fetter Schrift steht dort, dass Sie bitte das Verzeichnis mit dem Namen Installation löschen sollen. Diesen Hinweis sollten Sie jetzt beherzigen, denn Ihre Joomla!-Website läuft ohne diese Maßnahme nicht.

Hinweis

Für Leser, die gern an einem konkreten Beispiel den Bau einer Website von Anfang an begleiten wollen, gibt es das Kapitel 16.

Hinweis

In Ihrem Dokumentenverzeichnis ist eine Datei mit dem Namen configuration.php erstellt worden. Falls Sie die Installation wiederholen möchten, müssen Sie, bevor Sie das Installationsverzeichnis löschen, die Datei configuration.php löschen. Der Joomla!- Installer startet dann erneut, wenn Sie im Browser die URL aufrufen, unter der sich die Joomla!-Dateien befinden.

Abbildung 2.1.21: Installer – Abschluss

Ihr Administrations-Benutzername ist immer admin.

Hinweis

Für den Fall, dass Sie das Administratorpasswort vergessen/verlegt haben sollten, finden Sie im Anhang eine Lösung.

Sie haben jetzt Joomla! vollständig installiert und können damit beginnen, Ihre Website zu konfigurieren und Inhalte einzupflegen. Sie haben die Wahl zwischen den Buttons Site (Website ansehen) und Admin (Administrationsoberfläche).

Sehen Sie ruhig mal Ihre frisch erstellte Website an und klicken Sie auf Site. Sollten Sie noch nicht das Verzeichnis Installation gelöscht haben, erhalten Sie jetzt noch einmal einen freundlichen Hinweis, es zu löschen und anschließend die Seite zu aktualisieren.

Das Ergebnis sieht schon sehr eindrucksvoll aus (Abbildung 2.1.22).

Abbildung 2.1.22: Ihre Website direkt nach der Installation

Schauen Sie sich in Ruhe um, klicken Sie ein paar Möglichkeiten durch und versuchen Sie sich zu orientieren. In dieser mit Beispieldaten gefüllten Website werden viele Funktionalitäten von Joomla! genutzt, und wir werden uns diese in Ruhe ansehen.

12 Downloadmöglichkeit siehe Anhang.

13 http://www.tugzip.de/

14 http://www.filezilla.de/

15 http://localhost/security/

26546 Aufrufe
1 Anhang
French

Primary links

Suchen

Benutzeranmeldung

Das Buch

Der Film

cocoate.com Joomla! 1.5 Events

Neueste Kommentare

Aktive Forenbeiträge

Neue Forenbeiträge

Wer ist online

Benutzer online

Beliebte Inhalte

Heute:

Insgesamt:

Zuletzt angezeigt:

Verzeichnis

13.3 Templates selbst erstellen

13.3.1 Konzept

Feste Größe oder variabel (fluid) oder beides?

Struktur

13.3.2 HTML-Umsetzung

13.3.3 Verzeichnisstrukturen des Templates

Layoutdatei

Vorschaubild

Metadaten des Templates

CSS-Datei

Grafiken, Bilder

13.3.4 Erster Probelauf

13.3.5 Integration der Joomla!-Module

13.3.6 Ein Template-Paket erstellen

Deinstallation des Templates

13.3.7 Installation mit dem Joomla!-Template Installer

13.3.8 Welcher Quellcode kommt aus Joomla!?

Die Modulposition links im Detail

Template Overrides (HTML-Ausgabe anpassen, ohne die Core-Dateien zu verändern)

2.7 Joomla!-Installation

In welches Verzeichnis installieren?

Beispiel

Verzeichnis

Entpacken

Joomla!-Webinstaller