Ein AliothPress-Theme entwickeln
Ein AliothPress-Theme ist ein Ordner mit einer einzigen erforderlichen Datei, theme.css, sowie einem Vorschaubild für die Theme-Galerie. Es gibt keinen Build-Schritt, keine Template-Sprache, die erlernt werden muss, und keinen Code, der geschrieben werden muss: Das CMS erzeugt das Markup, und das Stylesheet definiert Farben, Typografie und Atmosphäre über CSS-Variablen. Der schnellste Weg, ein Theme zu erstellen, ist, eines der 15 integrierten Themes zu kopieren und es anzupassen.
Ein integriertes Theme kopieren
Jede Installation enthält ihre Themes im Ordner static/css/themes/, ein Theme pro Unterordner. Das integrierte Theme auswählen, das der eigenen Vorstellung am nächsten kommt, den Ordner unter einem neuen Namen kopieren, und schon liegt ein gültiges, aktivierbares Theme vor. Von dort aus ist die Umgestaltung nur noch ein Bearbeitungszyklus an einer einzigen Datei.
Der Ordnername ist die Identität des Themes. Kleinbuchstaben, Ziffern und Bindestriche verwenden (midnight-garden, paper-and-ink), und einen Namen wählen, der sich von den integrierten Themes unterscheidet, damit CMS-Updates die eigenen Dateien nicht verändern.
Die Struktur von theme.css
Ein beliebiges integriertes Theme öffnen, und das gleiche Muster erscheint:
- Ein Kommentarkopf am Anfang. Die Zeile, die mit
Concept:beginnt, wird zur Beschreibung des Themes in der Admin-Galerie. - Ein
:root-Block, der die Design-Token definiert: Hintergrund, Oberfläche, Text, Akzentfarben, Schriftarten, Radien. Der Großteil der Arbeit findet hier statt. - Ein
.light-theme-Block, der diese Token für den Hellmodus überschreibt. Themes, die diesen Block definieren, erhalten automatisch den Umschalter für Hell- und Dunkelmodus; Themes ohne diesen Block laufen in einem einzigen Modus.
Da die gesamte öffentliche Site, einschließlich der Page-Builder-Blöcke, aus diesen Variablen schöpft, verändert die Änderung weniger Token das gesamte Erscheinungsbild einheitlich: Beiträge, Seiten, Formulare, Menüs und die Blog-Übersicht.
Das Vorschaubild
Eine preview.svg (oder PNG, JPG, WebP) in den Ordner legen, und die Theme-Galerie zeigt es als Vorschaubild an. Eine SVG-Mockup der Farbpalette und Typografie funktioniert gut und bleibt klein. Themes ohne Vorschaubild funktionieren trotzdem; die Galerie zeigt dann einen Platzhalter.
Schriftarten und Assets
Schriftdateien und dekorative Bilder können im Theme-Ordner abgelegt und mit relativen Pfaden aus theme.css referenziert werden. Selbst gehostete Schriftarten halten die Site unabhängig von Drittanbieter-Anfragen, was sowohl der Privatsphäre der Besucher als auch der Ladegeschwindigkeit zugutekommt.
Testen und Ausliefern
Den Ordner in static/css/themes/ auf einer Entwicklungsinstallation ablegen oder als ZIP packen und auf der Themes-Seite hochladen: Das Theme erscheint sofort in der Galerie, kein Neustart erforderlich. Beide Farbmodi prüfen, eine Beiträge-Seite und eine Builder-Seite ansehen, und die Theme-Karte im Admin auf Beschreibung und Vorschau überprüfen.
Zur Verbreitung des Themes den Ordner als ZIP packen. Jeder, der eine AliothPress-Site betreibt, installiert es mit drei Klicks auf der Themes-Seite, und CMS-Updates werden es nicht überschreiben.
Für die Anwender-Seite von Themes, Hochladen, Aktivieren und Aktualisieren, siehe die Anleitung für eigene Themes. Der Rest der Dokumentation behandelt Plugins und Seiten. Bereit zum Ausprobieren? AliothPress installieren und einen beliebigen Theme-Ordner als Referenz öffnen.