So erstellen Sie ein WordPress Child Theme (2021)

Weißt du, wie man macht? ein WordPress Child-Theme ?

Natürlich sieht Ihr Theme für Ihre Website passend aus, aber an einigen Stellen müssen Sie es bearbeiten. Das Vornehmen von Änderungen am untergeordneten Thema ist eine bevorzugte Wahl, um Ihre Site zu bearbeiten. Außerdem ist das Erlernen des Child-Themes eines der grundlegenden WordPress-Dinge, die Sie wissen sollten. Sie können hier mit dem Erlernen von WordPress beginnen.

Lassen Sie uns den Prozess zum Erstellen eines WordPress-Child-Themes durchgehen.

Warum sollten Sie Child-Themes für WordPress verwenden?

In WordPress übernimmt ein Child-Theme alle Features, Funktionalitäten und andere des Parent-Themes. Auf der anderen Seite ist es möglich, das untergeordnete Thema zu bearbeiten, ohne das übergeordnete Thema zu ändern. Es wird die Zeit und den Aufwand für die Bearbeitung der Site für Sie verkürzen. Außerdem bleiben Ihre WordPress-Theme-Updates sicherer und stabiler. Wenn Sie das untergeordnete Element anpassen, bleiben alle Änderungen und Anpassungen am übergeordneten Element gleich. Benutzer können dieses Child-Theme auch auf anderen WordPress-Websites verwenden.

Hinweise vor der Erstellung eines Child-Themes

Um ein untergeordnetes WordPress-Theme zu erstellen , sind Programmierkenntnisse erforderlich, da Sie mit HTML und CSS arbeiten. Zu wissen, was zu ändern ist, ist sehr wichtig. Außerdem benötigen Sie Grundkenntnisse in PHP, zumindest das Kopieren/Einfügen der Codeschnipsel aus anderen Quellen.

Wir empfehlen Ihnen dringend, in der Entwicklungsumgebung zu üben. Dies ist ein Ort, an dem Sie dies tun können, ohne Angst zu haben, Ihre Hauptseite durcheinander zu bringen. Es ist, als würden Sie 2 Fliegen mit einer Klappe schlagen: Eine bringt es ins Testfeld und eine wird als Themenentwicklung verwendet.

Eine weitere Sache, das Parent-Theme sollte das Aussehen und die Funktionalitäten zu Ihren Zwecken passen. Je weniger Änderungen Sie vornehmen, desto besser wird Ihre Website.

In den folgenden Teilen verwenden wir das LearnPress-Thema als Beispiel für eine bessere Veranschaulichung des WordPress Create Child Themes .

Erstellen des ersten untergeordneten Themas

Sie haben 2 Möglichkeiten, wenn Sie WordPress untergeordnete Themes erstellen. Sie können den manuellen Weg verwenden, um sich mit allen Dateien vertraut zu machen. Andernfalls funktioniert das Anwenden eines Plugins mit komplizierten Dateien und Ordnern.

Jetzt beginnen wir mit der Anpassung.

Code verwenden

Zu Beginn öffnen Sie /wp-content/themes/ in der WordPress-Installation und erstellen einen neuen Ordner für Ihr Child-Theme. Benennen Sie es nach Belieben.

Dann müssen Sie die ersten 2 Dateien für Ihr Child-Theme erstellen. Öffnen Sie einen Texteditor und fügen Sie den folgenden Code in das leere Dokument ein:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Sie können die Informationen während der Planung ändern und diese Datei in Ihrer style.css-Datei im Ordner des zuletzt untergeordneten Themas speichern. Nun, Sie haben gerade das Haupt-Stylesheet des Child-Themes erstellt.

Als nächstes erstellen Sie eine ^zweite Datei, um die Stylesheets aus dem übergeordneten Thema zu importieren. Erstellen Sie ein neues Dokument in Ihrem Texteditor und kopieren Sie diesen Code:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Wenn Sie LearnPress als übergeordnetes Thema verwenden, wird dieser Code funktionieren. Daher werden die meisten Themes so funktionieren. Speichern Sie diese Datei und sie wird zum Ordner functions.php Ihres Child-Themes.

Nach diesen Schritten haben Sie ein grundlegendes untergeordnetes Thema. Wählen Sie in der „Darstellung“ „Themen“ und „Aktivieren“. Daher wird Ihre Site das untergeordnete Thema verwenden. Wenn Sie Anpassungen vornehmen müssen, fahren Sie mit dem nächsten Teil fort.

Plugins verwenden

Wir empfehlen Ihnen, das Plugin Child Theme Configurator zu verwenden. Da keine Codierung erforderlich ist, können Sie problemlos Änderungen und Anpassungen vornehmen.

Installieren Sie zuerst das Plugin auf Ihrer Site. Klicken Sie hier, um weitere Anleitungen zur Plugin-Installation zu erhalten.

Bei der Aktivierung gehen Sie zu „Extras“ -> „Untergeordnete Themen“ und wählen LearnPress im Popup, das das Elternthema fragt. Wählen Sie „Analyze“, um die Kompatibilität als übergeordnetes Thema zu überprüfen. Als nächstes müssen Sie den Ordner des Child-Themes zum Speichern von Dateien und den Speicherort benennen. Wählen Sie in der Standardeinstellung „Klicken, um Attribute des untergeordneten Themas zu bearbeiten“. Dann füllst du die Informationen des Child-Themes aus.

Wenn Sie ein Child-Theme manuell erstellen, erbt Ihr Child-Theme keine Menüs und Tools vom Parent-Theme. Um es zu lösen, verwenden Sie den Child Theme Configurator. Wählen Sie zum Abschluss „Neues Theme-Child erstellen“ aus. In diesem Schritt verfügt Ihr Child-Theme über die functions.php und style.css für weitere Entwicklungen. Denken Sie anscheinend daran, eine Vorschau Ihres untergeordneten Plugins anzuzeigen. Danach wählst du „Aktivieren & Veröffentlichen“, um dein Child-Theme zu veröffentlichen.

Jetzt beginnen wir mit der Anpassung Ihres Child-Themes.

Anpassung des WordPress Child Themes

Wir werden ein Child-Theme WordPress erstellen, das ein wenig anders ist als das Parent-Theme, indem wir der Datei „style.css“ Code hinzufügen.

Code aus dem Firefox/Chrome Inspector kopieren

Sie können die Inspector-Widgets von Chrome und Firefox verwenden, um den benötigten CSS-Code zu finden. Außerdem können Sie mit diesen Tools auf die CSS- und HTML-Elemente aller Websites zugreifen.

Um eine CSS-Datei eines Beitrags oder einer Website anzuzeigen, klicken Sie mit der rechten Maustaste und wählen Sie „Inspizieren“. Ihr Bildschirm wird in zwei Hälften geteilt und Sie können CSS und HTML der Seite sehen. Wenn Sie die Maus über die HTML-Zeilen bewegen, zeigt das Inspektor-Tool Sie im oberen Fenster an. Auch die CSS-Regeln.

Es wird eine vorübergehende Farbänderung auf der Rückseite geben. Um es dauerhaft zu machen, kopieren Sie diese CSS-Regelzeile und fügen Sie sie in die style.css-Datei des Child-Themes ein:

 1 body { 2 background-color: #fdf8ef; 3 )

Speichern Sie die Änderungen und zeigen Sie eine Vorschau der Site an. Außerdem können Sie dies für jedes Element im Stylesheet des Themas neu starten. Nun, wir geben Ihnen hier ein vollständiges Stylesheet für ein Child-Theme:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Code aus der style.css-Datei des Parent-Themes kopieren

Wie Sie sehen, ist es möglich, die Datei style.css des übergeordneten Themes zu kopieren und in das untergeordnete Theme einzufügen und anzupassen.

Der Code für die Hintergrundfarbe der Seite lautet beispielsweise:

 1 background-color: var(--global--color-background);

'–global–color-background' ist eine Variable, die an verschiedenen Stellen des Themas verwendet wird. Sie müssen den Wert der Variablen ändern, wenn Sie an diesen Stellen gleichzeitig die Farbe ändern müssen. Wechseln Sie nach /wp-content/themes/learnpress im WordPress-Installationsordner und öffnen Sie die Datei style.css im Texteditor, um nach dem Platz des –globalen–Farbhintergrunds zu suchen. Diese Variable kann durch eine andere Variable geändert werden. In der style.css-Datei des Parent-Themes finden Sie eine große Anzahl von Farbvariablen. Nachdem Sie die geeigneten Farboptionen ausgewählt haben, kopieren Sie diese Codezeile und fügen Sie sie in die Datei style.css des Child-Themes ein und ersetzen Sie die alten durch die ausgewählten neuen für Ihre Farbtendenz. Anschließend werden die Farben anhand der geplanten Farbschemata aufgeteilt. Durch diesen Vorgang werden Ihre Farbschemata konsistent und können schnell bearbeitet werden.

Anpassen der Vorlagendateien

In einem Design werden die Bereiche zur Handhabung von Dateien auf einer Website als Vorlagen bezeichnet. Die Vorlagen werden normalerweise nach dem Abschnitt benannt, den sie behandeln. So werden einige wichtige Abschnitte durch verschiedene Dateien oder Inhaltsvorlagen verwaltet.

Um eine Vorlage anzupassen, suchen Sie diese Datei im übergeordneten Thema und kopieren Sie sie in das untergeordnete Thema. Öffnen Sie es dann im Texteditor und beginnen Sie mit der Bearbeitung.

Wir zeigen Ihnen ein Tutorial für diesen Vorgang mit der Datei footer.php. Kopieren Sie es in den Ordner des Child-Themes und öffnen Sie es in einem Nur-Text-Editor. Löschen wir zum Beispiel den Link „Proudly powered by WordPress“ in der Fußzeile und fügen einen Copyright-Hinweis hinzu. Löschen Sie zunächst alle zwischen den <div class=”powered-by”>-Tags.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Dann fügen Sie den Code ein, den Sie unter diesen Tags im folgenden Beispiel finden.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Wählen Sie „Änderungen speichern“ und wenn Sie zur Site zurückkehren, sehen Sie den neuen Copyright-Hinweis.

Hinzufügen von Funktionen zu Ihrem WordPress Child Theme

Um eine Funktion zu Ihrer Site zu ändern oder hinzuzufügen, müssen Sie nach der Datei functions.php suchen. Diese Datei verwendet PHP-Code, um diesen Prozess auszuführen.

Normalerweise werden Sie aufgefordert, Code-Snippets zu kopieren und in die Datei function.php einzufügen, aber sie werden gelöscht, wenn Sie PHP oder Ihr Theme aktualisieren. Daher empfehlen wir Ihnen, ein Child-Theme zu verwenden, um die Code-Snippets hinzuzufügen. Kommen wir nun zum Prozess zum Hinzufügen von Widgets. Fügen Sie das Code-Snippet in die Datei functions.php des Child-Themes ein.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Speichern Sie und navigieren Sie zu „Darstellung“ -> „Widgets“, um das neue Tool anzuzeigen. Darüber hinaus können Sie nach weiteren Informationen zum Hinzufügen eines Funktionsbereichs suchen. Sie können viele Funktionen hinzufügen, indem Sie der Datei functions.php Ihrer Site Code-Snippets hinzufügen.

So erstellen Sie ein Child-Theme in WordPress . Kommen wir zum Teil des Behebungsfehlers.

Fehler beheben

Sie können jederzeit auf jedes Problem beim Erstellen eines untergeordneten Themas stoßen. Daher sollten Sie nicht so schnell aufgeben.

Syntaxprobleme können durch einige Fehler im Codierungsprozess verursacht werden. Außerdem ist dies der beliebteste Fehler, den alle Benutzer treffen können. Außerdem können Sie es jederzeit löschen und von vorne beginnen, wenn die Dinge nicht richtig laufen.

So erstellen Sie ein WordPress Child Theme: Fazit

Wir hoffen, dass Sie durch unseren Artikel Kenntnisse über die Erstellung eines Kinderthemas erwerben können. Danke für deine Lesungen!

Weiterlesen: So beheben Sie den HTTP-Fehler 500 WordPress (2021)