So erstellen Sie ein untergeordnetes WordPress-Theme (2021)

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

Natürlich wird Ihr Thema für Ihre Website geeignet aussehen, aber an einigen Stellen müssen Sie es bearbeiten. Das Vornehmen von Änderungen am untergeordneten Thema ist eine bevorzugte Wahl, um Ihre Website zu bearbeiten. Außerdem ist das Erlernen des untergeordneten Themas eines der grundlegenden WordPress-Dinge, die Sie wissen sollten. Hier können Sie beginnen, sich mit WordPress vertraut zu machen.

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

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

In WordPress erwirbt ein untergeordnetes Thema alle Merkmale, Funktionalitäten und andere des übergeordneten Themas. Auf der anderen Seite ist es möglich, das Child-Theme zu bearbeiten, ohne das Parent-Theme zu ändern. Es wird die Zeit und den Aufwand für die Bearbeitung der Website 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 des übergeordneten Elements unverändert. Benutzer können dieses untergeordnete Thema auch auf anderen WordPress-Websites verwenden.

Hinweise vor dem Erstellen eines Child-Themes

Um ein untergeordnetes WordPress-Theme zu erstellen, sind Programmierkenntnisse erforderlich, da Sie mit HTML und CSS arbeiten. Es ist sehr wichtig zu wissen, was geändert werden muss. Außerdem benötigen Sie Grundkenntnisse in PHP, zumindest das Kopieren/Einfügen von Codeschnipseln 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 zu vermasseln. Es ist, als ob Sie 2 Fliegen mit einer Klappe schlagen: Eine bringt es auf das Testfeld und eine wird als Themenentwicklung verwendet.

Noch etwas, das Parent Theme sollte vom Aussehen und den Funktionalitäten zu deinen Zwecken passen. Je weniger Änderungen Sie vornehmen, desto besser wird Ihre Website.

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

Erstellen des ersten untergeordneten Themas

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

Jetzt beginnen wir mit der Anpassung.

Verwenden von Code

Zu Beginn öffnest du /wp-content/themes/ in der WordPress-Installation und erstellst einen neuen Ordner für dein Child-Theme. Benennen Sie es, wie Sie möchten.

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

 1 Theme Name: LP 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 nach Belieben ändern und diese Datei in Ihrer style.css-Datei im Ordner des zuletzt verwendeten untergeordneten Designs 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, beginnt dieser Code zu funktionieren. Daher werden die meisten Themen 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 im „Erscheinungsbild“ „Designs“ und „Aktivieren“. Daher beginnt Ihre Website, das untergeordnete Thema zu verwenden. Wenn Sie Anpassungen vornehmen müssen, fahren Sie mit dem nächsten Teil fort.

Plugins verwenden

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

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

Beim Aktivieren gehst du zu „Tools“ -> „Child Themes“ und wählst LearnPress im Popup-Fenster des übergeordneten Themes. Wählen Sie „Analysieren“, um die Kompatibilität mit einem übergeordneten Thema zu überprüfen. Als Nächstes müssen Sie den Ordner des untergeordneten Designs zum Speichern von Dateien und den Speicherort benennen. Wählen Sie in der Standardeinstellung „Click to Edit Child Theme Attributes“. Dann werden Sie die Informationen des untergeordneten Themas erfüllen.

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-Konfigurator. Wählen Sie zum Schluss „Create New Theme Child“, um den Vorgang abzuschließen. In diesem Schritt erhält Ihr Child-Theme die functions.php und style.css für weitere Entwicklungen. Denken Sie anscheinend daran, eine Vorschau Ihres untergeordneten Plugins anzuzeigen. Anschließend wählst du „Aktivieren & Veröffentlichen“, um dein Child Theme zu veröffentlichen.

Jetzt beginnen wir mit der Anpassung Ihres Child-Themes.

Anpassung des untergeordneten WordPress-Themes

Wir werden das Child-Theme WordPress etwas anders als das Parent-Theme erstellen, 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 ermitteln. Außerdem können Sie diese Tools verwenden, um auf die CSS- und HTML-Elemente aller Websites zuzugreifen.

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 Ihnen das Inspektor-Tool 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 untergeordneten Designs ein:

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

Speichern Sie die Änderungen und sehen Sie sich die Site in der Vorschau 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 )

Kopieren Sie den Code aus der style.css-Datei des übergeordneten Designs

Wie Sie sehen können, ist es möglich, die Datei „style.css“ des übergeordneten Designs zu kopieren und in das untergeordnete Design 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 gleichzeitig die Farbe an diesen Stellen ändern müssen. Wechseln Sie im WordPress-Installationsordner zu /wp-content/themes/learnpress 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 übergeordneten Designs finden Sie eine große Anzahl von Farbvariablen. Nachdem Sie die geeigneten Farboptionen ausgewählt haben, kopieren Sie diese Codezeile und fügen sie in die style.css-Datei des untergeordneten Themas ein und ersetzen die alten durch die ausgewählten neuen für Ihre Farbtendenz. Dann werden die Farben basierend auf den geplanten Farbschemata aufgeteilt. Durch diesen Vorgang werden Ihre Farbschemata konsistent und schnell bearbeitet.

Anpassen der Vorlagendateien

In einem Design werden Bereiche zur Handhabung von Dateien auf einer Website Vorlagen genannt. Die Vorlagen werden normalerweise nach dem Abschnitt benannt, den sie behandeln. Einige wichtige Abschnitte werden daher von verschiedenen Dateien oder Inhaltsvorlagen verwaltet.

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

Wir zeigen Ihnen ein Tutorial für diesen Vorgang mit der Datei footer.php. Kopieren Sie es in den Ordner des untergeordneten Designs und öffnen Sie es in einem einfachen Texteditor. Lassen Sie uns zum Beispiel den Link „Proudly powered by WordPress“ in der Fußzeile löschen und einen Copyright-Hinweis hinzufügen. 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 im folgenden Beispiel unter diesen Tags 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 Website zurückkehren, sehen Sie den neuen Urheberrechtshinweis.

Hinzufügen von Funktionen zu Ihrem WordPress-Child-Theme

Um eine Funktion zu Ihrer Website 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 angeleitet, Codeschnipsel zu kopieren und in die Datei function.php einzufügen, aber sie werden gelöscht, wenn Sie PHP oder Ihr Design aktualisieren. Daher schlagen wir vor, dass Sie ein untergeordnetes Design verwenden, um die Code-Snippets hinzuzufügen. Kommen wir nun 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 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 Website Code-Snippets hinzufügen.

Das ist alles über das Erstellen eines untergeordneten Themas in WordPress . Kommen wir zum Teil der Fehlerkorrektur.

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 fehlende Elemente im Codierungsprozess verursacht werden. Außerdem ist es der beliebteste Fehler, auf den alle Benutzer treffen können. Außerdem, wenn die Dinge nicht richtig laufen, können Sie es jederzeit löschen und von vorne beginnen.

So erstellen Sie ein WordPress-Child-Theme: Fazit

Wir hoffen, dass Sie sich durch unseren Artikel Wissen über die Erstellung eines Child-Themes aneignen können. Danke für deine Lektüre!

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