Der erste Schritt zum eigenen Theme: Child-Theme

Der erste Schritt zum eigenen Theme: Child-Theme

Von 18.07.16

Erst fängt man an nur zu bloggen, dann irgend­wann möchte man Dinge am Blog verän­dern, die mehr erfor­dern als sich in das Word­Press-Backend einzu­loggen. Und dann? Dann geht man den ersten Schritt: Man erstellt ein Child-Theme. Ein einfa­ches Beispiel: Schrift­arten. Nicht jedes Theme bietet die Möglich­keit die Schriftart anzu­passen und selbst wenn, kann es gut sein, dass keine bessere Schriftart zur Auswahl steht. Deswegen nehmen wir das Problem selbst in die Hand.

Theme?

Ein Word­Press-Theme besteht mindes­tens aus einer style.css, einer index.php und einer functions.php. Häufig ist auch noch eine Java­Script-Datei dabei. Heute läuft im Internet eigent­lich nichts ohne Java­Script. 😉 Ich muss dir aber leider sagen, das es eigent­lich kein Theme mehr gibt, das wirk­lich nur diese 3–4 Dateien hat. Und weil dem so ist, sollte man einfa­cher starten als mit einem komplexen Theme. Aber wer will schon auf die Features seines bishe­rigen Themes verzichten? Ein neues eigenes Theme kann am Anfang sicher nicht mehr als Beiträge anzeigen. Also soll­test du dein bishe­rigen Theme nicht einfach aufgeben, sondern erstelle dir auf Basis dieses Themes ein Neues!

Child-Theme?

Die beste Art und Weiße Nutzen aus deinem bishe­rigen Theme zu ziehen und trotzdem z.B. eigene Schrift­arten zu nutzen ist das Child-Theme. Ein Child-Theme besteht wirk­lich nur aus 2 Dateien. Eine functions.php und eine CSS-Datei.

Drei Schritte zum Child-Theme

Zuerst muss man dazu­sagen, dass du einen FTP-Zugang zu deiner Word­Press-Instal­la­tion brauchst. Von dort aus kannst du alle Schritte vornehmen.

  1. Erstelle einen Ordner der so heißt, wie der Ordner deines bishe­rigen Themes plus den Zusatz “-child”
  2. Darin legst du eine style.css an mit folgendem Inhalt:
    /**!
    *	Theme Name: themename-child
    *	Description: Themename Child Theme
    *	Author: Selma Dreiner (oder eher dann natürlich deinen Namen nehmen)
    *	Author URI: https://eine.rocks/
    *	Template: themename
    *	Version: 1.0
    */
    

    Du solltst “theme­name” immer durch den Namen deines bishe­rigen Themes ersetzen, sonst funk­tio­niert das ganze nicht 😉

  3. Danach legst du eine functions.php an mit diesem Inhalt:
    <?php
    function 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 )
    	);
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    

    Als kurze Erklä­rung, dieser PHP-Code fügt sozu­sagen deine CSS-Datei zu den CSS-Dateien des ursprüng­li­chen Themes hinzu und liefert alle Dateien zusammen an den Browser.

  4. Danach loggst du dich per FTP bei deiner Word­Press-Instal­la­tion ein und legst diesen neuen Ordner unter “Verzeichnis deiner Word­Press-Instal­la­tion” > wp-content > themes ab
  5. Als letzten Schritt loggst du dich in deinem Word­Press-Backend ein, gehst im Menü auf Design > Themes und dort soll­test du dein Child-Theme sehen und auswählen können.

Was passiert mit meinen Anpassungen vom Theme?

Aber ist es gefahrlos von Theme zum Child-Theme zu wech­seln? Geht dabei nicht etwas verloren? Gene­rell gespro­chen sind diese Befürch­tungen im ersten Moment ange­messen, wer hat nicht schon ein neues Theme benutzt und auf einmal waren alle Widgets nicht mehr sichtbar und die Menüs nicht zuge­wiesen. Wie ist es da wohl mit den Ände­rungen die ich über die “Anpassen”-Funktion meines Themes vorge­nommen habe? Für eine Freundin von mir habe ich den Test gemacht.

Babs nutzt momentan das Dazz­ling-Theme. Wir haben zusammen viele Anpas­sungen vorge­nommen, Farben, CSS und Ähnli­ches. Jetzt würde Sie aber gerne die Schriftart ändern und da stößt die “Anpassen”-Funktion an ihre Grenzen, die rich­tige Schrift gibt es nicht zur Auswahl. Deswegen habe ich mich dem Thema ange­nommen und anhand ihres Themes getestet ob ein Umzug zu einem Child-Theme funk­tio­nieren würde ohne die Anpas­sungen zu verlieren.

Damit ich die Seite vom Babs nicht kaputt mache, habe ich mir lokal auf meinem Rechner eine neue Word­Press-Seite aufge­setzt. Das Dazz­ling-Theme instal­liert und ein Menü hinzu­ge­fügt, Widgets bear­beitet, Farben ange­passt und eigenes CSS hinzu­ge­fügt. Danach habe ich das Child-Theme ange­legt und bin zum Child-Theme gewech­selt. Alle Ände­rungen waren noch vorhanden.

Prin­zi­piell funk­tio­niert das Wech­seln von einem zu einem anderen Theme meis­tens problemlos, weil häufig z.B. die Widget­po­si­tio­pnen gleich heißen (als Beispiel: Sidebar findet man fast überall). Sollte das bei deinem Theme aber nicht funk­tio­nieren wechsel einfach zurück zu dem “Eltern”-Theme, die Einstel­lungen sollten gespei­chert sein und wieder erscheinen.

Kommentar verfassen