So nehmen Sie Anpassungen mit einem untergeordneten Thema vor

Dieses Tutorial ist nicht jedermanns Sache.

Sie müssen kein erfahrener Entwickler sein, um mitzumachen, aber Sie brauchen ein echtes Interesse daran, mehr über WordPress und die Funktionsweise von Themes zu erfahren.

Wenn Sie keine Angst haben, mit ein wenig Code zu arbeiten und sich mit einigen Themendateien die Hände schmutzig zu machen, dann willkommen an Bord!

In dieser Anleitung erfahren Sie, wie Sie Ihre WordPress-Site mit einem Child-Theme nach Herzenslust anpassen können, aber zuerst…

Lassen Sie uns genau erklären, warum Sie dieses seltsame Ding namens "Child Theme" überhaupt verwenden sollten.

Warum ein Child-Theme verwenden?

Sprich mir nach:

Ich schwöre feierlich, niemals eine Theme-Datei zu bearbeiten.

Neue WordPress-Benutzer, die daran interessiert sind, Anpassungen mit Code vorzunehmen, bearbeiten oft direkt die Dateien in ihrem Thema. Das ist ein großes No-Go.

Wieso den?

Ein Grund: Wenn Sie Ihr Theme aktualisieren, überschreibt WordPress Ihr vorhandenes Theme mit der neuen Version des Themes.

Warum ist das wichtig?

Stellen Sie sich vor, Sie verwenden Version 1.04 des Challenger- Designs. Sie haben das Menü in die Datei header.php verschoben und der style.css etwas neues CSS hinzugefügt. Dann kommt Version 1.05 heraus und Sie sehen die Benachrichtigung in Ihrem Dashboard.

Wenn Sie auf v1.05 aktualisieren, werden sowohl die header.php- als auch die style.css-Datei durch die in v1.05 von Challenger ersetzt. Sie enthalten nicht dieselben Änderungen, die Sie vorgenommen haben, sodass Ihre Arbeit verloren geht und es keine Möglichkeit gibt, sie zurückzubekommen. Dies kann ziemlich entmutigend sein, wenn Sie Stunden in Ihre Anpassungen versenkt haben.

Wenn Sie Ihre Anpassungen jedoch in ein untergeordnetes Challenger-Design einfügen, können Sie sicher auf Version 1.05 aktualisieren, ohne Ihre Anpassungen zu verlieren, da sie sicher im untergeordneten Design gespeichert sind.

Dies wird etwas klarer, wenn wir uns einem echten Beispiel zuwenden, also lassen Sie uns jetzt ein untergeordnetes Thema erstellen.

So erstellen Sie ein Child-Theme

Obwohl ich hier nicht im Detail erklären werde, wie der gesamte Code funktioniert, sind dies die grundlegenden Ideen und Schnipsel, die Sie für den Anfang benötigen.

Grundeinstellung

Erstellen Sie zunächst einen leeren Ordner auf Ihrem Desktop. Sie können es beliebig benennen, aber die Standard-Namenskonvention besteht darin, den Namen des Themas in Kleinbuchstaben gefolgt von „Kind” zu verwenden und Leerzeichen durch Bindestriche zu ersetzen.

Ein Child-Theme für das Challenger-Theme hätte beispielsweise den Ordnernamen „Challenger-Child”. Dieser Ordner enthält alle Dateien des Child-Themes.

Sie benötigen nur eine Datei, um ein technisch gültiges Child-Theme, style.css, zu erstellen.

Erstellen Sie die Datei style.css

Erstellen Sie mit dem Code-Editor Ihrer Wahl eine neue Datei im Ordner des untergeordneten Themas und nennen Sie sie style.css.

In der Datei style.css fügen Sie natürlich Ihr gesamtes CSS hinzu, um Ihre Site anzupassen. Damit WordPress Ihr Child-Theme als gültiges Theme erkennt, müssen Sie ganz oben in style.css einen Stylesheet-Header wie diesen hinzufügen:

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Sie können genau diesen Header kopieren und für Ihre eigenen Child-Themes verwenden. Ändern Sie einfach den Namen des Themas mit dem Thema, das Sie anpassen.

Der wichtigste Teil ist der „Template”-Wert, der auf den Namen des Parent-Themes gesetzt werden muss. Insbesondere der Name, der für den Ordner verwendet wird, der das übergeordnete Thema enthält.

Damit können Sie das Child-Theme bereits über das Erscheinungsbild-Menü aktivieren und verwenden. Ihre Website wird jedoch völlig unstyled sein!

Wenn ein Child-Theme aktiviert ist, lädt WordPress nicht mehr die style.css-Datei des Parent-Themes und hängt stattdessen von Ihrem Child-Theme ab.

So laden Sie beide Stylesheets…

Erstellen Sie die Datei functions.php

Erstellen Sie in Ihrem Code-Editor eine zweite Datei im Child-Theme und nennen Sie sie functions.php.

Als nächstes fügen Sie der Datei den folgenden Code hinzu:

<?php 
function my_theme_enqueue_styles() { 
  $parent_style = 'parent-style'; 
  wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Diese Funktion weist WordPress an, die style.css-Datei des Parent-Themes zu laden und danach die style.css-Datei des Child-Themes zu laden. Das Laden des Stylesheets des Child-Themes nach macht es einfacher, die CSS-Selektoren des Parent-Themes zu überschreiben.

Wie ich bereits erwähnt habe, werde ich diesen Code nicht zeilenweise behandeln, aber Sie können eine detailliertere Erklärung dieses Snippets im WordPress-Codex finden.

Anpassen mit Ihrem neuen Child-Theme

Das ist alles, was Sie tun müssen, um ein funktionierendes Child-Theme zu erstellen!

Mit der Einrichtung des Child-Themes gibt es drei Möglichkeiten, wie Sie Ihre Site damit anpassen können.

Stile hinzufügen und überschreiben

Sie können der style.css-Datei des Child-Themes so viel neues CSS hinzufügen, wie Sie möchten.

Wenn Sie Selektoren zur Verwendung in Ihrem CSS finden, überprüfen Sie nicht die Datei style.css des übergeordneten Themes. Alle unsere Themes verwenden einen „CSS-Präprozessor”, sodass wir uns diese Datei nicht einmal ansehen! Befolgen Sie stattdessen diesen intelligenteren Prozess, um CSS-Selektoren zu finden, und ich denke, Sie werden viel mehr Erfolg beim Anpassen Ihrer Website haben.

Funktionen überschreiben

Mit einem gut codierten Parent-Theme können Sie jede der Funktionen in der Datei functions.php überschreiben.

Zum Beispiel ist jede Funktion in Mission News mit einem [function_exists()](https://php.net/manual/en/function.function-exists.php)Häkchen versehen. Das bedeutet, dass Sie die Funktion in die Datei functions.php Ihres Child-Themes kopieren können. Dann können Sie dort beliebige Änderungen an der Funktion vornehmen.

Vorlagen überschreiben

Eine häufige Anpassung, die ein untergeordnetes Thema erfordert, ist die Neuordnung von Elementen. Zum Beispiel möchten Sie vielleicht den Titel des Beitrags nach dem Featured Image statt davor verschieben.

Sie können jede der Vorlagendateien aus dem übergeordneten Thema nehmen und eine Kopie in Ihrem untergeordneten Thema platzieren. Stattdessen wird dann die Version im Child-Theme geladen. Auf diese Weise können Sie beliebige Elemente in jedem Teil der Site hinzufügen, neu anordnen und entfernen.

Installieren des Child-Themes

Sobald Sie mit Ihren Änderungen zufrieden sind, können Sie das untergeordnete Design auf Ihrer Website installieren.

Untergeordnete Themes können wie normale WordPress-Themes hochgeladen werden, sodass es nur ein oder zwei Minuten dauert, um sie auf deiner Website zu aktivieren. Folgen Sie diesem Tutorial, um Ihr Child-Theme zu installieren:

So installieren Sie ein WordPress Child Theme

Wenn Sie mit all dem noch nicht vertraut sind, finden Sie hier ein paar kostenlose Tools, die Ihnen helfen.

Wenn Sie keinen Code-Editor haben, sehen Sie sich zunächst Visual Studio Code an. Es ist einfach, aber flexibel. Es ist auch völlig kostenlos und viele professionelle Software wird damit erstellt. Es ist das, was ich hier bei Compete Themes verwende, um Themen zu erstellen.

Zweitens ist das Erstellen einer lokalen WordPress-Site (offline) eine großartige Möglichkeit, Code auszuprobieren, ohne Ihre echte Live-Website zu beeinträchtigen. Während ich in der Vergangenheit MAMP verwendet und empfohlen habe, ist Local by Flywheel so verdammt einfach und einfach zu bedienen, dass ich es liebe. Es ist das, was ich für die Themenentwicklung verwende und es ist auch kostenlos.

Ihre Updates sind sicher

Zurück zum Beispiel von vorhin…

Beim Aktualisieren des Challenger-Themes (oder eines anderen Themes) wird das gesamte „challenger”-Verzeichnis ersetzt, was sich nicht auf das Child-Theme auswirkt, da es jetzt ein eigenes Verzeichnis im „challenger-child”-Ordner hat.

Wenn Ihr untergeordnetes Thema eingerichtet ist, können Sie sicher alle gewünschten Anpassungen vornehmen und Ihr übergeordnetes Thema auf dem neuesten Stand halten.

Wenn Sie mit CSS und PHP noch nicht vertraut sind, kann es einige Zeit dauern, bis Sie Ihre Anpassungen nach Ihren Wünschen vorgenommen haben, aber mit einem untergeordneten Thema haben Sie eine großartige Grundlage, mit der Sie arbeiten können. Denken Sie daran , diese Schritte zu befolgen, um CSS-Selektoren zu finden, die Sie verwenden können, und alle Stilanpassungen, die Sie vornehmen, sind ziemlich einfach.