WordPress/Child Theme einrichten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10min
Schwierigkeitsgrad
Anfänger
Vorausgesetztes Wissen
Grundkenntnisse in HTML, CSS und PHP

Das Aussehen einer WordPress-Seite wird über sein Theme festgelegt. Ein solches Theme beinhaltet nicht nur ein eigenes Stylesheet, sondern auch eigene Templates für header und footer. Damit dort vorgenommene Änderungen bei einer automatischen Aktualisierung nicht überschrieben werden, empfiehlt es sich ein eigenes Child Theme zu definieren.

Themes[Bearbeiten]

Bei wordpress.org/themes können Sie einfach und kostenlos geeignete Standard Themes aussuchen und herunterladen. Zusätzlich gibt es viele Stellen im Netz, an denen Sie weitere Themes finden. Die meisten kosten einen zweistelligen Betrag - verglichen mit den Preisen, die für einen professionellen Dienstleister fällig werden, ist das ziemlich günstig.

Gerade Anfänger sind aber mit den zahlreichen Funktionen großer Themes schnell überfordert. Bekannte Themes kommen daher oft mit mehreren Vorkonfigurationen in unterschiedlichen Layouts, so dass man schon einmal grob voreinstellen kann, in welche Richtung es gehen soll. Aber gerade der häufigste Wunsch - die Anpassung an eigene Farben - führt dazu, dass man die oft weit verstreuten Einstellungen für Hintergründe, Link-, Text-, Menü-, Rahmen- und/ oder Akzentfarben suchen und vereinheitlichen muss. Das kann zeitaufwändig werden und ist oft mit wenigen Zeilen CSS - wenn man das schreiben kann - deutlich schneller erledigt.

Empfehlung: Die mit WordPress mitgelieferten Standard Themes sind dank des geringeren Funktionsumfangs für Anfänger oft besser geeignet. Es gibt kaum Möglichkeiten, Einstellungen vorzunehmen, manchmal lässt es sich aus (wenigen) Farbvarianten wählen. Dafür ist man schnell mit einem einfachen Layout fertig und kann sich erst einmal um die Inhalte kümmern. Gerade aufgrund ihrer Einfachheit sind die Wordpress-Themes, deren Namen durchweg mit twenty beginnen, schlanker von ihrer HTML-Struktur als kommerzielle Produkte. Das HTML-Markup hat zwar auch noch viele Elemente und Klassen, die man unter Umständen nicht braucht, ist aber tendenziell weniger aufgebläht, als viele andere Themes.

Die vorhandenen Klassen sind ein Zugeständnis, dass man machen muss, wenn allen Anwendern ermöglichen möchte, eigene Designwünsche mittels CSS umzusetzen, die über die Einstellungsmöglichkeiten der Themes hinaus gehen ohne das HTML anpassen zu müssen.

Die Standard Themes von WordPress werden optimal unterstützt und lange Zeit gepflegt. Die neueren sind bereits responsiv und für alle Benutzer zugänglich, sodass Sie sich nicht mehr darum kümmern müssen. Themes die älter als 5 Jahre sind, sollten Sie nur verwenden, wenn das unbedingt nötig ist.
Empfehlung: Richten Sie sich bei der Auswahl des Themes nicht nach Farben, Hintergründen und Bildern, sondern eher nach der Seiteneinteilung. Die Farben und Schriftarten können später mit wenigen Handgriffen geändert werden.

Child Theme[Bearbeiten]

Wenn Sie ein Theme stärker anpassen wollen, empfiehlt es sich ein Child Theme anzulegen. Dieses Child Theme wird nach dem eigentlichen Theme geladen und überschreibt dessen Einstellungen. Auch wenn es dabei zu geringen Geschwindigkeitseinbußen kommt, ist dies dem Entwickeln eines eigenen Themes vorzuziehen.

Um ein Child Theme anzulegen, legen Sie per FTP im Ordner wp-content/themes einen Unterordner mit dem Namen des Child Themes an.

Stylesheet[Bearbeiten]

In diesem Ordner wird eine Stylesheet-Datei styles.css angelegt. Sie enthält als Information folgenden Kommentar:

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Layout für unseren Verein .V.
 Author:       Vorname Nachname
 Author URI:   https://selfhtml.org/
 Template:     twentyfifteen
 Version:      1.0
 Text Domain:  twenty-fifteen-child
*/
Beachten Sie: Tragen Sie bei Template den Namen des Parent-Themes ein. Sonst wird das dazugehörige Theme nicht gefunden.

functions.php[Bearbeiten]

Danach erstellen Sie eine Datei functions.php. In dieser wird festgelegt, dass zunächst das Stylesheet des Original-Themes (parent-style) geladen wird. Erst danach wird das Stylesheet des Child-Themes (child-theme-css) geladen.

Beispiel: functions.php
<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

auswählen[Bearbeiten]

Im Backend von WordPress können Sie unter Design > Themes nun alle verfügbaren Themes sehen und das neue Child Theme aktivieren.

Child Theme anpassen[Bearbeiten]

Hierfür gibt es drei Möglichkeiten. Sie können in der styles.css Farben, Schriften und die Seitenaufteilung an Ihre Vorstellungen anpassen. Das geht erstens über das Backend von Wordpress (Design > Editor und in der rechten Spalte die zu bearbeitende Datei auswählen - Sie sehen hier nur die Dateien die zu Ihrem (Child-)Theme gehören). Zweitens können Sie diese Datei auch herunterladen, in einem eigenen Editor bearbeiten und nach den Änderungen wieder hochladen.

Alternativ können Sie auch den erstaunlich komfortablen Editor des Customizers verwenden, um eigenes CSS hinzuzufügen. Das ist für Anfänger vermutlich der einfachere Weg. Profis werden aber die erweiterten Möglichkeiten des Lieblingseditors, einer Versionsverwaltung und die Einbindung in das eigene Backup-Konzept bevorzugen und daher die CSS-Datei auf dem eigenen Rechner bearbeiten und anschließend in die Wordpress-Installation hochladen.

Ihre Einstellungen überschreiben die des Standard Themes.

Beachten Sie: Sie sollten grundsätzlich nur an einer Stelle Änderungen vornehmen, also entweder an der styles.css oder im Customizer, sonst verliert man leicht den Überblick, wo man welche Anpassungen vorgenommen hat.

Falls etwas nicht passt, können Sie die vorherige Version wiederherstellen - besser ist es jedoch Änderungen am CSS zuerst im Seiteninspektor live auszuprobieren und, erst wenn die Werte passen, sie dann in die styles.css zu kopieren.

styles.css[Bearbeiten]

Wahrscheinlich werden Sie im Layout nicht bei Null anfangen, sondern auf einer bestehenden Webseite, einem vorhandenen Logo oder etablierten Vereinsfarben aufbauen.

Das Logo sollte in einer vektorisierten From (vorzugsweise SVG) vorhanden sein. Sie können Rastergrafiken konvertieren; häufig ist ein Neuzeichnen aber schneller.

Aus diesen Farben sollte eine Farbpalette aus zueinanderpassenden Farben entwickelt werden.

Hauptartikel: Grafik/Farbkonzept
Empfehlung: Achten Sie bei der Auswahl von Text- und Hintergrundfarbe auf ausreichende Kontraste und bei der Schriftgröße auf eine gute Lesbarkeit.
Beachten Sie: Wenn Sie externe Fonts von einem CDN wie Google einbinden, müssen Sie dies in Ihre Datenschutzerklärung aufnehmen.

header.php[Bearbeiten]

Das verwendete Farbkonzept betrifft hauptsächlich die Farbeinstellungen der styles.css. Daneben können bei mobilen Geräten auch die Browserzeile und die Registertabs in einer theme-color gestylt werden. Da sich die Browserhersteller hier noch nicht auf Standards festgelegt haben, sind jeweils mehrere meta-Tags nötig:

footer.php[Bearbeiten]

In der Grundeinstellung enthält der Footer einen "Stolz präsentiert von WordPress"-Hinweis. Diesen können Sie auskommentieren oder ganz entfernen.



Weblinks[Bearbeiten]