10.2    Module einrichten 

Inzwischen sind Sie Joomla!-Modulen, Bausteinen, die Sie an verschiedene Layoutpositionen einer Webseite platzieren, an einigen Stellen begegnet: beim Aufbau von Menüs (Main Menu, Footer Menu und Benutzermenü), dem Login Form und den Breadcrumbs. In diesem Abschnitt lernen Sie Module näher kennen, wie man sie einrichtet, konfiguriert und was es mit den berühmt-berüchtigten Positionen auf sich hat.

10.2.1    Neues Modul erstellen 

In Kapitel 9, »Menüs aufbauen«, legten Sie bereits ein Modul für ein neues Menü an. Dabei gab es aus dem Menümanager eine Abkürzung, die direkt zum entsprechenden Modultyp – Navigation - Menü – führte. Die Vielfalt der verschiedenen Modultypen entdecken Sie aber erst, wenn Sie den Modulmanager einsetzen. Wie wäre es z. B. mit einem kleinen Texteingabefeld, mit dem Besucher Ihre Website nach beliebigen Begriffen durchsuchen? Oder einem zufällig ausgewählten Bild aus Ihrem Medienmanager? Ähnlich den Menüeintragstypen bietet Joomla! eine umfangreiche Sammlung von Modultypen.

1. Wechseln Sie über das Menü Erweiterungen • Module zum Modulmanager.

2. Klicken Sie oben links auf den Button Neu.

3. Nun erscheint eine Liste mit zwei Dutzend verschiedener Modultypen. Einzeln werden diese Typen in Abschnitt 10.2.5, »Alle Modultypen vorgestellt«, besprochen. Wählen Sie für dieses Beispiel den Typ Suchen.

4. Einziges Pflichtfeld ist der Titel des Moduls. Dieser erscheint zwar nicht immer innerhalb des Moduls im Frontend, dient aber mindestens der Übersicht im Modulmanager. Das Modul für das Reiseforumbeispiel heißt Reiseforum durchsuchen.

5. Kein Pflichtfeld, aber noch wichtiger ist die Position des Moduls. Wählen Sie aus der Dropdown-Liste auf der rechten Seite Suche [position-0], um das Suchmodul im Frontend oberhalb der rechten Spalte anzuzeigen. Diese Einstellung gilt allerdings nur für das Protostar-Template; andere Templates verwenden ihre eigenen Positionen und Positionsnummerierungen.

6. Klicken Sie auf Speichern & Schliessen, und prüfen Sie die Anzeige des neuen Moduls im Frontend.

Auf diese Weise binden Sie, ähnlich wie bei Menüeintragstypen/Webseiten, Modul für Modul Joomla!-Features ein. Im Fall der Suche ist nicht mal eine detailliertere Konfiguration notwendig, um sofort sinnvolle Suchergebnisse zu erhalten.

10.2.2    Modul positionieren 

An welcher Stelle ein Modul auf der Webseite erscheint, hängt von seiner Positionseigenschaft ab. Positionen sind Platzhalter im Seitentemplate und können, müssen aber nicht, ihrer Bezeichnung entsprechen, z. B. Oben [position-1], Navigationspfad/Breadcrumbs [position-2] oder Fusszeile Mitte [position-10] im Protostar-Template. Letztendlich bestimmt der Templateentwickler, wie eine Position behandelt wird und an welcher Stelle ein Modul mit einer bestimmten Position auftaucht. Deshalb erscheint eine in ein anderes Template gehüllte Website u. U. völlig anders. In diesem Fall ist die Kenntnis der Modulpositionen wichtig, um ein vernünftiges Seitenlayout aufzubauen.

Das mit Joomla! installierte Frontend-Template Protostar ist zwar einfach gestrickt, aber eine solide Basis für ein auf Responsive Design abgestimmtes Layout. Um die Modulpositionen besser nachzuvollziehen, hilft der Blick auf ein Schaubild, das jedes halbwegs sauber entwickelte Template in der Dokumentation anbietet. Abbildung 10.8 ist ein Beispiel solch eines Schaubilds für das Joomla!-Standardtemplate Protostar.

Abbildung 10.8    Protostar-Template: Ist Position 2, 3, 7 oder 8 des Protostar-Templates leer, erweitert sich der Inhaltsbereich nach oben, unten oder in die Breite; so wird der zur Verfügung stehende Platz immer optimal genutzt.

10.2.3    Moduldarstellung einschränken 

Gegen Ende des letzten Kapitels haben Sie die Darstellung des Benutzermenüs (Modultyp Navigation - Menü) so eingeschränkt, dass es nur für angemeldete Websitebesucher erschien. Das geschah in der Modulkonfiguration auf dem ersten Reiter, Modul, unter dem Feld Zugriffsebene. Die Darstellung einzelner Module lässt sich aber noch feiner steuern.

Über den Reiter Menüzuweisung legen Sie fest, auf welchen Webseiten das betreffende Modul erscheint (siehe Abbildung 10.11). Die Standardeinstellung der Dropdown-Liste Modulzuweisung ist Auf allen Seiten und schränkt die Darstellung in keiner Weise ein. Zur Auswahl stehen weiterhin Auf keinen Seiten (Ausblenden des Moduls), Nur auf den gewählten Seiten und Auf allen, ausser den gewählten Seiten. Für die letzten beiden Optionen erscheint unter der Dropdown-Liste eine Übersicht über alle von Ihnen angelegten Menüeinträge, die Sitemap Ihrer Website, auf der Sie jede Seite mit einem Häkchen markieren, auf der das Modul erscheint oder nicht erscheint. Das ermöglicht eine große Vielfalt beim Gestalten Ihrer Webseiten, da Sie hiermit jedes einzelne Layout direkt beeinflussen. Im Reiseforum gibt es beispielsweise ein Modul des Typs Beiträge - Kategorie, das die am häufigsten aufgerufenen Urlaubsziele (Beiträge der Kategorie Urlaubsziele) auf allen Seiten des Menüteilbaums Urlaubsziele listet.

Abbildung 10.11    Im Reiter »Menüzuweisung« markieren Sie die Webseiten, auf denen Module dargestellt oder ausgeblendet werden.

Beachten Sie, dass das Konfigurationsformular Links und Bedienelemente bereitstellt, die insbesondere für Websites mit vielen Seiten praktisch sind. So finden Sie oberhalb der Liste die Links Auswählen: Alle, Keine, die sofort die Häkchenmarkierung aller Webseiten setzen oder löschen. Bei komplexen Seiten- und Menüstrukturen klappen Sie Teilbäume mit den Plus-/Minusbuttons () ein oder aus; eine Abkürzung zum Ein- oder Ausklappen aller Teilbäume befindet sich wieder oberhalb der Liste Ausklappen: Alle, Keine.

10.2.4    Weitere Darstellungseinstellungen zu Modulen 

Abseits der eben vorgestellten Reiter teilen sich alle Module weitere allgemeine Optionen. Über den Reiter Modulberechtigungen regeln Sie, welche Benutzergruppen an der Administration des Moduls beteiligt sind. Arbeiten Sie an der Verfeinerung eines Templates, ist der Reiter Erweitert für Sie interessant.

• Menü-Tag-ID (nur für Menümodule), Menüklassensuffix: CSS-Element bzw. -Klasse, die an den Menücontainer (in der Regel eine <ul> – unnummerierte Liste) angehängt wird. Im Protostar-Template nutzen Sie bereits das Menüklassensuffix, um das Hauptmenü nicht in der oberen rechten Ecke darzustellen, sondern mithilfe der Klasse nav-pills oberhalb des Contentbereichs horizontal aufzuziehen. Die nav-pills-Definition ist dabei normaler CSS-Bestandteil des Templates, ein Element des integrierten CSS-Frameworks Bootstrap; andere Templates bieten hier möglicherweise andere Optionen. Achtung: Vor den hier angegebenen Klassen muss ein Leerzeichen stehen, da sie im Template an bereits vorgegebene Klassendefinitionen angehängt und durch das Leerzeichen voneinander getrennt werden.

• Zielposition (nur für Menümodule): Positionierungswerte für das neue Browserfenster, das ein Menüeintrag öffnet, dessen Zielfenster-Feld auf Neues Fenster ohne Navigation gestellt ist, z. B. »top=100,left=100,width=300«

• Alternatives Layout: Auswahl einer anderen, vom Template vorgegebenen Darstellungsvariante

• Caching, Cache-Dauer: Um die Erzeugung und Darstellung Ihrer Webseiten zu beschleunigen, nimmt Joomla! auf Kommando eine Zwischenspeicherung einmal generierter Module vor. Diesen sogenannten Caching-Mechanismus aktivieren Sie über die globale Konfiguration System • Konfiguration • Reiter System • Bereich Zwischenspeicher (Cache) (Einstellung An - Normales Caching). Über das Feld Caching in der Modulkonfiguration regeln Sie dann, ob der Zwischenspeicher für das aktuell in Bearbeitung befindliche Modul aktiviert (Globale Einstellung) oder deaktiviert ist. Eine Deaktivierung ist wünschenswert, wenn das Modul z. B. dynamische Daten enthält, die sich häufig aktualisieren: Nachrichten aus aller Welt oder ein Abflugticker. Die Cache-Dauer ist die Anzahl der Sekunden, die das erzeugte Modul im Zwischenspeicher bleibt, bevor es neu erzeugt wird. Für statische Inhalte tragen Sie hier hohe Werte ein. In Abschnitt 13.2.7, »Reiter ›System‹ • ›Zwischenspeicher (Cache)‹«, lesen Sie mehr über die Hintergründe der Cache-Mechanismen von Joomla!.

• Modul-Tag, Modulklassensuffix: HTML-Tag und optionale CSS-Klasse, die als Container für den Inhalt des Moduls dienen. Üblich ist das generische <div>-Tag, Sie dürfen aber auch andere semantische HTML5-Tags einsetzen, z. B. <section> (Bereich), <nav> (Navigation) oder <aside> (Seitenleiste). Beachten Sie, dass nicht jedes Modul dieses Feld einsetzt; Inhalte des Typs Navigation - Menü bleiben z. B. zwingend in einem <ul>-Container.

• Bootstrap-Grösse: Bootstrap ist ein verbreitetes CSS-Framework, das als Basis für das Layout vieler Joomla!-Templates dient, damit Templateentwickler nicht jedes Mal bei null anfangen müssen. Im Mittelpunkt steht die Aufteilung einer Webseite in zwölf gleich breite Spalten, auf die alle Seitenelemente verteilt werden. Um die gesamte Breite einzunehmen, z. B. bei Header oder Footer, sind also zwölf Spalten notwendig, für die Hälfte sechs Spalten etc.

  Im Kontext der Modulkonfiguration erfolgt die Spaltenaufteilung nicht für die Webseite, sondern den Bereich, in dem sich das Modul befindet. Sie könnten hier für zwei aufeinanderfolgende Module in der Seitenleiste eine Spaltengröße von 6 eingeben, um die Module nicht unter-, sondern nebeneinander anzuzeigen (zwei mal 6 Spalten entspricht der vollen 12-Spalten-Breite). Das wird in der Seitenleiste des Protostar-Templates ein bisschen eng, im breiteren Contentbereich ließe sich auf diese Weise aber vertikaler Platz sparen. Beachten Sie, dass das exakte Verhalten der hier vorgenommenen Einstellung auch stark vom eingesetzten Template abhängt.

• Header-Tag, Header-Klasse: Hier legen Sie fest, welches HTML-Tag der Überschriftencontainer nutzt und ob dieser eine begleitende CSS-Klasse für spezielle Formatierungen erhält. Die voreingestellte Ebene <h3> ist aus HTML-semantischer Sicht zwar nicht korrekt, aber verschmerzbar und macht in den meisten Fällen für Seitenleistenmodule Sinn, da <h1> und <h2> bereits für Über- und Unterüberschriften des Contentbereichs vorgesehen sind. Passen Sie dieses Feld also an, wenn Sie z. B. ein Modul in den Contentbereich schieben und die Überschriftenebene an den umgebenen Inhalt angleichen oder falls Sie Überschriften-Tags vollständig semantisch im Inhalt verwenden und für Überschriften rein funktioneller Seitenleistenmodule eine besonders formatierte <div> einsetzen.

• Modustil: Abhängig vom Template erhält das Modul über dieses Feld eine spezielle Optik.

10.2.5    Alle Modultypen vorgestellt 

Für eine Website stellen Module, die den Hauptinhalt mit begleitenden Informationen und Links unterstützen, das Salz in der Suppe dar. Tatsächlich sind Suchmaschinenalgorithmen inzwischen so programmiert, dass Seiten, die neben dem hauptsächlichen Content über wertvolle Zusatzinformationen verfügen, höher gerankt werden. Bevor Sie sich jetzt aber voll Neugier in das Joomla! Extensions Directory stürzen, um nach interessanten Kandidaten Ausschau zu halten, werfen Sie zuerst einen Blick in die Module, die Joomla! von Haus aus mitbringt und die zum Experimentieren mit dem Seitenlayout einladen.

Joomla! kommt standardmäßig mit über zwei Dutzend Modulen, über die Sie nicht nur Header, Footer oder Seitenleisten Ihrer Webseiten mit interessanten Funktionalitäten anreichern. Einige Module stellen auch Inhalte dar, sodass sie besser im Contentbereich einer Seite aufgehoben sind, z. B. der Newsflash oder der Newsfeed.

Beim Ausprobieren kann nichts schiefgehen. Einfach über Erweiterungen • Module • Button Neu ein neues Modul anlegen, den Modultyp auswählen und die Grundkonfiguration Titel und Position angeben, Speichern und einen Blick ins Frontend werfen, was sich verändert hat. Auf den folgenden Seiten finden Sie eine Übersicht über die Standardmodule.

»Banner«

Dieses Modul ist verfügbar, falls in Ihrer Joomla!-Version die offizielle Komponente Banner eingerichtet ist. (Ist das nicht der Fall, installieren Sie sie über das Joomla! Extensions Directory.) Über sie verwalten Sie Werbekunden und Bilder, die Sie an beliebigen Layoutpositionen platzieren (siehe Abbildung 10.12); siehe auch Abschnitt 15.1, »Banner einrichten«.

Abbildung 10.12    Mit Bannern locken Sie die Besucher auf andere Webseiten oder Websites; Joomla! stellt ein komplexes System mit Kunden- und Kategorieverwaltung bereit.

»Beiträge - Archiv«

Listet Monate (nicht Beiträge), für die archivierte Beiträge existieren. Klickt ein Benutzer auf einen dieser Monate, gelangt er zu einer Seite des Menüeintragstyps Archivierte Beiträge.

»Beiträge - Beliebte«

filterbare Anzeige einer Beitragsliste mit den meisten Zugriffen

»Beiträge - Kategorie«

umfangreich konfigurierbare Liste von Beiträgen einer oder mehrerer Kategorien – siehe Abbildung 10.13

»Beiträge - Kategorien«

Listet alle Beiträge einer oder mehrerer Unterkategorien.

»Beiträge - Neueste«

Zeigt eine festgelegte Anzahl der neuesten Beiträge einer oder mehrerer Kategorien.

»Beiträge - Newsflash«

Im Unterschied zu den vorgenannten Beitragsmodulen teasert der Newsflash auch den Inhalt der Beiträge und sogar Beitragsbilder an – nichts für die Seitenleiste, sondern eher für den breiteren Contentbereich.

»Beiträge - Verwandte«

Mithilfe eines raffinierten Mechanismus verknüpfen Sie Beiträge abseits von Kategorien und Schlagwörtern miteinander. Dazu zweckentfremden Sie das Feld Meta-Schlüsselwörter der Beitragskonfiguration, das eigentlich für HTML-Keywords vorgesehen war. Beiträge mit identischen Schlüsselwörtern werden dann für diesen Modultyp in Betracht gezogen.

»Benutzer - Anmeldung«

Anzeige des kleinen Login-Formulars, das Sie bereits von der Standardinstallation kennen

»Benutzer - Neueste«

Liste der zuletzt registrierten neuen Benutzer

»Benutzer - Wer ist online«

Zeigt die Anzahl der Gäste und angemeldeten Benutzer, die gerade auf der Website surfen.

»Eigene Inhalte (Leeres Modul)«

Über dieses Modul platzieren Sie beliebige statische oder dynamische Inhalte auf Ihrer Webseite, die nicht unbedingt aus in Joomla! gespeicherten Inhaltselementen bestehen. Das kann reiner Text oder auch ein komplexes HTML- und JavaScript-Konstrukt sein, beachten Sie dabei aber, dass Editorrestriktionen greifen. Standardmäßig filtert TinyMCE z. B. Iframes aus dem eingegebenen Inhalt, sodass eine Einbettung von YouTube- oder Vimeo-Videoclips (siehe Abbildung 10.13) erst durch eine nachträgliche Konfiguration möglich ist (Menü Erweiterungen • Plugins • Editor - TinyMCE • Feld Verbotene Elemente: iframe aus der Liste entfernen).

Abbildung 10.13    Beispielmodule für die Typen »Beiträge-Kategorie« und »Eigene Inhalte (Leeres Modul)« mit eingebettetem Video

»Fußzeile«

Blendet einen Kasten mit einem Copyright für Ihre Website und dem Lizenzhinweis für Joomla! ein – keine weitere Konfiguration vorgesehen.

»Navigation - Menü«

Eines der wichtigsten Module: der Container für ein Menü. Erst wenn Sie einem Menü dieses Modul zuweisen, erscheint es im Frontend. Die Konfiguration im Reiter Modul:

• Menü auswählen: Wählen Sie aus dieser Dropdown-Liste das in diesem Modul angezeigte Menü.

• Basiseintrag: Legt fest, welcher Teil des Menübaums angezeigt wird. Damit zeigen Sie auf einer bestimmten Webseite den Menübaum einer völlig anderen Seite. In der Regel wählen Sie hier Aktuell, um die Menüstruktur der Seite einzusetzen, auf der sich der Besucher gerade befindet.

• Erste Ebene, Letzte Ebene: Grenzen Sie die darzustellenden Menüebenen ein. In der Regel ist die Erste Ebene 1, die Letzte Ebene die tiefste, verschachtelte Ebene, die Ihr Menü enthält.

• Untermenüeinträge anzeigen: Blendet die Untermenüs aller Menüpunkte ein, egal auf welcher Seite sich der Besucher befindet. Steht diese Option auf Nein, erscheint nur das Untermenü des Menüpunkts, auf dessen Seite sich der Besucher gerade befindet. Die Einstellung Ja ist insbesondere bei modernen Templates mit aufklappbaren Menüs wichtig, da hier immer die komplette Menüstruktur ausgegeben werden sollte.

»Navigation - Navigationspfad (Breadcrumbs)«

Einblenden der Brotkrumennavigation, die den Navigations-/Klickpfad der aktuell dargestellten Seite rekonstruiert. Damit weiß ein Besucher, an welcher Stelle der Webseitenhierarchie er sich befindet.

• »Aktuelle Seite« anzeigen: Ein-/Ausblenden des vorangestellten Texts »Aktuelle Seite«. Leider ist hier kein benutzerdefinierter Text einsetzbar.

• Startseite anzeigen, Text für die Startseite: Legt fest, ob der dargestellte Seitenpfad mit der Homepage beginnt und, falls Ja, wie die Bezeichnung an dieser Stelle lautet.

• Letztes Element anzeigen: Ein- oder Ausblenden der aktuellen Seite am Ende des Menüpfads. Lassen Sie sie besser eingeblendet, damit der Zweck der Breadcrumbs für den Besucher klar ersichtlich ist.

• Trennzeichen: Das Zeichen, das die Webseitenebenen voneinander trennt. Standard ist ein kleiner orangefarbener Pfeil (), der den Pfadcharakter dieser Linkliste betont. Aber auch Gedankenstriche (–), Bulletpunkte (N), das schließende französische Anführungszeichen (», Guillemet) oder das Pipesymbol (|) kämen infrage.

»Sprachauswahl«

Betreiben Sie eine multilinguale Website, erlaubt dieses Modul dem Besucher, mit Flaggen-Icons oder Textlinks zwischen den Sprachen zu wechseln.

»Statistiken«

Darstellung von Serverdaten und Beitragsstatistiken, z. B. Betriebssystem, PHP- und MySQL-Version, Cache- und Komprimierungseinstellungen. Diese Art von Informationen ist nichts fürs Frontend, da sie Hackern Details über das Serversystem verraten und diese damit Schwachstellen leichter identifizieren.

»Wrapper«

Dem Menüeintragstyp Iframe nicht unähnlich, stellen Sie über den Modultyp Wrapper externe Websiteinhalte in einem Iframe dar. Dazu nehmen die Moduleigenschaften nicht nur die URL auf, sondern auch Angaben zu Breite, Höhe und Anzeige der Scrollbalken.

»Zufallsbild«

Zwar bietet Joomla! in der Standardinstallation keine Galerie (eine passende Erweiterung lernen Sie in Abschnitt 17.2, »Bilder einbinden mit Phoca Gallery«, kennen), aber wenigstens ein Modul, das ein zufällig ausgewähltes Bild darstellt und so für die illustrative Auflockerung einer Webseite sorgt.

In der Modulkonfiguration legen Sie fest, in welchem Bilderverzeichnis (z. B. images/ plus ein von Ihnen zur Organisation von Bildern angelegter Unterordner) nach welchem Bildtyp (Dateiendung) ausgewählt wird. Zudem lässt sich hinter dieses Bild ein beliebiger Link setzen, auch externe URLs sind erlaubt. Zur Größenanpassung steht das Feld Breite (px) bereit, die Höhe passt sich automatisch an, sodass das Bildseitenverhältnis gleich bleibt.