Theme anpassen mit Child-Theme
WordPress bietet die Möglichkeit, ein vorhandenes Theme individuell anzupassen, in dem man dazu ein Child-Theme erstellt. Das ist sozusagen ein Unter-Theme zu einem vorhandenen Theme. Das ist deswegen wichtig, da man damit das vorhandene Theme nicht ändert, denn diese Änderungen würden bei einem Update verloren gehen.
Die Erstellung eines Child-Themes möchte ich an folgendem Beispiel erklären. Auf einer Vereinshomepage wird über das Theme in der rechten Sidebar ein Widget angezeigt. Und auch auf den Detail-Seiten des asVerein-Terminkalenders wird dieses Widget angezeigt. Dort sollte es aber nicht stehen. Um das Widget nun auf dieser Detail-Seite nicht anzuzeigen, muss das Theme angepasst werden, da das Original-Theme keine Einstellung dafür bereitstellt.
Um ein eigenes Child zu erstellen, muss man zuerst im Verzeichnis /wp-content/themes ein neues Verzeichnis für das Child-Theme erstellen:
In unserem Beispiel wurde das Verzeichnis des Child-Themes astheme-child benannt. In diesem Verzeichnis müssen nun zwei Dateien angelegt werden: style.css und functions.php. Dies sind die beiden Basis-Dateien.
Der Inhalt der Datei style.css muss folgenden Inhalt haben:
/* ===================================================================================
* Theme Name: as-Theme Child
* Theme URI: https://www.asuess.de
* Description: Das Theme für Vereins- und Mitgliederseiten
* Version: 1.0
* Author: asuess
* Author URI: http://www.asuess.de
* Template: astheme
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
====================================================================================== */
Damit wird WordPress angezeigt, dass es sich um ein Theme handelt. Wichtig ist dabei die erste Zeile mit "Theme Name: ", hier wird der Name des Themes angegeben, der dann unter Design/Themes" angezeigt.
Weiterhin wichtig ist die Zeile "Template: astheme". Damit wird angegeben, dass dieses Theme ein Child des Parent-Themes "astheme" ist, und damit auch alle Eigenschaften dieses Themes übernimmt.
Nun können Sie unter "Design->Themes" das neue Child-Theme aktivieren:
Nach der erfolgreichen Aktivierung wird das Child-Theme als aktuelles Theme angezeigt. Am Layout der Homepage ändert sich nichts, es kann nur sein, dass im Customizer individuelle Einstellungen übernommen werden müssen.
In der Datei "style.css" können Sie nun eigene CSS-Styles zur Formatierung hinterlegen. Damit diese genutzt werden, müssen Sie die Datei "style.css" als Stylesheet registrieren. Dazu fügen Sie in der Datei "functions.php" folgende Anweisungen ein:
<?php
add_action( 'wp_enqueue_scripts', 'astheme_child_enqueue_styles', 99 );
function astheme_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
}
Mit diesen Anweisungen wird über die WordPress-eigenen Funktionen die style.css registriert und aus der Homepage geladen.
Damit sind nun die Vorarbeiten für das Child-Theme erledigt und die Anpassung für die Detailansicht der asVerein-Events kann erfolgen.
Einzelne Posts in WordPress, und dazu gehören auch die asVerein-Events, werden über die Datei "single.php" angezeigt, die sich im Theme-Hauptverzeichnis befindet. Wenn nun diese Datei in das Hauptverzeichnis des Child-Themes kopiert wird, kann man dort die Anzeige der Posts beeinflussen. Denn WordPress nutzt zuerst die Template-Dateien des Child-Themes, und wenn diese dort nicht vorhanden sind, werden die Dateien aus dem Parent-Theme genutzt.
Wird nun die Datei "single.php" geändert, wirkt sich dies auf alle Posts der Homepage aus, wir wollen aber, dass nur die Detail-Anzeige der asVerein-Events geändert wird. Daher müssen wir uns auf den Post-Type "asverein_events" beschränken.
WordPress definiert für jeden Inhaltstyp einen Post-Type, z.B. Pages und Posts (Beiträge). Plugins und Erweiterungen können eigene Post-Types definieren, "asverein_events" sind ein eigener Post-Type des Plugins asVerein.
Um nur die Anzeige für diesen Post-Type zu ändern, erstellen wir eine Datei "single-asverein_events.php" im Hauptverzeichnis des Child-Themes. Der Name setzt sich dabei aus der Original-Datei "single", dem Bindestrich und der Bezeichnung des Custom-Posttype zusammen.
Nun kopieren wir den kompletten Inhalt aus der Datei "single.php" des Original-Themes (im Hauptverzeichnis) in die neue Datei "single-asverein_events.php". Nach Speicherung wird der Inhalt eines asVerein-Events über diese Datei angezeigt.
Die nun zu erfolgenden Änderungen hängen von dem jeweiligen Original-Theme ab. Will man den Widget-Bereich ausblenden, dann muss man die Anweisung "dynamic_sidebar" suchen und auskommentieren oder entfernen.
Damit hat man die notwendigen Änderungen erstellt, um die Widgets in der Detailansicht der asVerein-Events nicht mehr anzuzeigen. Natürlich kann man über die Child-Themes noch viele weitere Anpassungen vornehmen.