Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.
 
Inhaltsverzeichnis
Vorwort
Teil I Grundlagen
1 Einleitung
2 Testumgebung einrichten
3 Live-Umgebung einrichten
4 Website planen
Teil II Joomla! benutzen
5 Website-Frontend kennenlernen
6 Administrations-Backend bedienen
7 Content verwalten
8 Contentpflege konfigurieren
9 Menüs aufbauen
10 Layout und Design anpassen
11 Benutzerverwaltung einrichten
12 Mehrsprachigkeit aktivieren
13 System konfigurieren
Teil III Joomla! erweitern
14 Erweiterungen aktivieren
15 Offizielle Joomla!-Komponenten
16 Empfohlene Erweiterungen
17 Joomla! als Content-Management‐System
18 Joomla! als Community-Plattform
19 Joomla! als Online-Shop
Teil IV Joomla! warten
20 Wartung allgemein
21 Joomla! und Content deployen
22 Sicherheit ausbauen
23 Performance- und Suchmaschinenoptimierung
24 Notfallmaßnahmen
Teil V Joomla!-Erweiterungen entwickeln
25 Grundlagen zur Erweiterungsentwicklung
26 Templates entwickeln
27 Plugins entwickeln
28 Module entwickeln
29 Komponenten entwickeln
30 Erweiterungen veröffentlichen
Stichwortverzeichnis

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Joomla! 3 von von Richard Eisenmenger
Das umfassende Handbuch
Buch: Joomla! 3

Joomla! 3
Pfeil 26 Templates entwickeln
Pfeil 26.1 Grundlagen kennenlernen
Pfeil 26.1.1 HTML5, CSS3 und Responsive Design kennenlernen
Pfeil 26.1.2 Bootstrap kennenlernen
Pfeil 26.2 Einfaches Template erzeugen
Pfeil 26.2.1 Verzeichnisstruktur und Basisdateien
Pfeil 26.2.2 XML-Manifest – »templateDetails.xml«
Pfeil 26.2.3 HTML-Templatebasis – »index.php«
Pfeil 26.2.4 Template aktivieren
Pfeil 26.2.5 HTML5 und Bootstrap einsetzen
Pfeil 26.2.6 CSS-Datei – »template.css«
Pfeil 26.3 Template erweitern
Pfeil 26.3.1 Templatekonfiguration integrieren
Pfeil 26.3.2 Template-Overrides ergänzen
Pfeil 26.3.3 Weitere nützliche Templatedateien
 
Zum Seitenanfang

26    Templates entwickeln Zur vorigen ÜberschriftZur nächsten Überschrift

Templates bilden die Brücke zwischen den in Joomla! eingepflegten Inhalten und der Frontend-Ausgabe. Wenige Handgriffe sind nötig, um Templates anzupassen, für die Neuentwicklung eines Templates sind allerdings HTML-, CSS‐ und PHP-Kenntnisse gefragt.

Steht eine Migration einer existierenden Website, z. B. von WordPress oder einer hausgemachten Webapplikation, oder die Umsetzung eines von einer Agentur entworfenen Designs an, eröffnen sich Ihnen zwei Wege: Entweder finden Sie ein Template, das Ihren Anforderungen schon möglichst entspricht, und modifizieren es, bis es den Vorlagen entspricht. Oder Sie beginnen bei null und programmieren Ihr eigenes Template.

Grundsätzlich kann die erste Variante einfacher sein, da Sie die Implementierung der Grundlagen wie Responsive Design und Layout/Modulpositionen überspringen. Im Joomla!-Umfeld geht der Trend stark in Richtung universeller Templates, deren Darstellung und Verhalten Sie über viele Parameter im Backend konfigurieren, ohne dass HTML- und CSS-Elemente angepasst werden müssen. Insbesondere Templates, die auf einem Framework wie Gantry, T3 oder Warp aufbauen, sind hier besonders flexibel und integrieren beispielsweise luxuriöse Responsive-Design-Menüs, Google-Fonts, Farbvariablen und Dutzende von Modulpositionen. Schlagen Sie diesen Weg ein, wenn Sie anhand der Templatebeispiele auf den Websites der Entwickler Parallelen zu Ihrem umzusetzenden Design sehen.

Ist erkennbar, dass das neue Websitedesign stark vom ersten halben Dutzend studierter Templates abweicht, erörtern Sie eine Eigenentwicklung. Diese hat den Vorteil, dass sie keine für Ihren Designfall überflüssigen Details enthält, sondern schlank und optimal auf Ihre Anforderungen zugeschnitten wird. Templateprogrammierung ist nicht kompliziert, alle Grundlagen lernen Sie systematisch in diesem Kapitel kennen, natürlich inklusive Responsive Design.

Begriff Erklärung
HTML5 Dokumentbeschreibungssprache zum Aufbau von Webseiten. In der aktuellen Version 5 werden Seiten semantisch konstruiert, z. B. durch Kennzeichnung von Fließtextbereichen, Sekundärinformationen oder Illustrationen. Alle weitverbreiteten Browser unterstützen die meisten HTML5-Features, sodass Websites in keiner anderen Version mehr erstellt werden müssen.
CSS3 Stylesheet-Sprache zur Gestaltung von Webseitenelementen. Bemerkenswert an Version 3 sind die Ergänzung von Media Querys, neue Selektoren, um HTML-Elemente gezielter zu erreichen, und zahlreiche visuelle Effekte wie Animationen, Transparenz, Schlagschatten, Farbverläufe und runde Ecken.
Media Query CSS3-Feature zur geräte- und bildschirmabhängigen Formatierung von HTML-Elementen. Erst mit Media Querys wird Responsive Design möglich, um die Webseitendarstellung auf mobilen Endgeräten zu optimieren.
Bootstrap HTML-, CSS- und JavaScript-Framework, das die Erstellung eines modernen Website-Frontends vereinfacht. Es erlaubt flexible Seitenlayouts und stellt benutzerfreundliche Elemente und Formularfelder zur Verfügung. Eine ältere Version von Bootstrap ist in Joomla! enthalten und kann im Protostar-Template verwendet oder mithilfe eines einzelnen Befehls in eigenen Templates eingesetzt werden.

Tabelle 26.1    Die wichtigsten Begriffe zur Templateentwicklung

 
Zum Seitenanfang

26.1    Grundlagen kennenlernen Zur vorigen ÜberschriftZur nächsten Überschrift

Als Content-Management-Webmaster sind Sie ein Tausendsassa, der die im Content-Management-System eingesetzten Technologien und Sprachen wie Apache Webserver, MySQL, PHP, HTTP und JavaScript tagtäglich einsetzt oder konfiguriert. Ins Portfolio gehören dabei auch HTML und CSS, die Dokumentbeschreibungs- und die Stylesheet-Sprache, die Sie bislang zum Anpassen von Templates oder Formatieren von Frontend-Ausgaben nutzten. Dieses Handbuch ersetzt kein dickes HTML/CSS-Kompendium, mit dem Sie Ihr Wissen um Feinheiten und Tipps & Tricks erweitern. Deshalb stellen die folgenden Seiten einige der Highlights der neuesten Versionen der Frontend-Sprachen vor, die im Zusammenhang mit Content-Management im Allgemeinen und Joomla! im Besonderen wichtig sind.

 
Zum Seitenanfang

26.1.1    HTML5, CSS3 und Responsive Design kennenlernen Zur vorigen ÜberschriftZur nächsten Überschrift

HTML5 und CSS3 sind nun schon einige Jahre alt, aber eine breite Etablierung braucht ihre Zeit. Stück für Stück halten Features wie semantische HTML-Tags und Responsive Design Einzug in Content-Management-Systeme wie Joomla!. Während noch nicht alle Mechanismen in aktuellen Templates vollständig integriert sind, lohnt sich dennoch ein Blick auf die Hintergründe. Denn die Templates von Joomla! sind einfach zu modifizieren, und so führen Sie die eine oder andere Frontend-Optimierung, die Auswirkungen auf das Suchmaschinen-Ranking haben kann, gegebenenfalls selbst durch.

Semantische HTML5-Tags

Bei der täglichen Wartung eines Joomla!-Systems arbeiten Sie mit <html>-, <head>-, <body>-, <h1>-, <p>- und <img>-Tags, um Bilder an die richtige Stelle zu rücken, Paragrafenabstände zu vergrößern und Überschriftenebenen suchmaschinenoptimiert zu formatieren. HTML5 geht mit sogenannten semantischen Tags einen großen Schritt weiter und hilft, Webseiteninhalte noch klarer in ihre Bestandteile zu untergliedern, was nicht nur bei der Formatierung der Texte hilft, sondern einzelnen Passagen eine Bedeutung zuweist. Es ist davon auszugehen, dass diese Auszeichnungen, eine Handvoll neuer HTML-Tags, auch für Suchmaschinen an Relevanz gewinnen. Deshalb befinden sich im Standardtemplate Protostar bereits Ansätze einer solchen Implementierung, die Sie bei Bedarf in Ihrer eigenen Templatekopie verfeinern. Diese HTML5-Tags sollten Sie kennen:

  • <nav>
    Menüs, Paginierung, alles, was mit der Navigation zu tun hat. Protostar und jedes andere halbwegs moderne Template wickeln beispielsweise das Main Menu in ein <nav>-Tag.

  • <article>
    Steht für einen vollständigen Beitrag, z. B. für eine Webseite des Menüeintragstyps Einzelner Beitrag. Protostar nutzt das Tag leider nicht; professionelle Templates wie Puritity III halten den Standard ein.

  • <section>
    Zeichnet verschiedene Passagen aus, die inhaltlich zusammenhängen, z. B. angeteaserte Beiträge auf der Homepage.

  • <aside>
    Markierung für sekundäre Inhalte, z. B. Begleitmaterial in einer Seitenleiste. Das Element ist allerdings nicht pauschal auf die Seitenleiste anzuwenden, die vielleicht auch ein inhaltsloses Loginmodul enthält. Hier ist die Auszeichnung im Protostar-Template leider falsch.

  • <h1>
    Kein neues Element, aber mit neuen Regeln: Es herrscht Unsicherheit über die konforme Anwendung der aus SEO-Sicht so wichtigen <h1>-Überschrift, da laut HTML5-Spezifikationen eine Webseite ab sofort mehrere Hauptüberschriften enthalten darf. Grundsätzlich ist das wahr, und es spricht nichts dagegen, <h1>-Tags entsprechend einzusetzen. Jeder Joomla!-Beitrag (<article>) sollte eine Überschrift der Ebene <h1> enthalten, egal ob auf einer Beitragsdetail- oder einer Übersichtsseite, was leider nur die wenigsten Templates korrekt umsetzen. Daher finden Sie in Abschnitt 10.5.4, »Template-Overrides einsetzen«, eine Anleitung, wie Sie diesen Missstand selbst beseitigen (siehe Kasten »Tipp: Per Template-Override Beitragstitel auf <h1> umstellen«).

  • <header>, <footer>
    Nicht zu verwechseln mit dem HTML-Header-Tag <head>, enthält der <header> Einleitungen zur Webseite, z. B. Websitename, Slogan oder einen kurzen Einleitungstext. Analog dazu befindet sich im Footer vielleicht eine Copyright-Zeile oder ein Link zum Anfang der Webseite. Beachten Sie, dass diese Elemente nicht nur für die gesamte Webseite, sondern für jedes Inhaltselement zur Verfügung stehen, d. h., auch ein <article>-Block kann ein <header>- und <footer>-Tag enthalten.

  • <main>
    Dieses Element sollte nur einmal auf einer Webseite vorkommen und den Hauptinhalt, den Contentbereich, einfassen.

  • <figure>, <figcaption>
    Hierüber markieren Sie Illustrationen, also per <img>-Tag eingefügte Bilder mit inhaltlichem Wert. Betten Sie sowohl das <img>-Tag als auch Bildunterschriften (<figcaption>) in den <figure>-Block.

Nichts wird so heiß gegessen, wie es gekocht wird, vor allem nicht die HTML- und SEO-Suppe. Die korrekte Anwendung der semantischen HTML-Tags steht in der Prioritätenliste hinter der Bereitstellung hochwertiger Inhalte und dem Setzen von <h1>-Überschriften. Entwickeln Sie jedoch Ihr eigenes Template, macht es Sinn, bereits jetzt <article>-, <section>- und <nav>-Tags zu verteilen, denn es ist nicht auszuschließen, dass diese Auszeichnungen zukünftig eine Auswirkung auf Suchmaschinenergebnisse haben.

Responsive Design mit Media Querys

Neben sauberem und semantischem HTML-Code ist die ordentliche Darstellung auf mobilen Endgeräten die zweite große Anforderung an die Frontend-Technik einer modernen Website. Früher stellten Webmaster dazu mehrere Varianten aller Webseiten ins Netz, eine Desktop- und eine Mobilversion. Content-Management-Systeme spielten in diesem Fall mit ihren Muskeln. Denn zur Produktion verschiedener HTML-Varianten musste Inhalt nur einmal eingepflegt werden, die Auslieferung erfolgte dann aber dank unterschiedlicher Templates mundgerecht aufbereitet für das jeweilige Endgerät.

Dank Responsive Design ist dieses Vorgehen heutzutage nicht mehr notwendig, da die Unterscheidung der Varianten nicht mehr auf Serverseite, sondern beim Client, im Browser, stattfindet. Im Fokus stehen dabei sogenannte Media Querys, ein CSS3-Mechanismus, der bestimmte Styles nur dann anwendet, wenn definierte Bedingungen zutreffen. Die meisten Bedingungen überprüfen die Fensterbreite des Browsers, aber auch die Art des Endgeräts (z. B. screen für Desktop-Ansichten, handheld für mobile Endgeräte), die Anzahl darstellbarer Farben oder verfügbare Bildschirmauflösungen können berücksichtigt werden.

Eine Website ist dann responsiv, wenn sich Seitenelemente, die ein horizontales Scrollen erforderlich machen würden, auf kleineren Bildschirmen entweder ausblenden oder ans untere Seitenende schieben. Bedingt ist das schon unter älteren CSS-Versionen mit Floats möglich, die Kür schaffen aber nur Media Querys. Um auf einem hochkant gehaltenen iPad eine Seitenleiste auszublenden, genügt ein kurzes CSS-Fragment:

@media (max-width: 768px) {
#sidebar {
display:none;
}
}

Listing 26.1    Media Query zum Ausblenden einer Seitenleiste, falls die Breite des Ausgabefensters nicht mehr als 768 Pixel beträgt

Beim Stylen stellt sich also die Frage, was mit welchen Elementen bei welchen Fenstergrößen passiert, weswegen schon während der Designphase einer Website großes Augenmerk auf Responsive Design gelegt wird. Denn die nachträgliche Integration responsiven Verhaltens in eine bestehende Website endet in Dutzenden undurchschaubaren Media Querys. Das Hinzufügen neuer Seitenelemente wird zu einem chirurgischen Eingriff, die Fehleranfälligkeit des Stylesheets steigt, und das Testen auf verschiedenen Endgeräten ist uferlos. Deswegen lenken aktuelle Designrichtungen auf saubere, aufgeräumte Layouts mit einem starken Fokus auf ansprechende Typografie, was Sie auch in den beliebtesten Templates für Joomla! wiedererkennen. Doch die Open-Source-Welt würde nicht halten, was sie verspricht, gäbe es keine Lösung für die Umsetzung komplexer Layouts mit möglichst wenig Aufwand. CSS- und JavaScript-Frameworks betreten die Bühne.

 
Zum Seitenanfang

26.1.2    Bootstrap kennenlernen Zur vorigen ÜberschriftZur nächsten Überschrift

Wo Media Querys beginnen, greifen CSS- und JavaScript-Frameworks das Responsive-Design-Thema mit komfortableren Features und flexiblen Layoutmöglichkeiten auf. Bootstrap ist solch ein Framework, das es aufgrund seiner Beliebtheit bis in den Joomla!-Core, das Administrations-Backend und das Standardtemplate Protostar geschafft hat. Bootstraps eingebaute Responsive-Design-Mechanismen sind der Grund dafür, dass Sie sich in Joomla!-3-Version mit dem Smartphone ins Backend einloggen und mit allen Konfigurationsformularen arbeiten können.

Gridlayout mit 12 Spalten

Neben Dutzenden von Elementen wie elegant gestalteten Menüs, Formularfeldern, modalen Fenstern, Bildervorschauen, Paginierungen und Buttons steht im Mittelpunkt von Bootstraps Schaffen das sogenannte Gridlayout. (Besuchen Sie http://getbootstrap.com/2.3.2/components.html für eine Übersicht über alle Elemente.) Dabei legt der Templateprogrammierer exakt 12 Spalten über die Webseite und ordnet den Seitenelementen Zeile für Zeile eine bestimmte Anzahl von Spalten zu (siehe Abbildung 26.1). Zum Beispiel könnte der Contentbereich auf der linken Seite 9 Spalten umfassen, die Seitenleiste auf der rechten Seite läuft über 3. Bootstrap sorgt dann dafür, dass dieses Aufteilungsverhältnis auf allen Fensterbreiten identisch bleibt. Bei besonders schmalen Fenstern brechen die nicht mehr darstellbaren Bereich um, sodass kein horizontales Scrollen notwendig ist.

Bootstrap unterteilt Webseiten oder Seitenbereiche in 12 Spalten, die Sie über CSS-Klassen einzelnen Elementen zuweisen.

Abbildung 26.1    Bootstrap unterteilt Webseiten oder Seitenbereiche in 12 Spalten, die Sie über CSS-Klassen einzelnen Elementen zuweisen.

Praktisch ist Bootstrap deshalb, da Sie sich bei der Templateprogrammierung um fast nichts kümmern müssen. Sie integrieren das Framework über externe CSS- und JavaScript-Dateireferenzen (per <link>-Tag) und versehen Ihre Seitenelemente mit einigen Bootstrap-CSS-Klassen. Das Responsive-Design-Verhalten im Frontend greift nun automatisch.

Im Kategorieblog setzt Protostar Bootstrap-Klassen für das Spaltenlayout ein; sinkt die Fensterbreite unter bestimmte Grenzwerte, erscheinen vorher nebeneinander platzierte Elemente untereinander.

Abbildung 26.2    Im Kategorieblog setzt Protostar Bootstrap-Klassen für das Spaltenlayout ein; sinkt die Fensterbreite unter bestimmte Grenzwerte, erscheinen vorher nebeneinander platzierte Elemente untereinander.

Berücksichtigen Sie jetzt noch semantische HTML-Tags, ist das Grundgerüst eines responsiven HTML-<body> deutlich aufgeräumter als die komplexen <div>-Verschachtelungen vergangener Tage.

<body>
<div class="container">
<header>
Websitename
</header>
<nav class="navbar">
<div class="navbar-inner">
Menünavigation
</div>
</nav>
<div class="row-fluid">
<main class="span9">Contentbereich</main>
<div class="span3">Seitenleiste</div>
</div>
<footer>
Fußzeile
</footer>
</div>
</body>

Listing 26.2    Einfaches Grundgerüst eines HTML-<body> mit semantischen HTML-Tags und Responsive-Design-Klassen des Bootstrap-Frameworks

Im Listing sind es allein die Klassen row-fluid, span9 und span3, die für das responsive Verhalten sorgen. In Abschnitt 26.2.5, »HTML5 und Bootstrap einsetzen«, erzeugen Sie ein vergleichbares Gerüst, um Ihr eigenes Template von Grund auf für mobile Endgeräte zu optimieren. Sammeln Sie Ihre ersten Erfahrungen der Templateprogrammierung zunächst jedoch im folgenden Abschnitt. Denn die Modifizierung eines Templates über sogenannte Template-Overrides findet auch später bei der Neuerstellung eines Templates Einsatz.

Hintergrund: Bootstrap 2 vs. Bootstrap 3

Hatten Sie in der Vergangenheit bereits mit Bootstrap gearbeitet, fällt Ihnen vielleicht auf, dass der vorgestellte Pseudocode keine col-, sondern die veralteten span-Klassen verwendet. Leider ist in Joomla! nur Bootstrap in Version 2 integriert, da Bootstrap 3 kurz nach der ersten Joomla!-3-Version erschien. Diese Entscheidung ist längerfristig, denn Bootstrap 3 ist nicht rückwärtskompatibel, und sämtliche Joomla!-Core-Komponenten und Templates bauen auf Bootstrap 2. Ein Umschwenken auf die neuere Version hätte massive Kompatibilitätsprobleme zur Folge. Das ist aber nicht weiter problematisch, denn auch Bootstrap 2 bietet hinreichende Features und ausreichende Responsive-Design-Integration.

 


Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.

>> Zum Feedback-Formular
<< zurück
 Zum Katalog
Zum Katalog: Joomla! 3 Joomla! 3
Jetzt bestellen

 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Katalog: HTML5 und CSS3
HTML5 und CSS3


Zum Katalog: Schrödinger lernt HTML5, CSS und JavaScript
Schrödinger lernt HTML5, CSS und JavaScript


Zum Katalog: Einstieg in PHP 7 und MySQL
Einstieg in PHP 7 und MySQL


Zum Katalog: PHP 7 und MySQL
PHP 7 und MySQL


Zum Katalog: Erfolgreiche Websites
Erfolgreiche Websites


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2019
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de