Schritt-für-Schritt-Tutorial zum Erstellen eines Child-Themes in WordPress

In diesem Beitrag erfahren Sie Schritt für Schritt, wie Sie ein untergeordnetes Thema in WordPress erstellen. Alle Grundlagen von untergeordneten WordPress-Themes.

Sie erfahren, wie Sie CSS-Stile für übergeordnete Themes importieren, wie Sie Parent-Theme-Stile überschreiben und warum Sie untergeordnete WordPress-Themes erstellen sollten.

Um zu erfahren, warum untergeordnete WordPress-Themes wichtig sind, sollten Sie unseren Anfängerleitfaden für die Entwicklung von WordPress-Eltern- und -Kind-Themes lesen

Was können Sie mit WordPress-Child-Themes machen?

Mit untergeordneten WordPress-Designs können Sie Ihr standardmäßig aktives WordPress-Design ganz einfach anpassen. Sie müssen keine fortgeschrittenen HTML-, CSS-, PHP- oder JavaScript-Kenntnisse haben, um untergeordnete Themen zu erstellen.

Grundlegende oder gute Kenntnisse in HTML, CSS und PHP können sehr hilfreich sein.

Weiterführende Literatur: So wählen Sie ein perfektes kostenloses oder Premium-WordPress-Theme aus

Sie können ein untergeordnetes WordPress-Theme verwenden, um Ihre Website mit CSS zu modifizieren, neue Widget-Bereiche und zusätzliche Navigationsmenüs hinzuzufügen und benutzerdefinierte Dateien zu bearbeiten, um neue Seiten mit benutzerdefiniertem Design zu erstellen.

Mit untergeordneten Themen können Sie Website-Elemente auch neu anordnen, neue Inhalte/Elemente hinzufügen und jede Funktionalität ändern.

Warum Sie ein WordPress-Child-Theme erstellen sollten

Der Grund, warum es untergeordnete Themen gibt, ist, dass Sie ein „übergeordnetes“ (Ihr vorhandenes/aktives) Thema anpassen können, ohne Ihre Änderungen und Modifikationen zu verlieren, wenn Sie das übergeordnete Thema aktualisieren.

Wenn Sie beispielsweise die Datei single.php direkt geändert haben, würden Ihre Anpassungen zunächst problemlos funktionieren.

Wenn Sie Ihr Design jedoch auf eine neuere Version Ihres geänderten Designs aktualisieren, gehen alle Ihre Änderungen verloren und es gibt keine Möglichkeit, Ihre Anpassung wiederherzustellen.

Was du brauchst

Sie können schnell ein untergeordnetes Thema erstellen und auf Ihren Server hochladen, es wird jedoch empfohlen, WordPress lokal auf Ihrem PC zu installieren.

Mit der lokalen WordPress-Installation können Sie Ihr Design schnell erstellen und testen, Sie benötigen nicht ständig eine Internetverbindung.

Mit der lokalen WordPress-Site können Sie Fehler machen, ohne Ihre Live-Site zu beeinträchtigen, und es ist viel schneller und besser.

Es gibt viele Möglichkeiten, WordPress lokal auf Windows, MAC oder Linux zu installieren. Lesen Sie dieses Tutorial, um zu erfahren, wie Sie WordPress auf einem lokalen PC mit Bitnami WordPress Stack installieren.

Wir haben bereits eine Schritt-für-Schritt-Anleitung für Anfänger veröffentlicht.

So installieren Sie WordPress auf einem WAMP-Server in Windows 8

So installieren Sie WordPress unter Windows 8 mit Bitnami Stack

Wie erstelle ich ein Child-Theme in WordPress Schritt-für-Schritt-Anleitung?

Für jedes Child-Theme in WordPress werden zwei Dateien benötigt.

• Funktionen.php
• style.css

In der Datei style.css können wir Informationen über unser untergeordnetes Design hinzufügen, z. B. Name des Designs, Beschreibung des Designs, Name des Autors, Details zum übergeordneten Design, Tags usw.

Wir benötigen auch eine functions.php-Datei, um das Stylesheet für übergeordnete und untergeordnete Themen zu registrieren. Mit der Datei functions.php können wir auch neue Funktionen hinzufügen, neue Navigationsmenüs, Widget-Bereiche usw. registrieren.

Beginnen wir also mit der Erstellung Ihres ersten Child-Themes. In diesem untergeordneten Design werden wir keine neuen Widget-Bereiche, Navigationsmenüs usw. hinzufügen. Wir werden unser untergeordnetes Design verwenden, um einige einfache CSS-Änderungen vorzunehmen. Wir werden die Standard-CSS-Stile überschreiben.

Sie können jedes WordPress-Theme als übergeordnetes Thema verwenden. Für dieses Tutorial werde ich ein untergeordnetes Thema für das TwentySixteen-Thema erstellen.

Erstellen Sie einen neuen Ordner und speichern Sie ihn als Twentysixteen-Child oder Sie können ihm einen beliebigen Namen geben, zB Design.

Erstellen Sie zwei neue Dateien und speichern Sie sie als functions.php- und style.css-Datei in unserem Child-Theme-Ordner. Der Name meines Child-Theme-Ordners ist designbomb.

Fügen Sie nun die folgenden Informationen in der style.css-Datei Ihres untergeordneten Designs hinzu und speichern Sie Ihre Datei.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Melden Sie sich jetzt in Ihrem WordPress-Dashboard an. Gehen Sie zu Darstellung > Themen > Neu hinzufügen und laden Sie dieses neue untergeordnete Thema hoch. Sie sehen ein neues Design ohne Screenshot. Bewegen Sie die Maus über das Thema und klicken Sie auf die Schaltfläche Themendetails.

Sie sehen die folgenden Details für Ihr neues untergeordnetes Thema.

Im obigen Screenshot können Sie alle grundlegenden Informationen zu unserem untergeordneten Thema sehen. Name unseres untergeordneten Themas, wer der Autor dieses Themas ist, Beschreibung des untergeordneten Themas und Sie können auch sehen, dass dies ein untergeordnetes Thema von Twenty Sixteen ist. Botschaft.

Wir haben hinzugefügt Vorlage: sechzehn in der style.css-Datei unseres Child-Themes. Diese Zeile teilt WordPress mit, dass zwanzig sechzehn das übergeordnete Thema ist.

Wenn Sie ein anderes Design verwenden, ersetzen Sie TwentySixteen durch den Namen Ihres übergeordneten Designs.

Aktiviere nun dein neues Child-Theme und lade deine Startseite neu. Sie sollten den gesamten Inhalt ohne Styling sehen. Keine Sorge, das ist normal. Dies liegt daran, dass wir die style.css-Datei unseres übergeordneten und untergeordneten Designs nicht eingeschlossen haben

Nachdem Sie das neue untergeordnete Thema aktiviert haben, gehen Sie zu Darstellung > Editor und wählen Sie die Datei functions.php (Theme Functions) aus, fügen Sie den folgenden Code in die Datei functions.php ein und klicken Sie auf die Schaltfläche Datei aktualisieren, um Ihre Änderungen zu speichern.

 <?php function theme_enqueue_styles() { $parent_; 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 ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Besuchen Sie jetzt das Frontend Ihrer WordPress-Site und laden Sie Ihre Seite neu. Sie sollten die normale Site mit allen TwentySixteen-Stilen sehen.

Ändern bestehender Stile

Das bedeutet, dass unser untergeordnetes Design fertig ist. Es ist an der Zeit, unser übergeordnetes Design mit neuen CSS-Stilen anzupassen. Wählen Sie nun unter Darstellung > Editor die Datei style.css aus. Wir werden einige neue Stile hinzufügen.

Fügen Sie den folgenden Stil in der style.css-Datei Ihres untergeordneten Designs hinzu und speichern Sie Ihre Datei.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

Laden Sie das Frontend Ihrer Website neu und öffnen Sie eine beliebige Seite. Wir haben die Standardstile für den aktuellen Menüpunkt geändert. Siehe Screenshot unten.

Für den aktuellen Menüpunkt habe ich eine neue Hintergrundfarbe, Rahmenradius, Farbe und Rahmenschatten hinzugefügt. Es war sehr einfach und leicht, Stile mit Chrome Dev-Tools zu ändern.

Das ist alles

Jetzt wissen Sie, wie Sie ein untergeordnetes Thema erstellen. War nicht so einfach und leicht. Mit WordPress-Child-Themes können Sie fast jede Datei Ihres Parent-Themes anpassen, aber es wird nicht empfohlen, jede Datei Ihres Parent-Themes zu ändern.

Verwenden Sie immer untergeordnete Themen, um notwendige Funktionen, Features oder benutzerdefinierte Seiten hinzuzufügen.

Laden Sie das Child-Theme Designs herunter