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.
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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Fü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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Wenn das Plugin installiert ist, haben Sie einige neue Optionen unter Aussehen, einschließlich Blockdesign erstellen und Themenschriftarten verwalten.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Erstellen 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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Ihr untergeordnetes Design wird als ZIP-Datei exportiert.
Screenshot der generierten Child-Theme-Datei, Dezember 2022Unter Aussehen > Themenklicken Design hinzufügen und Thema 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 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.
Screenshot der Theme-Dateien für das untergeordnete WordPress-Theme, Dezember 2022Navigieren Sie zurück zu Themen und Ihr neues Bild sollte mit Ihrem untergeordneten Thema erscheinen.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Nachdem 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.
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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Ihr 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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022Verwenden 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.
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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022
Screenshot aus dem WordPress-Dashboard, Dezember 2022Das 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.
Screenshot aus dem WordPress-Dashboard, Dezember 2022WordPress-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
window.addEventListener( 'load', function() { setTimeout(function(){ striggerEvent( 'load2' ); }, 2000); });
window.addEventListener( 'load2', function() {
if( sopp != 'yes' && addtl_consent != '1~' && !ss_u ){
!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window,document,'script', 'https://connect.facebook.net/en_US/fbevents.js');
if( typeof sopp !== "undefined" && sopp === 'yes' ){ fbq('dataProcessingOptions', ['LDU'], 1, 1000); }else{ fbq('dataProcessingOptions', []); }
fbq('init', '1321385257908563');
fbq('track', 'PageView');
fbq('trackSingle', '1321385257908563', 'ViewContent', { content_name: 'wordpress-full-site-editing-how-to-create-child-theme-block-theme', content_category: 'cms wp' }); } });
