Du wolltest immer schon einmal dein eigenes WordPress Theme aufbauen und möchtest zahlreiche neue Kenntnisse für die Gutenberg Theme Entwicklung gewinnen? In diesem Workshop lernst du von der Pike aus, welche technischen Aspekte berücksichtigen solltest und wie du den WordPress Editor „Gutenberg“ für dein Theme perfekt optimierst. Dabei lernst du auch das WordPress Template System kennen und erfährst, wie du WordPress nach deinen Wünschen anpassen kannst.
4. • 25 Jahre aus Aachen
• Webentwickler bei onOffice GmbH
• WordPress Core Entwickler für den Gutenberg Editor
• Contributor im WordPress Universum
Das bin ich.
13. Block Themes?
• Keine Abhängigkeiten mit Plugins
• Einfacher Aufbau
• Eigene Themes können schnell gebaut werden
• Variation & Pattern Support
• Theme.json – Manipulation im Editor
• Keine ausgeprägte Code Kenntnisse notwendig
14. Was sind die
Unterschiede?
• Es wird kaum PHP mehr benötigt
• Alle Templates basieren auf HTML und sind im
Editor vorzubauen
• Aktualisierung können nachträglich nur bedingt
gemacht werden
?
16. Wie ist ein Block
Theme aufgebaut?
• Bisherige Struktur bleibt erhalten
• Block Themes können mittels dem
„templates“ Ordner und einer
„index.html“ Datei aktiviert werden
• Im Ordner „Parts“ können einzelne
Bereiche definiert werden, die man
später global anpassen kann. Diese
werden in den Templates
• „Patterns“ können deutlich einfacher
direkt im Ordner definiert werden
• Separate theme.json können im
Ordner „Styles“ definiert werden. Die
Haupt theme.json liegt direkt im
Hauptverzeichnis
17.
18. Theme Supports
Für den Gutenberg sind zwei Einstellungen
sehr empfehlenswert:
• add_theme_support('wp-block-styles‘ );
• add_theme_support('align-wide‘ );
19. WordPress Gutenberg
Syntax – Einstieg
• Gutenberg Code ist im Endeffekt
reiner statischer HTML Code
• In der Datenbank wird dieser
Quellcode direkt als String (einfacher
Text) abgespeichert.
21. Full Site Editor /
Theme.json
● Grundlagen werden hier für die Entwicklung definiert und angelegt
● Theme Ordner kann erstellt werden oder im Backend generiert werden
● Seiten Templates / globale Templates werden als HTML Dateien im System erkannt
● Patterns sowie Template Parts können hier generiert werden
● theme.json überschreibt direkt alle bereits angelegten theme_supports in der
functions.php
22. Theme.json generieren
• Derzeit in Beta und ist derzeit kostenlos
• Auch geeignet für Personen ohne Coding
Kenntnisse
• Derzeit sind nur die Grundlagen als Funktion
gegeben, später sollen noch erweiterte
Einstellungen angeboten werden
• Code kann direkt in die theme.json eingefügt
werden.
Link: bit.ly/wp-gen
23. Theme.json Struktur
• theme.json definiert in deren Schema eine
Vorgabe für die Einhaltung der theme.json
• Für den Custom Bereich ist es möglich
eigene CSS-Variablen vom WordPress
System zu generieren und diese von
Gutenberg zu interpretieren.
• Theme Supports, Standard Blocks sowie
auch Patterns können hier zugänglich
gemacht werden
24. CSS Variablen definieren
• Die Variable --wp—custom—deinname wird
generiert
• Ebenfalls kann man in den Werten
der Variablen eine andere CSS-Variable
definieren
25. CSS Variablen
verwenden
• WordPress generiert automatisch die
notwendigen CSS-Variablen
• Auch alle Anpassungen aus dem Full-
Site-Editor werden hier als CSS-
Variablen gespeichert
37. Für Experten: do_blocks
1. Erstelle ein Template im Hauptverzeichnis names: post-wordcamp.php
2. Schalte das Block Theme aus. => index.html
3. Gebe den Header/Footer aus.
4. Erstelle ein Block deiner Wahl und kopiere den Code
5. Gebe den Code in der Funktion do_blocks aus
38. Für Experten: block_template_part
1. Erstelle ein Template im Hauptverzeichnis names: page-wordcamp.php
3. Nutze die Funktion: block_template_part
4. Erstelle ein Block deiner Wahl und kopiere den Code
5. Zeige dein Block Template Part dynamisch an