Start / Seminare / WordPress + WooCommerce – Grundlagen (5 Tage)

Modul

Tag 2 – Design, Themes & Site Editor

4 Kapitel in diesem Modul-Video · Laufzeit

Vertonung mit synthetischer Stimme · Inhalte redaktionell verantwortet · © 2026 HECKER CONSULTING, alle Rechte vorbehalten

Transkript

Der gesprochene Text dieses Moduls zum Mitlesen, Überfliegen und Durchsuchen. Ein Klick auf einen Zeitstempel springt an die Stelle im Video.

Design, Themes & Site Editor

0:00 Gestern haben wir das Fundament gelegt, heute geht es um das, was man tatsächlich sieht. Aber Vorsicht vor einem Missverständnis: Ein Theme ist keine Tapete, die man am Ende noch schnell aufklebt. Es ist die Struktur, in der Ihr Shop die nächsten Jahre lebt — es entscheidet mit, wie Produktseiten aufgebaut sind, wie schnell die Seite lädt und wie viel Sie später ohne Hilfe selbst ändern können.

0:22 Deshalb behandeln wir es heute als das, was es ist: eine Architekturentscheidung, die zufällig auch hübsch aussieht.

Design, Themes & Site Editor

0:29 Der Tag hat wieder vier Abschnitte. Zuerst klären wir, was ein Theme ist und warum es heute zwei grundverschiedene Bauweisen gibt. Danach arbeiten wir im Site Editor — dort gestalten wir Kopf, Fuß und Startseite von Halmgut. Der dritte Teil dreht sich um Plugins und um die Frage, wie viele davon eigentlich gesund sind. Und zum Schluss schauen wir uns die KI-Funktionen an, die WordPress 7.0 mitbringt — nüchtern, mit einem klaren Blick darauf, wo sie helfen und wo man besser die Finger lässt.

0:58 Vier Ziele für heute. Sie sollen ein Theme so auswählen können, dass es den Shop trägt statt ihn zu behindern — mit Kriterien, nicht nach Screenshot. Sie sollen Kopf, Fuß und Startseite ohne eine Zeile Code gestalten können. Sie sollen Farben und Schriften an einer Stelle setzen statt an zwanzig; das ist der Unterschied zwischen einer Designänderung in fünf Minuten und einem Nachmittag Fleißarbeit.

1:21 Und Sie sollen Plugins bewerten können, statt sie zu sammeln. Am Ende des Tages hat Halmgut ein Gesicht.

Themes verstehen

1:27 Fangen wir mit der Bauweise an. In den letzten Jahren hat sich bei WordPress grundlegend geändert, wie Themes funktionieren — und wer das nicht mitbekommen hat, sucht im neuen System vergeblich nach Menüpunkten, die es nicht mehr gibt. Der Unterschied ist wichtig, weil er bestimmt, wie viel Sie später selbst ändern können.

1:45 Vergleichen wir zwei Häuser. Im klassischen Theme sind die Wände gemauert: Der Aufbau steckt in Programmdateien, und wer ihn ändern will, braucht Werkzeug und Kenntnisse. Ein Block-Theme arbeitet dagegen mit Stellwänden — der Aufbau besteht aus denselben Blöcken, die Sie gestern beim Schreiben kennengelernt haben, und Sie können ihn im Browser verschieben.

2:04 Das ist der eigentliche Fortschritt: Nicht, dass es hübscher aussieht, sondern dass Sie Dinge selbst ändern können, für die Sie früher jemanden anrufen mussten. Für einen neuen Shop ist das Block-Theme heute der Normalfall. Lesen Sie diese Tabelle nicht als Punktesieg, sondern entlang einer Frage: Wo lebt die Gestaltung?

2:23 Beim Block-Theme an zentralen, für Sie erreichbaren Stellen — in den globalen Stilen und in Vorlagen, die Sie im Editor öffnen. Beim klassischen Theme in Dateien und in einem Werkzeug namens Customizer, das im neuen System schlicht verschwindet. Genau deshalb sucht ein alter Hase im Block-Theme oft minutenlang. Wichtig für uns: Kopf und Fuß sind im Block-Theme eigene Bausteine, die Sie einmal bauen und die überall gelten.

2:47 Das nutzen wir gleich. Wonach wählt man nun aus? Vier Fragen, und keine davon lautet „gefällt es mir". Erstens Wartung: Wann kam das letzte Update, wie viele setzen es ein, steht ein erkennbarer Anbieter dahinter? Ein Theme ohne Pflege ist ein Sicherheitsrisiko mit Verfallsdatum. Zweitens die Shop-Eignung — bringt es Vorlagen für Produktliste, Warenkorb und Kasse mit?

3:11 Drittens das Ladeverhalten: Manche Themes bringen einen ganzen Jahrmarkt an Effekten mit, den niemand angefordert hat. Und viertens, oft vergessen: Wie schwer ist der Ausstieg, wenn Ihre Inhalte im Theme stecken? Der Ablauf ist bewusst langsam, weil die Entscheidung schwer zu revidieren ist. Starten Sie mit dem mitgelieferten Standard-Theme und sammeln Sie erst einmal, was Sie wirklich brauchen — Sie werden feststellen, dass die Liste kürzer ist als gedacht.

3:39 Dann installieren Sie zwei, drei Kandidaten auf der Testinstanz, nicht live. Prüfen Sie dort genau die Shop-Vorlagen, denn dort trennt sich die Spreu. Messen Sie die Ladezeit, statt sie zu schätzen. Und halten Sie die Entscheidung schriftlich fest — in einem Jahr wissen Sie sonst nicht mehr, warum. Ein Wort zum Child-Theme, weil es viel Verwirrung stiftet. Die Idee: ein Kind-Theme erbt alles vom Eltern-Theme und überschreibt nur das, was Sie ändern.

4:05 Der Grund dafür ist ein handfester — wer direkt im Eltern-Theme herumschraubt, verliert die Änderungen beim nächsten Update, restlos. Neu ist aber: Im Block-Theme brauchen Sie das für Farben und Schriften nicht mehr, die hält der Site Editor sauber getrennt. Ein Child-Theme lohnt heute nur noch dann, wenn Sie eigene Vorlagendateien oder eigenen Code unterbringen. Legen Sie es also nicht aus Gewohnheit an.

4:29 Der erste Fehler ist der eben genannte, in beide Richtungen: entweder ein Child-Theme aus Ritual, oder — deutlich schlimmer — direktes Editieren im Eltern-Theme. Das nächste Update räumt still auf, und Ihre Arbeit ist weg. Der dritte Punkt ist der Kauf nach Bildchen: Der Screenshot zeigt eine perfekte Startseite, und die Produktdetailseite haben Sie nie angesehen.

4:49 Und der vierte ist der teuerste: Wenn Inhalte in Theme-Funktionen stecken, nehmen Sie beim Wechsel nicht nur das Design mit, sondern verlieren Substanz. Inhalt gehört in Inhalte.

Full Site Editing mit dem Site Editor

5:00 Jetzt wird es praktisch. Der Site Editor ist das Werkzeug, mit dem Sie im Block-Theme alles gestalten — und er arbeitet anders, als man es vom Bearbeiten einzelner Seiten kennt. Wenn Sie ein Prinzip aus diesem Tag mitnehmen, dann dieses hier: Sie bearbeiten nicht Seiten, Sie bearbeiten die Muster dahinter. Stellen Sie sich einen Setzkasten für Formulare vor. Sie füllen nicht hundert Blätter einzeln aus, Sie gestalten das Formular — und alle Blätter sehen danach so aus.

5:28 Genau das macht ein Template: Es beschreibt einen Seitentyp, etwa „so sieht ein einzelner Beitrag aus". Ein Template-Part ist ein wiederkehrender Ausschnitt daraus, typischerweise Kopf und Fuß. Und darüber liegen die globalen Stile mit Farben und Schriften für alles. Drei Ebenen also — und die häufigste Ursache für Frust ist, auf der falschen zu arbeiten.

5:50 Diese Tabelle beantwortet genau diese Frage: Wo gehört meine Änderung hin? Die Logik dahinter ist die Reichweite. Je weiter oben Sie ansetzen, desto mehr ändert sich auf einmal. Wollen Sie alle Knöpfe im Shop terracotta haben, gehen Sie in die globalen Stile — einmal, fertig. Betrifft es nur die Startseite, arbeiten Sie in deren Vorlage.

6:10 Und wenn wirklich nur ein Text auf einer Seite falsch ist, bleiben Sie im normalen Seiteneditor. Wer das verwechselt, ändert entweder zu viel oder macht dieselbe Änderung zwanzigmal. Wir arbeiten von oben nach unten, und das hat einen Grund: Was zentral gesetzt ist, muss unten nicht wiederholt werden. Also zuerst Palette und Schriftpaar in den globalen Stilen.

6:33 Die Schriften holen Sie dabei über die Font Library, damit sie lokal liegen — das ist nicht nur schneller, es erspart Ihnen auch eine Verbindung zu einem fremden Anbieter, bevor jemand zugestimmt hat. Danach der Kopf mit Logo, Navigation und Warenkorbsymbol, dann der Fuß mit den Rechtstexten. Und erst zum Schluss die Startseite. Achten Sie dort auf einheitliche Abstände.

6:55 Hier ist eine der praktischsten Neuerungen von Version 7.0. Das Menü, das sich auf dem Handy über den Bildschirm legt, ließ sich früher kaum gestalten — viele haben dafür ein Plugin installiert. Jetzt ist es blockbasiert und liegt direkt im Editor: Was Sie im Kopf bauen, gilt auch auf dem kleinen Bildschirm. Dazu kommt, dass sich einzelne Blöcke je nach Gerät ein- und ausblenden lassen. Ein dekorativer Zusatz, der auf dem Desktop gut wirkt, muss mobil nicht mitgeladen werden.

7:24 Und jedes eingesparte Plugin ist eine Baustelle weniger. Jetzt bekommt Halmgut sein Gesicht. Die eigentliche Prüfung dieser Übung ist nicht, ob es hübsch wird — sondern ob Sie jede Änderung an der richtigen Stelle gesetzt haben. Farben und Schriften zentral, Kopf und Fuß als Bausteine, die überall erscheinen. Und dann testen Sie das mobile Menü, wirklich am Handy oder zumindest im schmalen Fenster.

7:48 Wer schneller fertig ist, sucht sich einen dekorativen Block und blendet ihn für Mobilgeräte aus. Das ist eine kleine Übung mit großem Effekt auf die Ladezeit. Der erste Punkt ist der, den fast alle einmal machen: Farben Block für Block setzen. Das funktioniert — bis der Chef eine andere Hausfarbe möchte. Der zweite ist verwandt: den Kopf direkt in die Startseite bauen statt als Baustein. Dann haben Sie ihn auf einer Seite und nirgends sonst.

8:15 Der dritte ist ein Datenschutzthema, das gern übersehen wird: Schriften über einen externen Dienst einbinden heißt, Daten Ihrer Besucher zu übertragen, bevor irgendjemand zugestimmt hat. Und der vierte ist banal — der Site Editor sammelt Änderungen und fragt gebündelt. Nicht speichern, nicht gespeichert.

Plugins – Grundlagen & Best Practices

8:33 Kommen wir zu einem Thema, bei dem der erste Reflex fast immer der falsche ist. Für praktisch jedes Problem in WordPress gibt es ein Plugin — und genau darin liegt die Gefahr. Wir schauen uns an, wie man auswählt, und vor allem: wie man die Liste dauerhaft kurz hält. Ein Plugin ist Programmcode, den Sie sich in Ihre Installation holen — und der läuft mit denselben Rechten wie WordPress selbst. Das ist der Satz, auf den es ankommt.

8:59 Ein Plugin ist nicht wie eine App auf dem Handy, die in ihrer eigenen Ecke sitzt; es sitzt mit am Tisch und kann alles, was das System kann. Deshalb ist ein vernachlässigtes Plugin kein Schönheitsfehler, sondern eine offene Tür. Betrachten Sie jede Installation als das, was sie ist: ein Vertrauensvorschuss, den Sie über Jahre mit Wartung bezahlen.

9:19 Vier Kriterien helfen bei der Auswahl. Das Datum des letzten Updates verrät mehr als jede Beschreibung — wer seit einem Jahr nichts angefasst hat, wird auch die nächste Sicherheitslücke nicht schließen. Die Zahl der Installationen ist ein Hinweis auf Verbreitung, aber schauen Sie daneben ins Supportforum: viele offene, unbeantwortete Fragen sind ein Warnsignal.

9:40 Ein erkennbares Geschäftsmodell ist kein Nachteil, im Gegenteil — kostenlose Einzelstücke verschwinden lautlos. Und seien Sie skeptisch bei Alleskönnern: Was alles kann, bringt auch alles mit, was Sie nie brauchen. Diese Liste ist bewusst kurz. Fünf Kategorien decken ab, was ein normaler Shop tatsächlich braucht — Sicherheit, Backup, Caching, Suchmaschinen und Formulare.

10:02 Über die drei mittleren sprechen wir am Freitag ausführlich. Der wichtigste Satz steht unter der Tabelle: eines je Kategorie. Zwei Caching-Plugins beschleunigen nichts, sie widersprechen sich. Zwei Suchmaschinen-Plugins schreiben beide ihre Angaben in die Seite, und am Ende gewinnt der Zufall. Wenn Sie später einen Fehler suchen und zwei Kandidaten in derselben Kategorie haben, suchen Sie doppelt so lange.

10:27 Der erste Schritt ist der wirksamste und wird am häufigsten übersprungen: Prüfen Sie, ob der Editor oder das Theme die Funktion schon mitbringen. Seit Version 7.0 gilt das für einiges, was früher ein Plugin brauchte. Alles Neue kommt zuerst auf die Testinstanz. Der dritte Punkt ist wichtig und wenig bekannt: Deaktivierte Plugins liegen weiterhin auf dem Server und sind angreifbar — deaktivieren reicht nicht, löschen Sie.

10:52 Setzen Sie sich einen Termin im Quartal, um auszumisten. Und automatische Updates gezielt, nicht pauschal für alles. Der erste Punkt verdient Wiederholung, weil er so oft falsch gemacht wird: Deaktivieren ist kein Löschen. Der Code bleibt liegen und lässt sich in manchen Fällen von außen ansprechen. Der zweite ist die Doppelbelegung, über die wir eben sprachen — sie erzeugt Fehler, die sich nicht zuordnen lassen.

11:17 Der dritte ist Verschwendung: ein Plugin für etwas, das der Blockeditor längst kann. Und der vierte passiert im Alltagsstress: Sie testen brav auf der Testinstanz, sind zufrieden — und vergessen, das Update auch live einzuspielen.

KI-Funktionen in WordPress 7.0

11:31 Zum Abschluss des Tages das Thema, über das gerade am meisten geredet wird. Ich möchte es nüchtern angehen, weil hier viel durcheinandergeht. Wir schauen also auf drei Fragen: Was ist tatsächlich in WordPress eingebaut? Was davon merken Sie im Alltag überhaupt? Und wo liegen die Grenzen — rechtlich wie praktisch? Am Ende sollen Sie entscheiden können, statt sich entscheiden zu lassen.

11:55 WordPress bringt zwei Bausteine mit, und beide sind Infrastruktur, keine fertige Funktion. Der AI Client ist eine Art Universalstecker zu externen Sprachmodellen — anbieterunabhängig, damit Sie nicht an einen Dienst gefesselt sind. Die Abilities API ist ein Verzeichnis dessen, was Ihre Seite kann, samt der Rechtegrenzen; ein KI-Dienst kann dort nachschlagen, statt zu raten.

12:17 Verwaltet werden die Zugänge zentral im Connectors-Bereich des Dashboards. Wichtig zu wissen: Der Vergleich mit dem Stecker trägt weit — ohne angeschlossenes Gerät passiert nichts. Die Tabelle sortiert, was man leicht durcheinanderbringt. Die beiden oberen Einträge sehen Sie im Alltag gar nicht, die arbeiten im Hintergrund.

12:37 Sichtbar sind zwei Dinge: der Bereich, in dem Sie Ihre Zugänge einrichten, und — sehr praktisch — die Befehlspalette, über die wir gestern schon gesprochen haben. Und in der letzten Zeile steht das, was die meisten eigentlich meinen, wenn sie von KI in WordPress sprechen: Alternativtexte, Auszüge, Bildgenerierung. Das ist ein separates Plugin, kein Kernbestandteil. Ohne eingerichteten Zugang bleibt die ganze Reihe wirkungslos.

13:03 Wo lohnt sich das nun wirklich? Bei Fleißarbeit mit geringem Risiko. Alternativtexte für dreihundert Produktbilder sind der Musterfall — mühsam, wenig kreativ, und ein Fehler ist ärgerlich, aber nicht gefährlich. Bei Produkttexten wird es anders: Eine erfundene Angabe zu Inhaltsstoffen oder Lieferzeit ist kein Stilproblem, sondern ein Rechtsproblem, für das Sie haften.

13:26 Und behalten Sie im Kopf, wohin die Daten gehen: Alles, was Sie in eine Anfrage schreiben, verlässt Ihren Server. Kunden- und Bestelldaten haben dort nichts verloren. Seit August 2026 gelten zudem Transparenzpflichten für bestimmte Inhalte. Diese Übung schreibt keinen Code, sie trifft Entscheidungen. Gehen Sie die typischen Redaktionsaufgaben durch — Produktbeschreibung, Alternativtext, Antwort auf eine Kundenanfrage, Blogbeitrag — und setzen Sie jeweils ein klares Ja, Nein oder „nur geprüft" dahinter.

13:57 Wichtig ist die Begründung: Kommt das Nein aus dem Datenschutz oder aus der Haftung? Diese Unterscheidung hilft Ihnen später bei jedem neuen Werkzeug. Und noch einmal deutlich: Das ist keine Rechtsberatung. Wo es eng wird, gehört ein Fachmensch dazu. Der erste Punkt ist der gefährlichste: erzeugte Produkttexte ungeprüft veröffentlichen.

14:18 Die Formulierung klingt gut, und genau deshalb liest niemand mehr nach, ob die Mengenangabe stimmt. Der zweite passiert aus Bequemlichkeit — mal eben eine Kundenmail in ein Eingabefeld kopieren. Das ist eine Übermittlung personenbezogener Daten an einen Dritten, egal wie es sich anfühlt. Der dritte ist Schlamperei: Zugangsdaten, die im Team herumgereicht werden.

14:40 Und der vierte ist ein Denkfehler — das läuft nicht auf Ihrem Server, da spricht jemand nach draußen.

Tag 2 steht

14:46 Halmgut hat jetzt ein Gesicht: Kopf, Fuß und eine gestaltete Startseite, und zwar so gebaut, dass eine spätere Designänderung eine Sache von Minuten ist. Die Plugin-Liste ist kurz, und für jeden Eintrag gibt es einen Grund. Über die KI-Funktionen wissen Sie jetzt genug, um sie einzuordnen, statt sie zu fürchten oder zu überschätzen.

15:06 Morgen wird es ernst: Wir installieren WooCommerce, legen das Sortiment an und machen aus dieser hübschen Website einen Shop. Bringen Sie gern Produktideen mit.

Lieber mit Trainer? Dieses Modul ist Teil unserer Team-Schulungen — mit Übungen, Ihrem eigenen Code und Fragen, die ein Video nicht beantwortet. Mehr erfahren →