Wordpress & WooCommerce Know-how

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.

<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>

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.

<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>

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:

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 );

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 );

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');
	
});

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');
    
  });

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 : )