So erstellen Sie ein Child-Theme und ein Block-Theme

Wann sollten Sie ein Child-Theme für WordPress verwenden? Es ist wichtig, eine zu erstellen Kinderthema 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.

Mit der unterschiedlichen Dateistruktur in Vollständige Website-Bearbeitungmussten einige Anpassungen vorgenommen werden, damit alle passenden Dateien gefunden wurden.

Glücklicherweise mit der Erstellung der Erstellen Sie ein Block-Theme-Plugin von WordPress.org ist das Erstellen nicht nur eines untergeordneten Designs, sondern eines vollständig benutzerdefinierten Designs oder einer Stilvariation einfacher als je zuvor.

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-ThemaScreenshot aus dem WordPress-Dashboard, Dezember 2022

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

Gehe zu Plugins > Neue hinzufügen.

Suchen Sie im Suchfenster nach „Blockdesign erstellen“.

Klicken Installieren und aktivieren.

Plugins-SeiteScreenshot aus dem WordPress-Dashboard, Dezember 2022

Wenn das Plugin installiert ist, haben Sie einige neue Optionen unter Aussehen, einschließlich Blockdesign erstellen und Themenschriftarten verwalten.

DarstellungsoptionenScreenshot 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:

  • Unter Aussehenauswählen Blockdesign erstellen.
  • Weiter auswählen 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 das Blau Generieren Schaltfläche, um das Child-Theme zu erstellen.
Informationen zum untergeordneten ThemaScreenshot aus dem WordPress-Dashboard, Dezember 2022

Ihr untergeordnetes Design wird als ZIP-Datei exportiert.

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

Unter Aussehen > Themenklicken Design hinzufügen und Thema hochladen, und wählen Sie die generierte ZIP-Datei aus.

Mehr zu diesem Thema  SEO vs. Webentwickler: Wer sollte die Implementierung leiten?

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 ist, dass es Ihnen nicht erlaubt, eine screenshot.png für dein Child-Themenoch verwendet es das mit dem übergeordneten Thema bereitgestellte.

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-ThemeScreenshot 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-BildScreenshot aus dem WordPress-Dashboard, Dezember 2022

Nachdem ein untergeordnetes Design für Ihr Blockdesign festgelegt wurde, können Änderungen an dem vorgenommen werden theme.json und style.css-Vorlagendateien, ohne die übergeordneten Designdateien 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 Erstellen Sie ein Block-Theme-Plugin bietet eine Reihe von Optionen zum Erstellen Ihres eigenen Themas. 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.

Mehr zu diesem Thema  Google Testdatum & Belegungsauswahl für Hotelabfragen

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:

Unter Blockdesign erstellenwählen Erstellen Sie ein leeres Thema.

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 ThemaScreenshot aus dem WordPress-Dashboard, Dezember 2022

Ihr neues Design wird als ZIP-Datei heruntergeladen.

Unter Aussehen > Themenkö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 ThemaScreenshot 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 Thema abgeschlossen haben, kehren Sie zu zurück Aussehen > Blockdesign erstellen 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

Ein weiteres großartiges Feature des Erstellen Sie ein Block-Theme-Plugin ist in der Lage, Schriftarten für das Thema einfach hinzuzufügen und zu löschen.

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

Mehr zu diesem Thema  Google Ads Account Manager sollten Kunden nicht direkt kontaktieren

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

Mit dem Plugin Google-Schriftarten und lokale Schriftarten von Ihrem Computer können einfach zu Ihrem benutzerdefinierten Design oder einem Design, das Sie installiert und aktiviert haben, hinzugefügt oder daraus entfernt werden.

Klicken Sie für Google-Schriftarten auf Google-Schriftart hinzufügen und das Dropdown-Fenster zeigt Ihnen 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 verwaltenScreenshot aus dem WordPress-Dashboard, Dezember 2022
Fügen Sie Google-Schriftarten hinzuScreenshot aus dem WordPress-Dashboard, Dezember 2022

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

Klicke um Lokale Schriftart hinzufügenladen 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 SchriftartenScreenshot aus dem WordPress-Dashboard, Dezember 2022

WordPress-Child-Themes leicht gemacht

Mit Vollständige Website-Bearbeitung und die Erstellen Sie ein Block-Theme-Plugindas Erstellen eigener Design- und Stilvariationen ist 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, Stilvariationenund wiederverwendbare Blöcke Bei Verwendung mit dem Plugin gibt es großartige einfache Möglichkeiten, 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:


Beitragsbild: Kaspars Grinvalds/Shutterstock

Categories: