Kapitel 7

So, jetzt gibt es pünktlich zu Heiligabend noch drei Kapitel. Wir sind jetzt im Buch auf Seite 180 von 410 :-)

Falls Ihr Fehler findet, bitte das Kontaktformular benutzen.

Viel Spaß beim Lesen

Im Frontend finden Sie zahlreiche Menüs. Sie sind oft als eigenständige Boxen dargestellt. Die Menüpunkte sind meist untereinander angeordnet (Abbildung 7.1).

Abbildung 7.1: Vertikales Menü (Main Menu)

Menüs können jedoch auch waagerecht in das Design mit eingebunden werden, so dass sie auf Anhieb gar nicht als zusammenhängendes Menü erkennbar sind (Abbildung 7.2).

Abbildung 72: Horizontales Menü (Top Menu)

Sehr angesagt sind CSS-Menüs, die auch noch transparent sind. Hier ein Beispiel von joomlart.com (Abbildung 7.3).

Abbildung 7.3: Aufklappbares Menü

Innerhalb von Joomla! werden diese Menüs dynamisch aus Datenbankinhalten erzeugt und zusammen mit den Menülinks im Arbeitsbereich Menüs verwaltet. Joomla! verfügt in den Beispieldaten über sechs Menüs (Main Menu, Top Menu, Other Menu, User Menu, Example Pages, Key Concepts). Das Top Menu ist ein horizontales Menü, die anderen Menüs sind vertikal. Jedes Menü ist mit einem so genannten Modul gekoppelt, das im Modulmanager verwaltet wird (Kapitel 10.2).

Lassen Sie uns ein Menü mit dem wunderschönen Namen Joomla! 1.5 Buch und einen Menüeintrag mit einem Link zu http://www.joomla.org/, der in einem neuen Fenster aufgeht, erzeugen. Es soll unterhalb des Main Menus auf der linken Seite positioniert werden.

Rufen Sie Menüs – Menüs – Neu auf und geben Sie im Feld Menütyp den internen Namen des Menüs ein. Achten Sie auf einen aussagekräftigen Namen ohne Leerzeichen. Im Feld Titel geben Sie den Namen ein, der später auf der Website erscheinen wird. Das Menü besteht aus dem internen, eigentlichen Menü, dem Sie Menülinks hinzufügen können, und einem korrespondierenden Modul, das dann positioniert werden kann (Abbildung 7.21).

Abbildung 7.21: Site – Menu Manager – Neu

Menütyp: Das ist der Name, der von Joomla! im Code genutzt wird. Hier dürfen Sie keine Leerzeichen verwenden. Ich nehme joomla_buch. Dieser Name taucht nicht auf der Website auf, er dient nur dazu, zwischen Modul und Menü eine Verbindung herzustellen.

Titel: Der Name des Menüs. Ich wähle Joomla! 1.5 Buch(mit Leerzeichen).

Beschreibung: Eine Beschreibung des Menüs. Die Beschreibung taucht nur intern im Backend auf, beispielsweise in den Listenanzeigen.

Modultitel: Der Name des Moduls. Ich wähle ebenfalls Joomla! 1.5 Buch.

Abbildung 7.22: Neues Menü im Menu Manager

Nach einem Klick auf Speichern erzeugt Joomla! ein neues Modul mit den angegebenen Parametern. Sie landen wieder in der Menüübersicht und sehen ein neues Menü noch ohne Menüeinträge (Abbildung 22). Das neue Menü taucht auch bereits im Menü Menü auf.

Wenn Sie auf das Bleistift-Icon rechts neben dem Link Joomla! 1.5 Buch klicken, landen Sie in der Übersichtsmaske für die Inhalte des Menüs Joomla! 1.5 Buch (Abbildung 7.23).

Abbildung 7.23: Menüeinträge – Joomla! 1.5 Buch

Da noch keine Inhalte vorhanden sind, klicken Sie auf das Icon Neu. In der dann erscheinenden Auswahlmaske können Sie den Menüeintragstyp aus vielen verschiedenen Bereichen wählen (Abbildung 7.24). Da wir noch ziemlich am Anfang unserer Joomla!-Kenntnisse stehen, wollen wir einen einfachen externen Link auf joomla.org einfügen.

Abbildung 7.24: Menu Manager – Menüeintragstyp wählen

Klicken Sie dazu auf den Link Externer Link. Es öffnet sich die entsprechende Bearbeitungsmaske (Abbildung 7.25).

Abbildung 7.25: Menülink bearbeiten

Das Formular, das sich öffnet, kennen Sie bereits. Hier können Sie die Details und die Parameter des Links festlegen.

Titel: Name des Links, der im Menü erscheint (Joomla! Projekt Website)

Übergeordneter Eintrag: Da das der erste Eintrag ist, gibt es noch keine Elternelemente.

Alias: Name der Kurz-URL (joomla-project)

Link: Der Link zur Seite (http://www.joomla.org)

Anzeigen in: Natürlich in unserem neuen Menü Joomla! 1.5 Buch

Freigegeben: Soll das Menü veröffentlicht werden? (Ja)

Reihenfolge: Da das der erste Eintrag ist, gibt es noch keine Sortierung. Grundsätzlich werden neue Einträge ans Ende des Menüs gestellt. Nach dem ersten Speichern kann die Reihenfolge verändert werden.

Zugriffsebene: Soll der Menüeintrag für die Gruppen Öffentlich (Besucher), Registriert oder Special sichtbar sein?

Bei Klick öffnen in: Was soll passieren, wenn jemand auf den Link klickt? Soll das Ziel im gleichen Browserfenster, einem neuen Browserfenster mit Navigation oder einem neuen Browserfenster ohne Navigation ausgeführt werden?

Wenn Sie auf Anwenden klicken, werden Ihre Daten gespeichert. Bei einem Klick auf Speichern werden die Daten gespeichert, und der Dialog wird verlassen.

Jetzt haben Sie das Menü erstellt und mit einem Link versehen. Bevor es allerdings im Frontend angezeigt wird, müssen Sie das ebenfalls neu entstandene Modul noch veröffentlichen. Klicken Sie im Menü Erweiterungen – Module (Abbildung 7.26) und dort auf den rote Kreuz in der Spalte aktiviert. Mithilfe der grünen Dreiecke können Sie das neue Menü unter das Hauptmenü positionieren.

Abbildung 7.26: Erweiterungen – Module – Site

Wenn Sie nun Ihre Website aufrufen, sollte dort Ihr neues Menü Joomla! 1.5 Buch stehen (Abbildung 7.27).

Abbildung 7.27: Neues Menü Joomla! 1.5 Buch

Leider sieht Ihr Menü anders aus als das Hauptmenü darüber. Der blaue Rahmen fehlt. Diese Verhaltensweise ist in der CSS-Datei des Templates festgelegt und kann natürlich auch verändert werden. Dazu muss das Modul eine bestimmte CSS-Klasse aufrufen. In diesem Fall heißt die Klasse, mit der unser Menü angezeigt wird, module. Sie können das durch einen Blick in den HTML-Quellcode der Website nachprüfen (siehe Listing 7.1).

<div class="module">
  <div>
    <div>
      <div>
        <h3>Joomla! 1.5 Buch</h3>
        <ul class="menu">
          <li class="item54">
            <a href="http://www.joomla.org" target="_blank">
            <span>Joomla! Projekt Website</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div> 

Listing 7.1: Quellcode des neuen Menüs 

Das Hauptmenü dagegen spricht die Klasse module_menu an (siehe Listing 2).

<div class="module_menu">
 <div>
   <div>
     <div>
       <h3>Hauptmenü</h3>
       <ul class="menu">
         <li id="current" class="active item1">
           <a href="http://localhost/joomla150/">
             <span>Startseite</span>
           </a>
         </li>

         ... weitere Links ...

        </ul>
      </div>
    </div>
  </div>
</div>

Listing 2: Quellcode Hauptmenü

In der Modulbearbeitung können Sie nun einstellen, dass das neue Menü auch diese Klasse anspricht. Klicken Sie auf Erweiterungen  Module  Joomla! 1.5 Buch. Im Feld Modul- Klassen-Suffix geben Sie einfach den fehlenden Text ein – _menu (Abbildung 7.28).

Abbildung 7.28: Änderung der CSS-Klasse

Nach dieser Änderung wird Ihr neues Menü wie gewünscht angezeigt (Abbildung 7.29). Bei einem Klick auf den Link Joomla! 1.5 Website sollte sich ein Browserfenster mit Navigation öffnen und die Website des Projektes anzeigen.

Abbildung 7.29: Das neue Menü mit geänderter CSS-Klasse

Der Papierkorb sammelt Ihre gelöschten Menüeinträge (Abbildung 7.19). Durch Auswahl des gelöschten Elements und Klick auf das Icon Wiederherstellen können Sie es wieder aus dem Mülleimer holen (Abbildung 7.20), mit einem Klick auf das Icon Löschen wird es endgültig gelöscht.

Abbildung 7.19: Menüs - Papierkorb

Abbildung 7.20: Menüs - Papierkorb - Wiederherstellen

Um ein Gefühl für die Dinge zu bekommen, experimentieren Sie ein wenig mit den Menüs. Die folgenden Bearbeitungsschritte sind für alle Menüs gleich. Rufen Sie den Menüpunkt Menüs – Main Menu auf. Sie sehen eine Auflistung der Menüpunkte, die im Main Menu auftauchen (Abbildung 7.5).

Abbildung 7.5: Menüeinträge – Main Menu

An dieser Stelle haben Sie vielleicht in Kapitel 4.1.2 schon den Menüpunkt Home in Startseite geändert. In der Tabelle können Sie verschiedene Funktionen durch einen einfachen Mausklick erledigen. Durch einen Klick auf die grünen Häkchen können Sie einen Menülink aktivieren und deaktivieren. Die Reihenfolge der Einträge können Sie durch einen Klick auf die grünen Dreiecke oder durch Eintragen von Ziffern in den Feldern daneben ändern. Bei der Ziffernmethode müssen Sie in der Überschrift auf das Diskettensymbol klicken, um eine Änderung auszulösen.

In der Spalte Zugriff können Sie durch Mausklick entscheiden, ob das Menü allen Besuchern (Öffentlich), nur registrierten Benutzern (Registriert) oder einem besonderen Benutzerkreis (Special) zur Verfügung stehen soll. Die Menüpunkte werden dann abhängig von der Benutzerberechtigung angezeigt oder unterdrückt.

Icon Menüs

Durch einen Klick auf dieses Icon gelangen Sie wieder in die Menü-Übersichtsmaske.

Icon Standard

Der Menüeintrag, der hier mit dem gelben Stern als Standard markiert steht, wird als Startseite angezeigt, wenn jemand die URL Ihrer Website aufruft. Momentan ist das der Menüeintrag Startseite. Sie können aber auch jedes beliebige andere Element zur Startseite machen. Kreuzen Sie die Checkbox an und klicken Sie auf das Icon Standard.

Icon Aktivieren/Deaktivieren

Der Zustand eines Inhaltselements kann veröffentlicht (aktiviert) oder nicht veröffentlicht (deaktiviert) sein. Diesen Zustand können Sie einzeln, durch Klick auf das grüne Häkchen bzw. das rote Kreuz ändern oder durch Ankreuzen der Checkbox mit anschließendem Klick auf das entsprechende Icon. In diesem Fall können Sie mehrere Menüpunkte gleichzeitig bearbeiten.

Icon Verschieben

Hier geht es um das Verschieben von Menüeinträgen. Lassen Sie uns den Text More about Joomla! in das Top Menü verschieben. Wählen Sie das entsprechende oder auch mehrere Menüelemente aus und klicken Sie auf das Icon Verschieben. Es öffnet sich nun ein Formular mit den verfügbaren Menüs. Im rechten Bereich sehen Sie die Elemente, die Sie verschieben wollen (Abbildung 7.6).

Abbildung 7.6: Menüs - Main Menu - Verschieben

Wählen Sie ein Menü aus, in das Sie die markierten Menüeinträge verschieben möchten. Das Ergebnis können Sie im Frontend bewundern (Abbildung 7.7).

Abbildung 7.7: Top Menü mit zusätzlichem Eintrag

Icon Kopieren

Sie können auch Menüeinträge kopieren. Wählen Sie ein oder mehrere Menüelemente aus und klicken Sie auf das Icon Kopieren. Es öffnet sich wie beim Verschieben ein Formular mit den zur Verfügung stehenden Menüs. Bestimmen Sie das Menü, in das Sie die markierten Menüeinträge kopieren wollen.

Icon Papierkorb

Um eine gewisse Sicherheit bei der Bearbeitung zu haben, können Sie Menüeinträge nicht sofort löschen. Sie können sie nur in den Papierkorb werfen.

Um sie dorthin zu befördern, wählen Sie ein oder mehrere Menüelemente aus und klicken auf das Icon Papierkorb. Die markierten Menüeinträge landen im Papierkorb. Den Inhalt des Papierkorbs können Sie sich unter dem Link Menüs  Papierkorb anzeigen lassen.

Icon Bearbeiten (Menüeintrag bearbeiten)

Hier können Sie ein vorhandenes Menü ändern, beispielsweise die Web Links. Nach einem Klick auf den Namen Links sehen Sie das Änderungsformular für Menüelemente (Abbildung 7.8).

Abbildung 7.8: Main Menu – Startseite – Bearbeiten

Das Formular ist in drei Bereiche aufgeteilt.

• Typ

• Details

• ParameterMenüeintrag bearbeiten – Bereich Typ

Jeder Menüeintrag ist von einem bestimmten Typ. Wir werden bei der Neuanlage noch näher darauf eingehen. Ein Menüeintrag kann beispielsweise auf eine eingebaute Joomla!-Komponente verweisen, ein Inhaltselement, einen Link auf eine externe Website darstellen und vieles andere mehr. In diesem Bereich sehen Sie, von welchem Typ der Link ist, in unserem Fall ein Link auf die Joomla!-Weblinks-Komponente (Abbildung 7.9).

Abbildung 7.9: Menüeintrag bearbeiten – Menüeintragstyp wählen

Dieser Manager ist neu in der Version Joomla! 1.5 und wirklich praktisch. In der 1.0.x- Version gab es keine Möglichkeit einer Typänderung von Menüeinträgen. Man musste den alten Menüeintrag löschen und einen neuen Menüeintrag erstellen. Sie könnten jetzt hier die Anzeige umstellen für eine einzelne Kategorie oder für einen Link-Vorschlags- Menüpunkt, mit dem Sie anderen Benutzern erlauben, Links vorzuschlagen.

Schließen Sie den Wizard zunächst wieder. Wir werden bei der Erstellung eines neuen Menüeintrages auf ihn zurückkommen.

Menüeintrag bearbeiten – Bereich Details

Abbildung 7.10: Menüeintrag Bearbeiten – Details

ID: In einer Verwaltung braucht alles eine Identifikationsnummer, so auch unser Menüeintrag. In diesem Fall wird der Menüeintrag in der Datenbank unter der Nummer 48 geführt. Die Nummer wird durch Joomla! bei der Anlage des Eintrages vergeben und dient der internen Verwaltung. Sie ist nicht änderbar.

Name: Das ist der Name des Menüs, der auf Ihrer Website erscheint.

Alias: Das ist der Name der suchmaschinenfreundlichen URL hinter dem Domainnamen. Wenn Sie diese eingeschaltet haben (siehe Kapitel 6), sieht Ihre URL für dieses Menü so aus:

http://localhost/joomla150/web-links

Link: Ist der Aufruf der Komponente, also ebenfalls der Teil der URL hinter dem Domain­namen, mit dem Sie Ihre Website aufrufen. In unserem Fall index.php?option=com_weblinks&view=categories.

Anzeigen in: Hier können Sie den Erscheinungsort des Eintrages ändern, ihn also in ein anderes Menü verschieben. Im Optionsfeld wird Ihnen eine Liste der verfügbaren Menüs angeboten.

Übergeordneter Eintrag: Menüs können natürlich auch geschachtelte, baumartige Einträge enthalten. Oben heißt, dass dieser Eintrag auf der obersten Ebene liegt. Die anderen Einträge stellen vorhandene Menüeinträge dar. Wenn Sie die Links beispielsweise unter News einordnen und abspeichern, ändert sich die Anzeige in der Eintragsliste (Abbildung 7.11) und die Anzeige auf Ihrer Website (Abbildung 7.12). Auf der Website ist der Menüeintrag Links jetzt in die News gerutscht. Sie müssen also erst auf News klicken, um den Links-Eintrag wiederzusehen. Auf diese Art lässt sich ein Menü Ihrer Website sehr einfach und effektiv wie ein Dateibaum strukturieren.

Abbildung 7.11: Baumstrukturen im Menu Manager

Abbildung 7.12: Baumstrukturen auf der Website

Freigegeben: Hier können Sie einen Menüeintrag veröffentlichen.

Reihenfolge: Wählen Sie aus der Optionsliste aus, hinter welchem Link dieser Link positioniert werden soll.

Zugriffsebene: Wer darf den Eintrag sehen? Jeder, nur registrierte Benutzer oder nur die Special-Benutzergruppe.

Bei Klick öffnen in: Eine sehr praktische Auswahl, die das Verhalten des Links beeinflusst. Nach einem Klick wird die Seite im gleichen oder in einem neuen Browserfenster geöffnet. Sie können noch beeinflussen, ob das neue Fenster mit oder ohne Browsernavigation angezeigt werden soll.

Menüeintrag bearbeiten – Parameter

Die möglichen Parameter eines Menüeintrages hängen mit dem Typ des Eintrages zusammen. Ein simpler Link hat natürlich weniger Parameter als eine konfigurierbare Liste oder beispielsweise der Frontpage-Link.

In unserem Fall geht es ja um einen Link auf die Kategorien (mehr über diese Komponenten finden Sie in Kapitel 9). Die Anzahl und die Art der Parameter sind abhängig vom Typ des Menüeintrages. Sie können die Parameterfelder durch einen Klick auf die Überschrift auf- und zuklappen. Bei aufgeklappten Parameterbereichen zeigt der grüne Pfeil neben der Überschrift nach unten.

Parameter – Einfach

Die einfachen Parameter sind für alle Menülinks einheitlich (Abbildung 7.13).

Abbildung 7.13: Menüeintrag bearbeiten – Parameter – Einfach

Bild: Hier können Sie ein Bild angeben, das im Wurzelverzeichnis des Media Managers (/images/stories/) liegen muss. Dieses Bild wird abhängig vom Template links neben dem Menüeintrag angezeigt.

Bildausrichtung: Soll das Bild links oder rechts stehen?

Einen Feedlink anzeigen: In Joomla! 1.5 ist es möglich, zu jeder Listendarstellung einen RSS Feed zu erzeugen. Je nach Inhalt der Liste ist dies wünschenswert oder nicht. Hier werden bei Listendarstellungen RSS Feed Links im Browser eingeblendet, die die Listeneinträge enthalten.

Parameter – Komponente

Dieser Bereich der Parameter bezieht sich explizit auf die im Link angesprochene Komponente, In unserem Fall die Weblink-Komponente. Sie besteht aus mehreren Stufen. Nach dem ersten Klick sehen wir bei unserer Konfiguration die vorhandenen Kategorien und einen Standardtext (Abbildung 7.14).

Abbildung 7.14: Weblink-Kategorien im Frontend

Nach einem Klick auf eine Kategorie sehen Sie einen Tabelle mit den entsprechenden Links (Abbildung 7.15).

Abbildung 7.15: Weblink-Tabellendarstellung im Frontend

Dieses Konstrukt können Sie in den Komponenten-spezifischen Parameter verändern (Abbildung 7.16).

Abbildung 7.16: Menüeintrag bearbeiten – Parameter Komponente

Beschreibung: Hier können Sie die Überschrift über den Kategorien ein- oder ausblenden.

Weblinks-Introtext: Hier können Sie eine individuelle Überschrift vergeben (Abbildung 7.17).

Kategorie: Weblinks sind in Kategorien eingeordnet. Hier können Sie die Kategorie wählen, die Sie anzeigen wollen.

Zugriffe: In der Trefferspalte werden die Zugriffe von Besuchern Ihrer Seiten auf die entsprechenden Links gezählt. Sie können die Trefferspalte hier ein- oder ausblenden.

Link-Beschreibungen: Hier können Sie die Beschreibung, die unter dem Link in der Linkliste steht, ein- oder ausblenden.

Andere Kategorien: Wenn Sie sich in der Tabellendarstellung der Links befinden, sehen Sie die Standardtexte oder Ihre in den Parametern festgelegten Texte. Darunter befindet sich eine Liste mit verfügbaren Kategorien und Sektionen (falls es weitere Kategorien gibt). Diese Liste können Sie hier ein- bzw. ausschalten.

Tabellenüberschriften: Hier können Sie die Tabellenüberschriften direkt über den Links ein- bzw. ausblenden.

Abbildung 7.17: veränderter Text in der Kategoriendarstellung

Parameter – System

Abbildung 7.18: Menüeintrag bearbeiten – Parameter System

Hier finden Sie weitere Parameter, die mit dem Erscheinungsbild des Links zu tun haben. Die Trennung zwischen einfachen und System-Parametern ist in meinen Augen noch nicht deutlich genug.

Seitentitel: Hier können Sie einen Text für den Seitentitel, der auf der Website und im Bowser im oberen Balken angezeigt wird, angeben.

Seitentitel anzeigen: Hier können Sie den Seitentitel ein- und ausblenden.

Seiten-Klassen-Suffix: Hier können Sie einen Textstring angeben, beispielsweise meine_menueeintraege. Diese Bezeichnung wird dann an den Klassennamen im HTML-Code angehängt. In Ihrer CSS-Datei müssen Sie eine entsprechende Klasse vorsehen, um den Block mit einem anderen Design erscheinen zu lassen.

SSL aktiviert: Hier können Sie wählen, ob der erzeugte Link das sichere HTTPS-Protokoll unterstützt. Die Auswahl setzt eine funktionsfähige SSL-Umgebung auf Ihrem Server voraus. In unserer lokalen XAMPP lite-Umgebung funktioniert die SSL-Verschlüsselung problemlos.

Icon Neu

Ein neues Menü erzeugen wir im Kapitel 7.4, unten auf dieser Seite.