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.
Wir empfehlen:
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:
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:
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:
• 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.
Komponenten
...
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:
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:
params->get('show_category_title', 1) or $this->params->get('page_subheading')) : ?>
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.
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
Wir verwenden hier Cookies, um Ihnen eine bessere Nutzererfahrung zu bieten. Durch Klicken auf „Okay“ stimmen Sie der Verwendung der Cookies zu. Unter „Info“ erfahren Sie mehr über die hier verwendeten Cookies. Info
Diese Cookies sind für den Betrieb der Website unbedingt erforderlich und enthalten Einstellungen, die die grundlegenden Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.
Cookie
Typ
Dauer
Beschreibung
cookielawinfo-checkbox-advertisement
0
11 months
This cookie is set by GDPR Cookie Consent plugin. The purpose of this cookie is to check whether or not the user has given their consent to the usage of cookies under the category 'Advertisement'.
cookielawinfo-checkbox-analytics
0
11 months
This cookie is set by GDPR Cookie Consent plugin. The purpose of this cookie is to check whether or not the user has given the consent to the usage of cookies under the category 'Analytics'.
cookielawinfo-checkbox-necessary
0
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-non-necessary
0
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Non Necessary".
cookielawinfo-checkbox-performance
0
11 months
This cookie is set by GDPR Cookie Consent plugin. The purpose of this cookie is to check whether or not the user has given the consent to the usage of cookies under the category 'Performance'.
viewed_cookie_policy
0
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Um unsere Website weiter zu verbessern, erfassen wir spezielle, personenbezogene Daten für Statistiken und Analysen sowie die Verwendung von eingebetteten Inhalten. Für diese Form von Cookies holen wir ausdrücklich die Zustimmung des Benutzers ein, bevor die Cookies verwendet werden.
Cookie
Typ
Dauer
Beschreibung
psd_shop_session
1
2 days
This cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user session on the website.
test_cookie
0
11 months
This cookie is set by doubleclick.net. The purpose of the cookie is to determine if the users' browser supports cookies.
Diese Cookies helfen uns zu verstehen, wie unsere Besucher mit der Website interagieren. Es hilft uns, die Anzahl der Besucher, von wo die Besucher kommen, und die Seiten, auf denen sie sich aufhalten, zu verstehen und zu verbessern. Diese Statistik-Cookies sammeln solche Daten und werden anonym gemeldet, um Inhalte zu optimieren.
Cookie
Typ
Dauer
Beschreibung
_ga
0
2 years
This cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, camapign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assigns a randoly generated number to identify unique visitors.
_gid
0
1 day
This cookie is installed by Google Analytics. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the wbsite is doing. The data collected including the number visitors, the source where they have come from, and the pages viisted in an anonymous form.
Diese Cookies sammeln Informationen darüber, wie Besucher unsere Seiten nutzen, beispielsweise welche Seiten Besucher am häufigsten aufrufen und ob sie Fehlermeldungen von der Website erhalten. Alle Informationen, die diese Cookies sammeln, sind anonym und führen zu keiner Identifizierung der Besucher. Sie werden nur verwendet, um die Funktionsweise komfortabler zu machen und die Website zu verbessern.
Cookie
Typ
Dauer
Beschreibung
_gat
0
1 minute
This cookies is installed by Google Universal Analytics to throttle the request rate to limit the colllection of data on high traffic sites.
Werbe-Cookies helfen uns dabei, unsere Besucher mit für sie interessante Werbe- und Marketingkampagnen zu bespielen.
Cookie
Typ
Dauer
Beschreibung
IDE
1
2 years
Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.