Zum Hauptinhalt

Kontakt Öffnet in neuem Tab

Doku

Von Installation und Setup über Customizing, bis hin zu Stellschrauben für die Optimierung, wird hier alles dokumentiert was uns wichtig erscheint.

Inhaltsverzeichnis

Installation & Mindestanforderungen

Wir setzen WordPress 6.6 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.

Farbpalette anpassen

Folgt.

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.

Schriften anpassen

Folgt.

Schrift einfügen (Design > Website-Editor > Styles > Typografie > Schriften verwalten)

Icons anpassen

Folgt.

Icons können getauscht werden, indem im Child-Theme unter assets/icons.svg die SVG-Sprite überschrieben wird. Wenn die IDs der Icons beibehalten werden, tauschen sich Icons automatisch aus.

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:

  1. Das Favicon anlegen und als SVG exportieren.
  2. Mit dem Favicon Generator Öffnet in neuem Tab die notwendigen Grafiken erzeugen
  3. Die favicon.png-Datei in der Größe 512px * 512px für das WordPress-interne Favicon nutzen und im Backend unter »Einstellungen → Allgemein« hochladen.
  4. 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.
  5. 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.

Globale Styles anpassen

Folgt. Unbedingt beachten: Styled Section von Gruppen anpassen. Hier kann z.B. global eingestellt werden, dass alle Cards etc. abgerundete Ecken erhalten.

Einstellungen prüfen

  • Datenschutz-Seite anlegen und verknüpfen

Utility Klassen

Es gibt einige Utility Klassen, um Features zentral pflegen und bei Bedarf zuweisen zu können.

  • .has-cover
    Wird auf Links in Teasern angewendet, um die Klickfläche auf den gesamten Teaser auszudehnen.
  • .screen-reader-text
    Versteckt ein Objekt sichtbar und macht den Inhalt weiterhin für Screenreader zugänglich.
  • .icon
    Wird auf SVG-Icons angewendet, um die Farbe des Icons mittels fill im CSS steuern zu können
  • .has-icon
    Wird auf Links angewendet, die ein Icon besitzen, um Text und Icon nebeneinander zu positionieren.

Styled Sections

Styled Sections definieren Stile in JSON und erlauben die Zuweisung über die Sidebar im Editor. Sie sind ein Standard-Feature, dass ähnlich wie Utility Klassen funktioniert. Siehe auch Styles.

  • .is-style-section
    Wird auf den äußersten Container aller Pattern angewendet und steuert die Innenabstände. Vorbereitet in allen Farben.
  • .is-style-box
    Wird auf den äußersten Container aller in Pattern sichtbaren Boxen angewendet und steuert die Innenabstände. Vorbereitet in allen Farben.
  • is-style-topic
    Steuert das Styling der thematischen Einordnung oberhalb der Überschriften in Pattern.

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
  • 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:

  1. WP Core-Blöcke (inline)
  2. Custom Critical CSS (inline)
  3. Global angepasste Styles (inline)
  4. Block Variations (inline)
  5. Child Theme CSS (link)

Performance Edge Cases

Einrichtung WooCommerce

Wenn WooCommerce verwendet werden soll, sind folgende Punkte zu beachten:

  1. WooCommerce installieren und ggf. Einrichtungs-Prozess durchlaufen
  2. Header gegen einen für WooCommerce konzipierten Header tauschen (Design > Vorlagen > Template Parts > Header
  3. 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. 
  4. 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.