So erstellen Sie ein WordPress-Child-Theme

Normalerweise ist es fast unmöglich, das perfekte Thema zu finden; es gibt immer einige änderungen, die vorgenommen werden müssen. Warum also nicht einfach ein schönes WordPress-Standardthema wie Twenty Fifteen nehmen und es zu Ihrem eigenen machen, damit es genau so aussieht und funktioniert, wie Sie es möchten? Das Erstellen eines untergeordneten Themas wird Ihnen später viel Zeit und Kopfschmerzen ersparen (vertrauen Sie mir).

Ich kann aus eigener Erfahrung sprechen. Ich habe eine WordPress-Site „geerbt“, bei der der Entwickler gerade das Parent-Theme zerhackt hatte, und ich erinnere mich noch, wie frustrierend es war, dass ich das Theme nicht wirklich aktualisieren konnte, aus Angst, dass es Anpassungen außer Kraft setzen könnte, die der Site ihre Funktionalität verliehen. Ich wusste nicht, was ursprünglicher Code und was benutzerdefiniert war, also saß er da, ohne Möglichkeit für Updates.

Die Geschichte hat jedoch ein Happy End. Ich war damals neu bei WordPress, also hat es mich früh gelehrt, dass das Ändern eines übergeordneten Themas keine gute Idee ist. Als die Website schließlich neu gestaltet wurde, bestand die erste Aufgabe darin, die Anpassungen zu übernehmen und sie in ein untergeordnetes Thema zu packen.

Ein Child-Theme ermöglicht es Ihnen, an einem separaten Ort zu arbeiten, ohne dass Ihre Arbeit durch ein zukünftiges Parent-Theme-Update überschrieben wird. Technisch gesehen erstellen Sie beim Erstellen eines untergeordneten Designs einen separaten Satz von Dateien, mit denen Sie das Design anpassen können, ohne das ursprüngliche übergeordnete Design zu beeinträchtigen. Wenn Sie Änderungen an den Dateien eines übergeordneten Designs vornehmen, werden diese Änderungen überschrieben, wenn Sie das Design das nächste Mal aktualisieren. Dies ist eine große Sache, da Updates Funktionsänderungen, Fehlerbehebungen und wichtige Sicherheitsmaßnahmen beinhalten können. Es ist wichtig, das übergeordnete Design auf dem neuesten Stand zu halten und ein untergeordnetes Design für alle Anpassungen zu verwenden.

Grundlagen des Child-Themes

Untergeordnete Themen sind separate Themen, die Sie erstellen und die sich für ihre grundlegende Funktionalität auf ein übergeordnetes Thema stützen. Wenn Sie ein untergeordnetes Thema verwenden, weiß WordPress, dass es darauf verweisen und nach allen enthaltenen Funktionen suchen muss. Das ist großartig, weil es Ihnen ermöglicht, nur die Teile des übergeordneten Designs zu ändern, die Sie ändern müssen, was dies zu einer sehr effizienten Möglichkeit macht, Anpassungen zu Ihrer WordPress-Site hinzuzufügen.

Um ein wenig tiefer zu graben, hier ist, wie untergeordnete Themen auf Dateiebene funktionieren. WordPress prüft, ob eine benötigte Datei im Child-Theme enthalten ist. Wenn es enthalten ist, wird diese Child-Theme-Datei geladen. Wenn im Child-Theme keine vorhanden ist, wird die Datei im Parent-Theme geladen. Die einzige Ausnahme hiervon ist die Datei functions.php, in der sowohl die übergeordnete als auch die untergeordnete Version geladen werden. Typischerweise enthält die Datei functions.php wichtige Informationen. Wenn WordPress nur die Child-Theme-Version geladen hat (es sei denn, Sie haben alles kopiert), würde die Seite nicht richtig funktionieren. Glücklicherweise lädt WordPress beide Dateien, sodass Sie sich keine Gedanken darüber machen müssen, die gesamte Datei functions.php in Ihr untergeordnetes Design zu kopieren.

Denken Sie daran, dass Sie Ihr untergeordnetes Thema jederzeit deaktivieren und bei Bedarf auf das Original zurückgreifen können. Es ist jedoch eine Einbahnstraße; Sie können das übergeordnete Thema nicht ausschalten und sich auf das untergeordnete Thema verlassen.

Wenn du Anpassungen zu einem WordPress-Theme hinzufügst, ist es am besten, ein untergeordnetes Thema zu verwenden. Sind Sie bereit, Ihre eigenen zu erstellen? Jetzt gehen wir den Prozess Schritt für Schritt durch.

Erstellen eines Child-Themes

Es ist nicht so komplex, wie es sich anhört, eine zu erstellen. Eigentlich brauchen Sie nur zwei Dateien: eine style.css und eine functions.php -Datei. Die meisten untergeordneten Themen haben mehr als das, aber technisch gesehen sind dies die einzigen erforderlichen zwei.

Um ein untergeordnetes Design zu erstellen, muss WordPress zusammen mit einem übergeordneten Design installiert sein, das Sie verwenden möchten.

Erstellen Sie ein Themenverzeichnis

Gehen Sie zunächst in Ihr Themenverzeichnis und erstellen Sie einen Ordner für Ihr neues Thema. Geben Sie ihm einen erkennbaren Namen. Für dieses Beispiel nenne ich mein Theme child-example , damit es leicht zu finden ist.

Erstellen Sie das Child-Theme-Stylesheet

Der nächste, sehr wichtige Schritt ist das Erstellen des Stylesheets des Child-Themes. Erstellen Sie eine style.css -Datei. Denken Sie daran, dass es style.css muss, damit die Dinge richtig funktionieren.

Als nächstes müssen Sie einige Informationen zu Ihrem Thema angeben.

Kopieren Sie dies und fügen Sie es in die style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Das mag nach viel aussehen, aber es gibt wirklich nur zwei, die notwendig sind, Theme Name und Template . Der Theme Name teilt WordPress den Namen des Child-Themes mit. Das Template teilt WordPress mit, welches Theme es als übergeordnetes Theme betrachten soll, was sehr wichtig ist.

Die meisten anderen sind ziemlich selbsterklärend, aber es gibt ein paar, die vielleicht etwas mehr Klärung benötigen. Die Text Domain und Tags könnten etwas verwirrend sein. Die Text Domain wird zum Übersetzen von Zeichenfolgen für Internationalisierungszwecke verwendet. Dies ist einzigartig für Ihr Thema und sollte immer dann verwendet werden, wenn Sie Übersetzungsfunktionen verwenden. Viele weitere Informationen sind im Codex und im Thema I18n für WordPress-Entwickler zu finden. Der Abschnitt „ Tags “ ist eine Liste von Tags, die spezifisch für das WordPress-Thema sind. Für dieses Beispiel habe ich mir die übergeordnete style.css von Twenty Fifteen angesehen, die Tags von dort genommen und sie in das untergeordnete Thema eingefügt.

Verwenden Sie übergeordnete Stile

Denken Sie daran, wie WordPress zuerst nach den Child-Theme-Dateien sucht? Im Moment funktioniert das untergeordnete Thema, aber es sieht nicht sehr ausgefeilt aus, weil Sie noch kein Styling vorgenommen haben. Wenn Sie es aktivieren und die Seite neu laden, sieht es etwas chaotisch aus. Es wird wahrscheinlich ungefähr so ​​​​aussehen:

Lassen Sie uns dies beheben, damit es auf das übergeordnete Thema zurückgreift und zumindest ein gewisses Styling angewendet wird. Sie werden Ihr untergeordnetes Design weiterhin für Ihr benutzerdefiniertes Design verwenden, aber lassen Sie uns zuerst das übergeordnete Design anzeigen.

Um sicherzustellen, dass Sie das Stylesheet der übergeordneten Datei laden, müssen wir es in das untergeordnete Design einreihen. Sie benötigen eine functions.php -Datei im Child-Theme, um das folgende Snippet einzufügen.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Eine CSS-Anpassung vornehmen

Jetzt, da die übergeordneten Stile angezeigt werden, ändern wir einige der CSS für die Anpassung Ihres untergeordneten Designs. In diesem Beispiel ist das Gestalten eines Hintergrundelements für Seiteninhalte eine gute Möglichkeit, das untergeordnete Thema in Aktion zu sehen. Es wurde im Parent-Theme-CSS weiß gestaltet, aber ändern wir es in Ihrem Child-Theme in Blau. Denken Sie daran, dass die übergeordneten Stile zuerst geladen werden und Ihre Anpassungen danach geladen werden, sodass wir diese sehen werden.

Wenn Sie ein Chrome-Benutzer sind, sind die Entwicklertools sehr hilfreich, um den Stil zu sehen und im Browser zu experimentieren. Gehen Sie zu Ansicht > Entwickler > Quelle anzeigen und wählen Sie Seitenelemente aus. Stile werden auf der rechten Seite angezeigt. Ich habe den Artikel untersucht, der eine .hentry -Klasse mit weißem Hintergrund hatte. Ich habe einen Hex-Wert eingefügt, um es zuerst im Browser zu testen.

Um diese Änderung vorzunehmen, öffnen Sie die CSS-Datei im untergeordneten Design und fügen Sie die CSS-Informationen hinzu.

Wie Sie sehen können, können im Child-Theme ganz einfach Stiländerungen vorgenommen werden.

Ändern der Funktionalität Ihres untergeordneten Designs

Das Anpassen des Stylings ist ziemlich einfach, aber was ist mit anderen Dingen wie Kopfzeile, Fußzeile, Seitenleiste usw.? Angenommen, es sind einige Änderungen in der Fußzeile vorzunehmen. Kopieren Sie die Fußzeile aus dem übergeordneten Thema und fügen Sie sie in das untergeordnete Thema ein. Die Datei footer.php kann in einem Texteditor Ihrer Wahl geöffnet und modifiziert werden. Ich habe mich entschieden, die Zeile „Proudly powered by WordPress“ zu entfernen, also habe ich sie aus der Datei in meinem Child-Theme gelöscht. Dies ist jetzt die Datei, die WordPress zuerst lädt, sodass diese Textzeile nicht angezeigt wird.

Das Erstellen eines untergeordneten Designs ist eine gute Angewohnheit, wenn Sie WordPress-Designs erstellen. Mit nur wenigen einfachen Schritten sind sie einfach zu erstellen und zu pflegen. Anpassungen von übergeordneten Themen getrennt zu halten, ist sowohl für Organisationszwecke als auch für die Aktualisierung von allem gut, was später viel Kopfzerbrechen ersparen wird.