SlideShare ist ein Scribd-Unternehmen logo
Gutenberg Theme
Entwicklung leicht
gemacht.
Benjamin Zekavica
Workshop
WLAN / WIFI
WCDE
Passwort: *WordCamp2023*
SOFTWARE
Dein Laptop
MAMP
Visual Studio Code
• 25 Jahre aus Aachen
• Webentwickler bei onOffice GmbH
• WordPress Core Entwickler für den Gutenberg Editor
• Contributor im WordPress Universum
Das bin ich.
Neu in Gutenberg?
Und so begann es …
Gutenberg Theme Entwicklung leicht gemacht
Und das kannst du auch! 😊
Wir bauen heute unser
Gutenberg Block Theme!
Unsere Agenda für heute.
• Evolution von WordPress Themes
• Strukturen von Block Themes
• Eintauchen in theme.json
• Praktische Übungen
• Hilfreiche Tipps & Tricks
• Fragen und Antwort Runde
Evolution von
WordPress Themes
Gutenberg Theme Entwicklung leicht gemacht
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
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
?
Strukturen
von Block Themes
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
Gutenberg Theme Entwicklung leicht gemacht
Theme Supports
Für den Gutenberg sind zwei Einstellungen
sehr empfehlenswert:
• add_theme_support('wp-block-styles‘ );
• add_theme_support('align-wide‘ );
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.
Eintauchen in
theme.json
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
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
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
CSS Variablen definieren
• Die Variable --wp—custom—deinname wird
generiert
• Ebenfalls kann man in den Werten
der Variablen eine andere CSS-Variable
definieren
CSS Variablen
verwenden
• WordPress generiert automatisch die
notwendigen CSS-Variablen
• Auch alle Anpassungen aus dem Full-
Site-Editor werden hier als CSS-
Variablen gespeichert
CSS Variablen anwenden
• Einfacher Einsatz der Variablen
color: var(---variable)
Praktische Übungen
Theme vorbereiten
• Theme Ordner selber anlegen und
Dateien erstellen (style.css, index.php)
• Plugin nutzen:
1. Create Block Theme installieren
2. Felder ausfüllen (leeres Theme erstellen)
3. Theme aktivieren
Schriften auswählen
1. Schriftschnitte auswählen
2. Schriften zuweisen im Website Editor
3. CSS Variablen anpassen
Inhaltsbereiten definieren
1. Website Editor öffnen -> Layout
2. Inhalt auf 768px begrenzen
3. Container auf 1280px begrenzen
Header erstellen
1. Website Editor öffnen -> Vorlagen
2. Template-Teile erstellen mit Header
3. Blöcke platzieren und definieren
Footer erstellen
1. Website Editor öffnen -> Vorlagen
2. Template-Teile erstellen mit Footer
3. Blöcke platzieren und definieren
Page/Post Vorlage erstellen
1. Website Editor öffnen -> Templates
2. Seiten/ Beitrag / Startseite auswählen
3. Blöcke platzieren und definieren
Sync Pattern/Vorlage erstellen
1. Website Editor öffnen -> Vorlagen
2. Vorlage erstellen
3. Blöcke platzieren und definieren
4. Seite erstellen und Pattern auswählen
Mittels CSS Anpassungen vornehmen
1. Stile -> zusätzliches CSS
2. (Body soll einen schwarzen Border erhalten)
5. Styling anwenden, Seite neuladen
PHP Pattern/Vorlage erstellen
1. Seite im Editor erstellen und Code kopieren
2. Patterns Ordner erstellen
3. dein-pattern.php Datei anlegen
4. PHP Comments hinzufügen
/**
* Title: Meetup
* Slug: wpmeetup/meetupsection
* Categories: wpmeetup
* Inserter: yes
*/
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
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
Tipps & Tricks
Gutenberg Erweiterungen / Hilfen
• Kadence blocks
• Gutenberg Block Generator (create-wp-blocks.com)
• Gutenberg Handbuch (gutenberg-handbook.com)
• Lazy Blocks (wordpress.org/plugins/lazy-blocks)
Noch Fragen?
Credits
• WordPress.org YouTube channel
• WordPress.org Dokumentation
• themegen.app
Vielen Dank für Eure
Aufmerksamkeit!
Kontaktiere mich:
Website: bz-ac.de
E-Mail: mail@bz-ac.de
WordPress: benjamin_zekavica

Weitere ähnliche Inhalte

Ähnlich wie Gutenberg Theme Entwicklung leicht gemacht

Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
HansruediDbeli1
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshop
phillipgroschup
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
Mathias Elle
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
Nicolai Schwarz
 
Wordpress Crashkurs
Wordpress CrashkursWordpress Crashkurs
Wordpress Crashkurs
Coworking Akademie
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015
Skill Day
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
webpard UG
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Sven Schultschik
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPress
Skill Day
 
Backend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best PracticesBackend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best Practices
punkt.de GmbH
 
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
David Decker
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
Wolfgang Wagner
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
JoomlaShine
 
Portfolio websites für Designer - Übersicht und Analyse
Portfolio websites für Designer - Übersicht und AnalysePortfolio websites für Designer - Übersicht und Analyse
Portfolio websites für Designer - Übersicht und Analyse
Jürgen Genser
 
WordPress Kurs von WPC
WordPress Kurs von WPCWordPress Kurs von WPC
WordPress Kurs von WPC
Danijel Rose
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize it
Belsoft
 

Ähnlich wie Gutenberg Theme Entwicklung leicht gemacht (20)

Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshop
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Wordpress Crashkurs
Wordpress CrashkursWordpress Crashkurs
Wordpress Crashkurs
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPress
 
Backend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best PracticesBackend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best Practices
 
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
 
Portfolio websites für Designer - Übersicht und Analyse
Portfolio websites für Designer - Übersicht und AnalysePortfolio websites für Designer - Übersicht und Analyse
Portfolio websites für Designer - Übersicht und Analyse
 
WordPress Kurs von WPC
WordPress Kurs von WPCWordPress Kurs von WPC
WordPress Kurs von WPC
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize it
 

Gutenberg Theme Entwicklung leicht gemacht

  • 2. WLAN / WIFI WCDE Passwort: *WordCamp2023*
  • 4. • 25 Jahre aus Aachen • Webentwickler bei onOffice GmbH • WordPress Core Entwickler für den Gutenberg Editor • Contributor im WordPress Universum Das bin ich.
  • 6. Und so begann es …
  • 8. Und das kannst du auch! 😊
  • 9. Wir bauen heute unser Gutenberg Block Theme!
  • 10. Unsere Agenda für heute. • Evolution von WordPress Themes • Strukturen von Block Themes • Eintauchen in theme.json • Praktische Übungen • Hilfreiche Tipps & Tricks • Fragen und Antwort Runde
  • 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
  • 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
  • 26. CSS Variablen anwenden • Einfacher Einsatz der Variablen color: var(---variable)
  • 28. Theme vorbereiten • Theme Ordner selber anlegen und Dateien erstellen (style.css, index.php) • Plugin nutzen: 1. Create Block Theme installieren 2. Felder ausfüllen (leeres Theme erstellen) 3. Theme aktivieren
  • 29. Schriften auswählen 1. Schriftschnitte auswählen 2. Schriften zuweisen im Website Editor 3. CSS Variablen anpassen
  • 30. Inhaltsbereiten definieren 1. Website Editor öffnen -> Layout 2. Inhalt auf 768px begrenzen 3. Container auf 1280px begrenzen
  • 31. Header erstellen 1. Website Editor öffnen -> Vorlagen 2. Template-Teile erstellen mit Header 3. Blöcke platzieren und definieren
  • 32. Footer erstellen 1. Website Editor öffnen -> Vorlagen 2. Template-Teile erstellen mit Footer 3. Blöcke platzieren und definieren
  • 33. Page/Post Vorlage erstellen 1. Website Editor öffnen -> Templates 2. Seiten/ Beitrag / Startseite auswählen 3. Blöcke platzieren und definieren
  • 34. Sync Pattern/Vorlage erstellen 1. Website Editor öffnen -> Vorlagen 2. Vorlage erstellen 3. Blöcke platzieren und definieren 4. Seite erstellen und Pattern auswählen
  • 35. Mittels CSS Anpassungen vornehmen 1. Stile -> zusätzliches CSS 2. (Body soll einen schwarzen Border erhalten) 5. Styling anwenden, Seite neuladen
  • 36. PHP Pattern/Vorlage erstellen 1. Seite im Editor erstellen und Code kopieren 2. Patterns Ordner erstellen 3. dein-pattern.php Datei anlegen 4. PHP Comments hinzufügen /** * Title: Meetup * Slug: wpmeetup/meetupsection * Categories: wpmeetup * Inserter: yes */
  • 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
  • 40. Gutenberg Erweiterungen / Hilfen • Kadence blocks • Gutenberg Block Generator (create-wp-blocks.com) • Gutenberg Handbuch (gutenberg-handbook.com) • Lazy Blocks (wordpress.org/plugins/lazy-blocks)
  • 42. Credits • WordPress.org YouTube channel • WordPress.org Dokumentation • themegen.app
  • 43. Vielen Dank für Eure Aufmerksamkeit! Kontaktiere mich: Website: bz-ac.de E-Mail: mail@bz-ac.de WordPress: benjamin_zekavica