Was ein Child ohne PHP kann

Ein Child muss fast nie PHP schreiben. Alles auf dieser Seite ist eine Datei: die theme.json, ein Pattern, ein Template-Teil oder ein paar Zeilen in assets/css/child.css. Die functions.php lädt diese CSS-Datei schon. Du musst nichts anmelden.

Jeder Abschnitt hat ein Beispiel. Die vollständigen Listen der Token, Patterns und Teile stehen in der README.md des Themes wpce-theme.

Zwei Regeln gelten für alles, was in der theme.json steht:

Listen (Palette, Schriftfamilien, Schriftgrößen, Rundungen, Abstandsstufen) werden als Ganzes ersetzt. Du wiederholst die Liste und änderst Werte.
Alles unter settings.custom.wpce wird zusammengeführt. Du nennst nur den Wert, der abweicht.

Die Gründe und die Fallen stehen auf der Seite Farben, Schriften, Abstände.

1. Palette

settings.color.palette mit allen sieben Slugs, so wie die Vorlage sie liefert. Welche Rolle jede Farbe hat und welchen Kontrast sie erreichen muss, steht auf der Seite Farben, Schriften, Abstände.

2. Schriften

Zwei Familien mit den Slugs base und heading, Schriftdateien im Child, genannt mit file:./. Das vollständige Beispiel steht dort.

3. Abschnittsstile

Die fünf Abschnittsstile ändern Fläche, Text und Abstand über styles.blocks.core/group.variations.wpce-section-N. Das Beispiel steht dort. Wer das Schema eines Abschnitts anpassen will (Knöpfe, Dachzeile, Linien), setzt --wpce-*-Eigenschaften auf der Klasse des Abschnitts in assets/css/child.css.

Das Schema eines Abschnitts besteht aus diesen Eigenschaften: --wpce-link, --wpce-button-background, --wpce-button-text, --wpce-button-hover-background, --wpce-button-hover-text, --wpce-kicker, --wpce-accent, --wpce-muted, --wpce-line, --wpce-surface und --wpce-focus. Jedes Paar muss auf der Fläche 4,5 : 1 erreichen. Der Kontrasttest des Parents sieht das CSS eines Childs nicht. Prüfe mit dem Auge und mit einem Kontrastwerkzeug.

4. Kopfleiste

Die Kopfleiste ist kein Abschnitt. Sie hat eigene Token: Fläche, Text, Akzent (die Linie unter dem aktuellen Menüpunkt und der Fokusrahmen) und den Hauptknopf. Eine Kopfleiste in der Vereinsfarbe:

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "header": {
          "surface": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)",
          "accent": "var(--wp--preset--color--secondary)",
          "button-background": "var(--wp--preset--color--base)",
          "button-text": "var(--wp--preset--color--primary)",
          "button-hover-background": "var(--wp--preset--color--neutral)",
          "button-hover-text": "var(--wp--preset--color--primary)"
        }
      }
    }
  }
}

Weitere Schlüssel unter header: height, height-mobile, logo-height, position (sticky oder static) und badge. Welcher Kopf es ist und ob er auf dem Bild liegt, steht in Abschnitt 9. Mit "badge": "emergency" steht „Notruf 112“ in der Leiste, für Feuerwehren und Rettungsdienste.

Geprüft: Mit diesen Werten auf die theme.json des Parents gelegt, ergeben sich --wp--custom--wpce--header--surface: var(--wp--preset--color--primary), …--header--position: static und …--header--badge: emergency. Die Höhe bleibt, wo du sie nicht nennst, bei 4.75rem.

5. Bewegung

Die Bewegung ist an, in der Stufe „dezent“. Die Stufe ist eine Reihe von Token unter settings.custom.wpce.motion. Ruhigere Karten, zum Beispiel:

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

Die Stufen „lebhaft“ und „aus“ stehen vollständig auf der Seite Die Bewegung dämpfen oder ausschalten. Das ist das Einzige auf dieser Seite, das PHP braucht: einzelne Effekte ganz abzuschalten (Einblenden beim Scrollen, Zählen, Seitenübergang). Dazu dient remove_theme_support( 'wpce-motion' ) oder der Filter wpce_theme_motion in der functions.php.

6. Hero

Wie hoch ein Seitenanfang ist, wenn sein Block keine Höhe nennt, und wie viel das Bild im Layout „Split“ bekommt:

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "hero": {
          "height": "min(70svh, 40rem)",
          "min-height": "28rem",
          "min-height-mobile": "30rem",
          "split-media": "50%"
        }
      }
    }
  }
}

Layout, Farbschleier und seine Stärke und die Stelle des Textes sind Einstellungen am Block, in der Seitenleiste des Editors. Es sind keine Token.

7. Ein Pattern ersetzen

Kopf, Fuß, Seitenköpfe, jeder Abschnitt und jede Seite des Parents ist ein Pattern. Eine Datei in patterns/ des Childs mit dem Slug des Parents tritt überall an dessen Stelle, auch in den Seiten-Patterns und Templates des Parents. Eine eigene Fußzeile:

<?php
/**
 * Title: Footer
 * Slug: wpce-theme/footer
 * Categories: footer
 * Block Types: core/template-part/footer
 */
?>
<!-- wp:group {"align":"full","className":"wpce-footer is-style-wpce-section-5","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull wpce-footer is-style-wpce-section-5">
  <!-- wp:site-title {"level":0} /-->
  <!-- wp:wpce-theme/menu {"location":"legal","depth":1} /-->
</div>
<!-- /wp:group -->

Die Datei ist nur durch ihren Kopf PHP. Sie enthält Block-Markup. Beginne mit einer Kopie der Datei des Parents und trage sie in die Liste „What is overridden“ ein (siehe Vorlage kopieren). Die Kopie folgt dem Parent nicht mehr.

Eigene Patterns des Vereins bekommen das Slug-Präfix wpce-<kürzel>/.

8. Einen Template-Teil ersetzen

parts/header.html und parts/footer.html des Parents sind je eine Zeile. Sie nennen ein Pattern: das, das der Stil oder das Child über header.layout und footer.layout wählt (siehe Abschnitt 9). Für einen der drei Köpfe oder Füße des Themes brauchst du darum keinen eigenen Template-Teil, ein Wert in der theme.json genügt. Einen eigenen Template-Teil brauchst du, wenn der Kopf ein ganz anderer sein soll. Er nennt dann das Pattern selbst. Will ein Child zum Beispiel den Kopf mit dem Menü hinter einem Knopf auf jedem Bildschirm, bringt es eine eigene parts/header.html mit:

<!-- wp:pattern {"slug":"wpce-theme/header-overlay"} /-->

Für die einzeilige Fußzeile steht in parts/footer.html das Pattern wpce-theme/footer-compact. Ein Child, das eine eigene parts/header.html mitbringt, lässt die Wahl des Stils hinter sich: Der Teil nennt sein Pattern selbst. Eine Vorlage (templates/page.html und andere) ersetzt du auf dieselbe Weise, mit einer Datei desselben Namens. Auch sie gehört in die Liste „What is overridden“.

9. Kopf, Fuß und Aufbau der Seite

Ein Stil oder ein Child wählt nicht nur Farben, sondern den Aufbau. Alle Werte stehen unter settings.custom.wpce und werden wie die anderen zusammengeführt. Es gibt dafür keinen Bildschirm im Backend: Sie gehören in eine Stilvariante (styles/<name>.json) oder in die theme.json des Childs. Kennt das Theme einen Wert bei layout nicht, nimmt es den ersten der Reihe.

Kopf und Fuß.

Schlüssel	Werte (der erste ist der Standard)	Wirkung
`header.layout`	`bar`, `centered`, `menu-button`	der Kopf: „Kopf: Leiste“ (`wpce-theme/header`), „Kopf: Logo in der Mitte“ (`wpce-theme/header-centered`), „Kopf: Menü hinter einem Knopf“ (`wpce-theme/header-overlay`)
`footer.layout`	`columns`, `row`, `centered`	der Fuß: „Fuß: vier Spalten“ (`wpce-theme/footer`), „Fuß: eine Zeile“ (`wpce-theme/footer-compact`), „Fuß: mittig, mit Logo“ (`wpce-theme/footer-centered`)
`header.over-picture`	`solid`, `transparent`	`transparent`: Auf einer Seite, die mit einem Bild über die ganze Breite beginnt, liegt der Kopf auf dem Bild, bis die Seite gescrollt wird

{
  "version": 3,
  "settings": {
    "custom": {
      "wpce": {
        "header": { "layout": "centered", "over-picture": "transparent" },
        "footer": { "layout": "centered" }
      }
    }
  }
}

Das Theme liest die Werte beim Ausgeben der Seite. Der Template-Teil parts/header.html nennt ein Muster, das das Theme für ihn aussucht (hidden-header, bei der Fußzeile hidden-footer). Ein Kopf, den eine Redakteurin im Website-Editor mit „Ersetzen“ gewählt und gespeichert hat, gehört ihr und folgt dem Stil nicht mehr. Für over-picture gilt das nicht: Die Klasse am Kopf kommt beim Ausgeben der Seite dazu, ein gespeicherter Kopf folgt also einer späteren Änderung des Stils. Der Kopf mit dem Logo in der Mitte hat eigene Höhen: header.brand-height (6.5rem), header.menu-height (3.25rem) und header.logo-height-centered (3.25rem).

Per PHP lassen sich beide Entscheidungen mit Filtern überschreiben, siehe Filter und Hooks.

Der Kopf eines Abschnitts.

Schlüssel	Werte (der erste ist der Standard)	Wirkung
`section.head-align`	`start`, `center`	Text und Knöpfe im Kopf jedes Abschnitts am linken Rand oder in der Mitte
`section.kicker`	`block`, `none`	die kleine Zeile über der Überschrift, auch auf den Bändern der Seiten des Plugins; `none` blendet sie aus
`section.heading-size`	Schriftgröße `x-large`	die Größe der Überschrift, zum Beispiel `clamp(1.875rem, 1.39rem + 2vw, 3rem)`

Ein durchgehender Grund. Von Haus aus wechseln helle Abschnitte zwischen der Seitenfarbe und einem leicht getönten Streifen. Ein Stil kann stattdessen einen Grund wählen, auf dem feine Linien die Abschnitte teilen. Dafür gehören vier Werte zusammen:

Schlüssel	Standard	Für einen durchgehenden Grund
`styles.blocks.core/group.variations.wpce-section-2.color.background`, ebenso unter `core/columns` und `core/column`	Farbe `neutral`	`var(--wp--preset--color--base)`, bei allen drei Blöcken derselbe Wert
`section.surface-inner`	`base`	`var(--wp--preset--color--neutral)`: Flächen innerhalb des Abschnitts brauchen einen Ton, sonst verschwindet eine weiße Fläche auf Weiß
`section.surface-card-line`	`transparent`	`var(--wp--custom--wpce--card--line)`: eine Karte braucht eine Linie
`section.rule`	`0px`	eine Dicke wie `1px`: die Linie zwischen zwei hellen Abschnitten. Mit `0px` wird nichts gemalt

Der Seitenkopf der Seiten des Plugins folgt dem Token head.surface. Ein Stil mit durchgehendem Grund setzt es auf var(--wp--preset--color--base).

Das Theme prüft für seine eigenen Stile, dass diese vier Werte zusammen gesetzt sind. Ein Child hat diesen Test nicht. Setze alle vier, sonst sieht eine Karte ohne Linie auf der Seitenfarbe so aus, als fehlte sie.

Der Listen-Block. entries.listStyle und entries.cardStyle nennen den Blockstil, den der Listen-Block hat, solange niemand einen gewählt hat. Seit es die Stile „Programm“ (programme) und „nummerierte Schritte“ (steps) gibt, sind das auch mögliche Werte. Siehe Block-Stile.

Der Seitenanfang „Mittig“. Der Stil „Mittig“ der Bildfolge und das Muster wpce-theme/hero-centered setzen den Text in die Mitte des Bildes. Das wählt ein Redakteur am Block, es ist kein Token.

Und außerdem

Weitere Token unter settings.custom.wpce: Radien für Knopf, Karte, Bild und Panel, Abstand und Linie der Karte, Abschnittsabstand, Strich der Dachzeile, das Ornament der farbigen Bänder. Die Seite Die Token –wpce-* zeigt, was das Plugin davon liest.
assets/css/child.css für das, was theme.json nicht ausdrückt. Nenne die Datei nicht assets/css/editor.css in der Erwartung, dass sie den Editor gestaltet. Editor-Stile meldest du mit add_editor_style() in der functions.php an.
Eigene Blockstile und Stilvarianten in styles/. Wie das geht, steht auf der Seite Block-Stile.
Hooks in der functions.php. Registriere keine Menü-Orte und keine Theme-Unterstützung ein zweites Mal. Das macht der Parent.

Name und Logo gehören nicht ins Child. WP Club Elements hält Website-Titel und Website-Logo gleich Name und Logo aus den Vereinsdaten.