In diesem Artikel kläre ich die Frage was WordPress Themes sind, woher man diese bekommt und installiert und die Empfehlung zur Nutzung von Child Themes.
Wir haben in den vorangegangenen zwei Artikeln WordPress installiert, uns das erste mal in den Admin Bereich eingeloggt und diverse Einstellungen vorgenommen. Bevor wir uns dem Thema Security widmen (können), müssen wir uns vorab mit dem Thema Themes beschäftigen.
Nach der Installation von WordPress ist das aktuellste Standard WordPress-Theme installiert. Ein Theme bestimmt das Aussehen deiner Webseite oder deines Blogs, es ist quasi wie das Kleidungsstück für deine Webseite. Im Theme wird die Schriftart bestimmt und das Webdesign. Außerdem gibt es jede Menge Funktionen, die ein Theme bietet. Je nach Art des Themes ist ein Theme speziell vorbereitet für eine Portfolio-Webseite, ein Blog, ein Online-Magazin oder ein Onlineshop. Es gibt aber auch sehr große, allgemeine WordPress-Themes, die ähnlich wie ein Baukastensystem alles bieten. Diese Themes sind allerdings dafür meist ein bisschen aufwendiger einzurichten, aber geeignet, wenn du eine größere Webseite mit mehreren Bereichen (z.B. Business-Startseite, Shopfunktion und Blog) einrichten möchtest.
Bei Themes wird außerdem zwischen kostenlosen Free-Themes und Premium-Themes unterschieden. Kostenlose Themes können direkt über den WordPress Adminbereich unter Design / Themes in einer Vorschau angeschaut und dann installiert und aktiviert werden. Premium-Themes können dagegen direkt beim Themegestalter oder über ein Theme-Marketplace gekauft werden.
1. Themes
Bei der Installation von WordPress werden aktuell drei Themes mitinstalliert: twentyfifteen, twentysixteen und twentyseventeen. Dies sind die letzten Standard Themes von WordPress. Ein Theme bestimmt das Layout und Aussehen deiner Webseite, deines Blogs oder deines Online-Shops. Je nach Theme ist es speziell auf einen bestimmten Anwendungsbereich vorbereitet, z.B. Blog, Portfolio-Webseiten, Online-Shop etc. Es hat von zuhause aus direkt ein paar zusätzlichen Features bzw. Funktionen an Board. Gerade im Premium Theme Bereich gibt es sehr große und umfangreiche WordPress Themes, die jeden Bereich abdecken möchten. Es gilt also das beste Theme für seine Bedürfnisse zu finden und gleichzeitig darauf zu achten, das sie nicht “überfrachtet” sind.
Wer ein anderes Theme nutzen möchte, muss dieses erst einmal finden und installieren. Das Finden alleine ist zumeist schon schwierig, da man gewisse Vorstellungen vom Design hat und es diverse Quellen für kostenlose und kostenpflichtige Themes gibt.
Ich persönlich nutze derzeit ein kostenpflichtiges Theme von themeforest.net, welches ich weiter angepasst / „customized“ habe.
1.1 Kostenlose Themes
Kostenlose Themes können entweder direkt über den WordPress Adminbereich unter Design / Themes in einer Vorschau angeschaut und dann installiert und aktiviert werden oder aber direkt von den jeweiligen Webseiten der Themeersteller heruntergeladen werden.
1.2 Premium Themes (kostenpflichtig)
Da kostenlose Themes zumeist nur relativ wenige Funktionen mit sich bringen und auch vom Layout nicht überragend sind, sind die sogenannten Premium-Themes oftmals die bessere Alternative. Wobei in den letzten Jahren die Qualität der kostenlosen Themes zweifelsohne zugenommen hat. Hinzu kommt, das kostenlose Themes nur teilweise geupdated werden wenn eine neue WordPress Version erscheint.
Die kostenpflichtigen Premium-Themes bringen meistens umfangreiche Funktionen und Features mit, haben aktuellere Webdesign Techniken “unter der Haube” und sind vom Design her zumeist ansprechender. Hinzu kommt, das diese Themes regelmäßig aktualisiert werden. Hier sollte man bei der Auswahl drauf achten.
Premium-Themes werden zumeist auf Marketplaces angeboten oder ebenfalls über die Webseiten der Themegestalter gekauft werden. Auf folgenden Seiten schaue ich hin und wieder vorbei und “stöber” ein wenig.
- themeforest.net: Aktuell gibt es hier über 10.500 Themes und ist für mich einer der besten Anbieter von Premium-Themes. Ferner gibt es hier (codecanyon.net) auch Premium-Plugins. Hinzu kommt, das man hier auch, standardmäßig sechs Monate, Support bekommt und auch darüber hinaus meist noch Antworten auf später auftauchende Fragen.
- templatemonster.com *: Auch eine sehr umfangreiche Anlaufstelle für WordPress Themes.
- elegantthemes.com: Ersteller vom Divi Theme und The Divi Builder. Der Anbieter hat jedoch nur eine jährliche oder lifetime Mitgliedschaft. Damit bekommt man Zugriff auf alle Themes und Plugins der Seite. Ein Theme mit einer vergleichsweise niedrigen Einzellizenz kann mir hier nicht erstehen.
- creativemarket.com *: Ein weiterer Marketplace mit gut designten Themes.
- elmastudio.de: Hier findet man minimalistische, responsive Themes. Für eine andere Seite habe ich hier ebenfalls bereits ein Theme gekauft.
1.3 Eigenes Theme erstellen
Die dritte Möglichkeit ist die Erstellung eines eigenen Themes. Wer sich ein wenig mit Webdesign und WordPress Themes auskennt bzw. Lust hat sich ein wenig damit zu beschäftigen, kann sich sein eigenes Theme entwickeln. Als Basis kann sowohl ein kostenloses bzw. Premium-Theme dienen oder ein sogenanntes Basis-Theme (z.B. Bones, Sage oder Underscores) bzw. Frameworks (z.B: Bootstrap oder Genesis)
Ich habe als Basis ein Premium-Theme gewählt, welches bei Google PageSpeed Insights einen guten Wert liefert und nicht mit unnötigen Features überfrachtet ist. Klar: einer der wichtigsten Punkte war für mich das Design, welches ich allerdings angepasst habe.
Wer sich, wie gesagt, ein wenig mit Programmierung (PHP, CSS und ein wenig Javascript) auskennt und/oder Lust hat sich damit zu beschäftigen und nicht davor zurückschreckt, kann sich mit ein wenig Einarbeitung jedes WordPress Theme vom Design her an seine eigenen Bedürfnisse anpassen.
Bei Problemen bzw. fragen gibt es im Netz diverse Anlaufstellen: zum einen gibt es die offizielle WordPress Dokumentation, WordPress Code Reference und das WordPress Forum. Zum anderen gibt es vor allem für CSS verschiedene Internetseiten, hier sei beispielhaft w3schools.com genannt.
2. Theme Auswahl
Bei der Auswahl von kostenlosen oder (kostenpflichtigen) Premium-Themes solltest du auf folgende Punkte achten:
- Bewertungen & Downloads: Nicht immer ein Garant für Qualität, aber soviele Käufer können sich ja eigentlich nicht täuschen. Zumindest ein Indiz dafür, dass das Theme beliebt ist. Bewertungen können aufschlussreich sein und vor allem 1-2 Sterne-Bewertungen sind interessant, aber deuten nicht zwingend auf ein schlechtes Theme hin.
- Letztes Update: Wähle nur ein Theme aus, welches im letzten halben Jahr geupdated wurde und bereits mehrere Updates hat. Dadurch kannst du ansatzweise sicherstellen, dass der Entwickler weiterhin aktiv ist und das Theme weiterentwickelt und an zukünftige WordPress Versionen anpasst und Fehler bzw. eventuelle Sicherheitslücken beseitigt.
- Design / Layout: Mittlerweile gibt es bei den meisten Themes Live-Demos, in denen man sich einen ersten Eindruck vom Theme machen kann und sieht, ob es seinen Ansprüchen genügt und alles beinhaltet was man benötigt.
- Responsive Design: Die Live-Demo solltest du auf allen möglichen Devices ausprobieren um sicherzustellen, das es auch responsive ist. Responsive bedeutet, dass die Lesbarkeit des Inhaltes auf allen Devices gewährleistet ist. Ein Responsive Design sollte heutzutage ein Musst-Have sein.
- Welche Funktionen werden benötigt?: Was für eine Art von Webseite möchte man betreiben: Blog, Online-Shop etc.? Wähle nicht ein Theme mit den meisten Features und Funktionen, diese sind meist überladen, da sie alle Bereiche abdecken möchten. Vor allem Premium-Themes kommen mit integrierten Plugins, Shortcodes oder Ähnlichem daher. Manchmal ist ein minimalistisches Theme mit wenigen Features besser geeignet, welches man dann durch gute Plugins erweitern kann.
- Ladezeiten / Side Speed: Bei Google ist die Ladegeschwindigkeit der Seiten mittlerweile ein Rankingfaktor. Aber auch die Besucher deiner Webseite möchten ja nicht unnötig lange auf den Seitenaufbau warten, nachher verlassen sie “genervt” deine Seite bevor sie sie überhaupt richtig zu Gesicht bekommen haben. Hierzu gibt es verschiedene Online-Tools wie Google PageSpeed Insights oder Pingdom Tools.
- Support & Dokumentation: Wichtig kann ein guter Support werden, wenn man Probleme und/oder Fragen bzgl. Anpassungen hat. Prüfe vorab wielange Support gegeben wird, in welcher Form (E-Mail, Support Forum) und ob es eine Dokumentation für die Einstellungen und Einrichtung des Themes gibt.
3. Theme Installation
Es gibt verschiedene Möglichkeiten ein neues Theme zu installieren:
- im Admin-Bereich unter dem Menüpunkt Themes ein Theme von WordPress.org installieren
- Upload über den Admin-Bereich
- Upload per FTP
4. Nutzung von Child Themes
Nachdem wir das Theme installiert haben und sollte das Theme kein Child Theme integriert haben (die meisten Premium Themes z.B. haben bereits ein eigenes Child Theme dabei), erstellen wir ein eben solches. Ein Child Theme sind extrem praktisch, wenn man das entsprechende Theme nach seinen Vorstellungen anpassen möchte. Die vorgenommen Änderungen werden ausschließlich im Child Theme gemacht und bei einem Update des eigentlich Themes, auch Parent (=Eltern) Theme genannt, bleiben die eigenen Anpassungen erhalten. In den folgenden Schritten erkläre ich, anhand des Standardthemes twentyseventeen, wie ein solches Child Theme erstellt wird.
4.1 Child Theme anlegen
Als erstes erstellst du einen neuen Ordner per FTP im Verzeichnis ./wp-content/themes/, in unserem Beispiel twentyseventeen-child. In diesem Ordner erstellst du jetzt eine neue style.css Datei mit folgendem Inhalt:
/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyseventeen
Version: 1.3
*/Neben der Angabe des Theme Namens mit angehängtem Child, ist der Eintrag Template besonders wichtig bzw. zwingend notwendig. Ohne die korrekte Angabe wird das neu erstellte Child Theme nicht im Admin-Bereich vorfinden. Zusätzlich kopiere ich die screenshot.png Datei aus dem Basis Theme in das Childe Theme Verzeichnis, damit im Admin-Bereich kein “graues” Bild angezeigt wird. Dies ist jedoch reine Optik.
Wenn alles korrekt erstellt worden ist, solltest du nun unter Design Themes dein Child Theme sehen und kannst es direkt aktivieren.
4.2 CSS Datei erstellen
Das Child Theme hat lediglich eine leere style.css Datei und somit keine CSS Styles, so dass deine Website “unformatiert” ist. Da man in den meisten Fällen das Parent Theme nur an gewissen Stellen seinen (Design-)Bedürfnissen anpassen möchte, ist es ratsam die style.css des Parent Themes in das Child Theme zu laden.
Hierfür ergänzt du in der eben angelegten style.css Datei des Child Themes folgende Zeile:
@import url("../twentyseventeen/style.css");Rufst du nun deine Website erneut auf, sieht sie genauso aus wie vorher mit dem Parent Theme. Ab jetzt kannst du in deinem Child Theme direkt in der style.css Designanpassungen vornehmen. Veränderst du CSS-Eigenschaften aus dem Parent Theme musst du evtl. bei manchen Styles !important ergänzen, damit diese auch überschrieben werden.
body {
color: #666 !important;
}4.3 Theme Datei anpassen
Neben dem Style Sheet können alle weiteren Theme Dateien ebenfalls angepasst werden, wie z.B. header.php, index.php oder footer.php. Wenn du eine solche Datei ändern möchtest, kopierst du diese von dem Parent Theme in das Child Theme Verzeichnis und passt diese nach deinen Wünschen an.
Du kannst im Child Theme auch weitere Templates anlegen und in dein Theme integrieren.
WordPress sucht zuerst im Child Theme Verzeichnis nach der jeweiligen Datei und erst dann im Parent Theme Verzeichnis. Einzige Ausnahme ist die functions.php, dazu aber im nächsten Abschnitt mehr.
4.4 Anpassungen der functions.php
Wenn man im Child Theme Verzeichnis eine functions.php anlegt, ersetzt diese nicht die functions.php des Parent Themes, sondern wird zusätzlich, vor der functions.php des Parent Themes geladen. Somit kannst du hier zusätzliche PHP-Funktionen integrieren, ohne das diese bei einem Update des eigentlichen Themes verloren gehen.
Der Beitrag gehört zu einer Artikelserie:
