Customizer-CSS in eigene CSS-Datei auslagern
Veröffentlicht: – 8 Kommentare Letzte Aktualisierung:
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' );
Code-Sprache: PHP (php)
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' );
}
Code-Sprache: PHP (php)
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 );
Code-Sprache: PHP (php)
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.
Oh, das ist genial, Danke!
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
Werden die Funktionen in die functions.php des child-themes eingebaut?
Genau!
Die Idee dahinter ist genial! Leider bringt der Code bei mir einen Fehler:
Uncaught Error: syntax error, unexpected single-quoted string „, [], $version ); „, expecting „)“
Oh, danke für den Hinweis. Ich habe den Code korrigiert.
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
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.