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.
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?
Chris
Kann ich mein neues Child Theme auf einer anderen Website laden und installieren? Wenn ja, wie?
Danke!
WPBeginner Support
Laden Sie Ihr untergeordnetes Theme auf Ihren Computer herunter. Erstellen Sie eine ZIP-Datei, die den Theme-Ordner enthält. Gehen Sie zum Admin-Bereich einer anderen Website und besuchen Sie dann Darstellung » Themes. Klicken Sie auf die Schaltfläche "Neues Theme hinzufügen" und dann auf die Schaltfläche "Hochladen". Laden Sie die zuvor erstellte ZIP-Datei hoch. WordPress wird Ihr untergeordnetes Theme entpacken und installieren.
Sie müssen auch das Parent-Theme installieren.
Admin
Kzain
das ist super hilfreich, ich habe es nicht mit einem Child-Theme versucht, wusste nicht, dass dies heruntergeladen werden kann, dachte immer, Programmierung und PHP wären der Weg. Danke für diese schnelle Anleitung hier.
Daniel Garneau
Hallo,
Ich finde dieses Tutorial sehr nützlich, um zu lernen, wie man ein Child-Theme erstellt. Aber dabei habe ich folgende Anpassungen vorgenommen. Im Child-Theme-Verzeichnis müssen zwei Dateien vorhanden sein. Sie müssen style.css und functions.php heißen.
style.css muss mindestens Folgendes enthalten (vorausgesetzt, man verwendet das TwentyTen-Theme): @import url("../twentyten/style.css"); Template: twentyten
Als ich das Tutorial am 12.05.2015 konsultierte, stand die Zeile „template: twentyten“ im Kommentarblock. Es muss ein Befehl sein, der von WordPress gelesen werden kann.
Außerdem muss es eine functions.php-Datei geben, und diese muss mindestens die folgende Befehlszeile enthalten:
<?php
Ihr Tutorial hat mir zusammen mit dem WP Codex geholfen, mein erstes Child-Theme zu erstellen. Vielen Dank.
Maria
Kann ich mit Sicherheit sagen, dass die Änderungen, die ich im Feld „Custom CSS“ vorgenommen habe, in die style.css meines Child-Themes eingefügt werden können?
WPBeginner Support
Ja.
Admin
Louise Mason
Ich scheitere schon am ersten Hindernis – wie finde ich /wp-content/themes/? Wo ist eigentlich der WordPress-Installationsordner? Im Video sehe ich nicht, worauf Sie klicken oder wie Sie es öffnen, der Dateimanager erscheint einfach wie von Zauberhand!
WPBeginner Support
Sie können auf den Dateimanager zugreifen, indem Sie Ihr Webhosting-Dashboard besuchen. Melden Sie sich bei Ihrem Webhosting-Konto an und suchen Sie den Dateimanager.
Admin
Sonam
Wenn ich den Dateimanager meines Webhosting-Kontos auswähle, erhalte ich vier Optionen:
1) Home-Verzeichnis
2) Web-Root
3) Public FTP-Root
4) Dokumenten-Root
Welches soll ich zum Bearbeiten auswählen?
Kylee
Hallo – ich wähle Home Directory. Das bringt mich zu allen Dateien. Ich klicke auf Public HTML auf der linken Seite, um auf meine verschiedenen Websites zuzugreifen. Sie haben es wahrscheinlich irgendwann herausgefunden, aber nur für den Fall, dass Sie es nicht getan haben...
Viju
Hallo,
Ich verwende ein Child-Theme für meine Website. Was ich Schwierigkeiten habe, ist, meiner style.css des Child-Themes eine Version zu geben. Wordpress scheint die Standard-Wordpress-Version am Ende der Datei anzuhängen, wie z. B. /style.css?ver=4.1.1
Ich erhöhe den Wert von 'version' in der style.css meines Kindes, aber WordPress erkennt ihn nicht.
Aus diesem Grund werden meine Änderungen am Child-Theme nicht bei Benutzern reflektiert, die die gecachte Version der CSS haben.
Können Sie mir raten, wie ich damit umgehen soll?
Stephen James
Am Anfang bin ich verloren. Woher haben Sie den style.css-Code am Anfang? Sie sagen uns nur, wir sollen ihn einfügen, aber nicht, woher er stammt. Sicherlich, wenn ich ein anderes Theme verwende, wird es ein anderer Code sein.
Vatsal Savani
Hallo Stephen,
Der Code am Anfang ist wie allgemeine Informationen für das Theme, er ist für jedes Theme fast gleich, Sie müssen nur den Inhalt nach dem Doppelpunkt ändern, d.h. Wenn Ihr Theme-Name stephenstheme wäre, könnten Sie den Code am Anfang so haben:
Theme Name: stephenstheme
Theme URI: http://www.yourwebsite.com
Beschreibung: Ein Twenty Thirteen Child-Theme von stephen
Autor: Stephen James
Author URI: http://www.yourwebsite.com
Template: twentythirteen
Version: x.x.x
Ich hoffe, Sie verstehen, was ich meine, viel Glück!
Ariz Khan
Hallo WPB, ich habe es gelöst, siehe meine vorherige E-Mail. Raten Sie mal – es war ein Syntaxfehler meinerseits – ich habe Style.css hochgeladen, das ich wie erforderlich in style.css umbenannt habe, und siehe da, es funktionierte. Danke.
WPBeginner-Mitarbeiter
Haben Sie die Vorlagendatei als style.css gespeichert?
ada
Ich hatte auch das gleiche Problem. Ich habe die Zahlen in Notepad gelöscht und konnte die Vorlage sehen.
Kim
Ich versuche, ein Child-Theme für Twenty Thirteen gemäß Ihren Anweisungen oben zu erstellen. Ich habe den Ordner erstellt und den Code, den Sie oben aufgelistet haben, in eine Textdatei kopiert. Ich habe den Code im neuen Ordner gespeichert. Ich kann das Child-Theme nicht aktivieren, da die „Vorlage fehlt“. Hilfe!?
canciller
Die Verwendung von @import für die „style.css“ in einem Child-Theme wird vom WordPress Codex nicht empfohlen.
http://codex.wordpress.org/Child_Themes
ist es sicher zu verwenden? Was sind die Nachteile der Verwendung von @import?
Pat
Der Nachteil der Verwendung von @import anstelle von wp_enqueue_script(), wie im Codex empfohlen, ist eine langsamere Seitenladezeit. Ein Mitarbeiter von Automattic gibt eine Erklärung unter diesem Link https://kovshenin.com/2014/child-themes-import/
Vatsal Savani
Kurz gesagt, es wird die Leistung Ihrer Website verringern und sie auch langsamer machen.
Praveen Kumar
Was ist mit dem Erstellen von Child-Themes auf dem Genesis Framework?