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.

Mit einem Klick auf Design > Themes können Sie die verfügbaren Themes verwalten.

Wordpress-child-theme1.jpg

Wenn Sie über den Vorschaubildern hovern, erscheinen die Buttons Aktivieren und Live-Vorschau, mit denen Sie Themes auswählen, oder aber nur schnell ausprobieren können.

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 style.css angelegt. Sie enthält als Information folgenden Kommentar:

/*
 Theme Name:   TwentySixteen Child
 Description:  Layout für unseren Verein .V.
 Author:       Vorname Nachname
 Author URI:   https://selfhtml.org/
 Template:     twentysixteen
 Version:      1.0
 Text Domain:  twenty-sixteen-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.

functions.php
<?php
/**
* Child theme Stylesheet einbinden 
*/

function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));

}
add_action( 'wp_enqueue_scripts', 'child_theme_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.

Wordpress-child-theme2.jpg

Das (noch leere) Child Theme kann nun aktiviert werden.

Wenn Sie alles richtig gemacht haben, sollte sich nichts an der Ansicht des Parent Themes geändert haben, da das Child Theme ja noch leer ist.

Falls die Webseite ohne CSS-Formatierungen geladen wird, was Sie mit den Entwicklerwerkzeugen überprüfen können, muss die functions.php entsprechend angepasst werden.

screenshot.png[Bearbeiten]

Um das Child Theme auf den ersten Blick zu erkennen, können Sie (natürlich erst nach Abschluss des layout-Gestaltung) einen Screenshot machen und diesen als screenshot.png in den Ordner des Child Themes hochladen.

Child Theme anpassen[Bearbeiten]

Hierfür gibt es drei Möglichkeiten. Sie können in der style.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 style.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 style.css zu kopieren.

style.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 [Grafik/Farbkonzept
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 style.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:

theme-color
<meta name="theme-color" content="#ff0000"> <link rel="icon" sizes="192x192" href="nice-highres.png"> <!-- iOS Safari --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

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.

Auskommentierte bloginfo in der footer.php
<div class="site-info">
<?php
/**
 * Fires before the twentysixteen footer text for footer customization.
 *
 * @since Twenty Sixteen 1.0
 */
do_action( 'twentysixteen_credits' );
?>
<span class="site-title"><a href="<?= esc_url(home_url('/'))?>" rel="home"><?= bloginfo('name')?></a></span>
<!--- <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentysixteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>   --->
</div><!-- .site-info -->
Beachten Sie: Wichtig ist, dass Sie dies in der footer.php des Child Themes erledigen, da die Änderung sonst bei einer Aktualisierung des Themes wieder überschrieben wird.


Weblinks[Bearbeiten]