Skip to main content

Child Theme – Sparkling

Nachdem jetzt die Seite aufgesetzt und einige Einstellungen gemacht sind habe ich mich nach Themes umgesehen. Bevor ich jetzt naiv und ahnungslos ein drittklassiges Theme zusammen schuster, greife ich erstmal auf ein vorgefertigtes Theme (Sparkling Theme von Colorlib)zurück. Je mehr ich mich mit WordPress auseinandergesetzt habe, desto konkreter kann ich das Theme anpassen. Das aktuelle Child-Theme auf GitHub.

Das Theme ist unter der GPL veröffentlicht und der Source-Code steht auf GitHub. Ich habe es direkt geforked um meine eigenen Anpassungen durchzuführen, falls nötig.

Edit: Anstelle einer komplett eigenen Version des Themes, kann ein Child-Theme angelegt werden, so kann das Theme weiterhin geupdatet werden, ohne dass die eigenen Anpassungen überschrieben werden.

Ein Child Theme bezieht sich in der Regel auf ein vollwertiges WordPress Theme das in dieser Konstellation auch Parent Theme genannt wird. Das Child Theme lässt sich wie ein normales Theme im WordPress Backend aktivieren. Es hohlt sich dann alle Dateien, die nicht in angepasster Form im Child Theme hinterlegt sind aus dem Parent Theme. Auf diese Weise bleibt alles, was nicht explizit geändert wird immer auf dem neusten Stand. Außerdem, bleibt das Original Theme unangetastet, so dass fehlerhafte Dateien notfalls gelöscht werden können, um auf das Original Theme zurückzugreifen.

Dieser Weg bietet auch einen guten Einstieg, in die Theme Entwicklung, da ein lauffähiges Template nach und nach ersetzt werden kann, bis es nur noch ein Katzensprung zum eigenständigen WordPress Theme ist.

Erstellen eines Child-Themes

Zunächst kann wie für ein normales Theme ein neuer Ordner erstellt werden. Es empfiehlt sich in den Namen direkt den Namen des Parent-Themes aufzunehmen. Üblich ist ParentThemeName-child also in diesem Fall erstellen wir den Ordner wp-content/themes/sparkling-child. Zwei Dateien reichen schon, damit unser Theme aktiviert werden kann: style.css und functions.php

In der style.css erstellen wir zunächst einen Header, dieser ist als Kommentar geschrieben hat also keine direkten Auswirkungen auf unsere Seite, liefert aber Metainformationen für die WordPress Infrastruktur. Analog zur Anleitung im WordPress Codex habe ich die Datei mit folgendem Inhalt angelegt:

style.css
/*
 Theme Name:   Sparkling Child
 Theme URI:    https://github.com/sarbot/sparkling-child/
 Description:  Child Theme of https://colorlib.com/wp/themes/sparkling/
 Author:       Sarbot
 Author URI:   http://sarbot.de
 Template:     sparkling
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  sparkling-child
*/

 

Außerdem muss eine functions.php angelegt werden, die wenigstens die style.css aus dem Parent-Theme (und möglichst weitere .css files die verwendet werden). Um herauszufinden, welche Styles für ein beliebiges Theme eingebunden werden müssen, erfordert ein bisschen stöbern nach dem Befehl wp_enqueue_style() in der functions.php des Parents-Themes mehr dazu im WordPress Codex.

In meinem Fall des Sparkling Themes sieht die functions.php in sparkling-childs/ so aus:

sparkling-child/functions.php
<?php
// Add your custom functions here

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'sparkling_enqueue_child_styles', 99);

function sparkling_enqueue_child_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_dequeue_style('sparkling-style');
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

Leeres Child-Theme downloaden: sparkling-child.zip

Existiert der Ordner wp-content/themes/sparkling-child , mit den beiden Dateien in unserer WP-Installation, kann das Child-Theme im Backend aktiviert werden. Eine Veränderung sollte, sofern vorher das Sparkling Theme verwendet wurde nicht sichtbar sein, aber jetzt sind wir in der Lage Änderungen an diesem Child-Theme durchzuführen, ohne dabei Gefahr zu laufen, die Originaldateien kaputt zu machen. Damit ein Bild angezeigt wird, muss im Child-Verzeichnis eine screenshot.png liegen.

Änderungen am Child-Theme

Um kleine Änderungen an der Darstellung bestimmter Seiten durchzuführen, oder neue Seitentemplates zu erstellen, lohnt es sich die entsprechende Datei aus dem Parent-Theme ins Child-Theme zu kopieren um diese dann anzupassen.

Style anpassen

CSS Änderungen können direkt in der bereits erstellten und eingebundenen style.css eingetragen werden, diese überschreiben automatisch alle Eigenschaften aus dem Parent-Theme. Da ich gerne Thumbnails mit etwas Abstand zum Text anzeigen würde, kann ich mir zum Beispiel folgenden Code für die Klasse post-thumb in die style.css schreiben:

sparkling-child/style.css
/*
Header Daten 
...
*/

.post-thumb {
	padding: 10px;
	padding-right: 20px;
}

Funktionen anpassen/hinzufügen

Mit den Funktionen verhält es sich etwas anders, da die functions.php eine Ausnahme darstellt. In diesem Fall wird die functions.php des Parent-Themes nicht überschrieben, sondern einfach nach der functions.php des Child-Themes ausgeführt. Wenn Funktionen im Parent-Theme in dieser Form definiert sind:

sparkling/functions.php
if ( ! function_exists( 'twentyten_admin_header_style' ) ) :
function twentyten_admin_header_style() {
...
}
endif;

Kann die Funktion mit exakt diesem Namen im Child-Theme erstellt werden, ohne dass sie überschrieben wird. Ansonsten, werden alle Eigenschaften und Variablen die im Child-Theme gesetzt werden ggf. vom Parent-Theme überschrieben. Um dies zu verhindern, hat man die Möglichkeit aus dem Child-Theme heraus einen Hook zu setzten, der die Ausführung bestimmter Funktionen im Parent-Theme verhindern kann. Das könnte zum Beispiel so aussehen.

Eine Funktion im Parent-Theme (default theme example):

parent/functions.php
function twentyten_excerpt_length( $length ) {
    return 40;
}
add_filter( 'excerpt_length', 'twentyten_excerpt_length' );

Würde unseren Filter überschreiben, es sei denn wir setzen für unseren Filter einen Hook:

child/functions.php
function my_excerpt_length( $length ) {
    return 55;
}
add_filter( 'excerpt_length', 'my_excerpt_length' );

function my_undo_hooks( $length ) {
    remove_filter( 'excerpt_length', 'twentyten_excerpt_length' );
}
add_action( 'after_setup_theme', 'my_undo_hooks' );

Eigene Bildgrößen definieren

Manche Funktionen müssen allerdings garnicht ersetzt sondern können stattdessen ergänzt werden. Wenn ich zum Beispiel eine neue Größe für hochgeladene Bilder ergänzen will (die meisten WP-Themes halten Bilder automatisch in verschiedenen Auflösungen bereit) kann ich dies tun, indem ich eine Funktion analog zur theme_setup() aus dem Parent-Theme erstelle und diese ebenfalls zu den „after-setup actions“ hinzufüge:

function my_child_theme_setup() {
    add_image_size( 'header', 1200, 400, true );
    add_image_size('thumb', 200, 200, true);
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );

Wenn ich verhindern will, dass die Bilder in den vom Parent-Theme vorgesehenen Größen ebenfalls hochgeladen werden, muss ich auch hierfür einen remove_action hook setzen (TODO: checkout and maybe define all sizes here)

Searchbar ins Topmenu (primary) integrieren

Die normale Suchleiste, die auch per default in der Sidebar angezeigt wird, kann per wordpress php-Befehl get_search_form() aufgerufen werden. Wenn eine andere Searchbar (zB eines Plugins) verwendet werden soll, ist diese Zeile durch entsprechenden Code zum Einbinden des Formulars zu ersetzen. Der folgende Code bezieht sich auf das Menu, welches den Primär-Status hat, der Wert 'primary' kann auch geändert werden, um in ein bestimmtes anderes Menü zu schreiben.

functions.php
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
    if($args->theme_location == 'primary') {
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        return $items .= '<li id="searchform-item">' . $searchform . '</li>';
    }
    return $items;
}

Kurze Erklärung: Die erste Zeile veranschaulicht das Konzept ganz gut. Wir fügen unserem wp_nav_menu_items-Filter, also unserer „Liste von Menüeinträgen“ eine Suchbox hinzu. Die Funktion add_search_box() die dadurch aufgerufen wird, liefert aber nur etwas zurück, wenns sich bei dem entsprechenden Menü um das primäre Menü handelt, alle anderen Menüs bleiben von diesem Befehl unbeeinflusst. Die Zahlen dahinter geben die Priorität (10) und die Anzahl der Argumente, die übergeben werden (2) an. Mehr dazu.

Die Funktion übergibt also die Suchbox mit der id ’searchform-item‘ ans Hauptmenü. Dies können wir jetzt noch mit CSS anpassen, damit es sich einigermaßen ans Menü anpasst:

style.css
#searchform-item{
        padding-top: 20px;
        padding-left: 20px;
        width: 250px;
}
Todo: Als nächstes, könnte man die Suchleiste einfahren, solange sie nicht gebraucht wird, dass würde etwas Platz fürs Menü sparen, den ich gut gebrauchen kann. Ein Beispiel mit JavaScript.

Ein Template anpassen

Kleine Thumbnails in Listenansicht

Meine erste Änderung am Theme ist die Darstellung der Beitragsbilder in der  Listenansicht. Anstatt sie in voller Breite über dem Titel anzuzeigen (so wie auf der Beitragsseite selbst) würde ich sie gerne etwas kompakter als Thumbnail neben dem Kurztext anzeigen. Nach ein paar kurzen Tests war klar, dass ich dazu die contents.php anpassen muss. Also content.php nach sparkling-child/content.php kopieren und die Einbindung des Thumbnails („the_post_thumbnail“) finden und löschen. Stattdessen weiter unten folgende Zeile mit php-Code einfügen:

content.php
...

<div class="entry-content">
<?php the_post_thumbnail( 'thumb', array( 'class' => 'pull-left post-thumb' )); ?>

...

Mit dieser Zeile, hohlen wir uns das Beitragsbild (falls es für den jeweiligen Post existiert) in den Abmessungen ‚thumb‘. Dies ist eine Bildgröße, die wir in der functions.php ergänzt haben (TODO: Funktionen anpassen und verlinken/hinweisen). Damit hochgeladene Bilder ebenfalls in dieser Auflösung vorliegen.

Die (Vorschau-)Bilder die bereits hochgeladen sind müssen neu generiert werden, dazu ist das Plugin Regenerate Thumbnails nützlich. Dies muss nur einmal nach Änderungen im Quellcode durchgeführt werden, neu hochgeladene Bilder, bekommen automatisch dieses Format (dafür habe ich die Größe in der functions.php eingetragen).

Breite Header für single-pages

Ich weiß nicht ob es sich um einen Bug handelt, oder ich irgendwo einen Fehler gemacht habe, aber welche Bildgröße für das Beitragsbild verwendet wird, wird im Template single-page.php ganz oben durch eine If-Abfrage, nach dem aktuellen Seitenlayout geregelt. Doch egal wie ich mein Standard-Layout und das Seitenlayout für beliebige Posts gesetzt habe, wurde stets das kleinere Bild angezeigt (auch beim fullwidth-Template). Die Bilder wurden korrekt in allen Größen hochgeladen. Wie auch immer war das eine gute erste Übung um mal in den Code von so einem Theme reinzuschnuppern und einen schnellen Hotfix einzubauen: Wir kopieren uns die content-single.php ins Child-Theme und ersetzen folgende Zeilen

sparkling-child/content-single.php (Ausschnitt)
if ( is_page_template( 'page-fullwidth.php' ) )
		the_post_thumbnail( 'sparkling-featured-fullwidth', array( 'class' => 'single-featured' ));
	else
		the_post_thumbnail( 'sparkling-featured', array( 'class' => 'single-featured' ));

durch the_post_thumbnail('header', array('class' => 'single-featured')); Dadurch wird zwar auch fürs etwas schmalere Layout mit Sidebar das große Bild geladen und entsprechend runterskaliert, aber das bisschen Traffic für die paar zusätzlichen Pixel bei den wenigen Besuchern und Bildern auf meiner Seite, nehme ich vorerst in Kauf.

Affix Sidebar

Ein neues Seitentemplate anlegen

CustomPages Games und Software

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.