Seminar/Schulung: WordPress Theme-Entwicklung (FSE, Hybrid, Classic)

In diesem Seminar zeigen wir, wie WordPress-Themes erstellt werden – sowohl klassisch mit HTML, CSS und PHP als auch mit dem neuen No Code-Ansatz als sog. FSE-Theme (Block-Theme). Wenn das beste aus beiden Welten benötigt wird, kombinieren wir die Ansätze und erhalten ein Hybrid-Theme.

Kurzbeschreibung

WordPress ist zurecht das meist genutzte Content Management System der Welt, denn mit WordPress können wir sowohl simple als auch sehr komplexe Websites entwickeln, die trotz vieler Funktionen komfortabel zu pflegen sind. Das Design, die Struktur und die Funktionalität einer auf WordPress basierenden Website werden über das sog. »Theme« gesteuert. Hier hat es in den vergangenen Jahren spürbare Änderungen in der Theme-Architektur gegeben:

• Der klassische Ansatz zur Erstellung eines WordPress-Themes erfordert die Nutzung von PHP, CSS und HTML, um die Struktur und das Design der Website zu definieren.
• Der Full Site Editing (FSE)-Ansatz verwendet das Block-Editor-System von WordPress. Mit FSE können wir alle Teile der Website – einschließlich Header, Footer und Seiteninhalte – direkt im Editor gestalten, ohne Code schreiben zu müssen. Themes basieren hier auf Block-Templates und globalen Stilen, was eine visuellere und benutzerfreundlichere Gestaltung ermöglicht.

Wir empfehlen den Schwerpunkt der Schulung auf den FSE-Ansatz zu legen, da dieser Ansatz der WordPress Roadmap folgt und aktiv weiterentwickelt wird.

Agenda: WordPress FSE-Themes erstellen

Überblick FSE-Themes

• Classic WP vs. Hybrid vs. FSE
• Theme-Directory
• Übersicht Block Editor + Einstellungen
• Standard-Blöcke und Funktionen
• Standard Patterns & Pattern Directory

Arbeitsumgebung

• Lokale Installation
• Der WordPress Playground in der Cloud

Der Site-Editor

• Website Editor
• Globale Styles, Block Styles
• Spalten, Raster & Breakpoints
• Templates erstellen und anpassen
• Template Parts erstellen und anpassen (Header, Footer etc.)

Design Systematik

• theme.json
• Section Styles
• Eigene Pattern erstellen
• Synced Patterns
• Partially Synced Patterns

Informationsarchitektur & dynamische Inhalte

• Post Types & Taxonomien
• Loop Block
• URL-Struktur & Informationsarchitektur

Themes erstellen, exportieren und anpassen

• Custom CSS
• Create Block Theme
• FSE-Theme Struktur
• Hilfreiche Plugins

Agenda: WordPress Classic-Themes erstellen

Die folgenden Inhalte beziehen sich auf die Erstellung von Classic Themes. Wir haben dazu auch eine Reihe von Blog-Beiträgen erstellt.

WordPress-Installation & Grundlagen

• Sie lernen, wie eine lokale Serverumgebung eingerichtet wird. Mit Hilfe dieser Serverumgebung können Sie Datenbanken anlegen und dynamische Webanwendungen auf Basis von PHP ausführen.
• Sie erstellen eine Datenbank und installieren WordPress. Dabei lernen Sie, welche Faktoren bereits bei der Installation bzw. der Einrichtung des Systems beachtet werden sollten.
• Sie lernen die WordPress-Ordnerstruktur kennen, damit Sie später genau wissen, wo Sie welche Dateien finden bzw. ablegen sollten.

Crashkurs: WordPress-Administrationsbereich

• Sie lernen die wichtigsten Bereiche des WordPress-Administrationsbereichs kennen. Der Schwerpunkt liegt hierbei auf versteckten aber wichtigen Funktionen. Viele weitere Bereiche des Administrationsbereichs werden im späteren Verlauf der Schulung automatisch kennengelernt.
• Sie erfahren, wie Plugins installiert werden, welche Arten von Plugins es gibt und wann Plugins Sinn ergeben.
• Sie erfahren, wie Themes und Widgets verwaltet und angepasst werden können.

Aufbau und Funktionsweise eines WordPress-Themes

• Sie lernen die klassische Dateistruktur von WordPress kennen und erfahren, wie Dateien miteinander verknüpft werden.
• Sie lernen, wie Sie mit Hilfe von »Template Tags« Inhalte an bestimmten Stellen im Design ausgeben können.
• Sie lernen, wie mit Hilfe des »Loops« Beiträge und Seiten ausgegeben werden können.
• Sie erfahren, wie die »Template Hierarchie« funktioniert, die bestimmt, wann WordPress nach welchen Dateien sucht.
• Sie setzen sog. »API-Hooks« ein und lernen, was es hiermit auf sich hat.

Suche und Suchergebnisse

• Sie erweitern Ihre Seite um eine Suchfunktion und optimieren die Suchergebnisse.

Kommentarfunktion

• Sie integrieren die Kommentarfunktion in den Blog-Bereich Ihrer Website.
• Sie lernen alle wichtigen Zusammenhänge im Bezug auf Kommentare, Moderationsschleifen und die Antworten-Funktion kennen.

Sidebars und Widgets

• Sie erfahren, was »Widgets« sind und wie sie sinnvoll eingesetzt werden können.
• Sie erstellen sog. »Widgetized Sidebars«, in denen Sie Widgets per Drag and Drop platzieren können.

Navigation

• Sie erweitern Ihre Website um eine Navigations-Komponente, die es Ihnen ermöglicht, die Hauptnavigation über den WordPress-Administrationsbereich zu pflegen.
• Sie erfahren, wie Sie mehrere Navigationen sinnvoll einsetzen und darstellen können.

Conditional Tags

• Sie laden mit Hilfe von »Conditional Tags« Informationen nur in bestimmten Bereichen der Seite. Beispielsweise möchten Sie Informationen nur auf der Startseite oder nur in den Suchergebnissen anzeigen.

Seitenvorlagen

• Sie lernen, was Seitenvorlagen sind und wie sie diese sinnvoll einsetzen.
• Sie erweitern Ihre Website um eine Seitenvorlage und verwenden diese.

Beitragsbilder (Post Thumbnails)

• Sie lernen, was Beitragsbilder sind und wie sie sinnvoll eingesetzt werden können.
• Sie erweitern Ihr Theme um die Möglichkeit, Beitragsbilder zu verwenden.
• Sie erfahren, wie zusätzliche Bildgrößen registriert und eingesetzt werden können.

Custom Post Types

• Sie lernen, was »Custom Post Types« sind und wie Sie mit ihrer Hilfe neue inhaltliche Bereiche auf Ihrer Website erstellen können.
• Sie erstellen einen neuen »Post Type« und geben die in diesem Bereich geschriebenen Beiträge auf der Website aus.

Taxonomien

• Sie lernen, was es mit Taxonomien in WordPress auf sich hat und wie Sie Ihren »Custom Post Type« um Taxonomien erweitern können.
• Sie lernen, wie Taxonomien im Theme eingesetzt und ausgegeben werden können.

Custom Fields

• Wenn Sie Inhalte abbilden möchten, für die WordPress keine Eingabefelder vorgesehen hat, können Sie mit Hilfe von »Custom Fields« weitere Eingabefelder erzeugen. Sie lernen, wie Sie die Felder herstellen, mit Inhalten befüllen und die eingetragenen Werte auf der Website abbilden können.
• Sie lernen das Plugin »Advanced Custom Fields« kennen, mit dessen Hilfe »Custom Fields« sehr benutzerfreundlich erstellt und ausgelesen werden können.

Hilfreiche Plugins

• Sie lernen weitere hilfreiche Plugins kennen und entwickeln ein gesundes Bewusstsein, wann ein Plugin notwendig ist und welche Risiken beim Einsatz zu vieler oder falscher Plugins bestehen.

Export

• Sie exportieren Ihre Datenbank und erstellen ein Backup der lokalen Daten. Mit diesem Wissen können Sie Ihre Schulungsergebnisse zu Hause in einer lokalen Serverumgebung weiterverwenden und die Website später im Internet veröffentlichen.

Dozent: Jonas Hellwig