Kiekkist
Menü
EN

Anleitung · WordPress

WordPress-Block-Theme installieren

Aus dem Designpaket wird ein Block-Theme mit theme.json, Vorlagen und Mustern. Du lädst es wie jedes Theme hoch. Plugins brauchst du dafür keine.

Im Beispiel heißt das Design Fieldnote (kostenlos, Kurzname fieldnote). Bei deinem Design steht dort sein Kurzname.

Was du brauchst

Was im Export liegt

Ordner fieldnote-wordpress/

fieldnote.zip
Das Theme als ZIP (im Download: fieldnote-wordpress-theme.zip). Diese Datei lädst du in WordPress hoch. Beta: Menü und Texte werden im Website-Editor gepflegt.
fieldnote/
Derselbe Theme-Ordner entpackt, für FTP oder zum Bearbeiten vor dem Hochladen.
fieldnote/theme.json
Farben, Schriften, Abstände und die Liste der Seitenvorlagen.
fieldnote/templates/
front-page.html für die Startseite, page-<name>.html für jede weitere Seite, 404.html.
fieldnote/parts/
Kopf- und Fußbereich. Es gibt pro Seite eine Variante, weil der aktive Menüpunkt markiert ist.
fieldnote/patterns/
Ein Muster pro Abschnitt, auch einzeln im Editor einfügbar.
fieldnote/assets/
CSS, Schriften (woff2), Bilder und ein kleines Skript.
EXPORT.md
Abschnitte, Seiten, Hinweise zum Export.
blueprint.json
Optional, für eine Vorschau in WordPress Playground.

Von Hand

  1. Fertigen Export herunterladen

    Kostenlose Designs lädst du auf der Designseite, gekaufte auf der Download-Seite mit deinem Lizenzschlüssel. Danach wählst du, was du laden willst: WordPress-Theme (ZIP, Beta), alles in einem ZIP oder nur das Designpaket. Du bekommst direkt fieldnote-wordpress-theme.zip, das hochladbare Theme. Im Ordner fieldnote-wordpress/ weiter unten heißt es fieldnote.zip.

  2. Oder selbst erzeugen

    Wer den Export aus einem geänderten Designpaket neu bauen will, nimmt das Kiekkist-Werkzeug kk. Es ist Open Source, läuft lokal und braucht Node.js 22 oder neuer. Lege es neben den Designordner (im Download „Nur Designpaket“ heißt er fieldnote/). Der Befehl schreibt fieldnote-wordpress/; --no-check lässt die Bildvergleichs-Prüfung weg (dafür einmal npx playwright install chromium).

    git clone https://github.com/tillheidrich/kiekkist
cd kiekkist && npm ci && cd ..
node kiekkist/cli/kk.js export ./fieldnote --target wordpress --no-check

  3. Theme hochladen

    In WordPress: Design → Themes → Hinzufügen → Theme hochladen. Wähle fieldnote-wordpress-theme.zip (selbst erzeugt: fieldnote-wordpress/fieldnote.zip) und klicke auf „Jetzt installieren“, danach auf „Aktivieren“. Nicht die ZIP „Alles“ oder das Designpaket hochladen: Das ist kein Theme, und WordPress meldet dann, dass style.css fehlt. Beta: Menü und Texte werden im Website-Editor gepflegt.

  4. Permalinks einstellen

    Einstellungen → Permalinks, „Beitragsname“ wählen, speichern. Die Links im Menü zeigen auf Adressen wie /projects/. Mit der Einstellung „Einfach“ (?page_id=12) führen sie ins Leere.

  5. Seiten anlegen

    Lege für jede Vorlage in templates/page-<name>.html eine Seite an, deren Titelform (Slug) genau <name> ist. Bei Fieldnote: projects, coopers-yard, studio, contact, thanks, legal, accessibility, sitemap. WordPress nimmt dann automatisch die passende Vorlage. Die Vorlage steht auch rechts im Seiten-Editor unter „Template“ zur Auswahl. Für 404 brauchst du keine Seite. Die Startseite kommt aus front-page.html, du musst dafür nichts einstellen.

    • Der Inhaltsbereich der neuen Seiten bleibt leer. Die Texte stecken in der Vorlage.

  6. Texte ändern

    Design → Editor → Templates, die Vorlage öffnen (Name wie die Seite), Text anklicken, ändern, speichern. Abschnitte sind gegen Umbau gesperrt: Texte und Bilder gehen, Layout und Farben nicht. So bleibt die Seite, wie sie geprüft wurde. Einige Bausteine wie Navigation, Formular, Aufklappelemente und Bilder mit mehreren Größen sind HTML-Blöcke. Die bearbeitest du über „HTML bearbeiten“.

  7. Menü anpassen

    Ein Menü unter Design → Menüs gibt es bei Block-Themes nicht. Die Navigation steht in den Kopfbereichen. Weil jede Seite ihren eigenen Kopfbereich hat (parts/header.html, header-projects.html und so weiter), änderst du Menüpunkte am einfachsten vor dem Hochladen: in allen Dateien in parts/ per Suchen und Ersetzen, dann fieldnote/ neu als ZIP packen. Nach dem Hochladen geht es im Website-Editor (Design → Editor) bei den Template-Teilen, dort jeden Kopfbereich einzeln.

  8. Rechtsseiten füllen

    Die Vorlagen legal (Impressum und Datenschutz) und accessibility (Erklärung zur Barrierefreiheit) haben Platzhalter wie [Fill in: …]. Fülle sie im Editor aus. Deutsche Designs bringen zusätzlich UEBERGABE/rechtstexte/ mit Impressum, Datenschutz und Barrierefreiheit als HTML-Gerüst. Das sind Vorlagen, keine Rechtsberatung.

  9. Schriften und Plugins

    Die Schriften liegen im Theme und werden über theme.json eingebunden. Du musst nichts installieren und nichts bei Google laden. Ein Plugin brauchst du nur für das Formular: Es schickt im Auslieferungszustand nichts ab, es leitet nur auf die Danke-Seite weiter. Nimm ein Formular-Plugin oder einen Formular-Dienst, dem du vertraust, und ergänze die Datenschutzerklärung.

Mit KI-Assistent

Dein KI-Coding-Assistent kann den Export erzeugen, die Beispielinhalte ersetzen und dir sagen, was du noch selbst tun musst. Gib ihm den entpackten Designordner und diese Dateien zu lesen:

  • fieldnote/DESIGN.md: Gestaltungsregeln, Farben, Schriften, was man nicht ändern sollte
  • fieldnote/tokens.json und tokens.css: alle Farb-, Schrift- und Abstandswerte
  • fieldnote/README.md: Inhalt des Pakets und was vor dem Start ersetzt werden muss
  • fieldnote/LICENSE.md: was du mit Code, Texten und Fotos darfst
  • fieldnote/UEBERGABE/: Vorlagen für die Übergabe an deinen Kunden (Deutsch und Englisch)
  • nach dem Export fieldnote-wordpress/EXPORT.md

Prompt zum Kopieren. Ersetze die Angaben in eckigen Klammern. Statt fieldnote setzt du den Kurznamen deines Designs ein.

Im Ordner ./fieldnote liegt ein Website-Design als Paket. Mach daraus ein WordPress-Block-Theme für [Firmenname]. 1. Lies zuerst fieldnote/DESIGN.md, README.md und LICENSE.md. Gestaltung nicht ändern, nur Werte aus tokens.json verwenden. 2. Hol das Kiekkist-Werkzeug (git clone https://github.com/tillheidrich/kiekkist, darin npm ci) und erzeuge den Export: node kiekkist/cli/kk.js export ./fieldnote --target wordpress --no-check. Lies danach fieldnote-wordpress/EXPORT.md. 3. Ersetze in fieldnote-wordpress/fieldnote alle Beispielinhalte durch meine Angaben: [Name, Adresse, Telefon, Leistungen]. Menüpunkte in allen Dateien in parts/ gleich ändern. 4. Prüf, ob Bildpfade in patterns/*.php mit einem Schrägstrich hinter dem Theme-Ordner enden. Wenn nicht: get_theme_file_uri( '/' ) durch trailingslashit( get_theme_file_uri() ) ersetzen. 5. Prüf alle PHP-Dateien mit php -l und pack fieldnote-wordpress/fieldnote neu als fieldnote.zip. 6. Gib mir die Liste der Seiten mit Titelform, die ich anlegen muss, und die Platzhalter in den Rechtsseiten, die ich selbst ausfüllen muss. Arbeite nicht auf meiner Live-Website, ohne vorher zu fragen.

Lass dir jede Änderung zeigen, bevor sie auf die Live-Website geht. Zugangsdaten und Lizenzschlüssel gehören nicht in den Chat und nicht ins Repository.

Inhalte, Bilder und Logo ersetzen

Texte: im Website-Editor in der jeweiligen Vorlage, oder vor dem Hochladen direkt in templates/, parts/ und patterns/. Alle Namen, Adressen, Zahlen und Projekte im Paket sind erfunden. README.md sagt, was vor dem Start ersetzt werden muss.

Bilder: Sie liegen in assets/img/ und stehen meist in HTML-Blöcken. Am einfachsten tauschst du sie vor dem Hochladen: neues Bild mit demselben Dateinamen und denselben Maßen speichern, für jede Größe und jedes Format (AVIF und WebP). Willst du weniger Größen pflegen, ändere im HTML-Block die srcset-Angaben auf ein Bild aus der Mediathek. Den Alternativtext passt du immer mit an.

Logo: Das Logo ist ein kleines SVG mit Text im Kopfbereich (class="brand"). Ersetze es in allen Dateien in parts/, damit es auf jeder Seite gleich ist.

Farben und Schriften anpassen

Quelle aller Farben und Schriften ist tokens.json im Designpaket. Sauberster Weg: Werte dort ändern, Export neu erzeugen, Theme neu hochladen und bestätigen, dass WordPress das vorhandene Theme ersetzt. Deine im Editor geänderten Texte bleiben dabei erhalten, sie liegen in der Datenbank.

Schneller Weg für kleine Änderungen: in theme.json unter settings.color.palette den color-Wert einer Farbe ändern. Das Theme-CSS liest die Farben von dort.

Andere Schrift: woff2-Datei nach assets/fonts/ legen, in theme.json unter settings.typography.fontFamilies den Eintrag anpassen (fontFace mit file:./assets/fonts/…). Keine Schriften von Google-Servern laden.

Farben, Schriften und Abstände sind für Redakteure absichtlich gesperrt. Neue Farben außerhalb der Palette gehen im Editor nicht.

Was die Lizenz erlaubt

Gekauftes Design: Du darfst damit beliebig viele Websites bauen, eigene und für Kunden, und sie mit allen Rechten übergeben. Dein Kunde darf die Seite ohne dich weiterbetreiben. Nicht erlaubt ist, das Design selbst weiterzugeben oder zu verkaufen, auch nicht als Vorlage, Theme oder Kit. Der volle Text steht in der Lizenz.

Kostenloses Design: Es gilt LICENSE.md im Paket. Bei Fieldnote ist das CC BY 4.0: Nutzung auch für Kunden und kommerziell, mit einer kurzen Namensnennung im Quelltext oder auf einer Credits-Seite.

Fotos aus dem Paket darfst du nur als Teil der Website verwenden, die du damit baust. Nicht einzeln weitergeben, nicht als Stockfotos.

Schriften stehen unter der SIL Open Font License. Die Lizenzdateien LICENSE-*.txt bleiben neben den Schriftdateien liegen.

Deinen Lizenzschlüssel legst du nie ins Repository oder in Theme-Dateien. KIEKKIST-LICENCE.txt im Paket nennt nur Lizenz-ID und Projekt.

Häufige Probleme

„Die hochgeladene Datei überschreitet die Direktive upload_max_filesize“

Theme-ZIPs sind wegen der Bilder und Schriften einige Megabyte groß, in unseren Tests 2,5 bis 7,5 MB. Viele Hoster erlauben nur 2 MB. Zwei Wege: Im Kundenmenü des Hosters upload_max_filesize und post_max_size erhöhen. Oder den entpackten Ordner fieldnote/ per SFTP oder FTP nach wp-content/themes/ laden und das Theme dann unter Design → Themes aktivieren.

„Das Paket konnte nicht installiert werden. Dem Theme fehlt das Stylesheet style.css.“

Du hast die falsche ZIP erwischt: entweder die Kiekkist-Download-ZIP oder eine ZIP, in der der Theme-Ordner noch einmal in einem Ordner steckt. Hochladen musst du fieldnote-wordpress-theme.zip (oder selbst erzeugt fieldnote-wordpress/fieldnote.zip). Wenn du selbst neu packst, muss style.css direkt in fieldnote/ liegen.

Bilder fehlen, statt des Fotos steht der Alternativtext.

Prüf im Quelltext der Seite die Bildadresse. Steht dort …/themes/fieldnoteassets/img/… ohne Schrägstrich, öffne patterns/*.php und ersetze get_theme_file_uri( '/' ) durch trailingslashit( get_theme_file_uri() ). Danach das Theme neu hochladen.

Menülinks oder Unterseiten zeigen „Seite nicht gefunden“.

Entweder stehen die Permalinks auf „Einfach“, oder die Seite heißt in der Titelform anders als die Vorlage. Titelform und Vorlagenname müssen gleich sein, also contact und page-contact.html. Liegt WordPress in einem Unterordner, zeigen die Menülinks auf die Domain-Wurzel; dann die Links in den Kopfbereichen anpassen.

Theme Check meldet Fehler.

Das Plugin Theme Check meldet ein fehlendes Vorschaubild (screenshot.png) und eine fehlende „License URI“. Beides zählt nur für das Theme-Verzeichnis auf wordpress.org. Für deine Website spielt es keine Rolle.

Der Export bricht mit „export refused“ ab.

kk prüft das Design vor dem Export und nennt jeden Fehler mit Datei und Zeile, zum Beispiel einen Abschnitt ohne Namen. Das passiert, wenn du die HTML-Seiten im Paket vorher umgebaut hast. Behebe die genannte Stelle oder exportiere aus dem unveränderten Paket und ändere danach. Prüfe auch die Node-Version mit node -v: Unter 22 läuft das Werkzeug nicht.

Was wir geprüft haben

Geprüft mit zwei Designs (Fieldnote und Kestrel Row): Theme-ZIP über „Design → Themes → Theme hochladen“ in einer lokalen WordPress-Testinstanz installiert und aktiviert (WordPress 7.1, PHP 8.3), Seiten angelegt und aufgerufen, Vorlagen im Website-Editor ohne Blockfehler geöffnet. Dazu php -l für alle PHP-Dateien und das Plugin Theme Check.

Mehr zum Export Alle Anleitungen Zur Galerie

Andere Exporte: Astro, HTML, React, Elementor