Erste Schritte mit WordPress Child Themes?

In diesem Tutorial erfahren Sie, wie Sie ein untergeordnetes WordPress-Theme erstellen. Wenn Sie neu bei WordPress sind und nicht wissen, was ein untergeordnetes WordPress-Theme ist, werde ich alles erklären.

WordPress-Themes sind Sammlungen von PHP-, JavaScript- und CSS-Dateien. Mit einfachen Worten, mit WordPress-Themes können Sie das Erscheinungsbild Ihres Blogs ändern. WordPress-Themes können sehr mächtig sein.

Premium-WordPress-Themes bieten viele erweiterte Features und Funktionen. Tausende kostenlose und Premium-WordPress-Themes sind verfügbar.

Sie können ein WordPress-Theme von Grund auf neu erstellen oder ein WordPress-Theme basierend auf einem anderen Thema erstellen. Jede Version von WordPress wird mit vorinstallierten WordPress-Themes geliefert, und wenn Ihnen das vorinstallierte WordPress-Theme nicht gefällt, können Sie ein anderes WordPress-Theme installieren oder ein untergeordnetes Thema erstellen.

Warum WordPress-Child-Themes?

Das Erstellen eines untergeordneten WordPress-Themes bedeutet, dass Sie ein vorhandenes Thema nehmen und Ihr eigenes Thema erstellen, das darauf basiert. Das Child-Theme erbt die meisten Funktionen des ursprünglichen Themes, das als Parent-Theme bekannt ist.

Das Child-Theme spart viel Arbeit und Zeit. Das Erstellen eines WordPress-Themes von Grund auf nimmt viel Zeit in Anspruch und manchmal sind Vorkenntnisse in HTML, CSS und PHP erforderlich. Mit untergeordneten Themen können Sie viele Änderungen vornehmen.

Wenn Sie mit den Anpassungen, Optionen und Funktionen, die das von Ihnen verwendete WordPress-Theme bietet, nicht zufrieden sind, können Sie ein untergeordnetes Thema erstellen. Selbst wenn Sie eine Änderung in Ihrem WordPress-Theme vornehmen möchten, sollten Sie ein untergeordnetes Thema erstellen oder das CSS-Editor-Plugin verwenden.

Sie können Ihre vorhandenen WordPress-Designdateien direkt bearbeiten, aber wenn Sie dann ein Update vornehmen, gehen alle Ihre Anpassungen verloren. Deshalb brauchst du ein Child-Theme.

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

Mit untergeordneten WordPress-Themes können Sie so viele Funktionen hinzufügen, wie Sie möchten. Es liegt an dir. Wenn Sie die Schriftgröße oder -farbe für Überschriften oder Links ändern möchten, können Sie dies sehr einfach mit CSS tun.

Sie können neue Navigationsmenüs hinzufügen, neue Seitenleisten registrieren, benutzerdefinierte Seiten für Produkte erstellen oder Unterstützung für benutzerdefinierte Webschriftarten hinzufügen.

Was du brauchen wirst:

Jetzt wissen Sie, was ein WordPress-Child-Theme ist und warum Sie Child-Themes erstellen sollten. Es ist Zeit zu lernen, wie man ein WordPress-Child-Theme erstellt.

Es ist nicht erforderlich, aber empfehlenswert, eine lokale WordPress-Installation für Entwicklungs- und Lernzwecke einzurichten. Mit der lokalen WordPress-Installation können Sie Ihre neuen Plugins und Themes schnell und einfach testen.

Es gibt viele Möglichkeiten, WordPress lokal zu installieren. Wenn Sie ein MAC-Benutzer sind, können Sie MAMP verwenden, Windows-Benutzer können das XAMPP-, WAMP- oder Bitnami-WordPress-Installationsprogramm verwenden.

• So installieren Sie WordPress mit WAMP-Server
• So installieren Sie WordPress mit MAMP
• So installieren Sie WordPress mit Bitnami Stack

Wenn Sie ein absoluter Anfänger sind, können Sie den Bitnami-WordPress-Stack herunterladen und installieren, um eine voll funktionsfähige WordPress-Website auf Ihrem MAC oder PC zu erstellen.

Ich persönlich bevorzuge WAMP-Server für die lokale Entwicklung. Es ist nicht schwierig, WordPress auf WAMP zu installieren, Sie können Tutorials lesen oder Videos ansehen, um zu lernen, wie man WordPress mit WAMP, XAMPP oder MAMP installiert.

Sie benötigen außerdem einen Code-Editor, um Themendateien zu bearbeiten. Sublimetext, Brackets, Atom sind einige beliebte Code-Editoren.

Wie erstelle ich ein WordPress-Child-Theme?

Sobald Ihre lokale WordPress-Site fertig ist, können wir mit der Erstellung unseres Child-Themes beginnen. Wenn Sie einen WAMP-Server verwenden, gehen Sie zu Ihrem WAMP-Installationsverzeichnis > WWW > WordPress > wp-content > Ordner themes.

Erstellen Sie im WordPress-Theme-Ordner einen neuen Ordner und nennen Sie ihn Twentysixteen-Child oder einen beliebigen Namen, z. B. InstantShift. Wir werden das Twentysixteen-Thema als übergeordnetes Thema verwenden. Das bedeutet, dass unser Child-Theme auf dem TwentySixteen-Theme basiert.

Für jedes Child-Theme benötigen wir zwei Dateien.

• functions.php
• style.css

Erstellen Sie mit in Ihrem Twentysixteen-Child-Theme-Ordner diese beiden Dateien. Öffnen Sie jetzt Ihre Dateien im Texteditor. Für einen schnellen Zugriff können Sie Ihren Ordner mit 26 untergeordneten Elementen in die Seitenleiste des Texteditors ziehen. Öffnen Sie die Datei style.css und fügen Sie den folgenden Code hinzu.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Das obige Markup ist für ein untergeordnetes Design erforderlich. Ohne ein Stylesheet mit erforderlichem Markup kann WordPress Ihr Child-Theme nicht erkennen.

Ich denke, man kann alles verstehen. Es gibt nichts zu erklären. Mein Child-Theme-Name ist InstantShift, aber Sie können Ihr Kind benennen, wie Sie möchten. Das Wichtigste ist Vorlage: 26. Dies ist der Name unseres übergeordneten Themas. Stellen Sie sicher, dass Sie es richtig schreiben.

Wenn Sie ein anderes Design als übergeordnetes Design verwenden, ändern Sie einfach Vorlage: zwanzigsechzehn mit Vorlage: parent-theme-name.

Im Stylesheet-Header können wir auch weitere Informationen hinzufügen, dies ist jedoch nicht erforderlich. Melden Sie sich jetzt in Ihrem WordPress-Dashboard an. Gehen Sie zu Darstellung > Themen. Sie sollten das InstantShift-Design ohne Screenshot sehen, da wir keinen Screenshot für unser untergeordnetes Design hinzugefügt haben.

Bewegen Sie die Maus über das InstantShift-Design und klicken Sie auf die Schaltfläche Designdetails. Hier ist mein Child-Theme-Screenshot.

Wenn Sie diesen Bildschirm sehen können, bedeutet dies, dass Ihr untergeordnetes Thema bereit ist. Jetzt können wir mit der Anpassung unseres Designs beginnen. Aktivieren Sie dieses neue Thema und besuchen Sie das Frontend Ihres Blogs. Sie werden alle Ihre Inhalte ohne Stil sehen.

Mach dir keine Sorgen. Es ist normal. Wir können keine Stile sehen, da wir keine Stylesheet-Datei für übergeordnete Themen eingebunden haben. Lassen Sie uns sicherstellen, dass das Stylesheet unseres untergeordneten Designs funktioniert. Fügen Sie in der style.css-Datei Ihres untergeordneten Designs den folgenden Code hinzu.

body{
     background-color: #E7F5FB;
}

Speichern Sie Ihre style.css-Datei, laden Sie die Startseite Ihrer lokalen WordPress-Site neu und Sie sollten eine hellblaue Hintergrundfarbe sehen.

Registrieren des Stylesheets des übergeordneten Designs

Wir wollen nicht alle Stile von Grund auf neu erstellen. Wir werden nur einige neue Stile mit der style.css-Datei des untergeordneten Designs hinzufügen. Lassen Sie uns nun die stye.css-Datei des übergeordneten Designs in unser untergeordnetes Design einfügen.

Öffnen Sie die Datei functions.php und fügen Sie den folgenden Code in die Datei functions.php des untergeordneten Designs ein.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Wenn Sie jetzt Ihre lokale WordPress-Site neu laden, sehen Sie das normale Design mit allen TwentySixteen-Stilen.

Das ist alles. Sie haben Ihr erstes Child-Theme erfolgreich erstellt. Sie haben auch eine neue Hintergrundfarbe für den Körper hinzugefügt.

Aber wir haben unser untergeordnetes Thema nicht erstellt, um einfach den Hintergrund für den Körper zu ändern. Beginnen wir mit der Anpassung unseres Designs.

Überschreiben von Parent-Theme-Stilen

Anpassen der Kopfzeile:

Standardmäßig hat der Header des Twenty Sixteen-Designs viel Polsterung. Lassen Sie uns die Polsterung ändern und die neue Hintergrundfarbe für den Website-Header hinzufügen. Füge den folgenden Code in die style.css-Datei deines Child-Themes ein, speichere deine Datei und lade dein Frontend deiner Website neu, um die Änderungen zu sehen.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Hier sehen Sie den Screenshot für den Website-Header vor und nach dem Hinzufügen unserer neuen Stile.

Anpassen der Hauptnavigation

Lassen Sie uns nun die Hintergrundfarbe für die Elemente des Hauptnavigationsmenüs ändern. Ich verwende gerne Chrome-Entwicklertools, um meine CSS-Stile zu bearbeiten.

Nachdem Sie Webseiten mit den Chrome-Entwicklungstools bearbeitet haben, können Sie den neuen Code aus den Chrome-Entwicklungstools kopieren und in die style.css-Datei Ihres untergeordneten Designs einfügen.

Öffnen Sie die style.css-Datei Ihres untergeordneten Designs und fügen Sie den folgenden Code hinzu.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Hier sehen Sie den Screenshot unseres neuen Headers. Wir haben unser Theme sehr einfach mit einem Child-Theme angepasst.

Letzte Worte

Jetzt wissen Sie, wie Sie WordPress-Child-Themes erstellen können. Es ist sehr einfach und leicht. Mit dem grundlegenden Verständnis von HTML und CSS können Sie das Design Ihrer Website vollständig ändern.

Sie können auch neue Navigationsmenüs, Widget-Bereiche, Unterstützung für neue We-Schriftarten usw. mit dem untergeordneten Thema hinzufügen. Aber wir können nicht alles in einem einzigen Artikel abdecken.

Wenn Sie die Entwicklung von WordPress-Themes lernen möchten, sollten Sie mit WordPress-Child-Themes beginnen. Lernen Sie die Grundlagen der Theme-Anpassung.