WordPress & Webwork

WordPress: Jetpack-CSS und JS entfernen

Wie man die automatische Ausgabe von Jetpack-CSS und -JS in WordPress unterbindet

Die Plugin-Sammlung Jetpack für WordPress bietet verschiedene Funktionen und Module und sofern man Module aktiviert, wird in der Regel auch die entsprechende CSS-Datei und manchmal auch Javascript-Dateien bei der Ausgabe im Frontend ausgegeben. Manchmal ist das nicht erwünscht und hier eine kurze Anleitung, wie man das zum Teil oder gänzlich unterbinden kann.

Die zusammenfassende CSS-Datei von Jetpack

Schauen wir uns mal den folgenden Codebeispiel, der in die functions.php des aktiven Themes gehört und welchen ich auch als Gist auf GitHub eingefügt habe. Diesen Code findet man an diversen Stellen im Netz, aber so weit ich es erkennen konnte, stammt er ursprünglich von CSS-Tricks.com:

// Als erstes sorgst du dafür dass nicht eine zusammenfassende CSS generiert wird
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Von den folgenden Angaben die entfernen, die du wirklich benötigst
function jeherve_remove_all_jp_css() {
    wp_deregister_style( 'AtD_style' ); // Rechtschreibprüfung: After the Deadline
    wp_deregister_style( 'jetpack_likes' ); // Gefällt mir
    wp_deregister_style( 'jetpack_related-posts' ); // Ähnliche Beiträge
    wp_deregister_style( 'jetpack-carousel' ); // Karussell
    wp_deregister_style( 'grunion.css' ); // Kontaktformular?
    wp_deregister_style( 'the-neverending-homepage' ); // Unendlich Scrollen
    wp_deregister_style( 'infinity-twentyten' ); // Unendlich Scrollen: Twentyten
    wp_deregister_style( 'infinity-twentyeleven' ); // Unendlich Scrollen: Twentyeleven
    wp_deregister_style( 'infinity-twentytwelve' ); // Unendlich Scrollen: Twentytwelve
    wp_deregister_style( 'noticons' ); // Notes
    wp_deregister_style( 'post-by-email' ); // Per E-Mail veröffentlichen
    wp_deregister_style( 'publicize' ); // Publizieren
    wp_deregister_style( 'sharedaddy' ); // Sharedaddy
    wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
    wp_deregister_style( 'stats_reports_css' ); // Stats
    wp_deregister_style( 'jetpack-widgets' ); // Widgets
    wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
    wp_deregister_style( 'presentations' ); // Presentation shortcode
    wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
    wp_deregister_style( 'tiled-gallery' ); // Gekachelte Galerien
    wp_deregister_style( 'widget-conditions' ); // Widget-Sichtbarkeit
    wp_deregister_style( 'jetpack_display_posts_widget' ); // Top-Beiträge-Widget
    wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar-Widget
    wp_deregister_style( 'widget-grid-and-list' ); // Top-Beiträge-Widget
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

Der Code ist in zwei Abschnitte aufgeteilt. Mit dem ersten Abschnitt…

add_filter( 'jetpack_implode_frontend_css', '__return_false' );

… verhindert man das Jetpack eine zusammenfassende CSS-Datei generiert. Eine solche zusammenfassende CSS-Datei siehst du in der oberen Abbildung. Mit dem zweiten längeren Abschnitt schaltest du die Ausgabe der einzelnen CSS-Dateien der jeweiligen Module aus. Möchtest du bestimmte CSS-Dateien ausgegeben haben, dann musst du einfach die entsprechende Zeile auskommentieren oder löschen.

Möchtest du die CSS-Datei für gekachelte Galerien im Frontend ausgegeben haben, dann entfernst du den folgenden Abschnitt aus dem Code-Beispiel:

wp_deregister_style( 'tiled-gallery' );

Aber auch umgekehrt geht es auch. Nehmen wir mal an, du hast lediglich die Webstats, die gekachelte Galerien und die Likes bzw. Gefällt-mir-Angaben aktiv und möchtest aus welchen Gründen auch immer, die CSS-Dateien dieser Module nicht im Frontend haben, dann würde der Code für die functions.php deines Themes so ausschauen:

// Als erstes sorgst du dafür dass nicht eine zusammenfassende CSS generiert wird
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Von den folgenden Angaben die entfernen, die du wirklich benötigst
function jeherve_remove_all_jp_css() {
    wp_deregister_style( 'jetpack_likes' ); // Gefällt mir
    wp_deregister_style( 'tiled-gallery' ); // Gekachelte Galerien
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

Jetpack-JS für die hochauflösenden Gravatar-Grafiken entfernen

So bald man Jetpack aktiviert wird mittlerweile auch eine Javascript-Datei mit dem Namen devicepx-jetpack.js referenziert. Wer das unterbinden möchte, der fügt folgenden Code in die functions.php ein:

// Jetpack-JS für Gravatar entfernen
function dequeue_devicepx() {
    wp_dequeue_script( 'devicepx' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_devicepx', 20 );

Die oberen Code-Beispiele auf GitHub-Gist:

Schreibe einen Kommentar

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