Nach WordPress 5.9 Update: Wie du die ungewollten WP Gutenberg Styles im Head sowie die SVGs im Body entfernen kannst

   

Wenn du dein WordPress CMS immer auf dem aktuellsten Stand hältst und das CMS kürzlich auf die aktuelle Version WordPress 5.9 „Joséphine ( Release am 25. Januar 2022 ) aktualisiert hast, wirst du festgestellt haben, dass sich im Head deiner WordPress-Seite plötzlich ungewollte Styles befinden und bevor der Body geschlossen wird SVG-Tags auftauchen.

Abb. 1: Ungewollte, überflüssige WordPress Stile im Head nach dem WP Update 5.9
<style id='global-styles-inline-css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff; ... und so weiter ...
</style>
CSS

Die von dem Update eingefügten Stile und SVG (für den Block-Editor) sind im Quellcode deiner Seite überflüssig. Sie blähen deine Seite unnötig auf, erhöhen die Ladezeit und sie führen bei einigen WordPress Themes sogar zu Fehlern.

Abb. 2: Ungewollte SVG, die vor dem schliessenden Body-Tag eingefügt sind
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-dark-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" > ... und so weiter ... </svg>
HTML

Unseren widilo® WP-Themes laufen auch nach dem Update wie gewohnt einwandfrei. Aber, auch wir hatten nach der WordPress-Aktualisierung diese zusätzlichen Zeilen im Source-Code zu verzeichnen.

Da wir sehr viel Wert darauf legen, dass unsere widilo® WordPress-Themes auf den Webseiten oder Blogs, in den Onlineshops oder Buchungssystemen unserer Kunden, schnell, energieeffizient, CO2-reduziert und datenschutzfreundlich laufen, war uns der zusätzliche Junk-Code nach dem WordPress-Update ein Dorn im Auge.

Auch wenn WordPress via github schon verkündet hat, den Fehler in einem der nächsten Updates zu beheben, sind wir nicht gewillt solange darauf zu warten.

So kannst du die WP Gutenberg Styles im Head sowie die SVGs im Body entfernen

Nachfolgend habe ich dir mehrere WordPress Code Snippets zusammengestellt, mit deren Hilfe du den Junk-Code loswerden kannst. Darüber hinaus helfen dir die Snippets dabei, deine Website, deinen Shop oder Blog ein wenig schlanker zu machen und die Ladezeit deiner Site zu verkürzen.

Die PHP-Code-Snippets kannst du am Ende der functions.php-Datei deines Themes einfügen.

So geht’s:

functions.php via FTP ändern

1. Starte deinen bevorzugten FTP-Client (z. B. Filezilla).
2. Stelle eine Remote-Verbindung zu deinem Hosting-Server her.
3. Navigiere zum Ordner /wp-content/themes/.
4. Öffnen den Ordner deines aktives Themes.
5. Suche nach der Datei functions.php.
6. Lade die Datei functions.php herunter.
7. Öffne die Datei functions.php mit einem Texteditor (z. B. Notepad++).
8. Bearbeite und speichere deine Datei.
9. Lade die aktualisierte functions.php auf deinen Hosting-Server hoch.

functions.php im WordPress-Backend ändern

1. Logge dich im WordPress-Backend ein.
2. Navigiere im Admin-Menü zu Design > Theme-Editor.
3. Klicke rechts im Dateiexplorer auf die Datei functions.php.
4. Füge deine Änderungen und Ergänzungen am Ende der Datei ein.
5. Speichere deine Ergänzungen und Änderungen.

Nur die Global Styles im WP Head entfernen

Die in Abb. 1 gezeigten Stile entfernst du aus dem Head mit der folgenden Funktion. Das Entfernen der unerwünschten CSS Stile erfolgt mit Hilfe des Action Hooks add_action( ‚wp_enqueue_scripts‘, ‚themeslug_function_name‘); und dem Deregistrieren des CSS Stylesheets ‚global-styles‘ durch den Einsatz von wp_dequeue_style( ‚global-styles‘ );

  add_action( 'wp_enqueue_scripts', function() {
	
	  // Removes the global styles defined via theme.json from WP-Head
      // @link https://developer.wordpress.org/reference/functions/wp_enqueue_global_styles/
	  wp_dequeue_style( 'global-styles' ); 
		
  }, 100 );
PHP

Nachdem du das Snippet in die functions.php eingefügt hast, solltest du dein Theme sowie den Block-Editor auf Funktionstüchtigkeit überprüfen. Falls es zu Fehlern kommt, entferne das Snippet aus der functions.php. Falls du den Classic-Editor verwendest, dürfte es keine Probleme beim Verwenden des Snippets geben.

Wenn du nicht auf den vollen Funktionsumfang des Block-Editors angewiesen bist oder wenn du den Classic-Editor verwendest, kannst du auch dieses erweiterte Snippet verwenden. Mit diesem Snippet entfernst du weitere, nicht unbedingt notwendige CSS-Stylesheets des Gutenberg-Block-Editors. Das Snippet wirkt sich positiv auf die Ladegeschwindigkeit deiner Site aus. Erläuterungen, Links und Hinweise habe ich im Code-Snippets als Kommentare hinzugefügt.

add_action( 'wp_enqueue_scripts', function() {
	
	// Removes the global styles defined via theme.json from WP-Head, @link https://developer.wordpress.org/reference/functions/wp_enqueue_global_styles/
	wp_dequeue_style( 'global-styles' ); 
	
	// Handles the enqueueing of block scripts and styles that are common to both the editor and the front-end.
	// @link https://developer.wordpress.org/reference/functions/wp_common_block_scripts_and_styles/
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
	
	// Disable the CSS styles of WooCommerce blocks (front-end), WooCommerce > v5.8.
	// Note: WooCommerce changed wc-block-style into wc-blocks-style since v5.8
	wp_dequeue_style( 'wc-blocks-style' ); 
	// If you are on WooCommerce < v5.8 please use:
	// wp_dequeue_style( 'wc-block-style' );
	
	// Disable the WC-Storefront theme Gutenberg blocks
	wp_dequeue_style( 'storefront-gutenberg-blocks' ); 
		
 }, 100 );
PHP

Ungewünschte SVG aus dem WP Body und die Global Styles aus dem Head entfernen

Die unerwünschten SVG wie in Abb. 2 dargestellt plus der Global Styles aus dem Head entfernst du mit dem folgenden WordPress-Snippet:

add_action('after_setup_theme', function() {
	
  // Remove SVG from the body and global styles from head
  remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
	
});
PHP

Auch hierzu habe ich eine erweiterte, website-entschlackende Version des Snippets vorbereitet:

  add_action('after_setup_theme', function() {
    	
    // Remove SVG and global styles 
    // WordPress Version 5.9.0 or less:
	remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
	remove_action('wp_footer', 'wp_enqueue_global_styles', 1);
    // WordPress Version 5.9.1 and above:
    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
	remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
    // WordPress 6.0 coming soon...
    
    // Remove render_block filters and duotones
	remove_filter('render_block', 'wp_render_duotone_support');
	remove_filter('render_block', 'wp_restore_group_inner_container');
	remove_filter('render_block', 'wp_render_layout_support_flag');
    
  });
PHP

Wenn der Einsatz der Snippets bei euch reibungslos verlaufen ist und es keine Komplikationen mit deinem WordPress Theme gegeben hat, bist du nun die unerwünschten WP Styles im Head und die SVG im Body los.

Wenn du Fragen und Anregungen zu diesem Beitrag oder Fragen zu den Themen WordPress oder WooCommerce hast, freue ich mich auf eine Nachricht von dir : )

2 Antworten zu „Nach WordPress 5.9 Update: Wie du die ungewollten WP Gutenberg Styles im Head sowie die SVGs im Body entfernen kannst“

  1. Avatar von Dario
    Dario

    Vielen Dank für den hilfreichen Artikel.

    remove_action( ‚wp_enqueue_scripts‘, ‚wp_enqueue_global_styles‘ );

    reicht bei mir noch noch, ich sehe immernoch die SVG’s, mit diesem Code geht es dann aber:

    remove_action( ‚wp_body_open‘, ‚wp_global_styles_render_svg_filters‘ );

    1. Avatar von heike vollmers
      heike vollmers

      Vielen Dank, Dario : )

      Ich werde deinen Hinweis in meinen Beitrag mit aufnehmen.

      Bis zur WordPress-Version 5.9.0 erreicht man das Entfernen der Global Styles wie im Beitrag beschrieben:
      remove_action( ‚wp_enqueue_scripts‘, ‚wp_enqueue_global_styles‘ );
      remove_action( ‚wp_footer‘, ‚wp_enqueue_global_styles‘, 1 );

      Ab der Version 5.9.1 muss es dann so, wie du es beschrieben hast, aussehen:
      remove_action( ‚wp_enqueue_scripts‘, ‚wp_enqueue_global_styles‘ );
      remove_action( ‚wp_body_open‘, ‚wp_global_styles_render_svg_filters‘ );

      In der WordPress-Version 6.0 habe ich die Snippets noch nicht getestet, werde es aber in Kürze nachholen und ggf. die Snippets noch einmal anpassen und aktualisieren.

      Viele Grüße
      Heike

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert