So entfernst du das Gutenberg-CSS aus WordPress

Seit 2018, genauer mit dem Maintenance Release 4.9.8 im August 2018, ist der neue Gutenberg-Editor fester Bestandteil von WordPress.

In diesem Release war eine Gutenberg-Demo enthalten und musste nicht mehr aktiv vom Benutzer als Plugin installiert werden. Somit konnten alle Benutzer den neuen Editor testen, bevor er mit WordPress 5.0. „Bebo“ der neue Standard-Editor von WordPress wurde.

Das Problem war nur: Nicht jedes Theme oder Plugin war zum Start von Gutenberg bereit, mit dem neuen Editor zusammenzuarbeiten. Auch Gutenberg selbst war und ist nicht fehlerfrei.

Das hat zu großen Diskussionen innerhalb der WordPress-Community geführt und neben diversen Plugins, die Gutenberg abschalten, ClassicPress hervorgebracht, ein Fork von WordPress aus der Zeit vor Gutenberg.

Ich möchte an dieser Stelle aber gar nicht auf das Für und Wider von Gutenberg eingehen, sondern will dir kurz aufzeigen, was es bei der Abschaltung von Gutenberg zu beachten gibt.

Zu Anfang gab es noch einige Plugins, die den Gutenberg-Editor deaktiviert haben. Mittlerweile hat sich ganz klar ein Plugin etabliert, wenn du deine Website ohne Gutenberg betreiben möchtest oder musst:

Mit über 5 Millionen aktiven Installationen (Stand August 2019) ist der Classic Editor das Mittel der Wahl.  

 

1. Den Classic-Editor installieren

Nach der Installation und Aktivierung des Plugins kannst du den Editor global als Standard-Editor einstellen. Das Plugin bringt keine komplexen Konfigurationen mit sich, sondern regelt die Einstellungen „Gutenberg oder nicht“ für deine WordPress-Installation an zentraler Stelle unter Einstellungen › Schreiben.

Nach erfolgreicher Umstellung auf den Classic Editor sieht deine Eingabemaske wieder wie vor dem Gutenberg Update aus und alle Komponenten, egal ob Theme, Plugin, etc. arbeiten wie gewohnt.

Das wars, alter Zustand wieder hergestellt? Fast!

 

2. Das Gutenberg-CSS entfernen

Einen Schönheitsfehler bringt das WordPress Update seit der Version 5 mit sich. Mit der Umstellung auf Gutenberg werden auch neue Ressourcen (Javascript, CSS) im Frontend ausgegeben.

Da wir gerade den Editor ausgetauscht haben, brauchen wir z.B. das gesamte „Block CSS“, welches uns WordPress ausspielt, nicht mehr.

Für Gutenberg wird im Frontend die Datei wp-includes/css/dist/block-library/style.min.css mit einer Dateigröße von ca. 30KB geladen.

Das ist für unsere Lösung ohne Gutenberg nur unnötiger Ballast, denn in Zeiten von Performance-Optimierungen zählt jedes Byte und jeder Request. Mehr zu Performance- Optimierung in WordPress findest du bei uns hier.

Du kannst das Laden der Datei aber ganz einfach mit folgendem Code in deiner functions.php unterbinden:

//Gutenberg CSS entfernen https://www.drweb.de/gutenberg-css-wordpress-entfernen/
add_action( 'wp_enqueue_scripts', 'drweb_remove_gutenberg_block_css', 100 ); 
function drweb_remove_gutenberg_block_css() {
wp_dequeue_style( 'wp-block-library' ); }

Durch das Ausführen des obigen Codes wird WordPress angewiesen, die Referenz auf wp-block-library-css zu löschen und die Datei wird nicht mehr automatisch ausgespielt. Somit sparst du dir einen unnötigen HTTP-Request und machst deine Seite einen Tick schneller.


 

WordPress functions.php richtig bearbeiten ohne die Website lahmzulegen

Oft möchte man eine Kleinigkeit an seinem Theme verändern, neue Funktionen einbinden oder bestehende verändern. Im Netz finden sich haufenweise Tutorials, die diese Vorhaben ermöglichen sollen. Dann lautet es nicht selten: „füge diesen Schnipsel in die functions.php deines Themes ein und fertig!“. Ja, wenn es nur so einfach wäre. Denn nicht zu selten führt genau das zu einem Webseiten Komplettausfall. Die functions.php Datei ist ein Sensibelchen und wer ohne Kenntnisse den Code einfach irgendwo einfügt, riskiert damit die ganze Website lahmzulegen. In diesem Tutorial werde ich dir zeigen, wie du die functions.php deines WordPress Themes richtig bearbeitest, ohne deine Website lahmzulegen.

 

Wie kann ich die Functions.php meines Themes bearbeiten?

Es gibt zwei Hauptmethoden um die Dateien deines Themes zu bearbeiten. Wie so oft, ist die bequeme Methode, nicht die beste um Änderungen vorzunehmen. Im Folgenden werde ich auf die beiden Methoden näher eingehen.

 

Änderungen an der PHP via WordPress Code Editor

Die bequeme Methode, die ich ausdrücklich nicht empfehle, ist Dateien über den WordPress Editor zu bearbeiten. Du findest den Quellcode unter Design > Editor. Anschließend muss das zu bearbeitende Theme ausgewählt werden. Die zur Verfügung stehenden Dateien, werden hiernach auf der rechten Seite aufgelistet.

 

In der Auflistung findest du die Template (php)- und Stylesheet (CSS) Dateien deines Themes. Während Änderungen am CSS meist zu keinen Komplikationen führen und im schlimmsten Fall das Design etwas verschoben wird, können Änderungen an den PHP Dateien die ganze Website lahmlegen. Deshalb sollte diese Methode nicht für Experimente herhalten und Änderungen nur vorgenommen werden, wenn du dir total sicher bist, indem was du machst.

 

 

Änderungen an der PHP via FTP vornehmen

Die bessere und sicherere Lösung ist ein FTP (File Transfer Protocol) Client zu nutzen. 

 

Anleitung: Theme functions.php richtig bearbeiten

Als erstes stellen wir eine Verbindung zwischen unserem FTP-Client und dem Webhosting-Server her. Anschließend durchsuchen wir das unseren Webhosting-Server nach der zu bearbeitenden Datei im rechten Feld von FileZilla. Wenn du die functions.php bearbeiten möchtest, dann findest du diese unter: /wp-content/themes/*dein-Theme*/functions.php. 

 

 

Bevor die Datei bearbeitet wird, sollte eine Sicherheitskopie erstellt werden. Dafür definieren wir im linken Bereich des Clients einen Speicherort (z. B. Desktop oder USB-Stick) für das Backup, klicken mit der rechten Maustaste auf die zu sichernde Datei und wählen Herunterladen.

Die heruntergeladene Datei nutzen wir als Sicherheitskopie, falls etwas bei der Bearbeitung schiefgehen sollte und wir die Datei wiederherstellen müssen. Anschießend klicken wir mit der rechten Maustaste auf unsere Sicherheitskopie und benennen diese um (z. B. Kopie functions.php). Jetzt laden wir die „originale“ functions.php erneut herunter. Danach sollte es bei dir wie auf dem folgenden Screenshot aussehen:

Anschließend kann die Datei bearbeitet werden. Dazu öffnen wir das Dokument mit einem Rechtsklick (nicht mit Doppelklick). Nach dem Öffnen können die gewünschten Änderungen vorgenommen werden. Hierfür solltest du ein einfaches Textverarbeitungsprogramm verwenden. Auf einem Mac bietet sich TextEdit an. Windows Nutzer können Notepad verwenden. Wer beide Programme nicht hat, kann sich das kostenlose Textverarbeitungsprogramm Atom herunterladen. Wer nicht weiß, an welcher Stelle der Code eingesetzt werden muss, dem wird folgender Artikel weiterhelfen: Code in die Theme functions.php richtig einbinden

Sind alle Änderungen eingetragen, ist die Datei abzuspeichern. Anschließend klicken wir erneut mit der rechten Maustaste auf die Datei und wählen Hochladen.

FileZilla wird dich jetzt darauf hinweisen, dass eine Datei mit gleichem Namen bereits existiert. Wähle Überschreiben, um die ursprüngliche Datei, mit der geänderte Version zu ersetzen.

Sobald die geänderte Version auf den Server geladen wurde, ist die Funktionalität der Website zu überprüfen. Bis auf deine Änderung, sollte alles so sein, wie es auch vorher war. Ist alles okay? Dann wärs das!

Zeigt deine Website einen weißen Bildschirm oder eine Fehlermeldung, dann ist etwas schief gelaufen. Vielleicht hast du den Code an die falsche Stelle eingefügt?

 

 

Hilfe bei weißem Bildschirm oder Fehlermeldung

Gut, dass wir eine Sicherheitskopie angefertigt haben. Wer das nicht getan hat, weil er sich dachte, dass es schon klappen wird, für den haben wir ebenfalls eine (aufwendigere) Lösung.

Mit Sicherheitskopie:

Versuch den Code wieder in das ursprüngliche Format zu bringen oder füge deinen Code an die richtige Stelle ein und überprüfe deine WordPress Website erneut auf Funktionalität. Wenn das nicht klappt, dann benenne die Sicherheitskopie wieder mit dem ursprünglichen Dateinamen (functions.php). Lade die Version auf deinen Server hoch und überschreib somit die geänderte Version. Der Fehler sollte jetzt behoben sein.

Ohne Sicherheitskopie:

Lade das von dir verwendete Theme neu herunter. Wenn du ein kostenloses WordPress Theme benutzt, kannst du es hier herunterladen: WordPress Themes. Finde die functions.php des Themes. Lade diese auf den Server hoch und überschreib somit die Änderungen. Der Fehler sollte jetzt behoben sein.