• Startseite
  • Artikel
  • Marketing
  • WordPress & vollständige Seitenbearbeitung: So erstellen Sie ein Child-Theme und ein Block-Theme

WordPress & vollständige Seitenbearbeitung: So erstellen Sie ein Child-Theme und ein Block-Theme

Veröffentlicht: 2022-12-09

Wann sollten Sie ein Child-Theme für WordPress verwenden? Es ist wichtig, ein untergeordnetes Thema zu erstellen , wenn Sie benutzerdefinierte Änderungen am Code vornehmen möchten.

Auf diese Weise werden bei einer Aktualisierung des Designs keine benutzerdefinierten Änderungen am Code überschrieben.

Traditionell war es bei der Arbeit mit WordPress erforderlich, eine Kopie der functions.php und style.css zu erstellen, um das Child-Theme zu erstellen und das Child-Theme in das Parent-Theme einzureihen.

Aufgrund der unterschiedlichen Dateistruktur im Full Site Editing mussten einige Anpassungen vorgenommen werden, damit alle passenden Dateien gefunden wurden.

Glücklicherweise ist es mit der Erstellung des Plugins „Create Block Theme“ von WordPress.org einfacher als je zuvor, nicht nur ein untergeordnetes Design, sondern ein vollständig benutzerdefiniertes Design oder eine Stilvariation zu erstellen.

Erstellen Sie ein Block-Theme-Plugin Screenshot aus dem WordPress.org-Plugin-Repository, Dezember 2022

Einrichten des Plugins „Create Block Theme“ in WordPress

Zuerst sollten Sie das WordPress-Blockdesign installieren und aktivieren, für das Sie Ihr neues Design oder untergeordnetes Design erstellen möchten – in diesem Fall verwende ich Twenty Twenty-Two.

Twenty Twenty-Two-Thema Screenshot aus dem WordPress-Dashboard, Dezember 2022

Führen Sie als Nächstes die folgenden Schritte aus:

Gehen Sie zu Plugins > Neu hinzufügen .

Suchen Sie im Suchfenster nach „Blockdesign erstellen“.

Klicken Sie auf Installieren und aktivieren .

Plugins-Seite Screenshot aus dem WordPress-Dashboard, Dezember 2022Wenn das Plug-in installiert ist, stehen Ihnen unter Aussehen einige neue Optionen zur Verfügung, darunter Blockdesign erstellen und Designschriftarten verwalten .

Darstellungsoptionen Screenshot aus dem WordPress-Dashboard, Dezember 2022

Erstellen eines WordPress-Child-Themes

Das Plugin Create Block Theme ist eine extrem einfache Möglichkeit, ein Child-Theme für einen Block zu erstellen, einschließlich eines Full-Site-Editing-Themes. Das Plug-in erstellt automatisch den Ordner „parts“, „templates“, „theme.json“ und „style.css“.

Sobald das Plugin installiert ist, können Sie das untergeordnete Thema erstellen:

  • Wählen Sie unter Darstellung die Option Blockdesign erstellen aus.
  • Wählen Sie als Nächstes Kind von Twenty Twenty-Two erstellen (wenn Sie ein anderes Thema ausgewählt haben, wird dieses Thema aufgelistet).
  • Geben Sie rechts den Themennamen, die Themenbeschreibung, die Themen-URI, den Autor und die Autoren-URI ein.
  • Klicken Sie auf die blaue Schaltfläche Generieren , um das untergeordnete Thema zu erstellen.
Informationen zum untergeordneten Thema Screenshot aus dem WordPress-Dashboard, Dezember 2022

Ihr untergeordnetes Design wird als ZIP-Datei exportiert.

Child-Theme-Zip-Datei Screenshot der generierten Child-Theme-Datei, Dezember 2022

Klicken Sie unter Darstellung > Designs auf Design hinzufügen und Design hochladen und wählen Sie die generierte ZIP-Datei aus.

Gehen Sie zu Themen und stellen Sie sicher, dass Sie Ihr neues untergeordnetes Thema sehen.

Erstellen eines benutzerdefinierten Bildes für ein untergeordnetes WordPress-Theme

Ein Manko des Plugins besteht darin, dass es Ihnen weder erlaubt, eine screenshot.png für Ihr untergeordnetes Design hinzuzufügen , noch die mit dem übergeordneten Design bereitgestellte verwendet.

Dies kann leicht behoben werden und verleiht Ihrem Child-Theme eine nette individuelle Note.

Erstellen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm ein neues Bild mit einer Größe von 1200 x 900 Pixel und nennen Sie es screenshot.png.

Legen Sie die neue screenshot.png in den Ordner des von Ihnen erstellten untergeordneten Designs.

Dateien im Child-Theme Screenshot der Theme-Dateien für das untergeordnete WordPress-Theme, Dezember 2022

Navigieren Sie zurück zu Themen und Ihr neues Bild sollte mit Ihrem untergeordneten Thema erscheinen.

Aktives Child-Theme-Bild Screenshot aus dem WordPress-Dashboard, Dezember 2022

Nachdem ein untergeordnetes Design für Ihr Blockdesign festgelegt wurde, können Änderungen an den Vorlagendateien theme.json und style.css vorgenommen werden, ohne die Dateien des übergeordneten Designs zu überschreiben.

So kann das Parent Theme problemlos aktualisiert werden.

Sie können auch das neue Child-Theme mit den vorgenommenen Änderungen, wie z. B. dem Bild, exportieren, um es als Child-Theme für neue Installationen des Parent-Themes zu verwenden.

Erstellen eines benutzerdefinierten Blockdesigns auf WordPress

Das Create Block Theme-Plugin bietet eine Reihe von Optionen, um Ihr eigenes Design zu erstellen. Sie können das aktuelle Design klonen und Ihre eigenen benutzerdefinierten Änderungen vornehmen, indem Sie es als Vorlage verwenden.

Sobald Sie die Änderungen vorgenommen haben und damit zufrieden sind, können Sie das Plugin verwenden, um das Design mit allen vorgenommenen Änderungen zu exportieren, um Ihr neues Design auf anderen Websites zu verwenden.

Darüber hinaus können Sie ein völlig leeres neues Design erstellen, das das aktuelle Design als Boilerplate verwendet. Dies ist eine großartige Möglichkeit, etwas ganz Eigenes zu machen.

Führen Sie die folgenden Schritte aus, um ein komplett neues Thema zu erstellen:

Wählen Sie unter „Blockdesign erstellen“ die Option „Leeres Design erstellen“ .

Füllen Sie alle Informationen auf der rechten Seite aus, benennen Sie sie und fügen Sie Ihren Namen als Ersteller hinzu und klicken Sie auf Generieren .

Erstellen Sie ein leeres Thema Screenshot aus dem WordPress-Dashboard, Dezember 2022

Ihr neues Design wird als ZIP-Datei heruntergeladen.

Unter Darstellung > Designs können Sie Ihr neues Design hochladen und aktivieren.

Führen Sie die gleichen Schritte wie beim untergeordneten Design aus, wenn Sie ein benutzerdefiniertes Bild für die screenshot.png hinzufügen möchten.

Aktivieren Sie das neue Design und verwenden Sie es als Ausgangspunkt für Ihr neues Design.

neues leeres Thema Screenshot aus dem WordPress-Dashboard, Dezember 2022

Verwenden Sie Muster, Blöcke, Vorlagenteile und den Stileditor, um Ihr neues Thema mit dem gewünschten Aussehen zu gestalten.

Wenn Sie die Arbeit an Ihrem neuen Design abgeschlossen haben, kehren Sie zu Aussehen > Blockdesign erstellen zurück und exportieren Sie das neue Design, das alle Änderungen enthält, die Sie daran vorgenommen haben.

Es wird als ZIP-Datei exportiert und kann in jede neue WordPress-Installation hochgeladen werden.

Verwalten von WordPress-Theme-Fonts

Eine weitere großartige Funktion des Create Block Theme-Plugins ist die Möglichkeit, Schriftarten für das Design einfach hinzuzufügen und zu löschen.

Um einem Design neue Schriftarten hinzuzufügen, müssen die Schriftarten normalerweise heruntergeladen, zum Schriftartenordner hinzugefügt und in die Datei functions.php eingereiht werden , oder es muss ein Google-Link zum Code hinzugefügt werden.

Das Hinzufügen mehrerer Schriftarten kann den Vorgang noch komplizierter machen.

Mit dem Plug-in können Google-Schriftarten und lokale Schriftarten von Ihrem Computer einfach zu Ihrem benutzerdefinierten Design oder einem von Ihnen installierten und aktivierten Design hinzugefügt oder entfernt werden.

Klicken Sie für Google-Schriftarten auf Google-Schriftart hinzufügen und im Dropdown-Fenster erhalten Sie eine Liste der verfügbaren Google-Schriftarten.

Wählen Sie die Schriftart aus, aktivieren Sie das Kontrollkästchen und klicken Sie auf die Schaltfläche, um Google Font zu Ihrem Design hinzuzufügen.

Themenschriftarten verwalten Screenshot aus dem WordPress-Dashboard, Dezember 2022
Fügen Sie Google-Schriftarten hinzu Screenshot aus dem WordPress-Dashboard, Dezember 2022

Das Hinzufügen einer heruntergeladenen lokalen Schriftart ist ein ähnlicher Vorgang.

Klicken Sie auf Lokale Schriftart hinzufügen , laden Sie die Schriftartdatei hoch, geben Sie den Namen, Stil und die Stärke der Schriftart ein und klicken Sie auf die Schaltfläche, um die lokale Schriftart in Ihr Design hochzuladen.

Lokale Schriftarten Screenshot aus dem WordPress-Dashboard, Dezember 2022

WordPress-Child-Themes leicht gemacht

Mit Full Site Editing und dem Create Block Theme Plugin ist das Erstellen eigener Design- und Stilvariationen einfacher als je zuvor.

Die Verwendung des Plugins, anstatt Dateien manuell in die Warteschlange einzureihen und den Code zu ändern, macht das Erstellen von untergeordneten Themen und das Hinzufügen neuer Schriftarten zu einem einfachen Prozess.

Muster , Stilvariationen und wiederverwendbare Blöcke sind bei Verwendung mit dem Plugin großartige einfache Möglichkeiten, um Ihr eigenes benutzerdefiniertes Design zu erstellen, das Sie exportieren und erneut verwenden können.

Alles, ohne dass Sie den Themencode berühren müssen.

Mehr Ressourcen:

  • So erstellen Sie eine benutzerdefinierte 404-Seite in WordPress
  • So wählen Sie das beste WordPress-Theme für SEO aus
  • Technisches SEO für Fortgeschrittene: Ein vollständiger Leitfaden

Beitragsbild: Kaspars Grinvalds/Shutterstock