Export Block Theme in WordPress 6.0 am Beispiel Twenty Twenty-Two

Export Block Theme – Neue Option in WordPress 6.0 am Beispiel Twenty Twenty-Two

Eine Website wird häufig in einer Entwicklungsumgebung erstellt. Bei einem Block Theme wie z. B. Twenty Twenty-Two kann man das angepasste Theme mit allen aktualisierten Styles und Templates ab WordPress 6.0 jetzt exportieren und z. B. auf einer anderen Website importieren. Wie das funktioniert, zeige ich in diesem Beitrag.

Auf einer lokalen Website habe ich einige Änderungen an dem Block Theme Twenty Twenty-Two vorgenommen. Um das geänderte Theme zu exportieren, klickt man rechts auf die drei Punkte, die senkrecht untereinander stehen (1). Anschließend wählt man in dem Menü die Option „Export“ (2). Danach erfolgt der Export des Themes in eine ZIP-Datei:

Export Twenty Twenty-Two mit Änderungen (WordPress 6.0)
Export Twenty Twenty-Two mit Änderungen

Bei der Bezeichnung der exportierten ZIP-Datei sollte man den Namen der Datei ändern, also statt twentytwentytwo.zip z. B. twentytwentytwo_onepager.zip.

Nur zur Erklärung: in diesem Beispiel habe ich das Theme so geändert, dass ich damit eine Website als Onepager erstellen kann. Wie man das bei Twenty Twenty-Two entsprechend macht, werde ich in einem weiteren Beitrag zu einem späteren Zeitpunkt zeigen.

Ich habe mittels eines Tools die beiden Ordner verglichen und es zeigt sich, dass tatsächlich sämtliche Dateien exportiert wurden. Zusätzlich sieht man im Ordner noch die Dateien und Ordner, die nicht im Original-Theme enthalten sind (hier gelb unterlegt). Z. B. sieht man hier auch einen Ordner styles, der die seit WordPress 5.9 unterstützten global style variations enthält:

zusätzliche Dateien und Ordner nach dem Export Twenty Twenty-Two
Zusätzliche Dateien und Ordner

Wenn man dieses Theme z. B. in einer anderen WordPress-Instanz einsetzen möchte, braucht man lediglich das exportierte Theme hinzufügen. Dazu klickt man im Dashboard auf Design > Themes (siehe linke Grafik)

Geändertes Theme hinzufügen
Theme hinzufügen
Geändertes Theme als ZIP-Datei hochladen
ZIP-Datei hochladen

Danach klickt man auf den Button „Theme hochladen“ (1), „Datei auwählen“ (2) und wählt anschließend im Ordner, in den man das Theme exportiert hat, die ZIP-Datei aus (3). Das Originaltheme bleibt erhalten und wird nicht überschrieben.

Style.css und Screenshot im exportierten Block Theme ändern

Für technisch versiertere Benutzer hier noch ein Tipp: Sicherlich noch besser zur Unterscheidung ist es, wenn man vorher in der style.css den Namen des Themes (Theme Name: Twenty Twenty-Onepager) und den Ordner (Theme URI: https://wordpress.org/themes/twentytwentytwo_onepager/) ändert – siehe die ersten beiden Zeilen in der style.css:

/*
Theme Name: Twenty Twenty-Two Onepager
Theme URI: https://wordpress.org/themes/twentytwentytwo_onepager/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Full Site Editing features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 6.0
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

Zusätzlich sollte man zur Unterscheidung vom Original-Theme auch eine eigene Grafikdatei als screenshot.jpg erstellen.

Nachdem diese Änderung durchgeführt worden ist, kann wieder eine neue ZIP-Datei erstellt werden. Damit hat man im Prinzip ein eigenes Theme. Im Unterschied zu einem Child-Theme enthält der Export allerdings alle Dateien des Original-Themes (in unserem Fall von Twenty Twenty-Two).

Plugin zur Erstellung eines komplett neuen Block Themes

Update, 1.7.2022: Mitarbeitende des Themes-Teams haben ein Plugin namens Create Block Theme veröffentlicht, mit dem eigenständige Block-Themes erstellt werden können. Auf der folgenden Website findet man eine kleine Anleitung und Beschreibung dazu.

Auf WPTavern wurde zu diesem Plugin, das zum aktuellen Zeitpunkt dieses Updates natürlich noch wenige aktive Installationen (ca. 20) aufweist, ein interessanter englischsprachiger Beitrag geschrieben. Das Plugin bietet eine Vielzahl von Export-Möglichkeiten für unterschiedliche Anwendungsfälle. 

Fazit

Grundsätzlich ist diese neue Option eine tolle Idee. So kann man in Ruhe z. B. die Einstellungen auf einer (lokalen) Entwicklungsumgebung des Themes ändern bzw. anpassen. Wenn man fertig ist, exportiert man das geänderte Theme und importiert das Theme auf der produktiven Website. Das funktioniert natürlich nicht nur bei Twenty Twenty-Two, sondern bei jedem Block Theme.
Einziger Haken: Was passiert, wenn das Original-Theme upgedatet wird und neue Features beinhaltet oder sogar ein Fehler korrigiert wurde? – Das hätte ja in dem Fall keine Auswirkungen auf das bereits exportierte Theme.

Quellen und Lesetipps:

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Theme Export bei Twenty Twenty-Two (WordPress 6.0)


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über deine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress findest du hier

Neu: Jetzt immer direkt informiert werden, wenn ein neuer Beitrag veröffentlicht wird.
Zur Anmeldung beim Newsletter

4 Gedanken zu „Export Block Theme in WordPress 6.0 am Beispiel Twenty Twenty-Two“

  1. Hallo,

    zunächst vielen Dank für diesen hilfreichen Artikel.
    Ihr schreibt im Fazit, dass es so kein UpDate auf das „neue“ Theme geben wird. Das sehe ich im für das Beispiel „Theme Name: Twenty Twenty-Two Onepager“ auch so.
    Aber wäre das nicht obsolet, wenn das exportierte Theme (und ggf die Style.css und der Screenshot) vor dem Import nicht umbenannt würde? Also Twenty Twenty-Two bleibt Twenty Twenty-Two usw.
    -> Alle Änderung von der Entwicklungsseite gelangen in die produktive Umgebung. Und auch Updates erfolgen später.

    Oder was übersehe ich jetzt?

    LG Jonas

    Antworten
    • Hallo Jonas,
      danke für den Kommentar.
      Das ist sicher ein sehr interessanter Aspekt. Leider kann ich das gerade aus zeitlichen Gründen nicht testen, werde das aber sicher noch machen. Dann werde ich den Beitrag entsprechend updaten.
      Liebe Grüße
      Hans-Gerd

      Antworten
      • Hallo Hans-Gerd,
        du hast mich auf die einfache Idee gebracht es selbst mal zu testen. 😉

        Fazit: Der von mir angedachte Weg hatte keinen Erfolg. Die Änderungen eines Importes gehen verloren, wenn das Theme auf eine neue Version upgedatet wird.

        Die lange Version:
        Ich habe auf einer lokaler Entwicklungsumgebung das Theme Tove Version 0.5.
        Auf einer meiner Live-Domains das Theme Tove Version 0.6 (das ist die heute aktuelle Version).

        Nach Änderungen an globalen Stilen und Templates und Templates-Parts in der lokalen Umgebung erfolgte der Export wie oben beschrieben.
        Ebenso der Import auf die Live-Domain. Die Frage “Installiertes durch Hochgeladenes ersetzen” habe ich bejaht.
        Alles auf der live Domain sieht jetzt aus wie auf der lokalen Testumgebung. Also es gibt dort jetzt auch Tove mit Version 0.5 und allen Änderungen.

        Dann erfolgte das Update von Theme Tove auf Version 0.6. Und damit „verschwanden“ alle Änderungen in den globalen Stilen und Templates und Template-Parts des Importes.

        Ich finde das nicht befriedigend.
        Aber noch einmal: Danke für die Anregung.

        Liebe Grüße
        Jonas

        Antworten

Schreibe einen Kommentar