SlideShare ist ein Scribd-Unternehmen logo

Gutenberg Theme Entwicklung leicht gemacht

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.

1 von 43
Downloaden Sie, um offline zu lesen
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 …

Recomendados

WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxSebastian Blum
 
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenGratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenEduvision Ausbildungen
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine EinführungJohannes Fruth
 
Arbeiten mit Childthemes
Arbeiten mit ChildthemesArbeiten mit Childthemes
Arbeiten mit ChildthemesKirstenSchelper
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD
 
WordPress Tutorial
WordPress TutorialWordPress Tutorial
WordPress TutorialSkill Day
 

Más contenido relacionado

Ä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-2020HansruediDbeli1
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from ScratchStefan Fröhlich
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshopphillipgroschup
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hoodMathias Elle
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursSteven 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 ArgumenteDeveloping UXD
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015Skill Day
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3webpard 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 VielfaltSven Schultschik
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPressSkill Day
 
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011David Decker
 
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-11Noël Bossart
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJoomlaShine
 
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 AnalyseJürgen Genser
 
WordPress Kurs von WPC
WordPress Kurs von WPCWordPress Kurs von WPC
WordPress Kurs von WPCDanijel 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 itBelsoft
 
Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenOPEN KNOWLEDGE GmbH
 

Ä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
 
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
 
Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren Projekten
 

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