Farben, Schriften, Abstände

Fast alles, was einen Verein vom nächsten unterscheidet, steht in der theme.json des Childs. Du änderst dort Werte. Du schreibst kein CSS und kein PHP. Das Plugin liest dieselben Werte und folgt dem Theme.

Diese Seite zeigt, wie das geht, wo die Fallen liegen, und am Ende, wie du die Bewegung dämpfst oder ausschaltest.

Die zwei Regeln

Die theme.json des Childs wird auf die des Parents gelegt. Dabei gilt:

1. Listen werden als Ganzes ersetzt. Das sind die Palette, die Schriftfamilien, die Schriftgrößen, die Abstandsstufen, die Rundungen und die Schatten. Wer eine Farbe ändert, schreibt alle sieben hin. Wer nur drei hinschreibt, hat danach nur noch drei.
2. Alles unter settings.custom.wpce wird zusammengeführt. Du nennst nur den Wert, der abweicht. Der Rest bleibt, wie der Parent ihn setzt.

Zur Probe: Ein Child mit nur drei Farben in der Palette lässt base, neutral und contrast verschwinden, --wp--preset--color--base ist dann nicht mehr gesetzt. Ein Child mit nur zwei Abstandsstufen (20, 30) lässt --wp--preset--spacing--40 und --60 verschwinden. Das Theme und das Plugin lesen diese Stufen. Die Seite verliert Farben und Abstände.

Schlüssel in camelCase werden in der CSS-Variablen zu Kleinbuchstaben mit Bindestrich: card.borderWidth wird zu --wp--custom--wpce--card--border-width. Das Plugin liest die Werte von dort. Mit einer Ausnahme: Die Schlüssel entries.cardStyle, listStyle und tableStyle liest das Plugin im PHP, sie bleiben in camelCase.

Längen, die das Plugin liest, brauchen eine Einheit: 0px, nicht 0.

Farben: sieben Rollen

Abschnitte, Knöpfe, Karten und die Blöcke des Plugins nennen Rollen, keine Farben. Eine Palette hält die Versprechen dieser Rollen, sonst werden Texte unlesbar.

Slug	Rolle	Muss 4,5 : 1 erreichen …
base	Seitenhintergrund und Text auf dunklen Flächen, weiß oder fast weiß
neutral	zweite Fläche, etwas dunkler als base
contrast	Text und dunkler Abschnitt, nie reines Schwarz	auf base, neutral und secondary
contrast-2	gedämpfter Text	auf base und neutral
primary	die Vereinsfarbe: Links, Knöpfe, der kräftige Abschnitt	auf base und neutral; base darauf
tertiary	primary, 25 bis 35 Prozent dunkler: Knopf beim Darüberfahren, zweite dunkle Fläche	base darauf
secondary	helle Akzentfläche mit dunklem Text, nie Textfarbe auf base	contrast darauf

Eine Vereinsfarbe, die für weiße Schrift zu hell ist (Gelb, helles Grün), wird secondary. An die Stelle von primary tritt ein dunkler Ton.

So sieht die Palette in der theme.json aus (die Vorlage liefert genau diese Form, hier mit einem grünen Verein):

{
  "$schema": "https://schemas.wp.org/wp/7.0/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "name": "Primary", "color": "#0B6E4F" },
        { "slug": "secondary", "name": "Secondary", "color": "#F2C14E" },
        { "slug": "tertiary", "name": "Tertiary", "color": "#07503A" },
        { "slug": "neutral", "name": "Neutral", "color": "#F1F5F3" },
        { "slug": "base", "name": "Base", "color": "#FFFFFF" },
        { "slug": "contrast", "name": "Contrast", "color": "#14171F" },
        { "slug": "contrast-2", "name": "Contrast 2", "color": "#4B5563" }
      ]
    }
  }
}

Ein Child, das noch die früheren fünf Farben listet, läuft weiter. tertiary und contrast-2 fehlen dann. Der Knopf beim Darüberfahren nimmt primary, der gedämpfte Text contrast. Ergänze beide, sobald du kannst.

Die Palette prüfen

Das Theme bringt einen Kontrasttest mit, der die Palette eines Childs in jedem Abschnittsstil prüft. Du brauchst einen Checkout von wpce-theme und Node 24:

cd wpce-theme
WPCE_CHILD_TEMPLATE_DIR=../wpce-tsvms node --test tests/js/contrast.test.js

Die grüne Palette von oben besteht. Ein zu helles Primär wird mit Zahlen abgelehnt:

the child template's palette is too low in contrast for
    page link: #E6C200 on #FFFFFF = 1.74:1
    page button: #FFFFFF on #E6C200 = 1.74:1
    page focus ring: #E6C200 on #FFFFFF = 1.74:1 (needs 3:1)

Der Test sieht das CSS deines Childs nicht. Wenn du Werte in assets/css/child.css setzt, prüfst du den Kontrast selbst, mit dem Auge und einem Kontrastwerkzeug.

Schriften

Es gibt zwei Familien, base für Text und heading für Überschriften. Lege die Schriftdateien als variable woff2 ins Child, zum Beispiel unter assets/fonts/, und nenne sie mit file:./. Der Pfad gilt vom Child aus. Der Parent lädt die erste aufrechte Datei von base vorab.

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "slug": "base",
          "name": "Base",
          "fontFamily": "\"Figtree\", system-ui, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Figtree",
              "fontStyle": "normal",
              "fontWeight": "300 900",
              "fontDisplay": "swap",
              "src": [ "file:./assets/fonts/figtree/figtree-latin-wght-normal.woff2" ]
            }
          ]
        },
        {
          "slug": "heading",
          "name": "Heading",
          "fontFamily": "\"Fraunces\", Georgia, serif",
          "fontFace": [
            {
              "fontFamily": "Fraunces",
              "fontStyle": "normal",
              "fontWeight": "100 900",
              "fontDisplay": "swap",
              "src": [ "file:./assets/fonts/fraunces/fraunces-latin-wght-normal.woff2" ]
            }
          ]
        }
      ]
    }
  }
}

Wiederhole immer beide Familien, auch wenn du nur eine ändern willst. Die Liste wird ersetzt. Lege die Lizenz der Schrift (OFL.txt) neben die Dateien.

Zwei Hinweise aus dem Parent. Er hält jede seiner Varianten unter 250 KB Schriftdateien, damit die Seite schnell lädt. Nimm das als Richtwert. Und: Streicht eine Schrift die Null durch, wirkt das in Uhrzeiten oder IBANs wie ein Fehler. Dann holst du die zehn Ziffern aus einer anderen Familie: zwei weitere fontFace-Einträge derselben Familie mit unicodeRange: U+0030-0039. So macht es die Variante „Förderverein“.

Abstände und Rundungen

Das Theme kennt sieben Abstandsstufen 20 bis 80, fließend zwischen 390 und 1280 Pixel Breite, und fünf Rundungen none, small, medium, large, full. Beides sind Listen. Du ersetzt sie ganz.

Eine Seite ohne Rundungen, mit einem Verein, der es eckig mag:

{
  "version": 3,
  "settings": {
    "border": {
      "radiusSizes": [
        { "slug": "none", "name": "None", "size": "0" },
        { "slug": "small", "name": "Small", "size": "0" },
        { "slug": "medium", "name": "Medium", "size": "0" },
        { "slug": "large", "name": "Large", "size": "0" },
        { "slug": "full", "name": "Full", "size": "999px" }
      ]
    }
  }
}

Danach ist --wp--preset--border-radius--medium gleich 0. Weil der Kartenradius des Themes (custom.wpce.card.radius) auf medium zeigt, sind auch die Karten des Plugins eckig. Das ist die Kette: Preset, Wert unter custom.wpce, Token --wpce-card-radius.

Die Abstandsstufen werden gleich behandelt, in settings.spacing.spacingSizes. Die Stufen 20 bis 50 sind im Theme große Layout-Abstände. Der Parent bildet die kleinen Abstände innerhalb einer Komponente von Hand ab. Ändere die Stufen deshalb nur, wenn du die ganze Seite neu austarieren willst.

Die Breiten stehen unter settings.layout: contentSize (Lesebreite, 46rem) und wideSize (Raster, Kopf, Fuß und Bänder, 76rem).

Einzelwerte unter settings.custom.wpce

Hier nennst du nur, was abweicht. Die wichtigsten Schlüssel, mit dem Wert, den der Parent setzt:

Schlüssel	Parent	Wirkung
card.radius	Rundung medium	Ecken jeder Karte
card.padding	Abstand 30	Innenabstand jeder Karte
card.line, card.border-width	line, 1px	Linie der Karte
media.radius	Rundung medium	Bilder
button.radius	Rundung small	Knöpfe
panel.radius	Rundung large	große Flächen
section.padding	Abstand 60	über und unter jedem Abschnitt
kicker.stroke	0rem	Länge des Strichs vor einer Dachzeile, zum Beispiel 1.5rem
table.max-width	60rem	Breite einer Tabelle des Listen-Blocks
header.height, header.position	4.75rem, sticky	Höhe und Verhalten der Kopfleiste (sticky oder static)
header.layout, footer.layout, header.over-picture	bar, columns, solid	welcher Kopf und welcher Fuß, und ob der Kopf auf dem Bild am Seitenanfang liegt, siehe Was ein Child ohne PHP kann
section.head-align, section.kicker, section.heading-size	start, block, x-large	der Kopf jedes Abschnitts: Ausrichtung, kleine Zeile darüber, Größe der Überschrift
section.rule, section.surface-inner, section.surface-card-line	0px, base, transparent	der durchgehende Grund mit feinen Linien; die vier Werte gehören zusammen, siehe dieselbe Seite
entries.cardStyle, listStyle, tableStyle	nicht gesetzt	Blockstil des Listen-Blocks, solange die Redaktion keinen gewählt hat

Dazu kommen Schlüssel für den Kopf, den Seitenkopf der Plugin-Seiten, das Hero und die Bewegung. Die vollständigen Listen stehen in der README.md des Themes. Alles, was das Plugin davon liest, steht auf der Seite Die Token –wpce-*.

Ein Beispiel mit mehreren Werten, getestet gegen die theme.json des Parents:

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "card": { "radius": "1.5rem", "borderWidth": "2px", "padding": "1.75rem" }
      }
    }
  }
}

Das ergibt --wp--custom--wpce--card--radius: 1.5rem, --wp--custom--wpce--card--border-width: 2px und --wp--custom--wpce--card--padding: 1.75rem. Alle anderen Werte unter custom.wpce bleiben beim Parent.

Abschnitte umfärben

Die fünf Abschnittsstile wpce-section-1 bis -5 tragen Fläche, Textfarbe und Abstand als Global Styles. Du änderst sie je Stil:

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/group": {
        "variations": {
          "wpce-section-4": {
            "color": {
              "background": "var:preset|color|tertiary",
              "text": "var:preset|color|base"
            }
          }
        }
      }
    }
  }
}

Was auf einem Abschnitt steht (Links, Knöpfe, Dachzeile, Linien, gedämpfter Text), folgt dem Schema des Abschnitts. Das sind --wpce-*-Eigenschaften im Stylesheet des Parents, keine Global Styles. Eine Fläche mit anderem Charakter braucht ihr Schema in assets/css/child.css:

/* Knöpfe auf dem kräftigen Abschnitt in der Akzentfarbe. */
.is-style-wpce-section-4 {
  --wpce-button-background: var(--wp--preset--color--secondary);
  --wpce-button-text: var(--wp--preset--color--contrast);
}

Die Bewegung dämpfen oder ausschalten

Auf der Seite Bewegung steht, was das Theme bewegt. Im Backend gibt es keinen Schalter dafür. Das stellst du im Child ein. Es gibt zwei Wege, vom leichten zum schweren.

Die Bewegung ist von Haus aus eingeschaltet, in der Stufe „dezent“. Wie weit, wie lang und wie groß etwas läuft, sagen Token unter settings.custom.wpce.motion. Das Plugin liest dieselben Token. Seine Karten bewegen sich darum genau wie die des Themes.

Weg 1: Token, ohne PHP

Ruhigere Karten. Karten heben sich nicht, Bilder wachsen nicht:

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "motion": {
          "distance": { "lift": "0px" },
          "scale": { "image": "1" }
        }
      }
    }
  }
}

Alles aus, soweit Token reichen. Zeiten auf null, Wege auf null, kein Zoom:

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "motion": {
          "duration": { "fast": "0s", "base": "0s", "slow": "0s", "page": "0s" },
          "distance": { "reveal": "0rem", "lift": "0px", "button": "0px", "arrow": "0px" },
          "scale": { "image": "1" },
          "stagger": "0ms",
          "header": { "slim": "0rem" }
        }
      }
    }
  }
}

Lebhafter. Längere Wege, größerer Zoom:

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "motion": {
          "duration": { "base": "300ms", "slow": "700ms", "hero": "1500ms", "hero-hold": "5s", "page": "250ms" },
          "distance": { "reveal": "1.5rem", "lift": "5px", "arrow": "6px" },
          "scale": { "image": "1.06" },
          "stagger": "90ms",
          "stagger-max": "6"
        }
      }
    }
  }
}

Geprüft: Die „aus“-Werte, in die theme.json des Parents gelegt, ergeben --wp--custom--wpce--motion--duration--base: 0s, --wp--custom--wpce--motion--distance--lift: 0px und --wp--custom--wpce--motion--scale--image: 1. Im Browser wird aus dem Bild einer Karte beim Darüberfahren matrix(1.04, …) ohne Eingriff und matrix(1, …) mit den Werten. Die Übergangszeit ist dann 0s. Der Test hat die Werte als CSS in die Seite eingefügt. Gespeichert wurde nichts.

Das Theme selbst nutzt die Token genauso: Die Variante „Feuerwehr“ setzt distance.lift auf 0px, die Variante „Musikverein“ duration.slow auf 700ms. Die Variante „Turnverein“ setzt genau die Werte der Stufe „lebhaft“ von oben.

Weg 2: einzelne Effekte, mit PHP

Die Token ändern das Maß. Sie nehmen keinen Effekt ganz weg. Das Theme kennt sieben Effekte:

Effekt	Was er tut
reveal	Abschnitte und Karten steigen beim Scrollen ein
hover	Karten heben sich, Bilder wachsen, Pfeile rücken vor, Knöpfe steigen
header	die feste Kopfleiste wird nach dem ersten Scrollen schmaler
count-up	Zahlen zählen hoch
appear	Menü, Dropdown und aufgeklappte Abschnitte blenden ein
page-transition	Seitenwechsel blenden über
anchors	Sprünge zu einem Anker scrollen sanft

In der functions.php des Childs, in after_setup_theme mit der Standard-Priorität (der Parent meldet seine Unterstützung mit Priorität 5 an):

// Alles aus.
remove_theme_support( 'wpce-motion' );

// Nur diese Effekte.
add_theme_support( 'wpce-motion', array( 'hover', 'header', 'appear' ) );

// Oder einzelne herausnehmen.
add_filter( 'wpce_theme_motion', fn( $effects ) => array_diff( $effects, array( 'count-up', 'page-transition' ) ) );

Geprüft über die Klassen am <body>, an denen das Stylesheet hängt:

Fall	Klassen am Body
nichts getan	wpce-motion und alle sieben wpce-motion--…
remove_theme_support( 'wpce-motion' )	keine
add_theme_support( … 'hover', 'header', 'appear' )	wpce-motion, --hover, --header, --appear
Filter mit array_diff	alle außer --count-up und --page-transition

Ohne hover bleiben die Hover-Regeln im Stylesheet. Ihre Wege stehen aber auf null, auch für die Karten des Plugins.

Was du nicht abschalten kannst

Wer in seinem Gerät „Weniger Bewegung“ eingeschaltet hat, bekommt ohnehin keine Bewegung: nichts steigt ein, hebt sich oder zählt. Das beachtet das Theme immer, und du kannst es nicht abschalten. Es ist kein Schalter für dich, nur der Grund, warum eine Seite bei manchem Besucher ruhig bleibt.

Was schiefgeht

• Eine Palette mit weniger als sieben Farben. Rollen fehlen, Texte verschwinden oder werden unlesbar. Immer alle sieben.
• Eine Abstandsstufe fehlt. Die Liste wird ersetzt, --wp--preset--spacing--40 ist dann nicht gesetzt. Wiederhole alle sieben Stufen oder lass die Liste ganz weg.
• Eine Länge ohne Einheit (0 statt 0px). Das Plugin rechnet mit den Werten, eine nackte 0 macht die Rechnung ungültig.
• Eine Schrift ohne ihre Schwester. base und heading stehen immer beide in der Liste.
• Ein eigener Kontrast, den der Test nicht sieht. Wer in child.css Farben setzt, prüft sie selbst.