Joomla! 2.5 (Teil 37): Eigene Templates entwickeln (8)

Die Ausgabe der Module und Komponenten ist von Hause aus leider nicht immer so, wie man sich das wünscht. So werden die Modulüberschriften beispielsweise standardmäßig durch h3-Elemente ausgegeben. Wer das nicht will, muss zu den sogenannten Overrides greifen. Dank denen lässt sich die Ausgabe der Joomla!-Inhalte vollständig individualisieren. Das geschieht im jeweils aktuellen Template. Die eigentlichen Joomla!-Core-Dateien bleiben davon also unberührt, was natürlich auch den positiven Effekt hat, dass die Änderungen nach einem Joomla!-Update unverändert verfügbar sind.

Wir empfehlen:
Joomla!-Training

Warum sollte man eigentlich die Modul- und/oder die Komponenten-Ausgabe überschreiben? Dafür kann es ganz unterschiedliche Gründe geben. Um zu verstehen, warum das Überschreiben wichtig sein kann, muss man wissen, wie Joomla! Inhalte eigentlich ausgibt. Bei Joomla! gibt es bekanntermaßen eine strikte Trennung zwischen Inhalt und Design. Die eigentlichen Inhalte werden in einer Datenbank gespeichert. Für die Ausgabe wird auf PHP-Dateien zurückgegriffen. Sämtliche dieser Dateien, die für die Ausgabe der Module im Frontend verantwortlich sind, findet ihr im Joomla!-Stammverzeichnis unter modules.

 

Darin gibt es für jedes Modul, das ihr installiert habt bzw. das bei Joomla! standardmäßig mit dabei ist, ein eigenes Verzeichnis. Die Bezeichnungen der Verzeichnisse sind weitestgehend selbsterklärend. So steht mod_articles_archive für das Modul Archivierte Beiträge, während mod_search das Such-Modul repräsentiert.

Wollte man jetzt das Aussehen eines dieser Module verändern, könnte man diese Dateien öffnen und entsprechend anpassen. Das Problem dabei: Beim nächsten Joomla!-Update gehen diese Änderungen verloren.

Genau an diesem Punkt kommen die Template-Overrides ins Spiel. Mit den Template-Overrides lässt sich die Core-Ausgabe übersteuern. Ermöglicht wird das durch die Template-Dateien, die mit den Layout-Schichten von Modulen und Komponenten korrespondieren.

Joomla! überprüft, ob eine solche Datei im Template-Verzeichnis enthalten ist. Wenn das der Fall ist, benutzt Joomla! diese Datei und übersteuert damit die Standardausgabe.

Bevor es in die Praxis geht, noch ein paar grundsätzliche Worte zu dem dahinter liegenden Prinzip. Denn erst das in Joomla! 1.5 integrierte MVC-Architekturmuster macht es möglich, HTML-Layouts von Erweiterungen (Modulen und Komponenten) über das Template zu verändern.

Stellt sich zunächst natürlich die Frage, was es mit diesem MVC eigentlich auf sich hat. MVC steht für Model-View-Controller. Eine ausführliche Einführung ins Thema findet ihr unter http://de.wikipedia.org/wiki/Model_View_Controller.

 

Um Overrides anwenden zu können, müsst ihr innerhalb eures Template-Verzeichnisses ein html-Verzeichnis anlegen.

 

Achtet unbedingt darauf, dass dieses Verzeichnis in jedem Template angelegt werden muss, auf das die Overrides angewendet werden sollen. Das Override greift also tatsächlich nur im aktuellen Template. Ich beschreibe die Overrides hier anhand des Anmelden-Moduls, das in der Position left angezeigt wird.

 

Voraussetzung dafür ist eine Modulposition left.

Platziert über Erweiterungen>Module das Modul innerhalb dieser Position. Legt nun innerhalb eures html-Verzeichnisses das Verzeichnis mod_login an. Der Name muss exakt dem Verzeichnisnamen entsprechen, der auch im allgemeinen modules-Verzeichnis von Joomla! angegeben ist. Achtet also auch unbedingt auf Kleinschreibung der Verzeichnisnamen.

Wechselt dann in das Verzeichnis modules/mod_login/tmpl.

 

Kopiert die beiden Dateien index.html und default.php in das Verzeichnis mod_login, das ihr im html-Verzeichnis eures Templates angelegt habt. Die index.html besitzt wieder lediglich die Funktion, zu verhindern, dass direkt auf das Verzeichnis zugegriffen wird.

;

Angepasst wird die Modulausgabe über die Datei default.php. Öffnet diese Datei in einem Editor eurer Wahl. Im aktuellen Beispiel soll der Link Passwort vergessen? gelöscht werden. Die folgenden Schritte könnt ihr auf jedes Joomla!-Modul anwenden, um so die Ausgabe umzuschreiben. Sucht innerhalb der Datei nach folgendem Eintrag:

  • get('allowUserRegistration')) : ?>

Darüber wird das Modul ins Dokument geschrieben. Zugegebenermaßen ist nicht immer ganz klar, an welcher Stelle nun eigentlich Anpassungen notwendig sind. Am besten ist es daher immer, wenn man sich den im Frontend generierten Quellcode der Seite ansieht. Der sieht für die zuvor gezeigte Syntax folgendermaßen aus:

So kann man am ehesten die relevanten Stellen innerhalb der default.php finden. Um den Link Passwort vergessen? nicht mehr im Frontend anzuzeigen, entfernt man die folgende Passage:

  • Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

     

    Dieses erste Beispiel hat einen Eindruck davon vermittelt, wie sich Modul-Overrides nutzen lassen. Auf diese Weise könnt ihr nun tatsächlich die Ausgabe sämtlicher Module beeinflussen. Interessant kann das beispielsweise auch sein, wenn ihr die CSS-Klassen oder Attribute der Module anpassen wollt. Ein typisches Beispiel dafür ist das Suchen-Modul.

     

    Dieses Suchfeld ist wenig spektakulär. Daher soll es noch um eine zusätzliche Funktion erweitert werden. Sobald ein Besucher mit dem Mauszeiger auf das Suchfeld zeigt, soll ein kleiner Hinweistext in einem Tooltipp-Fenster zu sehen sein.

    Um das Suchen-Modul anzupassen, müsst ihr in eurem html-Verzeichnis das Verzeichnis mod_search anlegen.

    Kopiert in dieses Verzeichnis die beiden Dateien index.html und default.php aus dem Verzeichnis modules/mod_search/tmpl. Der relevante Eintrag innerhalb der default.php sieht folgendermaßen aus:

    $output = '';

     

    Auch hier noch einmal der Hinweis: Wenn ihr nicht wisst, wo sich der anzupassende Teil innerhalb der Datei befindet, seht euch den im Frontend generierten Quellcode an.

       

    Ein Tooltipp lässt sich am einfachsten über das Attribut title definieren. Als Wert wird diesem Attribut der im Tooltipp anzuzeigende Text zugewiesen.

    title="Bitte einen Suchbegriff eintragen"

    Dieses Attribut kann nun dem input-Element der Seite zugewiesen werden. Insgesamt sollte die input-Passage dann folgendermaßen aussehen:

    $output = '';

    Mehr ist tatsächlich nicht nötig, um die gewünschte Ausgabe zu erreichen.

    Fazit

    Dieses Tutorial hat gezeigt, wie ihr die Ausgabe der Module im Frontend überschreiben könnt. Dieselbe Funktionalität gibt es auch für Komponenten. Mehr dazu im nächsten Tutorial.

    Wir empfehlen:
    Dreamweaver-Video-Training

    Unsere Empfehlung für dich

    Joomla! für Einsteiger und Aufsteiger

    Joomla! für Einsteiger und Aufsteiger

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

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

    Zum Training