Grundschema
Unser Ziel ist, ein eigenständiges Layout für netzalben.de zu entwickeln. Das bedeutet, für Joomla! ein eigenes Template zu erstellen. Dieses besteht intern aus verschiedenen Ordnern und Dateien, die nach einer bestimmten Logik zusammenarbeiten. An dieser Stelle geht es zunächst um ein Minimalsystem, das alle Anforderungen die Joomla! an ein Template hat, erfüllt.
Geplant ist, dass der übergreifende Zusammenhalt der Alben durch die Layoutaufteilung bewirkt wird:
-
falls der Beitrag ein Beitragsbild hat, soll dieses den kompletten Einstiegsbildschirm einnehmen wobei der Beitragstitel in der unterer Hälfte vor dem Bild eingeblendet erscheint.
-
Oben nimmt eine transparente Zeile Logo, Breadcrumb-Pfade und das Hauptmenü als Hamburger-Menü auf. So lässt sich ein Schema erreichen, das vom kleinsten bis zum größten Bildschirm funktioniert.
-
Am Ende des Beitrags stehen in einer Fußzeile die notwendigen Pflichtangaben. Davor lässt sich je nach Beitrag ein Bereich einblenden, in dem Leser Kommentare abgeben können.
Ein Template ist in Joomla! auch eine Erweiterung. Interessanterweise muss man es auch als solche installieren. An installierten Template-Dateien lässt sich aber in einer lokalen Installation mit einem Editor weiterarbeiten. D.h., dass die ersten Schritte zunächst quasi offline erfolgen.
Template-Ordner
Das Template wird sich nach seiner Installation in einem Unterordner der Ordners templates befinden. Es soll netzalben1 heißen, und genau so muss auch der Name des Ordners sein. Also legen wir der Einfachheit halber auf dem Desktop einen neuen Ordner namens netzalben1 an. In diesem erstellen wir zunächst alle Dateien. Anschließend machen wir aus dem Ordner eine ZIP-Datei. Diese wird dann als Erweiterung installiert.
Bei WordPress wäre die Namensgebung übrigens genauso. Nur würde man den Ordner sofort unterhalb von themes anlegen. Ein weiterer Vorteil bei WordPress ist, dass man die Entwicklung ohne den Umweg über eine Installation in kleineren Schritten erledigen kann.
Datei templateDetails.xml
Jedes Template muss über eine Datei templateDetails.xml verfügen. Darin stehen Daten über das Template, mit dem das System arbeitet. Zum Vergleich: bei WordPress sind diese Daten als Kommentar in der Stylesheet-Datei untergebracht.
Auch wenn im Manual der Rest noch fehlt, können wir uns an dieser Stelle daran orientieren. Hier wurden allerdings Vererbung, Namespace, Language und media-Ordner erst einmal weggelassen.
In der 1. Zeile steht, mit welcher xml-Version und mit welcher Zeichencodierung gearbeitet wird.
Zeile 2 besagt, dass die Erweiterung ein Template ist, das für das Frontend (site) vorgesehen ist und dass die Installation ein Upgrade macht, d.h., dass bestehende Dateien überschrieben werden. Die Alternative ist install. Dann muss man die existierende Erweiterung erst deinstallieren. Das macht z.B. Sinn, wenn durch ein Upgrade Dateien wegfallen oder verschoben werden, z.B. wenn für die Assets, also Stylesheets, Scripte usw., doch auf den media-Ordner gewechselt wird.
Die weiteren Zeilen sollten selbsterklärend sein. Bei den Modulpositionen macht es Sinn, die im von Joomla! mitgelieferten Template Cassiopeia benutzen Positionen soweit sie benötigt werden, ebenfalls zu verwenden. Dann ist bei einem Template-Wechsel für die dort verankerten Module keine weitere Aktion nötig. Hier gibt es nur in Zeile 28 eine weitere Position contact.
1 <?xml version="1.0" encoding="utf-8"?>2 <extension type="template" client="site" method="upgrade">3
4 <!-- ein paar allgemeine Informationen über das Template -->5 <name>netzalben1</name>6 <creationDate>04.12.2024</creationDate>7 <author>Thomas Lüdemann</author>8 <authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein. </authorEmail>9 <authorUrl>https://www.netzalben.de</authorUrl>10 <copyright>Copyright (C) 2024 Thomas Lüdemann, alle Rechte vorbehalten.</copyright>11 <license>GNU GPL</license>12 <version>0.0.1</version>13<description>Basistemplate für netzalben.de</description>1415 <!-- Alle Dateien und Verzeichnisse des Templates -->16 <files>17<folder>css</folder>18<folder>fonts</folder>19<folder>images</folder>20<filename>index.php</filename>21<filename>templateDetails.xml</filename>22</files>23
24<!-- Die Modulpositionen, die das Template anbietet: -->25<positions>26<position>breadcrumbs</position>27<position>sidebar-right</position>28<position>contact</position>29<position>footer</position>30</positions>31
32<!-- Eingabefelder: basic für Register Details, advanced für Register Erweitert -->33<config>34<fields name="params">35<fieldset name="advanced">36<field37name="colorName"38type="filelist"39label="Template Farbe"40descrition="Wählen Sie eine Farbe aus"41default="colors_standard"42fileFilter="^custom.+[^min]\.css$"43exclude="^colors.+"44stripext="true"45hide_none="true"46hide_default="true"47directory="media/templates/site/cassiopeia/css/global/"48validate="options"49>50<option value="colors_standard">Standard</option>51<option value="colors_alternative">Variante</option>52</field>53</fieldset>54</fields>55</config>56</extension>
Man sieht, dass einiges zusammen kommt. Den media-Ordner wegzulassen bedeutet, dass alle Zusatzdateien unterhalb des Template-Ordners (netzalben1) gespeichert werden. Es ist in der Entwicklung leichter, nur aus dem Template-Ordner eine Installationsdatei zu erstellen, statt zwei Quellen berücksichtigen zu müssen. In einem späteren Stadium kann das auch geändert werden. Vererbung und Namespace lassen sich dann auch noch ergänzen. Fremdsprachen habe ich weggelassen, da es keine internationale Entwicklung ist.
In den Zeilen 33 - 55 wurde der Mechanismus von Cassiopeia übernommen, Varianten eines Templates auszuwählen.
Datei index.php
Diese Datei bildet das Grundgerüst von netzalben.de. Für den head und den header wurden verschiedene Varianten ausprobiert, bis die Ausgabe so war, dass sie für das gewünschte Layout gut passte. Die Datei steht hier daher direkt in der Endfassung.
Zunächst wird mit PHP die Variante der Styles ermittelt und anschießend der HTML-Code generiert, der zum gewünschten Seitenaufbau führt.
defined('_JEXEC') or die; in Zeile 2 stellt sicher, dass die Datei nur ausgeführt wird, wenn sie aus Joomla! heraus aufgerufen wird.
Anschließend werden in Zeilen 6 - 16 dem WebAssetManager die Dateien für die Ausgabe im head mitgeteilt. Er sorgt für die richtige Reihenfolge. Man erkennt an dieser Stelle, dass der Trick mit den Layout-Varianten eines Templates darauf beruht, zwei Stylesheet-Dateien zu verwenden.
Tipp: Mittlerweile verzichte ich auf Zeilen 15 - 16, sondern schreibe als erste Zeile in das aus den Parametern ermittelte Stylesheet die Anweisung @import url("template.css"); und erreiche damit, dass ich das Stylesheet auch dem Editor TinyMCE vorgeben kann. Gerade bei abweichenden Farben können sich Texte sonst im Editor zu wenig vom Hintergrund abheben.
Tipp: Damit die bearbeitete Seite im Editor dem endgültigen Aussehen schon nahe kommt, kann man dem Editor ein benutzerdefiniertes Stylesheet mitgeben. Dazu wählte man im linken Seitenmenü den Punkt System. In der sich dann öffnenden Seite findet man in der Spalte Verwalten den Punkt Plugins, den man aktiviert. In der folgenden Liste gelangt man über Editor - TinyMCE zu den Einstellungen. Den Pfad zur eigenen Datei trägt man in das mit Eigene CSS-Klassendatei beschriftete Eingabefeld ein.
Die Icons für die verschiedenen Zwecke wusste ich nicht anders einzubringen (Zeilen 23 - 26).
1 <?php2 defined('_JEXEC') or die;3use Joomla\CMS\Factory;4 use Joomla\CMS\Uri\Uri;5
6$wa = $this->getWebAssetManager();7
8// Color Theme9$paramsColorName = $this->params->get('colorName', 'colors_standard');10$assetColorName = 'theme.' . $paramsColorName;11
12$wa->registerAndUseStyle($assetColorName, 'templates/' . $this->template . '/css/' . $paramsColorName . '.css');13$wa->registerAndUseScript('scripte', 'templates/' . $this->template . '/js/template.js');
14
15$this->getWebAssetManager()->registerAndUseStyle('stylesheet',
16'templates/' . $this->template . '/css/template.css');
17?>
18<!DOCTYPE html>
19<html lang="<?php echo $this->language; ?>">
20<head>
21<meta name="viewport" content="width=device-width, initial-scale=1.0">
22<jdoc:include type="head" />
23<link rel="icon" href="/templates/<?php echo $this->template ?>/images/3alben-2-150x150.png" sizes="32x32" />
24<link rel="icon" href="/templates/<?php echo $this->template ?>/images/3alben-2-300x300.png" sizes="192x192" />
25<link rel="apple-touch-icon" href="/templates/<?php echo $this->template ?>/images/3alben-2-300x300.png" />
26<meta name="msapplication-TileImage" content="templates/<?php echo $this->template ?>/images/3alben-2-300x300.png" />27 </head>
28<body>
29<header>
30<div class="kopfzeile">
31<div class="site-home">
32<!-- Logo -->
33<div class="site-logo">
34<a href="/<?php echo $this->baseurl; ?>" rel="home">
35<img width="75" height="75" src="/templates/<?php echo $this->template ?>/images/3alben-2.png" alt="NetzAlben"
36decoding="async" srcset="/templates/<?php /echo /$this->template /?>/images/3alben-2.png 502w, /templates/<?php /echo /$this->template /?>/images/3alben-2-300x300.png 300w, /templates/<?php /echo /$this->template /?>/images/3alben-2-150x150.png 150w" sizes="(max-width: 75px) 100vw, 75px" />
37</a>
38</div>
39<!-- Breadcrumbmenü -->
40<jdoc:include type="modules" name="breadcrumbs" style="html5" />
41</div> <!--site-home -->
42<nav class="mainmenu">
43<input type="checkbox" id="navigation">
44<label for="navigation" title="Navigation öffnen">
45<div class="burgericon">
46<div></div>
47<div></div>
48<div></div>
49</div>
50</label>
51<!-- Hauptmenü -->
52<jdoc:include type="modules" name="sidebar-right" style="html5" />
53</nav>
54</div> <!--kopfzeile -->
55</header>
56<main>
57<!-- Meldungen -->
58<jdoc:include type="message" />
59<!-- Komponenten -->
60<jdoc:include type="component" />
61<a class="top" href="#"></a>
62<!-- Kontaktformular -->
63<jdoc:include type="modules" name="contact" style="html5" />
64</main>
65<footer><div>
66<span>© 2024 <a href="/<?php echo $this->baseurl; ?>" rel="home">NetzAlben</a></span>
67<!-- Footermenü -->
68<jdoc:include type="modules" name="footer" style="html5" />
69</div></footer>
70</body>
71</html>
header und footer haben noch einmal innen liegende DIVs, um unterschiedliche Hintergrund-Effekte zu ermöglichen.
Der Hauptbereich ist übersichtlich: falls es Fehler gab, werden die zuerst angezeigt. Im Normalfall erscheint direkt der Inhalt der Komponente (also der Hauptinhalt) und abschließend optional ein Kommentarbereich.
Das Kontaktformular ist ein eigenes Modul und wird später beschrieben. Davor steht ein leerer Link der Klasse top. Damit lässt sich nach entsprechender Formatierung direkt zum Seitenanfang springen. In dieser Hinsicht nichts zu tun war keine Option und die Kopfzeile fest stehen zu lassen, so dass das Menü immer erreichbar ist, sah nicht so gut aus.
Ordner images
Hier wurden die Dateien der ersten WordPress-Fassung übernommen. Bei Joomla! wird empfohlen, in jeden Ordner eine mehr oder weniger leere Datei index.html einzufügen, da sonst beim direkten Aufruf des Ordners dessen Inhaltsverzeichnis öffentlich wird.
Ordner fonts
Auch hier wurden die Recherchen und Dateien zur ersten WordPress-Fassung weiter genutzt. Grundsätzlich stellt sich die Frage, ob man die Schriftarten (Fonts) im Template-Ordner speichert oder einen zentralen Font-Ordner verwendet. Hier sind sie erst einmal im Template-Ordner untergebracht.
Grundsätzlich werden variable Fonts eingesetzt und das Format woff2 bevorzugt, wenn es verfügbar war. Beides spart in der Summe Dateigröße und -anzahl sowie Ladezeiten.
Ordner css
Bei Joomla! wird das Haupt-Stylesheet eines Templates in der Datei template.css gespeichert. Oben in der Konfigurationsdatei waren schon die Varianten colors_standard und colors_alternative deklariert worden. Als Dateinamen wird diesen Bezeichnungen nur noch die Endung .css angefügt.
Über die Frage, wie CSS-Dateien aufgebaut werden sollten, gibt es etliche Meinungen, die auf unterschiedlichen Vorbildern oder Erfahrungen beruhen. Dabei ist eine wichtige Einschränkung, dass es in Stylesheets keine Variablen gibt und keine direkten Verweise, wie z.B. die auf die Breite des Nachbarelements. Im Laufe der Jahre wurde die Spezifikation aber immer wieder ergänzt, so dass sich heute etliche interessante Möglichkeiten ergeben, für die man früher Skripte oder Preprozessoren und deren Spracherweiterungen brauchte.
Meine Vorgehensweise ist von allgemein zu speziell, soweit die verwendeten CSS-Elemente keine Abweichung davon vorschreiben. Man erhält dadurch relativ kompakte Stylesheets. Der erste Inhalt der Datei colors_standard.css ist aus der ersten WordPress-Version abgeleitet:
:root {
--color--hintergrund: #fff;
--color--text: #333;
}
Bei den Farben habe ich deutsche Bezeichnungen verwendet, um Kollisionen mit Systembezeichnungen zu vermeiden. Wenn es auch bei CSS keine Variablen gibt, so kann man doch Konstanten definieren und verwenden. Beispiel:
.eine_klasse { background-color: var(--color--hintergrund); }
#ein_element { background-color: var(--color--hintergrund); }
Auf diese Art lässt sich die Hintergrundfarbe später einheitlich an zentraler Stelle änden.
Die Inhalte von template.css werden später aufgebaut. Zu Beginn setzen wir nur wenige Werte. Da manche Werte nicht generell an Unterelemente vererbt werden, wie box-sizing oder Scrollverhalten, wird hier die Vererbung explizit vorgegeben. Abstände und Farben werden vererbt, und Links sollen zunächst keine separate Farbe annehmen.
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*, ::before, ::after {
box-sizing: inherit;
scroll-behavior: inherit;
}
body {
padding: 0;
margin: 0;
color: var(--color--text);
background-color: var(--color--hintergrund);
}
a { color: var(--color--text); }
erste Aktivierung
An dieser Stelle lässt sich ein erster Test des Templates durchführen. Dazu erzeugt man die Zip-Datei am einfachsten mit Hilfe des Kontext-Menüs (rechte Maustaste) → Senden an → ZIP-komprimierter Ordner. Im Menü System links oben unter Installieren unter Erweiterungen wird diese Datei ausgewählt und hochgeladen. Wenn das erfolgreich war gibt es die grüne Erfolgsmeldung Die Template-Installation wurde abgeschlossen. Ansonsten liegt vermutlich ein Tippfehler bei templateDetails.xml vor. Über die Schaltfläche Erweiterungen verwalten lässt sich überprüfen, ob das Template auch aktiviert wurde.
Als nächstes wählt man im Menü System in der linken Spalte unter Templates den Punkt Site Template Stile. Aus der darauf folgenden Liste der Stile wählt man netzalben1 – Standard. Das folgende Fenster hat drei Register:
Mit der Menüzugehörigkeit legen wir fest, dass das neue Template nur für den vorher angelegten Beitrag gelten soll. Um das zu aktivieren, bitte Speichern & Schließen nicht vergessen!
Man kommt zurück in die Liste und kann sehen, dass das Template einer Seite zugewiesen wurde. Ein mutiger Aufruf der Seite sorgt dann doch eher für Ernüchterung – oder?
Erinnern wir uns zurück. Ich hatte bereits auf die Konfigurationsmöglichkeiten von Joomla! hingewiesen. Darauf wird in dem folgenden Beitrag eingegangen. Anschließend erweitern wir das Stylesheet solange, bis wir mit dem Layout zufrieden sind.