Mit dem Child-Theme hat man die Möglichkeit Änderungen am Quellcode des installierten Themes durchzuführen. Wenn ein Child Theme installiert ist, werden die Änderungen an beispielsweise CSS-Dateien bei einem Update des Themes nicht überschrieben. Besonders für die ambitionierten WordPress Benutzer, welche sicher im Umgang mit den Programmiersprachen sind oder es gerade lernen möchten ist dies wichtig. Um bei WordPress Änderungen an den Templates und der Struktur des Themes vorzunehmen befindet man sich oft im /wp-content/themes/[name des themes]/ Ordner. Werden die Dateien nun geändert und per FTP hochgeladen, so besteht die Gefahr eines Verlusts dieser Änderungen. Die meisten Themes, bekommen regelmäßig Updates um Sicherheitslücken zu vermeiden und vorsorglich Hacker-Angriffen entgegenzuwirken. Wir empfehlen dringendst jedes Update durchzuführen und WordPress immer auf dem aktuellsten Stand zu halten. Wichtig: Vor den Updates immer ein Backup durchführen, damit die alte Version der Webseite bei einem Fehler noch wiederherstellbar bleibt. Wir empfehlen hierfür das Plugin „Updraft Plus Sicherungen“.

Wenn Sie Änderungen im Quellcode über den Customizer oder etwa besondere Felder direkt in den Theme-Optionen im WordPress-Backend vorgenommen haben, werden diese zwar bei Updates des Themes nicht gelöscht, aber wir empfehlen auch bezogen auf die Ladezeit, diese Änderungen in den direkten Theme-Dateien durchzuführen. Dies funktioniert bei einer begrenzten Anzahl an Dateien auch über das WordPress Backend. Über „Design -> Editor“ können die Dateien direkt im WordPress Backend geändert werden.

Das Child Theme sollte also immer bei der Konfiguration der Webseite immer direkt mit eingerichtet werden. Es ist vernachlässigbarer Mehraufwand, kann aber später einiges erleichtern, da die Umstellung einer vorhandenen Seite auf ein Child-Theme doch oft Probleme mit sich bringen kann.

Wie funktioniert es?

Das Child Theme, ist wie der Name schon beschreibt, ein untergeordnetes Theme zum Haupt-Theme auch Parent-Theme genannt. Ein Child-Theme erfordert also immer ein Parent-Theme und kann dementsprechend auch nur installiert werden, wenn dieses schon bei WordPress installiert und aktiviert ist. Andernfalls wird die Installation des Child-Themes fehlschlagen.

Das Child-Theme per se kommt nur mit ganz wenigen Dateien, bekommt aber in der Ordner Struktur einen eigenen Ordner und wird dann auf dem Server unter /wp-content/themes/[name-des-themes]-child zu finden sein. Im Gegensatz zum Parent-Theme sind dort nur eine functions.php und eine style.css hinterlegt. Diese Dateien geben WordPress an, dass dieses Theme mit dem Parent-Theme verlinkt ist und verweisen auf die Hauptdateien im Theme Ordner.

Child-Theme Download & Installation

Das Child-Theme kann von verschiedenen Seiten heruntergeladen werden oder sogar selbst erstellt werden. Die letzte Variante erfordert ein bisschen Kenntnis über PHP und die WordPress Struktur. Es muss eine functions.php angelegt werden und darüber ein Link zum Parent-Theme erstellt werden. Wir empfehlen definitiv die erste Variante, da die Child-Themes meistens bei jedem offiziellen WordPress Theme von Haus aus mit angeboten werden. Für Premium-Themes, welche beispielsweise über Themeforest.net erworben wurden, wird immer ein Child-Theme mitgeliefert. Dieses befindet sich in der Theme zip-Datei, die über die Downloads Seite des Accounts heruntergeladen werden kann. Die zip-Datei des Child-Themes kann dann einfach nach der Installation und Aktivierung des Parent-Themes über WordPress „Themes->Theme hochladen“ hochgeladen und installiert werden. Sofern das Parent-Theme korrekt installiert ist und die Dateien nicht verändert wurden sollten hier keine Komplikationen auftreten. Am besten wird das bei einer frischen WordPress Instanz installiert, da es bei der Aktivierung des Child-Themes, je nach Theme passieren kann, dass die bereits vorhanden Einstellungen mit den Standard-Werten überschrieben werden. Dies ist von Theme zu Theme unterschiedlich und kann hier nicht pauschalisiert werden. Sollte der Themeforest Zugang verloren sein, oder das Theme woanders erworben worden sein, so gibt es auch andere Software wie einen online Child-Theme Generator, mit dem das Child-Theme direkt erstellt und heruntergeladen werden kann. Wir empfehlen dies erst als zweite Möglichkeit, da die offiziellen Versionen der Child-Themes zuverlässiger funktionieren werden. Allerdings ist dies eine gute Option für Free-Themes die es als OpenSource zum Herunterladen über WordPress oder anderen Seiten gibt.

Das Child-Theme im Einsatz –Änderungen im Theme – So funktioniert‘s

Wenn das Child-Theme nun installiert ist und es keine weiteren Komplikationen gab, kann nun gefahrlos in den Dateien des Parent-Themes gearbeitet werden. Damit die Änderungen aber auch wirklich sicher sind müssen die Dateien, die geändert werden in genau der gleichen Ordnerstruktur wie sie im Parent-Theme hinterlegt sind, in den Child-Theme Ordner kopiert werden. Erst dann können die Dateien verändert werden ohne die Änderungen bei einem Update zu verlieren. Die Parent-Theme Dateien bleiben also im Original und werden in das Child Theme kopiert und dort geändert. Dies ist essentiell, damit das Child-Theme funktioniert. Wir empfehlen, besonders im Hinblick auf die Ladezeitenoptimierung der Webseite jeglichen CSS-Code in die style.css und nicht in den Customizer o.ä. WordPress Editor-Felder die vermeintlich einfacher wirken zu schreiben, da der Ladefluss der Dateien ansonsten nicht optimal ist. Javascript Code sollte grundsätzlich im Footer untergebracht werden und CSS im Head. Dies kann z.B. über die header.php oder footer.php in den Theme Dateien erreicht werden. Aber Achtung, nicht jedes Theme ist gleich und wir empfehlen vorher immer einen Blick in die offizielle Dokumentation des Themes zu werfen.

Der Beitrag WordPress Child Theme installieren erschien zuerst auf Digitalsuite.

1. Caching aktivieren

Caching ist ein Begriff der oft im Bezug auf Webbrowser und Webseiten verwendet wird. Bei diesem Vorgang gibt die Webseite dem Webbrowser quasi die Anforderung gewisse Dateien zwischenzuspeichern, sodass sie bei mehrmaligem Aufrufen der Seite schon geladen sind und nicht erneut vom Server geholt werden müssen. Dies spart sogenannte HTTP-Anfragen und verringert die Ladezeit maßgeblich. Für WordPress ist dies sehr einfach umzusetzen mit Plugins wie WP Super Cache oder WP Fastest Cache. Alternativ kann über die .htaccess Datei im Root Verzeichnis der Webseite über Code die gleiche Anweisung gegeben werden. Wir haben hier eine TXT Datei zum herunterladen mit dem erforderlichen Code erstellt. Dieser muss einfach in die .htaccess Datei eingefügt werden und schon sollte das Browser Caching aktiviert sein.

2. HTTP Anfragen reduzieren

Dies ist einer der wichtigsten und meist unterschätzten Punkte wenn es um Ladezeiten geht. Schon allein ein Bild vom Server zu laden generiert eine HTTP Anfrage und braucht Zeit. Externe http Anfragen, welche Dateien von anderen Servern laden müssen benötigen in der Regel immer mehr Zeit als Anfragen vom gleichen Webserver. Daher sollte sich zu Beginn auf die Reduzierung der externen Anfragen konzentriert werden. Sehr einfach zu erreichen ist dies mit dem WordPress Plugin Autoptimize. Es fasst automatisch alle Javascript und CSS Dateien zusammen und minimiert diese. Da bei WordPress diese Dateien oft unterschiedlich von Theme zu Theme eingebunden werden können wir hier keine Universallösung anbieten. Allerdings sollten Anfragen zu Google Fonts, externen Javascript Bibliotheken oder anderen Frameworks aufs Minimum reduziert werden. Google Fonts lassen sich zum Beispiel exzellent lokal einbinden und dadurch eine Anfrage sparen. Dies gilt natürlich auch für Icon Fonts wie fontawesome.

3. Bilder optimieren und reduzieren

Bilder sind oft die Dateien, welche am meisten Ressourcen verbrauchen. Teilweise sind Bilder bis 500Kb schon sehr groß für Webseiten und sollten nicht allzu häufig eingesetzt werden. Tinypng.com ist eine gute Webseite um Bilder jeglicher Art zu komprimieren und dabei trotzdem die Qualität zu bewahren. Wer etwas fortgeschrittener ist sollte sich in Base64 Encoding einlesen: Durch diese „Verschlüsselung“ kann dem Browser aus einem langen Code aus Zahlen und Buchstaben gesagt werden, wie er das Bild darzustellen hat und so die Anfrage an das Bild komplett gespart werden. Auf den ersten Blick wirken 60 Zeilen lange Zeichenketten zwar wie viel mehr Code, aber für den Browser machen diese Zeilen nur einen ganz minimalen Unterschied. Im direkten Vergleich ist Base64 Encoding immer die bessere Alternative. Hierbei wird im HTML src Attribut des Images anstatt dem Pfad dann einfach die Encodete Zeichenkette eingefügt. Eine weitere Möglichkeit ist es kleine Bilder als SVG direkt ins HTML einzubinden oder in ein großes Bild zusammenzufügen und per CSS als Hintergrundbild einzubauen. Beide Alternativen sparen auch wieder eine HTTP Anfrage und verhelfen zu einer insgesamt schnelleren Seite.

Bei den Optimierungen wird man am Anfang leider nicht viel selbst spüren, daher sollten Ladezeiten Tools wie das von Google, Pingdom oder GTMetrix verwendet werden um in regelmäßigen Abständen zu überprüfen ob die Maßnahmen funktioniert haben. Nichtsdestotrotz sollte die Optimierung einer Webseite nicht auf die leichte Schulter genommen werden und wirklich professionelle Optimierung gehört zu einer Webseite ebenso dazu wie professionelle Bilder und Texte.

Der Beitrag 3 effektive Maßnahmen zur Optimierung der Performance für WordPress Seiten erschien zuerst auf Digitalsuite.