Joomla! 2.5 (Teil 38): Eigene Templates entwickeln (9)
Im vorherigen Tutorial ging es darum, wie sich die Ausgabe der Module im Frontend mittels Overrides überschreiben bzw. individualisieren lässt. Nun werden Frontend-Inhalte bekanntermaßen nicht nur mittels Modulen ausgegeben. Für viele Inhalte sind Komponenten verantwortlich. Denkt beispielsweise an die Ausgabe der eigentlichen Beiträge im Frontend. Kein Wunder also, dass sich Overrides auch für Komponenten definieren lassen. Wie das genau funktioniert, zeige ich euch in diesem Tutorial.
Interessant ist das Überschreiben von Komponenten zunächst einmal natürlich, wenn es ums Anpassen der normalen Textausgabe geht. Genau dieser Aspekt wird in diesem Tutorial genauer unter die Lupe genommen.
Joomla! gibt die Inhalte anhand eines bestimmten Schemas aus. So werden Startseitenbeiträge beispielsweise anderes behandelt als normale Artikel. Gleiches gilt für die Blog- und die Kategorieansicht. Dieser Punkt ist es dann auch, der "schuld" daran ist, dass sich die Overrides bei den Komponenten etwas schwieriger als bei den Modulen darstellen. Prinzipiell funktionieren beide Varianten aber ähnlich.
Bevor man mit dem Überschreiben der Komponenten-Ausgabe beginnt, muss man sich mit der Struktur der Joomla!-Komponenten vertraut machen. Das zentrale Verzeichnis für alle Komponenten liegt im Joomla!-Stammverzeichnis und hat den Namen components.
Darin findet ihr für jede vorhandene Komponente ein eigenes Verzeichnis. Die Namen der Verzeichnisse sind auch hierbei wieder weitestgehend selbsterklärend. So steht com_banners beispielsweise für die Banner-Komponente. com_newsfeeds repräsentiert hingegen die Newsfeeds-Komponente.
Wie sich die Overrides nutzen lassen, zeige ich anhand eines typischen Beispiels. Wenn ihr innerhalb von Joomla! einen Artikel im Frontend aufruft, sieht das in etwa folgendermaßen aus:
Diese Ausgabe soll angepasst werden.
Entscheidende Bedeutung kommt im Zusammenhang mit den Komponenten-Overrides den verschiedenen Ansichten bzw. Views zu. Sehr schön lässt sich dieses Prinzip anhand der Artikel beschreiben.
Zentrale Anlaufstelle für die Komponenten in Joomla! ist das Verzeichnis components, das innerhalb des Stammverzeichnisses der Joomla!-Installation liegt. Innerhalb dieses Verzeichnisses gibt es für jede auf dem System vorhandene Komponente ein eigenes Verzeichnis. Für die Anzeige der Artikel im Frontend ist die Komponente com_content verantwortlich. Die betreffende Verzeichnisstruktur dieser Komponente sieht folgendermaßen aus:
/components
/com_content
/views
/article
/category
…
Entscheidende Bedeutung kommt hier dem Verzeichnis views zu. Darin sind sämtliche Ansichten bzw. Views enthalten, die für diese Komponente verfügbar sind. Im Fall von com_content sind das u.a. die folgenden:
• archive – archivierte Beiträge
• article – normale Beiträge
• categories – die Kategorieansicht
• category – hierin liegt beispielsweise die Blog-Ansicht.
• featured – die Hauptbeiträge
Wie die Views letztendlich aussehen, ist jeweils in den tmpl-Verzeichnissen festgelegt. Für article findet ihr die verantwortliche default.php also hier:
components/com_content/views/article/tmpl/default.php
Jetzt wird fast unweigerlich die Frage auftauchen, wie man eigentlich herausfindet, welches View-Verzeichnis für die anzupassende Anzeige verantwortlich ist?
Am einfachsten lässt sich das über die URLs der Seite ermitteln. Dazu solltet ihr allerdings die suchmaschinenfreundlichen URLs deaktivieren. Ruft Site>Konfiguration auf. Stellt im Bereich Suchmaschinenoptimierung (SEO) die verfügbaren Optionen auf Nein.
Wird nun die relevante Seite im Frontend aufgerufen, dürfte deren URL in etwa folgendermaßen aussehen:
http://localhost/joomla25/index.php?option=com_content&view=category&layout=blog&id=21&Itemid=268
Was ist anhand dieser Adresse zu erkennen?
• Es handelt sich um die Komponente com_content.
• Als View greift hier category.
• Es handelt sich um eine Blog-Ansicht.
Dieses Hintergrundwissen genügt, um die gewünschten Änderungen vorzunehmen. Wie sich die Komponentenausgabe überschreiben lässt, kann man wieder am besten anhand eines praktischen Beispiels zeigen. Werft dazu einen Blick auf die folgende Abbildung:
Die Überschrift wird hier standardmäßig mittels h2-Element ausgegeben. Das wird auch deutlich, wenn man sich den im Frontend generierten Quellcode genauer ansieht.
<div id="content"><div class="blog"> <h2> <span class="subheading-category">Komponenten</span></h2> <div class="category-desc"> <p> ... |
Diese Ausgabe soll nun dahingehend geändert werden, dass anstelle von h2 jeweils ein h2-Element für die Anzeige dieser Überschriften verwendet wird. An diesem Punkt kommen die Komponenten-Overrides ins Spiel. Öffnet dazu das html-Verzeichnis eures Templates. (Sollte es ein solches Verzeichnis noch nicht geben, legt es zunächst an.
Lest in diesem Zusammenhang auch die Hinweise, die es im vorherigen Tutorial zum Thema Modul-Overrides gab). Erzeugt innerhalb von html das Verzeichnis com_content. Der Verzeichnisname muss dabei exakt dem Verzeichnisnamen der Komponente entsprechen, deren Inhalt überschrieben werden soll. Werft dafür noch einmal einen Blick auf die Adresse des betreffenden Artikels:
http://localhost/joomla25/index.php?option=com_content&view=category&layout=blog&id=21&Itemid=268
Ihr müsst in eurem Template also die folgende Verzeichnisstruktur anlegen:
html
com_content
category
Wenn ihr anschließend eurer Template-Verzeichnis aufruft, sollte sich dieses Bild ergeben:
Kopiert aus dem Verzeichnis com_content/views/category/tmpl die beiden Dateien blog.php und index.php in das category-Verzeichnis eures Templates. Selbstverständlich ist es nicht immer ganz klar, welche der innerhalb des tmpl-Verzeichnis liegenden Dateien für die Anzeige im Frontend tatsächlich verantwortlich ist. Hier hilft dann aber meistens ein Blick in den im Frontend generierten Quellcode weiter.
Seht euch dort die relevante Passage an und vergleich diese mit den im tmpl-Verzeichnis vorhandenen Dateien. So kommt man der richtigen Datei recht schnell auf die Spur. (Zumal die Dateinamen innerhalb von tmpl logisch gewählt sind, wodurch man auch noch mal deutliche Hinweise auf die richtigen Dateien bekommt).
Öffnet nun die in eurem category-Verzeichnis liegende blog.php in einem Editor eurer Wahl. Der entsprechende Code-Abschnitt sieht folgendermaßen aus:
<?php if ($this->params->get('show_category_title', 1) or $this->params->get('page_subheading')) : ?> <h2> <?php echo $this->escape($this->params->get('page_subheading')); ?> <?php if ($this->params->get('show_category_title')) : ?> <span class="subheading-category"><?php echo $this->category->title;?></span> <?php endif; ?> </h2> <?php endif; ?> |
Hierdurch wird die Überschrift jeweils mittels h2-Element ausgegeben. Ändert also das öffnende und schließende h2 jweils in h2 ab.
<?php if ($this->params->get('show_category_title', 1) or $this->params->get('page_subheading')) : ?> <h2> <?php echo $this->escape($this->params->get('page_subheading')); ?> <?php if ($this->params->get('show_category_title')) : ?> <span class="subheading-category"><?php echo $this->category->title;?></span> <?php endif; ?> </h2> <?php endif; ?> |
Wenn ihr euch nach dem Speichern der blog.php den im Frontend generierten Quellcode ansteht, werdet ihr feststellen, dass die Artikel jetzt tatsächlich mit einer Überschrift erster Ordnung – also mit dem h2-Element – ausgegeben werden.
Auf diese Weise lässt sich jede Ausgabe einer Komponente im Frontend beliebig gestalten. Das gilt dann übrigens nicht nur für Joomla!-eigene Komponenten. Das Prinzip lässt sich selbstverständlich auch auf alle nachträglich installierten Komponenten anwenden.
Schreibe einen Kommentar