WordPress-Themes anpassen

Aus MittelstandsWiki
Wechseln zu: Navigation, Suche

Code-Änderungen sollen erhalten bleiben

Florian Strohmaier, MittelstandsWiki

Von Dirk Bongardt

Wer eine Website auf Basis von WordPress professionell gestalten will, kann unter mehreren tausend Themes wählen. Die meisten davon lassen sich über Theme-Optionen individuell anpassen, und wem diese Möglichkeiten nicht genügen, der kann über den im Backend verfügbaren Editor direkt in CSS- und PHP-Code des Themes eingreifen. Doch diese Möglichkeiten verführen manchen, es sich ein wenig zu einfach zu machen.

Eine typischer Fall: Der Nutzer entscheidet sich für ein Theme, das es nur auf Englisch gibt, und ersetzt im Code die englischsprachigen Begriffe wie „Read more“, „Edit“ oder „Related Posts“ durch ihre deutschen Entsprechungen. Ein paar Wochen später klickt er, ohne lange nachzudenken, auf „Themes aktualisieren“, und stellt bald darauf fest, dass all die mühevoll ins Deutsche übertragenen Begriffe wieder in englischer Sprache erscheinen.

Ein Child Theme ist update-sicher

Das beschriebene Problem tritt nur auf, wenn der Nutzer direkt das Original-Theme anpasst. Dann werden alle Änderungen beim nächsten Update überschrieben. WordPress ermöglicht deshalb den Einsatz von sogenannten Child Themes. Ein Child Theme nutzt die Codebasis seines übergeordneten Themes. Die nötigen Anpassungen nimmt der Nutzer jedoch ausschließlich im Child Theme vor. Diese Änderungen bleiben deshalb auch bei einem Update erhalten.

Um ein Child Theme zu erstellen, benötigt man FTP-Zugriff auf den Server, auf dem das WordPress-System liegt. Dort erstellt man zunächst einen neuen Ordner in dem Verzeichnis, in dem WordPress seine Themes ablegt, also in /wp-content/themes/. Dieser Ordner heißt am besten wie der Ordner des übergeordneten Themes, ergänzt um die Zeichenkette „-child“.

Nun erstellt man eine Datei namens style.css, die folgenden Inhalt haben sollte:

/*
Theme Name: das Child Theme
Description: sinnvolle Beschreibung
Author: Name des Theme-Bearbeiters
Author URI: seine Web-Adresse
Template: Name des übergeordneten Themes
Version: 1.0
Tags: Eigenschaften des Child-Themes
*/
@import url("../Name_des_Parent-Theme-Ordners/style.css");<

Diese Datei speichert man nun im Ordner des Child Themes.

Jetzt meldet man sich als Administrator im Backend von WordPress an, wählt den Menüpunkt „Design“ → „Themes“ und aktiviert das eben angelegte Child Theme.

Änderungen gehören in den Child-Theme-Ordner

Alle Theme-Dateien, an denen man Anpassungen vornehmen will, kopiert (!) man nun aus dem Ordner des übergeordneten Themes in den Ordner des Child Themes. Das Original bleibt erhalten (und wird bei einem Theme-Update im Zweifelsfall neu angelegt), aber WordPress greift bei der Seitenauslieferung zuerst auf die Child-Version zu, wenn es eine gibt. Alle übrigen Dateien holt sich das System bei Bedarf aus dem Ordner des übergeordneten Themes.

Also angenommen, man will in den Dateien index.php (für die Startseite) und archive.php (für die Übersichtsseiten) den englischen Begriff „Read more“ durch das deutsche „Weiter“ ersetzen. Dann muss man in den Ordner des Child Themes auch nur die Dateien index.php und archive.php kopieren und dann dort bearbeiten. Erscheint nun ein Update für das Theme, werden nur die Dateien im Ordner des übergeordneten Themes überschrieben, die im Ordner des Child Themes liegenden Dateien bleiben unverändert erhalten – und damit auch alle Änderungen.

Formatanpassungen in der style.css

Wer zu seinem favorisierten Theme wie beschrieben ein Child Theme erstellt hat, dem wird aufgefallen sein, dass die style.css sämtliche Stildefinitionen des übergeordneten Themes importiert. Will man auch die Stildefinitionen anpassen, so verzichtet man auf die Import-Zeile und kopiert stattdessen zunächst von Hand alle Stildefinitionen von der ursprünglichen in die neue Child-Datei style.css. Dann kann man in der neuen Datei style.css die gewünschten Anpassungen vornehmen – und auch diese Anpassungen bleiben nun bei einem Update des übergeordneten Themes erhalten.

Praktischer Tipp
Es gibt viele Gründe, ein Child Theme anzulegen. Bei den genannten Beispielen kann man sich die Sache sogar noch einfacher machen – sofern das Theme sauber gebaut ist und Mehrsprachigkeit per gettext unterstützt. Dann nämlich kann man seinem Theme einfach neue Übersetzungsdateien zuweisen, z.B. mit Poedit oder Plugins wie Loco Translate bzw. dem uralten, aber meist immer noch funktionstauglichen Codestyling Localization.

Google Fonts.jpg Google Fonts: eine Unmenge von kostenfreien Open-Source-Webfonts. Manche davon sind geradezu kostbar, wie diese Fell-Schnitte von Ignio Marini. (Bild: Google Inc.)

Wer dagegen auf wahrhaft vogelwilde Weise mit Schriften und Formaten experimentieren will, sollte Easy Google Fonts ausprobieren. Das Plugin kann das volle Repertoire der Google Fonts dazuschalten und lässt alle Änderungen in einem Live-Preview begutachten.

Mehrere Themes in einer Website

Von Haus aus haben die WordPress-Entwickler die Verwendung mehrerer Themes auf ein und derselben Website nicht vorgesehen. Hätte jeder einzelne Beitrag eine andere Optik und Benutzerführung, würde das die Besucher nur verwirren und hinterließe einen höchst unprofessionellen Eindruck. Mitunter ist es aber durchaus sinnvoll, gezielt einige wenige Beiträge in einer gänzlich anderen Optik darzustellen.

Angenommen, ein Unternehmen will seinen Besuchern im Allgemeinen kurze, informative Beiträge aus der Branche bieten, im Besonderen aber die Neuheiten, die es bei seinem letzten Messeauftritt präsentiert hat, nun in einer umfangreichen, mit Multimedia-Elementen angereicherten Webreportage vorstellen. Dann bietet es sich z.B. an, diesen einen Beitrag mit dem Theme Longform darzustellen.

Story-wordpressthemes-multiple.JPG Das Plugin Multiple Themes kann einzelnen URLs ein anderes WordPress-Theme zuweisen. (Bild: Dirk Bongardt)

In solchen Fällen hilft das Plugin Multiple Themes. Damit ist es möglich, einzelnen Beiträgen, Seiten oder Gruppen von URLs separate Themes zuzuweisen. Umgekehrt lässt sich ein separates Theme z.B. auch nur für die Startseite festlegen. Die Handhabung ist auf den ersten Blick ein wenig sperrig, das liegt aber vor allem an den umfassenden Erklärungstexten, die nicht etwa als separate „Hilfe“ angeboten werden, sondern die benötigten Einstellungsdialoge direkt umgeben.

Einer Seite ein eigenes Theme zuweisen

Um, wie im Beispiel, einen einzelnen Beitrag mit dem Theme Longform darzustellen, alle anderen Inhalte aber unangetastet zu lassen, notiert man sich zunächst den Permalink, unter dem dieser Beitrag zu erreichen ist. Dann ruft man im Backend den Menüpunkt „Einstellungen“ → „Multiple Themes Plugin“ auf und dort die Registerkarte „Settings“. Ein paar Scrolls weiter unten, findet man die Überschrift „For An Individual Page, Post …“; dort wählt man die Option „URL“, sucht aus der Auswahlliste das gewünschte Theme und kopiert den notierten Permalink in die Adresszeile ein. Noch weiter nach unten klickt man schließlich auf „Save All Changes“.

Von jetzt an erscheint der gewählte Beitrag im Gewand des Longform-Themes. Welcher URL man welches Theme zugeordnet hat, kann man übrigens ebenfalls in den Settings des Plugins überprüfen. Unter der Überschrift „Current Theme Selection Entries“ lassen sich diese Zuordnungen auch wieder aufheben.

Wer seine Site dagegen von Anfang an so konzipiert hat, dass sie mehrere getrennte Unterbereiche umfasst, ist mit der Multisite-Option von WordPress deutlich besser bedient.

Nützliche Links