Veröffentlicht am 8 Kommentare

Customizer-CSS in eigene CSS-Datei auslagern

CSS, das im Customizer eingetragen wird, landet aktuell direkt im Quellcode der Seite und wird von dort ausgeführt. Je nach Menge kann das aber zum Nachteil werden. Insbesondere auch, wenn man selbst kontrollieren möchte, wie genau und in welcher Reihenfolge das CSS lädt, kann es sinnvoll sein, das Customizer-CSS in eine eigene CSS-Datei auszulagern. Gerade auch, weil nicht-kritisches CSS nicht direkt ausgeführt werden soll. Für die Optimierung der Website also definitiv sinnvoll.

Customizer-CSS entfernen

Zuerst muss dabei unterbunden werden, dass das Customizer-CSS auf der Seite direkt als <style>-Tag ausgegeben wird. Dafür gibt es einen Filter:

add_filter( 'wp_get_custom_css', '__return_empty_string' );

Customizer-CSS in eigene Datei speichern

Als nächstes muss das Customizer-CSS in eine eigene Datei gespeichert werden, nachdem der Customizer abgespeichert wurde:

/**
 * Store Customizer CSS in a file.
 */
function my_customize_css_in_file() {
	// get custom CSS
	$post = wp_get_custom_css_post();
	
	if ( ! is_a( $post, 'WP_Post' ) ) {
		return;
	}
	
	global $wp_filesystem;
	
	// initialize the WP filesystem if not exists
	if ( empty( $wp_filesystem ) ) {
		require_once( ABSPATH . 'wp-admin/includes/file.php' );
		WP_Filesystem();
	}
	
	$tempname = wp_tempnam();
	
	$wp_filesystem->put_contents( $tempname, wp_strip_all_tags( $post->post_content ) );
	rename( $tempname, get_stylesheet_directory() . '/customizer.css' );
}

add_action( 'customize_save_after', 'my_customize_css_in_file', 95 );

Dabei wird eine customizer.css generiert, die im selben Verzeichnis liegt wie die style.css des Themes und sämtliches Customizer-CSS beinhaltet.

Generierte CSS-Datei einbinden

Zu guter Letzt muss diese CSS-Datei dann noch eingebunden werden.

/**
 * Enqueue Customizer CSS.
 */
function my_enqueue_customizer_css() {
	if ( ! file_exists( get_stylesheet_directory() . '/customizer.css' ) ) {
		my_customize_css_in_file();
	}
	
	$version = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? time() : filemtime( get_stylesheet_directory() . '/customizer.css' );
	wp_enqueue_style( 'my-customizer-style', get_stylesheet_directory_uri() . '/customizer.css', [], $version );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_customizer_css', 100 );

Wenn die Datei noch nicht existiert, wird sie über die Funktion my_customize_css_in_file, die davor definiert wurde, neu erstellt.

All diese Funktionen können in der functions.php des eigenen Themes eingebaut werden.

Fazit

Es können natürlich noch weitere Anpassungen vorgenommen werden, beispielsweise kann man die CSS-Datei auf Fehler prüfen oder durch eine Kompression jagen, um die Dateigröße zu verringern. Doch für den Anfang kann man hiermit schon die Ladezeit seiner Website geringfügig und unter bestimmten Umständen verbessern – insbesondere wenn man viel zusätzliches CSS im Customizer verwendet.

8 Gedanken zu „Customizer-CSS in eigene CSS-Datei auslagern

  1. Oh, das ist genial, Danke!

  2. Die Funktion gab es ja mal als Plugin von Felix. Das Plugin ist leider nicht mehr aktiv.
    Würde mich über eine neues Plugin mit der Funktion freuen.

    Es grüßt
    derRALF

  3. Werden die Funktionen in die functions.php des child-themes eingebaut?

  4. Die Idee dahinter ist genial! Leider bringt der Code bei mir einen Fehler:
    Uncaught Error: syntax error, unexpected single-quoted string „, [], $version ); „, expecting „)“

    1. Oh, danke für den Hinweis. Ich habe den Code korrigiert.

  5. Hi Matthias,

    danke erstmal für den super Beitrag. Kleine Zusatzfrage, eventuell kennst Du ja die Antwort.

    Ich benutze Elementor (Pro) und habe darüber ein Custom CSS definiert. Mit den Snippets in der functions.php vom Child-Theme greift das aber nicht… eine customizer.css ist im stylesheet_directory auch nicht anzutreffen. Eventuell weisst Du ja, was man noch anpassen muss?

    Herzliche Grüße aus Freiburg,

    — Markus

    1. Hallo Markus,

      leider habe ich keine Erfahrung mit Elementor Pro und kann daher aus dem Steigreif hier nicht weiterhelfen. Gibt es die Möglichkeit, sich das mal in einer Testinstallation direkt anzusehen? Dann nehme ich mich dem gerne an.

Schreibe einen Kommentar zu Hans Antworten abbrechen

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