Der ultimative Leitfaden für untergeordnete WordPress-Themes

Haben Sie jemals ein nahezu perfektes WordPress-Theme für Ihre Website gefunden, sich aber wegen eines winzigen, nervenaufreibenden Designelements, das Sie nicht übersehen konnten, dagegen entschieden? Vielleicht ist es der Schriftstil, die Farbpalette oder die Platzierung von Designelementen?

Der WordPress-Themenmarkt ist mit so vielen großartigen Themen gesättigt, sowohl kostenlos als auch Premium, aber wenn Sie keinen Entwickler einstellen, um ein maßgeschneidertes Thema für Ihre Website zu erstellen, besteht kaum eine Chance, dass Sie eines finden, das bis zum letzten Pixel perfekt ist.

Untergeordnete Themes von WordPress ermöglichen es Webmastern, die Dateien eines Themes zu ändern, während die Kernfunktionalität beibehalten wird, ohne zu riskieren, dass die Änderungen bei jeder Aktualisierung des Themes verloren gehen. Sie geben Ihnen die Möglichkeit, das Erscheinungsbild eines Themas von etwas so Kleinem wie dem Aufruf zum Handeln einer Schaltfläche bis hin zur vollständigen Änderung jedes Designelements zu ändern.

Dieser Artikel behandelt alles, was Sie über untergeordnete Themen wissen müssen, von ihrer Bedeutung bis hin zu ihrer Bedeutung. Wir schließen mit einem Tutorial zur Verwendung von untergeordneten Themen auf Ihrer WordPress-Site ab – der richtige Weg.

Klingt gut? Lass uns anfangen!

WordPress Child Themes: Die Grundlagen

Untergeordnete Themen sind separate Themen, die die Funktionalität aktiv von ihren übergeordneten Themen erben. Die Funktionalität eines untergeordneten Designs überschreibt die des übergeordneten Designs, was bedeutet, dass die Funktionalität des untergeordneten Designs auf Ihre Website angewendet wird. Sobald Sie ein untergeordnetes Thema aktivieren, prüft WordPress, ob es über bestimmte Funktionen verfügt. Wenn die Funktionalität jedoch nicht vorhanden ist, wird in den übergeordneten Dateien nachgesehen und die dort codierte verwendet.

In einfachem Englisch sind untergeordnete Themen doppelte Themendateien, und jedes Mal, wenn Sie das Bedürfnis verspüren, Designaspekte oder einige Funktionen zu ändern, bearbeiten Sie sie in den Dateien des untergeordneten Themas. Dies ist eine großartige Funktion, da es Webmastern ermöglicht, Änderungen am Design vorzunehmen, ohne die anhaltende Angst zu haben, die Originaldateien zu beschädigen.

Die meisten WordPress-Themes werden heutzutage mit untergeordneten Themen (oder Variationen ihrer untergeordneten Themen) direkt aus der Box geliefert.

Warum sollten Sie Child-Themes verwenden?

Das Vornehmen von Modifikationen und Änderungen an Ihrem Theme über Child-Themes ist eine weithin akzeptierte (und empfohlene) Best Practice. Stellen Sie sich das so vor: Wenn Sie es beim ersten Mal vermasseln, können Sie es immer noch einmal versuchen. Abgesehen von diesem herausragenden Vorteil sind untergeordnete Themen für die Wartung und Entwicklung Ihrer WordPress-Site wichtig.

Eliminieren Sie das Risiko, Änderungen zu verlieren

Wenn Sie Änderungen an Ihrem übergeordneten Design (den ursprünglichen Designdateien) vornehmen, gehen die Änderungen verloren, wenn Sie das Design aktualisieren. Dadurch befinden Sie sich in einer Art Sackgasse; Wenn Sie das Design aktualisieren, gehen alle Änderungen verloren, aber wenn Sie das Design nicht aktualisieren, werden Fehler auf Ihrer Website vorhanden sein, die sich negativ auf sie auswirken könnten.

Sie können den mit den Änderungen verknüpften Code kopieren und in Ihr übergeordnetes Design einfügen, sobald die Aktualisierung abgeschlossen ist. Obwohl dies durchaus möglich ist, warum sollten Sie Zeit damit verbringen, die von Ihnen vorgenommenen Änderungen zu finden und sie jedes Mal, wenn Sie Ihr Design aktualisieren, in die aktualisierten Designdateien zu kopieren und einzufügen? Es ist ein einfacher, aber fehlbarer Prozess.

Hier wird erstmals die Bedeutung von untergeordneten Themen erkannt. Mithilfe von untergeordneten Designs können Sie alle Änderungen beibehalten und das Design Ihrer Website sicher aktualisieren.

Pflegen Sie die Code-Organisation

Ein WordPress-Theme besteht normalerweise aus einigen Tausend Codezeilen und mehreren verschiedenen Dateien – HTML, CSS, PHP, JavaScript und mehr. Aus diesem Grund sind kleine Änderungen, die hier und da vorgenommen werden, schwer nachzuvollziehen. Wenn es an der Zeit ist, zurückzugehen und das Design zu bearbeiten oder unvorhergesehene Fehler zu beheben, wird es sich als ziemlich kostspielig erweisen (sowohl Zeit als auch Budget).

Wie oben besprochen, werden untergeordnete Themen aktiv von übergeordneten Themen geerbt. Alle Änderungen, die Sie am Child-Theme vornehmen, bleiben dort (was in Child-Themes passiert, bleiben in Child-Themes!) und sind leichter nachzuverfolgen, da es (unter den aggressivsten Umständen) nur ein paar hundert Zeilen Code enthält, im Gegensatz zu a paar tausend.

Wie Sie wahrscheinlich bereits feststellen können, gibt es keine Nachteile bei der Verwendung von untergeordneten Themen. Tatsächlich schützen sie Ihre Website vor versehentlichen Fehlern.

So erstellen Sie ein Child-Theme in WordPress

Die meisten Themes kommen mit Child-Themes, aber wenn Sie eines finden, das Ihnen gefällt, ist es nicht schwierig, selbst ein Child-Theme zu erstellen. Ich werde das Tutorial demonstrieren, indem ich ein untergeordnetes Design für unser Sparkling-Design erstelle.

Schritt 1: Erstellen Sie ein Verzeichnis für das untergeordnete Thema in Ihrer WordPress-Installation.

1. Navigieren Sie zum Themenverzeichnis Ihrer WordPress-Site ( /wp-content/themes ).
2. Erstellen Sie einen neuen Ordner und nennen Sie ihn sparkly-child . Es hat sich bewährt, Ihrem untergeordneten Design denselben Namen wie dem übergeordneten Design zu geben, wobei am Ende -child angehängt wird.

Wir werden alle Dateien des untergeordneten Designs zu diesem Ordner hinzufügen. Die einzige Datei, die ein Child-Theme benötigt, um richtig zu funktionieren, ist die style.css -Datei.

Schritt 2: Erstellen Sie eine style.css-Datei für Ihr neues Child-Theme.

1. Navigieren Sie zum Verzeichnis des untergeordneten Designs, das in Schritt 1 erstellt wurde, dh /wp-content/themes/sparkling-child .
2. Erstellen Sie eine neue .css -Datei im Verzeichnis und nennen Sie sie style.css .
3. Kopieren Sie den folgenden Code und fügen Sie ihn in die neue style.css -Datei ein:

Im oben angegebenen Code beginnen die wichtigsten Zeilen mit Theme Name , Template und @import . Du musst diese Zeilen korrekt ausfüllen, wenn du ein Child-Theme für ein anderes Parent-Theme erstellst. Die @import -Zeile stellt sicher, dass Sie die CSS-Regeln des übergeordneten Designs nicht von Grund auf neu schreiben müssen. Ohne die @import -Zeile wird auf der neuen Website nur der Inhalt geladen, kein Styling.

Wenn Ihr übergeordnetes Design mehrere Stylesheets hat, überspringen Sie diesen Schritt. In den folgenden Schritten zeigen wir Ihnen, wie Sie mehrere Stylesheets mithilfe einer nativen WordPress-Funktion importieren.

Schritt 3: Erstellen Sie die Datei functions.php (optional).

Die Datei functions.php ermöglicht es Webentwicklern, ihren WordPress-Websites Funktionen hinzuzufügen, indem sie native WordPress-Funktionen und PHP-Code verwenden.

1. Navigieren Sie zum Ordner Ihres untergeordneten Themas, dh sparking-child .
2. Erstellen Sie eine .php -Datei und nennen Sie sie functions.php .
3. Fügen Sie der Datei functions.php den folgenden Code hinzu:

Es ist wichtig zu beachten, dass ein Child-Theme keine functions.php -Datei benötigt, um zu funktionieren. Tatsächlich sollten Sie diese Datei nur hinzufügen, wenn Sie beabsichtigen, die Funktionalität des übergeordneten Designs zu ändern. In den meisten Fällen reicht ein Stylesheet aus, aber wenn Ihr Parent-Theme mehrere Stylesheets hat, müssen Sie eine functions.php -Datei erstellen.

Schritt 4: Importieren Sie mehrere Stylesheets (optional).

Wenn beispielsweise das von Ihnen ausgewählte Parent-Theme mehr als ein Stylesheet enthält, wird der Import in Ihr Child-Theme @import Ihre Website um ein paar Sekunden verlangsamen – was nicht gut ist. Sie möchten die Seitenladezeit Ihrer Website nicht erhöhen, wenn dies mit ein paar Zeilen Code vermieden werden kann.

1. Navigieren Sie zum Verzeichnis Ihres untergeordneten Designs und öffnen Sie die Datei functions.php in einem Texteditor.
2. Fügen Sie der Datei functions.php unter dem öffnenden Tag <?php die folgenden Codezeilen hinzu:

Die im obigen Code verwendete Funktion wp_enqueue_style() importiert mehrere Stylesheets in Ihr Child-Theme, ohne Ihre Website zu verlangsamen.

Hinweis: Best Practices zum Erstellen von Child-Themes legen nahe, dass Sie sie immer mit dem oben angegebenen Code importieren sollten, unabhängig davon, wie viele Stylesheets Ihr Parent-Theme hat.

Schritt 5: Laden Sie das Child-Theme hoch.

Nachdem Sie das untergeordnete Thema nun erfolgreich erstellt haben, ist es an der Zeit, es auf Ihre WordPress-Website hochzuladen und zu aktivieren.

1. Komprimieren Sie das Child-Theme-Verzeichnis in eine .zip -Datei.
2. Melden Sie sich bei Ihrem WordPress-Admin-Panel an und navigieren Sie zu Darstellung > Themen .
3. Klicken Sie im folgenden Bildschirm auf die Schaltfläche Neu hinzufügen.

Sie können das Child-Theme auch über Ihren FTP-Client hochladen, indem Sie die .zip -Datei direkt kopieren und in das Themenverzeichnis einfügen. Wenn Sie ein untergeordnetes Design für ein anderes Design erstellen, nehmen Sie die erforderlichen Änderungen am oben angegebenen Code vor.

Dieses Tutorial soll nur zeigen, wie ein untergeordnetes Thema erstellt wird. Wir haben ein Child-Theme für Sparkling erstellt, das Sie direkt herunterladen können, wenn Sie lieber keine Zeit mit der Erstellung Ihres eigenen verbringen möchten.

Anpassen Ihres Child-Themes

Angenommen, alles lief wie geplant, wenn Sie das Child-Theme aktivieren, sollte Ihre Website genauso aussehen wie bei der Aktivierung des Parent-Themes. Aber halt durch! Ist es nicht der springende Punkt, ein untergeordnetes Thema zu erstellen, um Ihre Website anders aussehen zu lassen?

In diesem Abschnitt zeigen wir Ihnen, wie Sie mit der Anpassung des untergeordneten Designs beginnen können, um Änderungen vorzunehmen.

Anwenden von benutzerdefinierten Stilen

Da die erste Datei (und die obligatorische Datei), die wir erstellt haben, style.css war, macht es nur Sinn, damit zu beginnen, benutzerdefinierte Stile zum untergeordneten Design hinzuzufügen, das sie verwendet. Indem Sie dem Stylesheet benutzerdefinierten CSS-Code hinzufügen, können Sie das Stylesheet des übergeordneten Designs überschreiben.

Mit CSS können Sie jeden Design- und Stilaspekt des aktivierten Designs ändern, von Farben und Schaltflächen bis hin zu Abmessungen und Schriftstilen. Webentwickler mit einem echten Talent für CSS modifizieren das gesamte Layout des Child-Themes, um es einzigartig zu machen.

Alles, was Sie tun müssen, ist, benutzerdefinierten CSS-Code am Ende der style.css -Datei Ihres untergeordneten Designs hinzuzufügen, und Sie können loslegen. Diejenigen unter Ihnen, die nicht jedes Mal auf den FTP-Client ihrer Website zugreifen möchten, wenn eine einfache Änderung vorgenommen werden muss, können zum Standard-Editor von WordPress navigieren ( Darstellung > Editor ) und CSS-Code direkt von dort hinzufügen. Navigieren Sie zu Darstellung > Editor und fügen Sie CSS-Code direkt von dort aus ein.

Alles, was Sie tun müssen, ist, benutzerdefinierten CSS-Code am Ende der Datei Ihres untergeordneten Themas hinzuzufügen, und Sie können loslegen.

Alternative Theme-Modifikationstechniken

Das Hinzufügen von CSS-Code zur style.css -Datei ist der einfachste Weg, um Änderungen im Child-Theme vorzunehmen. Wenn Sie jedoch die Dinge auf die nächste Ebene bringen und dem untergeordneten Thema vielleicht einige neue, benutzerdefinierte Funktionen hinzufügen möchten, dann wird es dort ernst. Es gibt verschiedene Arten von Änderungen, die Sie vornehmen können (abgesehen von der Änderung der Designelemente), wie zum Beispiel:

• Fügen Sie der Datei functions.php neue Funktionen hinzu. Wir haben bereits die Datei functions.php für Ihr untergeordnetes Thema erstellt, sodass Sie jetzt nur noch einige benutzerdefinierte Funktionen hinzufügen müssen, je nachdem, welche Funktionalität Sie erreichen möchten. Sie können in PHP codieren oder native WordPress-Funktionen verwenden.
• Vorlagendateien bearbeiten. Wenn style.css und functions.php einfach nicht ausreichen und Sie das Design noch ändern müssen, können Sie die Vorlagendateien aus dem übergeordneten Design kopieren und einfügen und entsprechend bearbeiten.
• Fügen Sie neue Vorlagendateien hinzu. Wenn Sie Vorlagen gefunden haben, die Ihnen an anderer Stelle gefallen (nicht im Verzeichnis des übergeordneten Themas) oder wenn Sie Ihre eigenen Vorlagen erstellen möchten, können Sie sie direkt zum untergeordneten Thema hinzufügen und von dort aus fortfahren.

Sie können sicher sein, dass Ihre WordPress-Website unabhängig von der/den Methode(n), die Sie anwenden, um Änderungen an Ihrem aktivierten Design vorzunehmen, vor schädlichen, unbeabsichtigten Fehlern geschützt ist. Wenn vielleicht etwas mit dem Code schief geht, wissen Sie genau, wo der Fehler aufgetreten ist, und können ihn korrigieren. (Tipp: Es befindet sich normalerweise in den letzten Zeilen, die Sie hinzugefügt haben!)

Eines der besten Dinge an untergeordneten Themen ist, dass sie es Benutzern ermöglichen, das übergeordnete Thema vollständig an die Marke ihrer Website anzupassen, was sowohl für neue als auch für etablierte Unternehmen gleichermaßen nützlich ist. Und wenn Sie Ihre Website später basierend auf demselben Parent-Theme oder einem neuen Parent-Theme komplett neu gestalten möchten, können Sie jederzeit ein neues Child-Theme erstellen und von dort aus weitermachen!

Verpacken

Untergeordnete Themen sind die empfohlene Methode, um Änderungen an einem WordPress-Theme vorzunehmen. Sie bewahren Benutzer davor, potenziell schädliche Fehler in ihren ursprünglichen Designdateien zu machen, und riskieren, die Änderungen bei jeder Aktualisierung des Designs zu verlieren.

Wir haben alles behandelt, was Sie über untergeordnete Themen in WordPress wissen müssen, besprochen, warum sie so wichtig sind, und Sie durch ein ausführliches Tutorial geführt, wie Sie Ihr ganz eigenes untergeordnetes Thema von Grund auf neu erstellen können. Um Ihnen den Einstieg in das Vornehmen von Änderungen zu erleichtern, schlossen wir mit einem kurzen Abschnitt darüber, wie Sie mit der Anpassung des untergeordneten Themas beginnen können.

Stimmen Sie zu, dass alle Design- und Funktionsänderungen über untergeordnete Themen vorgenommen werden sollten? Konnten Sie ein untergeordnetes Thema erstellen und erfolgreich auf Ihrer WordPress-Seite aktivieren? Wir würden uns freuen, von Ihren Erfahrungen zu hören, also lassen Sie es uns wissen, indem Sie unten einen Kommentar abgeben!