Untergeordnete Themes sind einer dieser WordPress-Begriffe, die oft verwendet werden und Anfänger verwirren. Sie haben vielleicht sogar davon gehört und beschlossen, die Erstellung zu überspringen, weil sie so kompliziert erscheinen.
Das verstehen wir. Aber unserer Erfahrung nach können Child Themes Ihnen auf lange Sicht viel Ärger ersparen. Sie schützen Ihre wertvollen Anpassungen, ermöglichen Ihnen Experimente, ohne Ihre Website zu beschädigen, und machen die Aktualisierung Ihres Themes zum Kinderspiel.
Wenn Sie interessiert sind, haben wir in diesem anfängerfreundlichen Leitfaden aufgeschlüsselt, wie ein Child-Theme funktioniert, wie Sie es anpassen und wie Sie Änderungen daran vornehmen können.
Wie funktioniert ein Child Theme und warum brauchen Sie es?
Ein Child-Theme erbt alle Funktionen, Eigenschaften und Stile eines anderen WordPress-Themes. Wenn Sie ein Child-Theme erstellen, wird das ursprüngliche Theme als Parent-Theme bezeichnet.
Die Vererbung umfasst die style.css-Datei des Parent Themes, die den Hauptstil des Themes definiert. Das Child Theme kann seine geerbten Eigenschaften überschreiben oder erweitern, indem es eigene Dateien hinzufügt oder bestehende modifiziert.
Obwohl es möglich ist, Ihr WordPress-Theme anzupassen, ohne ein Child-Theme zu installieren, gibt es mehrere Gründe, warum Sie trotzdem eines benötigen könnten:
- Kind-Themes schützen Ihre Anpassungen während Theme-Updates und verhindern, dass sie überschrieben werden. Wenn Sie das Eltern-Theme direkt ändern, könnten diese Anpassungen beim Update verschwinden.
- Child-Themes ermöglichen es Ihnen, neue Designs oder Funktionen sicher auszuprobieren, ohne das Original-Theme der Website zu beeinträchtigen, ähnlich wie eine Staging-Umgebung.
- Wenn Sie wissen, wie man codiert, können Child-Themes den Entwicklungsprozess effizienter gestalten. Die Dateien eines Child-Themes sind viel einfacher als die eines Parent-Themes. Sie können sich darauf konzentrieren, nur die Teile des Parent-Themes zu ändern, die Sie ändern oder erweitern möchten.
Was tun, bevor Sie ein WordPress Child Theme erstellen
Wir haben viele WordPress-Benutzer gesehen, die begeistert waren, sich mit den technischen Dingen zu beschäftigen, nur um entmutigt zu werden, wenn Fehler auftreten. Wir verstehen das. Deshalb ist es wichtig zu wissen, worauf Sie sich einlassen, bevor Sie ein Child Theme erstellen.
Hier sind einige Dinge, die wir Ihnen empfehlen, bevor Sie mit dieser Schritt-für-Schritt-Anleitung fortfahren:
- Beachten Sie, dass Sie mit Code arbeiten werden. Zumindest benötigen Sie grundlegende Kenntnisse in HTML, CSS, PHP und optional JavaScript, um zu verstehen, welche Änderungen Sie vornehmen müssen. Mehr dazu erfahren Sie im WordPress Theme Handbook.
- Wählen Sie ein übergeordnetes Theme, das Ihr gewünschtes Website-Design und Ihre gewünschten Funktionen hat. Finden Sie, wenn möglich, eines, bei dem Sie nur wenige Änderungen vornehmen müssen. Sie können bei Bedarf unsere Checkliste mit Dingen, die Sie tun müssen, bevor Sie WordPress-Themes ändern befolgen.
- Verwenden Sie eine lokale Website oder eine Staging-Website für die Theme-Entwicklung. Sie möchten keine unbeabsichtigten Fehler auf Ihrer Live-Website erstellen.
- Sichern Sie Ihre Website zuerst. Wir empfehlen die Verwendung eines Backup-Plugins wie Duplicator, wenn dies Ihr erstes Mal ist.
Es gibt mehrere Möglichkeiten, ein Child Theme aus Ihrem vorhandenen Theme zu erstellen. Eine davon ist mit manuellem Code, während andere ein Plugin erfordern, was für Anfänger viel einfacher ist.
Die erste Methode mag einschüchternd wirken, wenn Sie wenig technische Erfahrung haben. Selbst wenn Sie sich für eine der Plugin-Methoden entscheiden, empfehlen wir dennoch, die manuelle Methode durchzulesen, um sich mit dem Prozess und den beteiligten Dateien vertraut zu machen.
Profi-Tipp: Möchten Sie Ihr Theme anpassen, ohne ein Child-Theme zu erstellen? Verwenden Sie WPCode, um neue Funktionen sicher mit benutzerdefinierten Code-Snippets zu aktivieren, ohne Ihre Website zu beschädigen.
Mit all dem im Hinterkopf, kommen wir dazu, wie man ein Child-Theme in WordPress erstellt. Sie können mit den folgenden Links zu der Methode springen, die Sie bevorzugen:
- Methode 1: Manuelles Erstellen eines Child-WordPress-Themes
- Methode 2: Erstellen eines Child-Classic-Themes mit einem Plugin
- Methode 3: Erstellen eines Child-Block-Themes mit einem Plugin
- Bonustipp: Finden Sie heraus, ob Ihr Theme einen Child-Theme-Generator hat
- So passen Sie Ihr Classic Child Theme an
- So passen Sie Ihr Block-Kind-Theme an
- So bearbeiten Sie die Vorlagendateien eines Child-Themes
- So fügen Sie Ihrem Child-Theme neue Funktionalität hinzu
- So beheben Sie Probleme mit Ihrem WordPress Child Theme
Methode 1: Manuelles Erstellen eines Child-WordPress-Themes
Zuerst müssen Sie in Ihrem WordPress-Installationsordner zu /wp-content/themes/ navigieren.
Sie können dies tun, indem Sie den Dateimanager Ihres WordPress-Hostings oder einen FTP-Client verwenden. Wir finden die erste Option viel einfacher, daher werden wir diese verwenden.
Wenn Sie ein Bluehost-Kunde sind, können Sie sich in Ihr Hosting-Konto-Dashboard einloggen und zum Tab 'Websites' navigieren. Klicken Sie anschließend auf 'Einstellungen'.
Scrollen Sie im Tab „Übersicht“ nach unten zum Abschnitt „Schnelllinks“.
Wählen Sie dann „Dateimanager“ aus.
In diesem Stadium müssen Sie zu Ihrem Website-Ordner public_html gehen und den Pfad /wp-content/themes/ öffnen.
Klicken Sie hier einfach in der oberen linken Ecke auf die Schaltfläche „+ Ordner“, um einen neuen Ordner für Ihr Child-Theme zu erstellen.
Sie können den Ordner beliebig benennen.
Für dieses Tutorial verwenden wir einfach den Ordnernamen twentytwentyone-child, da wir Twenty Twenty-One als übergeordnetes Theme verwenden werden. Wenn Sie fertig sind, klicken Sie einfach auf „Neuen Ordner erstellen“.
Als Nächstes müssen Sie den gerade erstellten Ordner öffnen und auf „+ Datei“ klicken, um die erste Datei für Ihr Child-Theme zu erstellen.
Wenn Sie einen FTP-Client verwenden, können Sie einen Texteditor wie Notepad verwenden und die Datei später hochladen.
Benennen Sie diese Datei „style.css“, da sie das Haupt-Stylesheet Ihres Child-Themes ist und Informationen über das Child-Theme enthält.
Klicken Sie dann auf „Neue Datei erstellen“.
Klicken Sie nun mit der rechten Maustaste auf die Datei style.css.
Klicken Sie danach auf „Bearbeiten“, um einen neuen Tab zu öffnen, wie im Screenshot unten gezeigt.
In diesem neuen Tab können Sie den folgenden Text einfügen und ihn nach Bedarf anpassen:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
Sobald Sie fertig sind, klicken Sie einfach auf „Änderungen speichern“.
Als Nächstes müssen Sie eine zweite Datei erstellen und sie functions.php nennen. Diese Datei importiert oder registriert die Stylesheets aus den Dateien des übergeordneten Themes.
Sobald Sie das Dokument erstellt haben, fügen Sie den folgenden wp_enqueue-Code hinzu:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
Sobald Sie fertig sind, speichern Sie die Datei wie im vorherigen Schritt.
Hinweis: Für diese Methode empfehlen wir, die offizielle Dokumentation zu Child Themes und Including Assets zu lesen, um sicherzustellen, dass die Stylesheets Ihres Child-Themes korrekt geladen werden.
Sie haben jetzt ein sehr einfaches Child-Theme erstellt. Wenn Sie in Ihrem WordPress-Admin-Panel zu Darstellung » Themes gehen, sollten Sie die Option Twenty Twenty-One Child sehen.
Klicken Sie auf die Schaltfläche „Aktivieren“, um das Child-Theme auf Ihrer Website zu verwenden.
Methode 2: Erstellen eines Child-Classic-Themes mit einem Plugin
Die nächste Methode verwendet das Plugin Child Theme Configurator. Dieses einfach zu bedienende WordPress-Plugin ermöglicht es Ihnen, WordPress-Child-Themes schnell und ohne Code zu erstellen und anzupassen, funktioniert aber nur gut mit einem klassischen (nicht Block-) Theme.
Das Erste, was Sie tun müssen, ist das WordPress-Plugin installieren und aktivieren. Nach der Aktivierung müssen Sie in Ihrem WordPress-Dashboard zu Werkzeuge » Child Themes navigieren.
Im Tab „Parent/Child“ werden Sie aufgefordert, eine Aktion auszuwählen. Wählen Sie einfach „CREATE a new Child Theme“ (Neues Child-Theme erstellen), um zu beginnen.
Wählen Sie dann ein übergeordnetes Theme aus einem Dropdown-Menü aus. Wir wählen das Hestia-Theme aus.
Klicken Sie danach einfach auf die Schaltfläche 'Analysieren', um sicherzustellen, dass das Theme als Parent-Theme verwendet werden kann.
Als Nächstes werden Sie aufgefordert, den Ordner zu benennen, in dem das Child-Theme gespeichert werden soll. Sie können jeden beliebigen Ordnernamen verwenden.
Darunter müssen Sie auswählen, wo die neuen Stile gespeichert werden sollen: in der primären Stylesheet-Datei oder in einer separaten.
Die primäre Stylesheet-Datei ist die Standard-Stylesheet-Datei, die mit Ihrem Child-Theme geliefert wird. Wenn Sie neue benutzerdefinierte Stile in diese Datei speichern, ändern Sie direkt die Hauptstile Ihres Child-Themes. Jede Änderung überschreibt den Stil des Original-Themes.
Die separate Option ermöglicht es Ihnen, einen neuen benutzerdefinierten Stil in einer separaten Stylesheet-Datei zu speichern. Dies ist nützlich, wenn Sie den ursprünglichen Stil des Themes beibehalten und ihn nicht überschreiben möchten.
Zu Demonstrationszwecken wählen wir die erste Option. Aber wenn Sie kreativer mit Ihren Child-Theme-Anpassungen werden, können Sie diesen Prozess jederzeit wiederholen und die zweite Option wählen.
Weiter unten müssen Sie auswählen, wie auf die Stylesheet-Datei des übergeordneten Themes zugegriffen werden soll.
Wir werden einfach die Standardeinstellung 'Die WordPress-Style-Queue verwenden' beibehalten, da das Plugin dadurch die entsprechenden Aktionen automatisch bestimmen kann.
Wenn Sie zu Schritt 7 gelangen, müssen Sie auf die Schaltfläche „Klicken Sie hier, um die Attribute des Child-Themes zu bearbeiten“ klicken.
Sie können dann die Details Ihres Child-Themes eingeben.
Wenn Sie ein Child-Theme manuell erstellen, verlieren Sie die Menüs und Widgets des Parent-Themes. Der Child Theme Configurator kann diese vom Parent-Theme in das Child-Theme kopieren. Aktivieren Sie das Kontrollkästchen in Schritt 8, wenn Sie dies tun möchten.
Klicken Sie abschließend auf die Schaltfläche „Neues Child Theme erstellen“, um Ihr neues Child Theme zu erstellen.
Das Plugin erstellt einen Ordner für Ihr Child-Theme und fügt die Dateien style.css und functions.php hinzu, die Sie später zur Anpassung des Themes verwenden werden.
Bevor Sie das Theme aktivieren, sollten Sie auf den Link oben auf dem Bildschirm klicken, um es in der Vorschau anzuzeigen und sicherzustellen, dass es gut aussieht und Ihre Website nicht beeinträchtigt.
Wenn alles zu funktionieren scheint, klicken Sie auf die Schaltfläche 'Aktivieren & Veröffentlichen'.
Nun wird Ihr Child-Theme live geschaltet.
In diesem Stadium sieht das Child-Theme genauso aus und verhält sich genauso wie das Parent-Theme.
Methode 3: Erstellen eines Child-Block-Themes mit einem Plugin
Wenn Sie ein Block-Theme verwenden, bietet WordPress mit dem Create Block Theme Plugin eine einfache Möglichkeit, ein Child-Theme zu erstellen.
Zuerst müssen Sie das WordPress-Plugin installieren und aktivieren. Danach gehen Sie zu Darstellung » Block-Theme erstellen.
Wählen Sie hier einfach „Ein Kind von [aktueller Theme-Name] erstellen“ aus.
Füllen Sie als Nächstes die Informationen Ihres Child-Themes aus. Wir verwenden hier Twenty Twenty-Four als Beispiel, daher nennen wir es Twenty Twenty-Four Child.
Wir haben auch eine Beschreibung und einen Autor für das Child-Theme angegeben. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Child Theme erstellen“.
Das Plugin wird nun die WordPress-Theme-Zip-Datei erstellen und in Ihren Admin-Bereich installieren.
Sobald Sie fertig sind, wird Ihre Website dieses neu erstellte Child-Theme automatisch aktivieren. Sie können dies bestätigen, indem Sie zu Darstellung » Themes gehen.
Bonustipp: Finden Sie heraus, ob Ihr Theme einen Child-Theme-Generator hat
Wenn Sie Glück haben, verfügt Ihr WordPress-Theme möglicherweise bereits über eine Funktion zum Erstellen eines Child-Themes.
Wenn Sie beispielsweise Astra verwenden, können Sie zur Website Astra Child Theme Generator gehen. Füllen Sie anschließend einfach den Namen Ihres Child-Themes aus und klicken Sie auf die Schaltfläche „Generieren“.
Ihr Browser lädt dann automatisch Ihr Child-Theme auf Ihren Computer herunter, das Sie dann selbst in WordPress installieren können.
Wir haben auch einige andere beliebte WordPress-Themes gefunden, die einen Child-Theme-Generator haben:
So passen Sie Ihr Classic Child Theme an
Hinweis: Dieser Abschnitt ist für Benutzer klassischer WordPress-Themes. Wenn Sie ein Block-Theme verwenden, überspringen Sie einfach den nächsten Abschnitt.
Technisch gesehen können Sie Ihr Child-Theme ohne Code anpassen, indem Sie den Theme Customizer verwenden. Die dort vorgenommenen Änderungen wirken sich nicht auf Ihr übergeordnetes Theme aus. Wenn Sie sich noch nicht mit dem Programmieren auskennen, können Sie den Customizer gerne verwenden.
Dennoch empfehlen wir auch, das Child-Theme mit Code anzupassen.
Neben dem Erlernen der WordPress-Theme-Entwicklung ermöglicht die Code-Anpassung, dass die Änderungen in den Dateien des Child-Themes dokumentiert werden, was die Nachverfolgung erleichtert. Child-Themes.
Der grundlegendste Weg, ein Child-Theme anzupassen, ist das Hinzufügen von benutzerdefiniertem CSS zur style.css-Datei. Dazu müssen Sie wissen, welchen Code Sie anpassen müssen.
Sie können den Prozess vereinfachen, indem Sie den vorhandenen Code aus dem Parent-Theme kopieren und modifizieren. Sie finden diesen Code mit dem Chrome- oder Firefox-Inspektionstool oder indem Sie ihn direkt aus der CSS-Datei des Parent-Themes kopieren.
Methode 1: Code aus dem Chrome- oder Firefox-Inspektor kopieren
Der einfachste Weg, den CSS-Code zu finden, den Sie ändern müssen, ist die Verwendung der Inspektor-Tools, die mit Google Chrome und Firefox geliefert werden. Diese Tools ermöglichen es Ihnen, das HTML und CSS hinter jedem Element einer Webseite zu betrachten.
Sie können mehr über das Inspektor-Tool in unserem Leitfaden zu den Grundlagen des Inspektions-Elements: WordPress für DIY-Benutzer anpassen lesen.
Wenn Sie mit der rechten Maustaste auf Ihre Webseite klicken und das Element inspizieren, sehen Sie den HTML- und CSS-Code der Seite.
Wenn Sie mit der Maus über verschiedene HTML-Zeilen fahren, hebt der Inspektor diese im oberen Fenster hervor. Er zeigt Ihnen auch die CSS-Regeln an, die mit dem hervorgehobenen Element verknüpft sind, wie hier:
Sie können versuchen, das CSS direkt dort zu bearbeiten, um zu sehen, wie es aussehen würde. Versuchen wir zum Beispiel, die Hintergrundfarbe des Theme-Bodys zu #fdf8ef zu ändern. Suchen Sie die Codezeile, die body { lautet, und darin den Code, der color: lautet.
Klicken Sie einfach auf das Farbwähler-Symbol neben color: und fügen Sie den HEX-Code in das entsprechende Feld ein, wie hier:
Jetzt wissen Sie, wie Sie die Hintergrundfarbe mit CSS ändern können. Um die Änderungen dauerhaft zu machen, können Sie Ihre style.css-Datei im Child-Theme-Verzeichnis öffnen (mit dem Dateimanager oder FTP).
Fügen Sie dann den folgenden Code unter den Informationen des Child-Themes ein, wie hier gezeigt:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
body {
background-color: #fdf8ef
}
So sieht es aus, wenn Sie zum WordPress-Adminbereich gehen und Design » Theme-Datei-Editor öffnen:
Wenn Sie ein Anfänger sind und andere Änderungen vornehmen möchten, empfehlen wir Ihnen, sich mit HTML und CSS vertraut zu machen, damit Sie genau wissen, auf welches Element sich jeder Code bezieht. Es gibt viele HTML- und CSS-Spickzettel online, auf die Sie sich beziehen können.
Hier ist die vollständige Stylesheet, die wir für das Child-Theme erstellt haben. Experimentieren Sie gerne damit und ändern Sie sie:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
Methode 2: Code aus der style.css-Datei des übergeordneten Themes kopieren
Möglicherweise gibt es viele Dinge in Ihrem Child-Theme, die Sie anpassen möchten. In diesem Fall kann es schneller sein, einige Codezeilen direkt aus der style.css-Datei des übergeordneten Themes zu kopieren, sie in die CSS-Datei Ihres Child-Themes einzufügen und dann zu ändern.
Der knifflige Teil ist, dass die Stylesheet-Datei eines Themes für Anfänger sehr lang und überwältigend aussehen kann. Sobald Sie jedoch die Grundlagen verstehen, ist es eigentlich nicht so schwer.
Nehmen wir ein reales Beispiel aus dem Stylesheet des Twenty Twenty-One-Übergeordneten Themes. Sie müssen in Ihrem WordPress-Installationsordner zu /wp-content/themes/twentytwentyone navigieren und dann die style.css-Datei in Ihrem Dateimanager, per FTP oder im Theme-Datei-Editor öffnen.
Sie sehen die folgenden Codezeilen:
:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}
Zeilen 3 bis 15 steuern die Art der Farben (wie Gelb, Grün, Lila), die das gesamte Theme in ihren spezifischen HEX-Codes verwenden wird. Und dann bedeuten Zeilen wie 'global-color-primary' oder 'global-color-secondary', dass dies die primären und sekundären Farben dieses Themes sind.
Sie können diese Codezeilen in die Stylesheet Ihres Child-Themes kopieren und dann die HEX-Codes ändern, um Ihr perfektes Farbschema zu erstellen.
Wenn Sie in der Stylesheet-Datei des Parent-Themes nach unten scrollen, werden Sie feststellen, dass andere Variablen ebenfalls diese Farbvariablen haben können, wie hier:
/* Buttons */
--button--color-text: var(--global--color-background);
Das bedeutet im Grunde, dass alle Button-Texte die gleiche Farbe wie in --global--color-background: deklariert verwenden, nämlich Mintgrün (--global--color-green: #d1e4dd). Wenn Sie den HEX-Wert in --global--color-green: ändern, ändert sich auch die Farbe des Button-Textes.
Hinweis: Wenn Sie das Twenty Twenty-One Child Theme verwenden und keine Änderungen sehen, müssen Sie möglicherweise den Teil "Version" der Theme-Dateiinformationen aktualisieren (z. B. von 1.0 auf 2.0), jedes Mal, wenn Sie die style.css-Datei aktualisieren.
Sie können auch diesen Tutorials folgen, um mit Ihren Child Theme-Anpassungen zu experimentieren:
- So ändern Sie die Textfarbe in WordPress
- So ändern Sie die Größe Ihres WordPress-Logos (funktioniert mit jedem Theme)
- So passen Sie den Stil von Blockquotes in WordPress-Themes an
- WordPress Body Class 101: Tipps und Tricks für Theme-Designer
- So fügen Sie jedem WordPress-Theme einen Parallax-Effekt hinzu
So passen Sie Ihr Block-Kind-Theme an
Wenn Sie ein Child Block Theme verwenden, werden die meisten Ihrer Anpassungen in Ihrer theme.json-Datei vorgenommen, nicht in der style.css.
Allerdings stellten wir während unserer Tests fest, dass der Prozess kompliziert war. Im Gegensatz zu klassischen Child Themes gibt es eine größere Wissenslücke, die Sie schließen müssen (insbesondere über JSON und wie CSS dort gehandhabt wird), wenn Sie neu in der WordPress-Theme-Entwicklung sind.
Dennoch haben wir eine viel einfachere Alternative mit dem Create Block Theme Plugin gefunden. Dieses Tool kann alle Änderungen aufzeichnen, die im Full Site Editor von WordPress in der Datei child theme.json Ihres Child-Themes vorgenommen werden. Sie müssen also keinen Code anfassen, da das Plugin dies für Sie übernimmt.
Lassen Sie uns Ihnen ein Beispiel zeigen. Öffnen Sie zuerst den WordPress Full Site Editor, indem Sie zu Darstellung » Editor gehen.
Sie sehen mehrere Menüs zur Auswahl.
Wählen Sie hier einfach "Styles" aus.
Auf der nächsten Seite sehen Sie verschiedene integrierte Stil-Kombinationen zur Auswahl.
Für unseren Zweck können Sie all das einfach überspringen und auf das Stiftsymbol klicken.
Versuchen wir nun, einige Teile Ihres Child-Themes zu ändern, z. B. die Schriftarten.
Klicken Sie für dieses Beispiel im rechten Seitenbereich auf „Typografie“.
Als Nächstes sehen Sie einige Optionen, um die globalen Schriftarten des Themes für Text, Links, Überschriften, Bildunterschriften und Schaltflächen zu ändern.
Klicken wir der Demonstration halber auf „Überschriften“.
Ändern Sie im Dropdown-Menü 'Schriftart' die ursprüngliche Auswahl in eine beliebige verfügbare Schriftart.
Passen Sie bei Bedarf das Erscheinungsbild, den Zeilenabstand, den Buchstabenabstand und die Groß-/Kleinschreibung an.
Sobald Sie fertig sind, klicken Sie einfach auf „Speichern“. Danach können Sie neben „Speichern“ auf die Schaltfläche „Block-Theme erstellen“ (das Schraubenschlüsselsymbol) klicken.
Klicken Sie dann auf „Änderungen am Theme speichern“.
Wählen Sie als Nächstes aus, welche Änderungen im Child-Theme gespeichert werden sollen.
Beispiele hierfür sind Schriftarten, benutzerdefinierte Stile, Template-Änderungen und mehr.
Sobald Sie fertig sind, scrollen Sie einfach ganz nach unten in der Seitenleiste.
Klicken Sie dann auf „Änderungen speichern“.
Betrachten wir nun Ihre theme.json-Datei, damit Sie die Änderungen im Code sehen können.
Um dies zu tun, klicken Sie erneut auf die Schaltfläche „Block Theme erstellen“ und wählen Sie „theme.json anzeigen“.
Nachdem Sie darauf geklickt haben, werden Sie sehen, dass die Datei einige neue Code-Ergänzungen enthält.
In unserem Fall enthält die Datei Code, der angibt, dass die Überschriften die Inter-Schriftart mit halbfetter Darstellung, 1,2 Zeilenhöhe, 1 Pixel Zeilenabstand und in Kleinbuchstaben verwenden.
Wenn Sie also Ihr Child-Block-Theme bearbeiten, stellen Sie sicher, dass Sie auf das Schraubenschlüsselsymbol klicken und Ihre Änderungen speichern, damit sie gut dokumentiert sind.
So bearbeiten Sie die Vorlagendateien eines Child Themes
Die meisten WordPress-Themes haben Vorlagen, die Theme-Dateien sind, welche das Design und Layout eines bestimmten Bereichs innerhalb eines Themes steuern. Zum Beispiel wird der Fußbereich normalerweise von der Datei footer.php und der Header von der Datei header.php gehandhabt.
Jedes WordPress-Theme hat auch ein anderes Layout. Zum Beispiel hat das Twenty Twenty-One-Theme einen Header, eine Inhalts-Schleife, einen Widget-Bereich im Footer und einen Footer.
Wenn Sie ein Template ändern möchten, müssen Sie die Datei im Ordner des übergeordneten Themes finden und sie in den Ordner des Child-Themes kopieren. Danach sollten Sie die Datei öffnen und die gewünschten Änderungen vornehmen.
Wenn Sie beispielsweise Bluehost verwenden und Ihr übergeordnetes Theme Twenty Twenty-One ist, können Sie in Ihrem Dateimanager zu /wp-content/themes/twentytwentyone navigieren. Klicken Sie dann mit der rechten Maustaste auf eine Vorlagendatei wie footer.php und wählen Sie „Kopieren“.
Geben Sie danach den Dateipfad Ihres Child-Themes ein.
Wenn Sie fertig sind, klicken Sie einfach auf 'Dateien kopieren'.
Sie werden dann zum Dateipfad weitergeleitet.
Um die Datei footer.php zu bearbeiten, klicken Sie einfach mit der rechten Maustaste darauf und wählen Sie 'Bearbeiten'.
Als Beispiel werden wir den Link „Proudly powered by WordPress“ aus dem Fußbereich entfernen und stattdessen eine Copyright-Notiz hinzufügen.
Um das zu tun, sollten Sie alles zwischen den <div class= "powered-by"> Tags löschen:
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->
Dann müssen Sie den Code, den Sie unter diesen Tags finden, in das folgende Beispiel einfügen:
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->
Hier ist, was Sie jetzt im Texteditor sehen sollten:
Speichern Sie die Datei, um die Änderungen offiziell zu machen.
Besuchen Sie danach Ihre Website, um den neuen Copyright-Hinweis zu sehen.
So fügen Sie Ihrem Child-Theme neue Funktionalität hinzu
Die Datei functions.php in einem Theme verwendet PHP-Code, um Funktionen hinzuzufügen oder Standardfunktionen auf einer WordPress-Website zu ändern. Sie fungiert wie ein Plugin für Ihre WordPress-Website, das automatisch mit Ihrem aktuellen Theme aktiviert wird.
Sie werden viele WordPress-Tutorials finden, die Sie bitten, Code-Schnipsel zu kopieren und einzufügen in functions.php. Aber wenn Sie Ihre Modifikationen zum Parent-Theme hinzufügen, werden sie überschrieben, wenn Sie ein neues Update für das Theme installieren.
Deshalb empfehlen wir die Verwendung eines Child-Themes, wenn Sie benutzerdefinierte Code-Snippets hinzufügen. In diesem Tutorial fügen wir unserem Theme einen neuen Widget-Bereich hinzu.
Dies können wir tun, indem wir diesen Code-Schnipsel zur functions.php-Datei unseres Child Themes hinzufügen. Um den Prozess noch sicherer zu gestalten, empfehlen wir die Verwendung des WPCode-Plugins, damit Sie die functions.php-Datei nicht direkt bearbeiten und so das Fehlerrisiko verringern.
Lesen Sie unseren Leitfaden zum einfachen Hinzufügen von benutzerdefinierten Code-Snippets für weitere Informationen.
Hier ist der Code, den Sie Ihrer functions.php-Datei hinzufügen müssen:
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
Sobald Sie die Datei speichern, können Sie die Seite Darstellung » Widgets Ihres WordPress-Dashboards besuchen.
Hier sehen Sie Ihren neuen benutzerdefinierten Widget-Bereich, zu dem Sie Widgets hinzufügen können.
Es gibt viele andere Funktionen, die Sie Ihrem Theme mit benutzerdefinierten Code-Snippets hinzufügen können. Schauen Sie sich diese äußerst nützlichen Tricks für die WordPress functions.php-Datei und nützlichen WordPress-Code-Snippets für Anfänger an.
So beheben Sie Probleme mit Ihrem WordPress Child Theme
Wenn Sie noch nie zuvor ein untergeordnetes Theme erstellt haben, ist die Wahrscheinlichkeit groß, dass Sie einige Fehler machen, und das ist normal. Deshalb empfehlen wir die Verwendung eines Backup-Plugins, das Erstellen einer lokalen Website oder einer Staging-Umgebung und die Verwendung von Dummy-Inhalten für Ihre Demoseite.
Alles in allem, gib nicht zu schnell auf. Die WordPress-Community ist sehr einfallsreich, daher gibt es wahrscheinlich bereits eine Lösung für jedes Problem, das du hast.
Für den Anfang können Sie sich unsere häufigsten WordPress-Fehler ansehen, um eine Lösung zu finden.
Die häufigsten Fehler, die Sie wahrscheinlich sehen werden, sind Syntaxfehler, die durch etwas verursacht werden, das Sie im Code übersehen haben. Hilfe bei der Lösung dieser Probleme finden Sie in unserem Schnellleitfaden unter wie Sie Syntaxfehler in WordPress finden und beheben.
Zusätzlich können Sie jederzeit neu beginnen, wenn etwas sehr schief geht. Wenn Sie beispielsweise versehentlich etwas gelöscht haben, das Ihr übergeordnetes Theme benötigte, können Sie die Datei einfach aus Ihrem untergeordneten Theme löschen und neu beginnen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie man ein WordPress Child Theme erstellt. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zum Testen Ihres WordPress-Themes anhand der neuesten Standards und unseren Vergleichsartikel zu kostenlosen vs. Premium WordPress-Themes lesen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Mrteesurez
Dieser Artikel ist unglaublich aufschlussreich, besonders für diejenigen unter uns, die gerade erst mit WordPress beginnen. Ich erinnere mich, als ich anfing, unterschätzte ich die Bedeutung der Verwendung eines Child Themes und verlor nach einem Theme-Update alle meine Anpassungen. Das harte Lernen ließ mich den Wert eines Child Themes zur Bewahrung von Änderungen schätzen. Danke, dass Sie hervorheben, was vor der Erstellung zu tun ist – diese Anleitung wird sicherlich viele Anfänger vor ähnlichen Frustrationen bewahren!
Oyatogun Oluwaseun Samuel
Ich liebe die Flexibilität, die das Child Theme bietet, denn wenn das Parent Theme aktualisiert wird, bleiben die im Child Theme vorgenommenen Änderungen erhalten. Außerdem erstelle ich das Child Theme gerne manuell, da ich glaube, dass ich dadurch Fehler machen kann, die wiederum mein Verständnis und meine Expertise erhöhen. Wir lernen, wenn wir Fehler machen.
Mrteesurez
Ich stimme Ihnen vollkommen zu! Die Flexibilität, die Child Themes bieten, ist ein echter Vorteil, insbesondere wenn es darum geht, Anpassungen bei Updates des Parent Themes beizubehalten. Ich habe aus demselben Grund auch gerne manuell Child Themes erstellt. Obwohl es anfangs etwas einschüchternd sein kann, habe ich festgestellt, dass das Eintauchen in den Code nicht nur mein Verständnis verbessert, sondern auch mein Selbstvertrauen als Entwickler stärkt.
Ich erinnere mich, als ich anfing, mit Child-Themes zu arbeiten, habe ich ein paar Fehler gemacht – wie das Vergessen, Styles korrekt einzubinden oder die functions.php-Datei zu verpfuschen. Jeder Fehler war eine wertvolle Lernerfahrung, die mir half, besser zu verstehen, wie WordPress-Themes funktionieren. Außerdem gibt mir das Wissen, dass meine Anpassungen bei Updates sicher sind, ein gutes Gefühl. Es ist definitiv eine lohnende Fähigkeit, die man entwickeln kann! Danke, dass Sie Ihre Gedanken geteilt haben; es ist großartig, sich mit anderen zu verbinden, die praktisches Lernen schätzen.
Chris
Ich habe mir nie wirklich Gedanken über Child Themes gemacht und dachte, sie seien nicht notwendig. Bevor ich diesen Artikel gelesen habe, war mir nicht bewusst, dass benutzerdefinierte Funktionen aus der functions.php-Datei entfernt werden, wenn das Theme aktualisiert wird. Für mich ist ein Child Theme ein Muss, wenn ich ein Theme aus dem WordPress Theme Repository verwende. Danke für diesen informativen Artikel!
Dayo Olobayo
Toller Punkt bezüglich Child-Themes. Es gibt auch noch eine andere Option zu bedenken… Einige Premium-Themes bieten Anpassungsfelder, die die Notwendigkeit von Code-Bearbeitungen ganz vermeiden. Child-Themes bieten jedoch auf lange Sicht mehr Flexibilität, insbesondere wenn Sie sich mit etwas Code auskennen.
Mrteesurez
Mir ging es genauso, als ich anfing, ich habe Child-Themes vorher keine Beachtung geschenkt, später habe ich festgestellt, wie hilfreich sie sind, besonders wenn man kostenlose Themes, die häufig aktualisiert werden, weiter anpassen möchte. Die Child-Theme-Datei wird zuerst geladen, bevor das Parent-Theme, wodurch die hinzugefügten Anpassungen erhalten bleiben.
Hajjalah
Vielen Dank für diese umfassende Anleitung. Ich möchte ein Child-Theme mit der Plugin-Methode erstellen, bin mir aber bei einigen Punkten noch unsicher.
Werden die Codes im WPCode-Plugin für das Child-Theme wirksam? Wenn das Parent-Theme aktualisiert wird, das Child-Theme aber nicht, können sie dann nicht zu einem Fehlerkonflikt führen?
WPBeginner Support
Ja, der Code in WPCode wird in Ihrem Child-Theme angezeigt und wenn Sie das Parent-Theme aktualisieren, besteht die Möglichkeit eines Konflikts, aber dies ist keine Garantie.
Admin
Mrteesurez
Gute Frage, Herr Hajjalah.
Ich hatte die gleichen Bedenken, als ich anfing, Child-Themes zu erstellen. Mit dem WPCode-Plugin sollte der Code sowohl für das Eltern- als auch für das Child-Theme gelten, solange er richtig platziert ist. Wenn sich jedoch das Eltern-Theme aktualisiert und das Child-Theme nicht, kann es zu Konflikten kommen. Ich hatte einmal ein Layout-Problem deswegen, aber das Aktualisieren und Testen der Updates auf einer Staging-Site half mir, Fehler zu vermeiden.
Jiří Vaněk
Ein Child-Theme ist immer das Erste, was ich auf einer neu installierten Website erstelle. Obwohl ich versuche, WP Code viel zu nutzen und Probleme zu vermeiden, ist das Child-Theme eine absolut brillante Sache, wenn man eine Vorlage aktualisiert, und kann viel Ärger mit verlorenem Code ersparen, der nach einem Update aus der Hauptvorlage verschwindet.
Asad
Herr, was soll ich in function.php schreiben, um das Eltern-Theme aufzurufen?
WPBeginner Support
You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */
Admin
Yogesh Sambare
Hallo, Team wpbeginner,
Danke für diese großartige Anleitung, jetzt denke ich, dass ich in der Lage bin, mein Theme als Child Theme zu erstellen, und es ist wirklich hilfreich für mich.
WPBeginner Support
Glad you found our guide helpful!
Admin
Ricardo
Die Zeile:
„wp_get_theme()->get(‚Version‘) )“
Sollte sein:
"wp_get_theme()->get(‘Version’) )"
Prost!
WPBeginner Support
While our comments automatically changed that in your message, we see the issue, thank you for letting us know
Admin
Rubb
Kann ich das Plugin löschen, nachdem ich das Child-Theme erstellt habe?
WPBeginner Support
Currently, you can do that with the plugin
Admin
Eitan
Sie müssen Anführungszeichen um das Y = („Y“) bei echo date hinzufügen, sonst erhalten Sie einen Fehler. – echo date(“Y”)
WPBeginner Support
Thank you for pointing out the typo
Admin
Bomo
Wenn wir also jetzt ein Child-Theme erstellt haben, wie aktualisieren wir das Parent-Theme, wenn das Child-Theme aktiviert ist?
WPBeginner Support
Sie würden das Eltern-Theme wie gewohnt aktualisieren. Zur Sicherheit möchten Sie vielleicht ein Backup erstellen, bevor Sie das Eltern-Theme aktualisieren, falls es irgendwo zu einem Konflikt kommt.
Admin
RYAD
Aber müssen wir das Parent-Theme aktivieren, bevor wir es aktualisieren und es dann deaktivieren und das Child-Theme wieder aktivieren?
WPBeginner Support
Nein, Sie können das Theme aktualisieren, ohne dass es aktiv ist
Mahesh Yadav
Eine Sache, die ich wissen möchte: Wenn wir ein Child Theme erstellen, laden wir 2 CSS-Dateien, eine für das übergeordnete Theme und eine für das Child Theme. Würde das nicht die Ladezeit der Website erhöhen und eine weitere CSS-Datei zum Laden hinzufügen?
WPBeginner Support
Während die Ladezeit technisch gesehen zunehmen würde, sollte dies nicht in einem spürbaren Ausmaß geschehen.
Admin
Nadia Shaheen
Tolle Arbeit!
Bleiben Sie gesegnet und teilen Sie weiterhin großartige Inhalte.
WPBeginner Support
Thank you, glad you liked our content
Admin
Fahad
Great Work !
This site is super helpful
Keep it up !!
WPBeginner Support
Thank you, glad our article was helpful
Admin
Daniel Waduka
Ich fange gerade an, Child-Themes zu verwenden, und dieser Artikel war mir eine große Hilfe.
Vielen Dank.
WPBeginner Support
Glad our guide could be helpful
Admin
Marcos Flores
Hallo! Ich habe diesen Artikel gelesen und er funktioniert! Aber ich habe auch die WordPress-Dokumentation dazu gelesen und sie sagen das
„Beachten Sie, dass die vorherige Methode darin bestand, die Stylesheet-Datei des übergeordneten Themes mit @import zu importieren: Dies ist keine bewährte Methode mehr, da sie die Ladezeit von Stylesheets erhöht. Die richtige Methode, um die Stylesheet-Datei des übergeordneten Themes einzubinden, ist das Hinzufügen einer wp_enqueue_scripts-Aktion und die Verwendung von wp_enqueue_style() in der functions.php Ihres Child-Themes.“
Sollte ich beide Methoden verwenden? Oder wenn ich die function.php verwende, muss ich dann keine Importfunktion in die style.css (im Ordner meines Child-Themes) schreiben?
Khema
In Ihren Anweisungen fehlt ein Schritt zur Erstellung von functions.php. Es sollte erwähnt werden, dass die gesamte Datei umschließen muss. In diesem Fall wollte ich nicht das von Ihnen verwendete Beispiel und einen weiteren Code aus dem von Ihnen verlinkten Artikel hinzufügen. Natürlich enthielten diese Codes nicht das php-Tag.
Danke für den Artikel. Er ist sehr, sehr hilfreich.
rReons
Also Frage. Ich habe mein WordPress-Theme ohne Child-Theme verwendet und alle Änderungen darin vorgenommen. Ich habe dank Ihres Leitfadens ein Child-Theme erstellt und verwende dieses jetzt als Website-Theme.
Meine Frage ist, ob beide Themes die gleichen Modifikationen und Änderungen haben. Wenn ich das Haupt-Theme von nun an aktualisiere, werden sich die Änderungen dann auch auf das Child-Theme auswirken?
balu
He! wpbeginner. Die offizielle WordPress-Website sagt das. Sie müssen den Beitrag aktualisieren. Danke!
Beachten Sie, dass die vorherige Methode darin bestand, das Stylesheet des übergeordneten Themes mit @import zu importieren: Dies ist nicht mehr die beste Vorgehensweise, da dies die Ladezeit von Stylesheets erhöht. Die korrekte Methode zum Einreihen des Stylesheets des übergeordneten Themes besteht darin, eine wp_enqueue_scripts-Aktion hinzuzufügen und wp_enqueue_style() in der functions.php Ihres Child-Themes zu verwenden. Sie müssen daher eine functions.php in Ihrem Child-Theme-Verzeichnis erstellen. Die erste Zeile der functions.php Ihres Child-Themes ist ein öffnender PHP-Tag (<?php), danach können Sie die Stylesheets Ihres übergeordneten und untergeordneten Themes einreihen. Die folgende Beispiel-Funktion funktioniert nur, wenn Ihr übergeordnetes Theme nur eine einzige main style.css verwendet, um die gesamte CSS zu speichern. Wenn Ihr Child-Theme mehr als eine .css-Datei hat (z. B. ie.css, style.css, main.css), müssen Sie sicherstellen, dass Sie alle Abhängigkeiten des übergeordneten Themes beibehalten.
Pat
Tolle Informationen… Sie haben es auf meine Speicherliste geschafft!! Danke!
Alfonso de Garay
Ich habe ein Child-Theme mit der neuesten Theme-Version auf meiner Website installiert. WP-Version 4.7.5. Ich habe eine Benachrichtigung erhalten, dass eine neue WP-Version verfügbar ist und ich sie jetzt aktualisieren soll.
1. Muss ich meine Website vor dem Update erneut sichern?
2. Muss ich ein weiteres Child-Theme mit Child-Version 1 erstellen?
2. Wie kann ich den Namen, die E-Mail-Adresse und die URL in Chile-Version 1 ändern?
WPBeginner Support
Hallo Alfonso,
WordPress-Updates wirken sich normalerweise nicht auf Ihre Themes aus, daher müssen Sie kein weiteres Child-Theme erstellen. Sie sollten Ihre Website immer sichern, bevor Sie WordPress aktualisieren.
Admin
Lisa Bruce
Hallo, ich sehe, dass dieses Video/dieser Beitrag ein paar Jahre alt ist, daher bin ich etwas spät dran, aber ich habe eine Frage, bei der ich hoffe, dass Sie mir helfen können.
Ich bin relativ neu bei WP und habe gerade die Bedeutung von Child-Themes erkannt. Ich habe an der Entwicklung einer Website für einen Freund gearbeitet und mehrere Änderungen an dem von mir verwendeten Theme vorgenommen. Ich habe einen Fehler im Theme gefunden und den Theme-Entwickler kontaktiert, und sie sagten, dass der Fehler in einem kürzlichen Update behoben worden sei.
Wenn ich das Update installiere, glaube ich, dass ich alle meine Anpassungen verlieren werde. Ist es zu spät, ein Child-Theme zu erstellen? Ist es möglich, dies jetzt zu tun und dann das Update zu installieren? Ich möchte nicht von vorne anfangen müssen.
WPBeginner Support
Hallo Lisa,
Wenn Sie wissen, welche Änderungen Sie vorgenommen haben und in welchen Dateien, laden Sie zuerst ein Backup Ihres vorhandenen Themes auf Ihren Computer herunter. Installieren Sie danach die aktualisierte Version. Sie können nun ein Child-Theme erstellen und dann den Code aus Ihrer angepassten Version in das Child-Theme kopieren und einfügen.
Admin
Nell Yang
Vielen Dank für diesen hilfreichen Beitrag. Ich habe immer nach einem Video gesucht, das mir zeigt, wie genau ich ein Child-Theme verwenden soll. Es ist ziemlich zeitaufwendig, dass jedes Mal, wenn ich mein Theme aktualisiere, all meine Stile verschwinden. Es ist frustrierend, alles noch einmal machen zu müssen. Ich habe versucht, die Dokumente von WordPress zu lesen, aber ich weiß immer noch nicht, wie ich nach der Aktivierung des Child-Themes vorgehen soll. Machen Sie weiter so! Nochmals vielen Dank!
Tony Agee
Gutes Lehrvideo. Die meisten Tutorials, die ich gesehen habe, sagen Ihnen, Sie sollen den Code in die Datei einfügen, aber sie vergessen zu sagen, in welches Medium Sie den Code einfügen sollen. Ich wollte Notepad++ verwenden, aber ich schätze, Sie können auch normales Notepad verwenden.
JP
Hallo, ich möchte nur sagen, dass Sie ein sehr guter Schreiber sind, sehr klar und einfach. Ich habe lange auf Ihrem Artikel verbracht, um WP zu lernen.
Danke!
Rob Brooks
Hallo. Vielen Dank, dass Sie eine großartige WP-Ressource sind. Ich bin neu bei WP und schätze Ihre Anleitung sehr. Ich habe den Artikel bis ins kleinste Detail befolgt, aber wenn ich das Child-Template auf der Website aktivieren möchte, erhalte ich die Fehlermeldung „Das Parent-Theme fehlt. Bitte installieren Sie das Parent-Theme „Real Estate Lite“. Wie Sie sehen, verwende ich ein kostenloses Template namens Real Estate Light. Es befindet sich im Verzeichnis ../real-estate-lite/ von wp-content/themes. Mein Code ist unten… habe ich etwas falsch gemacht?
Theme Name: Real Estate Lite Child Theme Theme URI: http://www.example.com/ Description: Real Estate Lite child theme Author: me Author URI: http://www.example.com Template: Real Estate Lite Version: 1.0.0 */ @import url("../real-estate-lite/style.css");1-click Use in WordPress
Außerdem erwähne ich, dass das Theme kostenlos war und auf WP-Version 4.7.2 läuft (läuft auf Plesk). Ich habe die style.css-Datei direkt auf dem Server erstellt, also keine FTP-Probleme.
Ich habe bereits erhebliche Änderungen an der übergeordneten style.css-Datei sowie an functions.php vorgenommen ... Ich bin mir nicht sicher, ob dies Auswirkungen hat, aber ich werde es auf einer unveränderten Dummy-Domain testen, um zu sehen, ob ich die gleichen Ergebnisse erziele.
Jede Anleitung/Hilfe, die Sie geben können, wäre sehr willkommen.
WPBeginner Support
Hallo Rob,
Sie benötigen ein übergeordnetes Theme, das auf Ihrer Website installiert ist, und der Wert für Template muss dem tatsächlichen Namen des übergeordneten Themes entsprechen, den Sie in dessen style.css-Datei sehen können.
Admin
Carrie
Hallo! Toller Artikel! Dank diesem Artikel verstehe ich endlich, wie man CSS bearbeitet, um das gewünschte Ergebnis zu erzielen.
Vielen Dank für die vereinfachte Erklärung!
Nalin
Ich habe ein Child-Theme erstellt und @import für die „style.css“ in einem Child-Theme verwendet. Jetzt möchte ich in einer anderen CSS-Datei des Eltern-Themes ändern: … /font_awesome/css/fontawesome.css
Nun möchte ich wissen, wo ich meine neue fontawesome.css im Child-Theme platzieren werde und wie ich den @import-Befehl verwende.
Oder gibt es einen anderen Prozess, um mehr CSS-Dateien in einem Child-Theme zu verwenden.
Rebecca
Also, ich habe den wp-content-Ordner nicht auf meinem Computer. Was soll ich tun?
Hätte ich das irgendwann herunterladen sollen?
WPBeginner Support
Hallo Rebecca,
Die wp-content-Datei wird auf Ihrem Hosting-Konto gehostet, nicht auf Ihrem Computer. Sie benötigen einen FTP-Client, um eine Verbindung zu Ihrem Server herzustellen.
Admin
Brad
Die Verwendung von @import ist keine bewährte Methode mehr
SAppa
Was ist also jetzt die beste Vorgehensweise? Sie sollten in der Lage sein, Ihren Kommentar zu sichern.
Jual beli rumah
Danke
Jean-philippe
Ich lerne seit ein paar Stunden so viel auf Ihrer Website. Jedes Mal, wenn ich bei Google nach etwas im Zusammenhang mit "wie man" in WordPress suche, stelle ich fest, dass die besten Informationen hier bei WPbeginner zu finden sind. Es ist immer gut erklärt und leicht verständlich. Ich werde ohne Zweifel immer wieder hierher zurückkehren, um Informationen zu erhalten.
WPBeginner Support
Hallo Jean-philippe,
Thanks for the kind words, we are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Smart Rashed
Das ist der Artikel, den ich gesucht habe, danke Mann.
Kevin
Ich weiß, das wird eine dumme Frage sein. Ich bin hier ganz neu und habe überhaupt keine Fähigkeiten. Wenn ich eine Datei, eine Stylesheet usw. in meiner WP-Installation auf meinem lokalen PC erstelle, wie kommt das dann auf meine Website? Ich glaube, das fehlt mir? Ich benutze etwa 3 verschiedene PCs, um an meiner Website zu arbeiten, und diese lokalen Dateien sind nicht auf allen vorhanden. Wieder einmal bin ich sicher, dass mir etwas wirklich Dummes fehlt. Ich sehe die Verbindung nicht.
WPBeginner Support
Die Dateien, die Sie auf Ihrem Computer bearbeiten, müssen mit einem FTP-Client auf Ihre Website übertragen werden. Sehen Sie sich unseren Leitfaden an unter So laden Sie WordPress-Dateien mit FTP hoch.
Admin
Kevin
Ok, ich habe das verstanden und ein Child-Theme erstellt, aber wenn ich es aktiviere, ist die Formatierung auf der Website komplett anders als beim Parent-Theme. Was habe ich falsch gemacht?
Francesco
Hallo,
Ich folge Ihrem Tutorial, aber WordPress (4.5.3) erkennt den neuen Ordner auf meinem Online-Server nicht. Wie kann ich das umgehen?
Danke,
F.
Muhammad Moosa
Hilfreicher Artikel in der Tat, ich habe ihn befolgt und ein Child-Theme erstellt. Danke.
Carolina
Hallo, danke für das Tutorial, sehr hilfreich. Aber ich habe eine Frage. Kann ich ein Child-Theme von einer bereits etablierten Website erstellen? Ich habe einen Kunden, der seine eigene Website entworfen hat, aber kein Child-Theme erstellt hat. Wie gehe ich dabei vor?
WPBeginner Support
Wenn ihr aktuelles Theme den WordPress-Codierungsstandards und Best Practices folgt, sollten Sie keine Probleme haben, ein Child-Theme zu erstellen.
Admin
Mike
Vielen Dank für den Artikel und das Video. Anscheinend gibt es seit der Erstellung dieser Inhalte neue Best Practices von WordPress im Codex, was mich verwirrt.
„Der letzte Schritt besteht darin, die Stylesheets des Eltern- und des Child-Themes einzubinden. Beachten Sie, dass die vorherige Methode darin bestand, das Stylesheet des Eltern-Themes mit @import zu importieren: Dies ist nicht mehr die beste Vorgehensweise.“
Soll ich die hier ausführlich dargelegten Schritte befolgen, oder soll ich die Importfunktion weglassen und die PHP-Datei erstellen, oder soll ich beides implementieren?
Die style.css-Datei meines Themes enthält nur einen Header, daher scheint der Import dieser Datei irrelevant zu sein, und es gibt mehrere CSS-Dateien wie main.css, die sich woanders in der Dateistruktur des Elternteils befinden. Da ich als Anfänger nichts Besseres weiß, habe ich bereits Änderungen an main.css vorgenommen, um einige meiner Ziele zu erreichen, und erst jetzt erkenne ich, dass das Child-Theme notwendig ist.
Jeder Rat wird sehr geschätzt.
Mit freundlichen Grüßen,
Mike
WPBeginner Support
Sie müssen mindestens Ihre style.css-Datei importieren, sie sollte sich im Hauptverzeichnis Ihres Parent-Themes befinden. Sie sollte automatisch andere CSS-Dateien importieren.
Admin
Mike
Selbst wenn die style.css nur den Header enthält?
Jack
Wenn Ihre style.css-Datei keine Importe für andere CSS-Stile enthält, können Sie diese direkt importieren, genau wie style.css.
Olamide
Guten Tag. Als ich eine Live-Vorschau des Child-Themes vornahm, bemerkte ich, dass es nicht das CSS des Parent-Themes hatte. Vielleicht ist das das Ergebnis eines Fehlers in der Art und Weise, wie ich den Code eingefügt habe?
Dies ist der Code, den ich eingefügt habe:
/*
Theme Name: sparkling child
Theme URI: https://www.wpbeginner.com/
Description: sparkling child theme
Author: djetlawyer
Author URI: http://www.example.com
Template: sparkling
Version: 1.0.0
*/
@import url(“../sparkling/style.css”);
Das übergeordnete Thema ist "sparkling". Wenn es Fehler gibt, korrigieren Sie mich bitte.
Vielen Dank.
WPBeginner Support
Der Code ist korrekt.
Admin
lucia
Hallo,
Ich versuche, ein Child-Theme einzurichten, um mein Footer auf Twenty Twelve zu aktivieren, aber ich weiß nicht, welchen Code ich dafür verwenden soll.
Ich habe diese Webseite ausprobiert
mit verschiedenen Vorschlägen, und ich habe versucht, Ihren Vorschlag von 2013 zu ändern, aber es gelingt mir nicht.
Könnten Sie mir bitte den richtigen funktionierenden Code für die Einrichtung eines Child-Themes für 1212 geben.
Leigh
Das war unglaublich hilfreich – besonders Ihr HTML, das wir kopieren konnten. Ich war noch nie so begeistert, Farben auf einer Website wechseln zu sehen. Dies ist mit Abstand die beste Anleitung für dieses Theme!
Bhautik Andhariya
Hallo, ich habe dasselbe Beispiel ausprobiert, das Sie gezeigt haben. Aber mein Child-Theme ersetzt den gesamten Stil seines Parent-Themes.
Es hat keinen Stil seines Elternteils. Was ist die Lösung? Können Sie mir bitte helfen? Ich bin neu bei WordPress und lerne es gerade.
Angelo
Hallo!
Ich habe gerade die Bose-Vorlage installiert und auch ein Child-Theme dafür erstellt. Allerdings erscheint auf der Mitte meiner Website die folgende Fehlermeldung:
Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12
Ich bin ein absoluter Anfänger in der Erstellung von Websites, daher habe ich keine Ahnung, was das Problem ist. Kann mir jemand helfen?
Vielen Dank!
WPBeginner Support
Bitte kontaktieren Sie den Theme-Entwickler für Support.
Admin
Djamila
Hallo,
Danke für den Artikel! Ich konnte mein Child-Theme nicht im Vorlagenbereich "anzeigen" lassen und es stellte sich heraus, dass ich tatsächlich die Benennung der ursprünglichen Vorlage falsch geschrieben hatte. Was für einen Unterschied ein Großbuchstabe macht, was?
Allerdings konnte ich jetzt, da ich mein Child-Theme habe, das Parent-Theme aktualisieren und als ich das tat, hatte ich plötzlich ein Problem mit einem super wichtigen Plugin (ich baue im Moment einen Bewertungsblog auf einer lokalen Datenbank auf und es ist das Wrap-up/Bewertungs-Plugin der Template-Designer).
Im Parent-Template haben sie dieses Plugin "aktualisiert". Ich persönlich bevorzuge das alte, aber okay... wie auch immer... unter meiner Bewertung sehe ich jetzt *beide*, das alte Wrap-up mit Noten und das neue, das auch nicht richtig aussieht. Ich habe es deaktiviert und wieder aktiviert, aber es bleibt so. Super nervig und ich weiß nicht, wo ich suchen soll, um entweder das alte (schönere) oder nur das neue und die Gliederungen so zu behalten, wie sie sein sollten.
Wo soll ich anfangen? Danke für jede Hilfe, die Sie mir geben können.
WPBeginner Support
Kontaktieren Sie den Plugin-Support.
Admin
Amanda
Danke für einen großartigen Artikel!
Wenn ich ein Child-Theme verwende, kann ich es dann immer noch über "Design > Theme-Optionen" im Admin-Panel meines Themes anpassen, z. B. Schriftgröße, Hintergrundfarben usw., oder muss ich den Code-Weg gehen?
Wenn ich das Child-Theme aktiviert habe und den Tab 'Design' verwende, um das Styling zu aktualisieren, anstatt Code zu verwenden, aktualisiere ich dann im Wesentlichen immer noch das Parent-Theme, weil sich die zugehörigen Dateien nicht im Ordner des Child-Themes befinden?
WPBeginner Support
Ja, Ihr Child-Theme wird all diese Optionen erben.
Admin
Amanda
Danke für Ihre Antwort.
Wenn ich also das Child-Theme aktiviere und die Einstellungen im Tab „Darstellung“ meines Admin-Panels verwende, um das Styling zu ändern (anstatt CSS-Code zu schreiben), werden meine Änderungen nicht überschrieben, wenn ich ein Theme- oder WordPress-Update für das Parent-Theme durchführe?
Muss ich die Stylesheet-, Header-, Footer-Dateien usw. immer noch in den Child Theme-Ordner kopieren, damit das obige Szenario funktioniert?
Laura
Ich habe diese (und andere) Schritte befolgt, um ein Child-Theme basierend auf twentytwelve zu erstellen. Das Problem, auf das ich stoße, ist, dass WordPress anscheinend nur einige der CSS-Änderungen, die ich am Original-Theme vorgenommen habe, ignoriert und das macht mich wahnsinnig. Zum Beispiel habe ich erfolgreich die Hintergrundfarbe des Menüs geändert, aber es lässt mich einfach nicht die Textfarben von irgendetwas ändern. Ich habe Ihren Ansatz verwendet, es im Chrome-Code-Inspektor zu bearbeiten (was großartig funktionierte, die Farbe wurde geändert, was darauf hindeutet, dass mein Code korrekt war) und den geänderten Code in die style.css des Child-Themes einzufügen, aber er scheint überhaupt nicht übernommen zu werden. Ich weiß nicht, was ich dagegen tun soll, jede Einsicht wäre sehr willkommen!
Boyet
Vielen Dank für dieses Tutorial. Ich habe keine Probleme damit, die Stylesheet-, Header- und Footer-Dateien meines Child-Themes zu bearbeiten.
Meine Frage ist, was mache ich, wenn ich etwas in einer Datei ändern möchte, die sich im Ordner meines Mutter-Themes befindet, wie z. B.: public_html/wp-content/themes/shopera/woocommerce?
Muss ich im Child Theme den gleichen Pfad erstellen?
Danke im Voraus…
WPBeginner Support
Ja.
Admin
Tony Arnold
Sehr hilfreich und weitgehend verstanden und umgesetzt.
Ich versuche, mein Header-Bild über die gesamte Breite zu machen. Mein Theme erlaubt dies standardmäßig nicht, also muss ich die Datei ändern?
Danke
Sohail Farooq
Liebe diesen Artikel, ich habe es versucht und es hat sofort funktioniert.
Xander
Hallo!
Ich scheine ein wenig festzustecken. Ich habe bereits einige Änderungen an einigen .php-Dateien (z. B. header.php, footer.php usw.) meines übergeordneten Themes vorgenommen, ohne ein Child-Theme installiert zu haben.
Jetzt möchte ich ein Child-Theme erstellen, da Updates des übergeordneten Themes eingetroffen sind. Was soll ich mit all diesen bereits geänderten Dateien tun? Soll ich sie in das Verzeichnis des Child-Themes kopieren? Welche Ordner benötige ich dafür? Sollte ich die gleichen Ordner für das Child-Theme erstellen, die das übergeordnete Theme hat?
Danke,
WPBeginner Support
Sie benötigen nicht alle Ordner Ihres Parent-Themes. Sie müssen nur die Dateien neu erstellen, an denen Sie Änderungen vorgenommen haben. Wir haben ein Tutorial, wie Sie Themes aktualisieren, ohne Änderungen zu verlieren. Es enthält einen Abschnitt, in dem Sie herausfinden können, welche Dateien Sie in Ihrem Theme geändert haben und welche Änderungen Sie daran vorgenommen haben.
Laden Sie eine frische Kopie Ihres Parent-Themes auf Ihren Computer herunter. Laden Sie das alte Theme auf Ihren Computer herunter und laden Sie dann die frische Kopie hoch. Danach erstellen Sie ein neues Child-Theme. Kopieren Sie die Dateien, in denen Sie Änderungen vorgenommen haben, vom frischen Theme in Ihr Child-Theme. Kopieren Sie die Änderungen, die Sie in den alten Theme-Dateien vorgenommen haben, in die Dateien Ihres neuen Child-Themes.
Es würde einige Fehlersuche erfordern, bis Sie es richtig hinbekommen. Daher empfehlen wir Ihnen dringend, zuerst ein Backup Ihrer Website zu erstellen. Testen Sie Ihre Änderungen, wenn möglich, zuerst auf einer lokalen WordPress-Installation.
Admin
Xander
Danke. Könnten Sie mir bitte einen Link zu dem erwähnten Tutorial geben?
Es gibt ein weiteres Hindernis – ich habe die functions.php-Datei geändert, wie kann ich beide im Eltern- und Child-Theme abgleichen?