Table of Contents
Philosophie
Unser WordPress Design System besteht aus verschiedenen Komponenten. Wir haben alles so vorbereitet, dass für uns die ideale Ausgangslage geschaffen wurde, um Projekte in unterschiedlichem Design und für verschiedene Kunden zu starten.
Die vorbereitete Systematik und die vorhandenen Pattern dienen nicht nur als Ausgangspunkt. Es ist wichtig, dass bei projektspezifischen Anpassungen die Grundphilosophie beibehalten wird, damit es langfristig nicht zu Kompatibilitätsproblemen kommt.
Parent Theme
Das Parent Theme nutzt die Funktionen des WordPress-Cores. Es bildet die Basis für jedes Projekt und wird ohne Custom Code ausgeliefert. Das Parent Theme alleine wird nur genutzt, wenn 100% Core-kompatibel und 100% No-Code gearbeitet werden soll. Alle Anpassungen können dann über den Site Editor vorgenommen werden, indem die vorbereitete Systematik verändert (nicht ergänzt) wird.
Child Theme
Das Child Theme ergänzt das Parent Theme um Features, die Custom Code benötigen, sowie um Vorlagen für leichteres Customizing. Zu diesen Child-Theme spezifischen Erweiterungen gehören u.a. Pattern, die custom JS und CSS benötigen – z. B. komplexe Header-Implementierungen oder Slider – sowie Funktionen für Performance und Sicherheit. Das Child-Theme besitzt einen eigenen Build-Prozess auf gulp.js-Basis, der in der Readme-Datei beschrieben wird. Das Styling liegt in SCSS vor. Auch Veränderungen oder Erweiterungen der Grund-Systematik finden in der theme.json des Childs statt.
Patterns
Sowohl das Parent als auch das Child-Theme beinhalten zahlreiche Pattern, die vorbereitet sind um ganze Content-Sektionen aufzubauen. Alle Pattern sind hinsichtlich Ihres Einsatzzwecks auf der Website (Purpose First) kategorisiert. Es sind folgende Kategorien vorgesehen:
- Orientation – Pattern, die dabei helfen, sich auf der Website zurechtzufinden und den Kontext zu verstehen.
- Information – Pattern, die Inhalte, Fakten oder Erklärungen vermitteln.
- Marketing – Pattern, zur Produkt- oder Dienstleistungsbewerbung gedacht sind mit werblichem Fokus.
- Trust – Pattern, die Vertrauen aufbauen sollen.
- Navigation – Pattern, die zur Bewegung innerhalb einer Unterseite oder innerhalb des Website gedacht sind.
- Action – Pattern, die zu einer Handlung des Users führen sollen.
- Media – Pattern, die Bilder, Videos oder interaktiven Elemente beinhalten.
Plugins
Wir haben Plugins vorbereitet, wenn wir eine in sich geschlossene Kombination aus Frontend und Backend benötigen, die nur in wenigen Projekten benötigt wird und ein eigenständiges Feature darstellt. Typische Anwendungsfälle sind Filterfunktionen oder Custom Post Types mit spezifischer Logik wie z.B. Termine.
Custom Styles
Wir nutzen Section bzw Block StylesÖffnet in neuem Tab, wenn die Funktionalität gleich bleibt, sich aber die Darstellung ändern soll. Sowohl im Parent als auch im Child sind im Ordner /styles solche individuellen Stile vorbereitet. U.a. für Boxen, Sinnabschnitte oder Listen.
Block Variations
Wir setzen Block Variations ein, wenn eine Core-Funktion angepasst oder erweitert werden soll. Das bedeutet: Es gibt bereits einen Standard-Block, den wir durch zusätzliche Felder oder ein verändertes Verhalten für das jeweilige Projekt optimieren. Typische Anwendungsfälle sind Anpassungen am Loop-Block.
Installation & Mindestanforderungen
Wir setzen die jeweils aktuelle WordPress-Version sowie die Server-AnforderungenÖffnet in neuem Tab dieser WordPress-Version voraus.
Theme-Einrichtung
Globale Einstellungen wie Header, Footer, Navigationsbereiche und grundlegendes Styling werden über den Site-Editor vorgenommen.
Logo hinzufügen
Das Logo wird im Template Part »Header« angepasst.
Header-Pattern tauschen
Der Header ist ein Pattern, dass im Template Part »Header« inkludiert ist. Innerhalb des Template Parts kann der Standard Header geben einen anderen getauscht werden.
Navigation einrichten
Alle Navigationsbereiche sind mit Platzhalter-Inhalten gefüllt und können im jeweiligen Template Part, Pattern oder Template bearbeitet oder gegen ein neues Menü getauscht werden.
Der Hamburger- und Such-Button im Header erbt den Standard-Style von Buttons in WordPress. Diesen stellt ihr unter Style > Farben und dann im Abschnitt »Elemente« ein.
Favicons anpassen
WordPress bietet eine Möglichkeit das Favicon über das Backend zu setzen. Dieses Feature reicht uns nicht aus, daher haben wir im Child-Theme eine Möglichkeit der Optimierung geschaffen:
- Das Favicon anlegen und als SVG exportieren.
- Mit dem Favicon GeneratorÖffnet in neuem Tab die notwendigen Grafiken erzeugen
- Die favicon.png-Datei in der Größe 512px * 512px für das WordPress-interne Favicon nutzen und im Backend unter »Einstellungen → Allgemein« hochladen.
- Die im Ordner befindlichen Dateien – außer »favicon.png« und »favicon.svg« – im Child-Theme in den Ordner »/assets/appicons« kopieren, vorhandene Dateien mit diesem Namen überschreiben.
- Sollten die im »appicons«-Ordner bereits vorhandenen Dateien anders benannt sein, entweder den jeweiligen Namen der neuen Dateien an die alte Benennung anpassen oder die ursprünglichen Dateien löschen und in den Dateien »site.manifest« sowie »appicons.php« die Dateinamen der Favicons aktualisieren.
Einstellungen prüfen
- Datenschutz-Seite anlegen und verknüpfen
Utility Klassen
Es gibt einige Utility Klassen, um das Layout gezielt optimieren zu können, wenn der Block Editor von WordPress an seine Grenzen stößt. Wir entfernen Utility Klassen, wenn WordPress Funktionen in den Core aufnimmt.
| Klasse | Zweck | Wirkung / Hinweise | Typische Verwendung |
|---|---|---|---|
.is-style-all-unset | Entfernt alle geerbten/UA-Styles | all: unset; box-sizing: border-box; Setzt das Element auf einen sauberen Ausgangszustand zurück. | Basis für eigene Komponenten im Block-Inhalt. |
.is-style-expanded-click-container | Bereitet einen Wrapper für erweiterte Klickfläche vor | position: relative; isolation: isolate; Nötig für die expand-click Pseudo-Element-Varianten. | Eltern-Element, das den Klick-/Outline-Bereich bereitstellen soll. |
.is-style-expand-click-after | Lässt erstes Link/Button/Label den Wrapper füllen (after) | Fügt absolut positioniertes ::after über dem Wrapper ein, zeigt Outline bei :focus-visible. Funktioniert direkt auf interaktiven Elementen oder auf einem Wrapper (dann erstes Child a/button). | Karten oder Listeneinträge, die komplett klickbar sein sollen, inkl. Tastatur-Fokus. |
.is-style-expand-click-before | Gleich wie oben, nur mit ::before | Funktional identisch, aber mit ::before. Pro Komponente nur eine Variante nutzen, um Überschneidungen zu vermeiden. | Alternative je nach Stacking/Order-Bedarf. |
.is-style-hide-scrollbar | Blendet native Scrollbars aus (Scrollen bleibt möglich) | scrollbar-width: none; -ms-overflow-style: none; ::-webkit-scrollbar { display: none; }. | Für ästhetische Overflow-Bereiche (Carousels, Chips). |
.is-style-hyphens-auto | Bessere Trennung langer Wörter | hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; | Schmale Spalten, Karten, lange URLs. |
.is-style-icon | Normalisiert Icon-Größe/-Verhalten (Standard) | fill: currentColor; flex-shrink: 0; Größe über --wp--custom--icon--size (Standard 1.5rem). | Inline-SVGs in Buttons, Menüs, Badges. |
.is-style-icon-small | Kleinere Icon-Variante | Gleich wie oben, Größe über --wp--custom--icon--size--small (Standard 1.25rem). | Dichte UIs, sekundäre Actions. |
.is-style-overflow-clip | Schneidet Overflow hart ab ohne Scrollbars | overflow: clip; (kein Scroll, Inhalt außerhalb wird nicht sichtbar). | Dekoratives Masking, eng zugeschnittene Media. |
.is-style-text-balance | Balanciert ungleichmäßige Zeilen | text-wrap: balance; (Browser verteilt Zeilen gleichmäßiger). | Mehrzeilige Headlines/Subheads. |
.is-style-text-overflow-ellipsis | Einkürzen mit Ellipsis (einzeilig) | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | Titel, Labels, Chips, die nicht umbrechen dürfen. |
.is-style-visually-hidden | Visuell ausgeblendet, für AT sichtbar | 1×1 px off-screen, clipped. Wird nicht automatisch beim Fokus sichtbar. | Nicht-visuelle Labels, Screenreader-Text. |
.is-style-flex-grow-0 | Kein flex growth | flex-grow: 0; | Item behält intrinsische Breite. |
.is-style-flex-grow-1 | flex growth erlaubt | flex-grow: 1; | Item füllt restlichen Platz. |
.is-style-flex-grow-99999 | Sehr starkes Wachstum | flex-grow: 99999; dominiert gegenüber anderen Items. | Ein Item soll den Platz maximal einnehmen. |
.is-style-flex-shrink-0 | Kein Shrinking | flex-shrink: 0; | Item bleibt unkomprimiert (z. B. Icons). |
.is-style-flex-shrink-1 | Shrinking erlaubt | flex-shrink: 1; | Standard-Verhalten. |
.is-style-justify-content-center | Zentriert entlang main axis (flex) | justify-content: center; Nur für flex Container. | Inhalte in Row/Column zentrieren. |
.is-style-justify-items-center | Zentriert Items in grid-Zellen | justify-items: center; Nur für grid Container. | Grid-Children horizontal im Track zentrieren. |
.is-style-order--1 | Verändert die Layout-Reihenfolge | Setzt order-Wert auf -1 | Manuelle Anpassung der Reihenfolge |
.is-style-order-0 bis .is-style-order-9 | Verändert die Layout-Reihenfolge | Setzt order-Wert auf 1 – 9 | Manuelle Anpassung der Reihenfolge |
Slider
Die Slider sind mit Swiper JSÖffnet in neuem Tab realisiert. Es sind daher die Standard-Klassen von Swiper im Einsatz und in den Slider-Pattern vorbereitet. Konkret müssen folgende Klassen sichergestellt werden, damit alles funktioniert:
.swiper | Gehört auf ein Elternelement des Slider-Wrappers, damit der Slider initialisiert wird |
.swiper-wrapper | Der direkte Eltern-Container, der die zu bewegenden Elemente beinhaltet |
.swiper-slide | Das einzelne Element, dass bewegt wird. Die Klasse fügen wir automatisch hinzu. |
Funktionen
Hier werden die Custom-Funktionen des Child-Themes beschrieben.
Bereich im Aufbau.
Seiten redaktionell aufbauen
Sobald Pattern in einer Seite eingefügt wurden, sind sie nicht mehr mit dem Original verknüpft. Anpassungen am Original-Pattern haben somit keine Auswirkung mehr und die Pattern müssen händisch ausgetauscht werden. Das kann lästig werden.
Folgende Methoden verhindern Mehraufwand:
- Wiederkehrende Elemente wie Teaser in eigene synced oder partially synced Patterns auslagern – also möglich kleinteilig nach Atomic Design arbeiten
- Möglichst keine manuellen Styling-Anpassungen an Pattern vornehmen, sondern die Gestaltung über globale Stile oder Section Styles anwenden, da diese zentral aktualisiert werden können.
- Pattern erst an das Projekt anpassen und die Struktur sperren, anschließend die Unterseiten damit redaktionell aufbauen. Hier kann die Figma-Datei helfen, die Übersicht zu behalten. Diese Vorgehensweise bietet sich an, wenn Pattern statische Inhalte verwenden.
Mehr zum Thema wie Inhalte in WordPress gesperrt werden könnenÖffnet in neuem Tab haben wir im Blog zusammengefasst.
Übersetzung
Die Textdomain des Parent-Themes lautet kb, die des Child-Themes kb_child. In beiden Themes liegen die *.po-Dateien im Ordner /languages.
WordPress-Themes für Mehrsprachigkeit und Übersetzungen vorbereiten
Performance
Styles werden in folgender Reihenfolge geladen:
- WP Core-Blöcke (inline)
- Custom Critical CSS (inline)
- Global angepasste Styles (inline)
- Block Variations (inline)
- Child Theme CSS (link)
Performance Edge Cases
- Demo 1Öffnet in neuem Tab (Viel Text, wenig Bilder)
- Demo 2Öffnet in neuem Tab (Viele Bilder, wenig JS-Components)
- Demo 3Öffnet in neuem Tab (Viele Bilder, viele JS-Components, JS above the fold)
- Demo 4Öffnet in neuem Tab (Viele Bilder, wenig JS-Components)
- Demo 5Öffnet in neuem Tab (Viel Text, wenige Bilder, wenig JS)
Einrichtung WooCommerce
Wenn WooCommerce verwendet werden soll, sind folgende Punkte zu beachten:
- WooCommerce installieren und ggf. Einrichtungs-Prozess durchlaufen
- Header gegen einen für WooCommerce konzipierten Header tauschen (Design > Vorlagen > Template Parts > Header
- Seite für »Mein Konto« einrichten. Da WooCommerce hier kein Template anbietet, muss eine Gruppe (volle Breite) mit einer enthaltenen Gruppe (Weite Breite) den Shortcode für »Konto« umschließen.
- Datenschutz-Seite in den Einstellungen verknüpfen.
Gravity Forms
Wir nutzen i.d.R. Gravity Forms für Formulare und haben die Formular-Styles dahingehend vorbereitet. Im CSS-File des Child-Themes gibt es einen Code-Block, der die das Styling aller HTML-Formularelemente, WooCommerce-Formularelemente und Gravity Forms-Formularelemente zentral und einheitlich steuert.