Come disabilitare gli stili CSS dei plugin WordPress tramite functions.php

Conosci la sensazione: il tuo sito WordPress è pronto, curato nello stile, i plugin sono tutti al loro posto. Lanci PageSpeed Insights ed eccolo lì, arancione. O rosso. Il colpevole è quasi sempre lo stesso: i CSS. Decine di file di stile di plugin e del tema si mettono in coda e bloccano il rendering. La pagina è lenta non perché pesante, ma perché il browser sta aspettando.

Il problema è più profondo di quanto sembri. Un plugin carica il suo style.css su ogni pagina del sito, anche dove la sua funzionalità non è utilizzata. Un modulo di contatto compare solo nella pagina contatti, eppure i suoi stili si caricano ovunque. Uno slider sta nella homepage, ma i suoi quattro file CSS gravano su ogni URL senza eccezioni. Sono decine di kilobyte e richieste superflue a ogni visualizzazione di pagina.

Puoi disabilitare gli stili non necessari senza installare plugin aggiuntivi, tramite functions.php. Non è un trucco; è un meccanismo nativo di WordPress che funziona dalla versione 2.6. Di seguito trovi la guida completa: da come trovare l'identificatore a come caricare in modo asincrono un file combinato.

💡 Panoramica rapida:

• Come trovare l'identificatore (handle) di qualsiasi file CSS di un plugin attraverso l'attributo id nel codice sorgente della pagina
• Come disabilitare gli stili usando la combinazione wp_dequeue_style + wp_deregister_style con la priorità corretta
• Come unire gli stili disabilitati in un unico file e caricarlo in modo asincrono tramite media print, senza perdere lo styling e senza bloccare il rendering

Come trovare l'identificatore del file CSS di un plugin

WordPress assegna un identificatore univoco, un handle, a ogni file di stile messo in coda. Questo handle è ciò che richiedono le funzioni wp_dequeue_style (documentazione) e wp_deregister_style (codex). Senza l'handle corretto, non si disabilita nulla.

Il metodo più affidabile è guardare il codice sorgente HTML della pagina. Tirare a indovinare in base al nome del plugin non funziona; lo sviluppatore del plugin assegna l'handle come preferisce e la logica può essere poco ovvia.

Apri il sorgente della pagina (Ctrl+U o view-source: prima dell'URL) e trova il tag <link> che carica il CSS del plugin che ti serve. Per esempio, per Elementor si presenta così:

1
<link href="/wp-content/plugins/elementor/assets/lib/animations/animations.min.css"
2
      id="elementor-animations-css" media="all" rel="stylesheet" type="text/css">

Guarda l'attributo id. WordPress lo costruisce usando lo schema: **handle del plugin + il suffisso **-css. Nell'esempio sopra, id="elementor-animations-css", il che significa che l'handle è elementor-animations. Togli -css dalla fine del valore di id e ottieni l'handle esatto per la disabilitazione. Questo funziona per qualsiasi plugin o tema.

Ci sono casi in cui lo sviluppatore non include affatto un id nel <link>. In tal caso, cerca elementi vicini con un id o controlla i tag <script> dello stesso plugin: gli script usano il suffisso -js e spesso l'handle corrisponde a quello dello stile. Se ancora non lo trovi, apri il codice sorgente del plugin in /wp-content/plugins/... e individua la chiamata a wp_enqueue_style(): il primo argomento è l'handle.

Disabilitare gli stili: wp_dequeue_style e wp_deregister_style

WordPress mette a disposizione due funzioni per gestire gli stili. La differenza è sostanziale:

In pratica, entrambe le funzioni si usano insieme: wp_dequeue_style lo rimuove dalla coda, e poi wp_deregister_style nel codex assicura che nessun altro codice rimetta in coda quell'handle attraverso la catena delle dipendenze.

Codice base per functions.php

Il codice qui sotto disabilita gli stili di due plugin: full-screen-search e prettyPhoto. La priorità alta 9999 garantisce che la disabilitazione venga eseguita DOPO che il plugin ha registrato e messo in coda i suoi stili. Senza la priorità elevata, la funzione potrebbe essere eseguita prima del plugin, non trovando nulla da disabilitare.

1
/**
2
 * Disable CSS files of specific plugins.
3
 * Priority 9999 — runs last in the wp_enqueue_scripts chain.
4
 */
5
function sdstudio_dequeue_plugin_styles() {
6
    // Dequeue
7
    wp_dequeue_style( 'full-screen-search' );
8
    wp_dequeue_style( 'prettyPhoto' );
9
 
10
    // Deregister — so no one can re-enqueue
11
    wp_deregister_style( 'full-screen-search' );
12
    wp_deregister_style( 'prettyPhoto' );
13
}
14
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_plugin_styles', 9999 );

Ciò che conta qui: l'hook wp_enqueue_scripts è il posto giusto per questa operazione. Non wp_head, non init, non wp_loaded. È su wp_enqueue_scripts che WordPress assembla la coda degli stili, ed è qui che devi disabilitarli, appena dopo che i plugin lo hanno fatto.

Perché priorità 9999, non 11 o 99

I plugin registrano gli stili con la priorità predefinita di 10. Ma alcuni impostano 20, 50 o persino 100 quando hanno catene di dipendenze complesse. Una priorità di 9999 copre praticamente qualsiasi scenario reale. L'unico svantaggio: se due tuoi snippet condividono la stessa priorità di 9999, il loro ordine di esecuzione è indefinito. Nella pratica è raro, mentre usare 11 fallisce regolarmente con i plugin "ostinati".

Inoltre, puoi registrare la disabilitazione sull'hook wp_head con la stessa priorità come rete di sicurezza per gli stili che un plugin mette in coda bypassando wp_enqueue_scripts e scrivendo direttamente nell'<head>:

1
add_action( 'wp_head', 'sdstudio_dequeue_plugin_styles', 9999 );

Ma questa è un'ancora di salvezza. Normalmente, un singolo wp_enqueue_scripts è sufficiente.

Come disabilitare TUTTI gli stili di un plugin specifico

Molti plugin non hanno un solo file CSS, ma diversi. Contact Form 7, WooCommerce, Elementor, ognuno si trascina dietro 3-5 file di stile. Disabilitarli uno per uno è noioso. Analizza il sorgente della pagina e raccogli tutti gli handle con lo stesso prefisso: di solito sono raggruppati insieme.

Esempio per Elementor, un set tipico di handle: elementor-frontend, elementor-animations, elementor-icons e elementor-pro. Tutti e quattro in una singola chiamata:

1
function sdstudio_dequeue_elementor_styles() {
2
    $handles = [
3
        'elementor-frontend',
4
        'elementor-animations',
5
        'elementor-icons',
6
        'elementor-pro',
7
    ];
8
    foreach ( $handles as $handle ) {
9
        wp_dequeue_style( $handle );
10
        wp_deregister_style( $handle );
11
    }
12
}
13
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_elementor_styles', 9999 );

Cosa fare con gli stili disabilitati

Disabilitare è solo metà del lavoro. Se rimuovi semplicemente il CSS di un plugin, tutto nella pagina si rompe: i form si disallineano, gli slider si sfaldano, le icone spariscono. Gli stili servono, solo non al costo di bloccare il rendering.

L'approccio corretto: unisci gli stili disabilitati in UN unico file compatto e caricalo senza bloccare. L'algoritmo:

• Stili dei plugin disabilitati tramite wp_dequeue_style + wp_deregister_style.
• Copiato il contenuto di OGNI file CSS disabilitato. Prendili dalla cartella del plugin, non dall'inspector del browser, che mostra una build minificata scomoda da lavorare.
• Uniti in un singolo file, ad esempio /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Caricato con l'attributo media="print" e onload="this.media='all'". Il browser scarica il file in modo asincrono senza bloccare il rendering e applica gli stili dopo il caricamento.

Codice per il caricamento del file combinato

1
/**
2
 * Load the combined CSS file of disabled styles asynchronously.
3
 */
4
function sdstudio_enqueue_dequeued_styles() {
5
    wp_enqueue_style(
6
        'sdstudio-dequeued',
7
        get_stylesheet_directory_uri() . '/css/dequeued-plugins.css',
8
        [],
9
        filemtime( get_stylesheet_directory() . '/css/dequeued-plugins.css' )
10
    );
11
}
12
add_action( 'wp_enqueue_scripts', 'sdstudio_enqueue_dequeued_styles', 1 );

La priorità di 1 qui è intenzionale: il file combinato deve essere messo in coda PRIMA che le funzioni di disabilitazione con priorità 9999 vengano eseguite. Altrimenti, WordPress potrebbe non riconoscere la dipendenza ed eliminare del tutto gli stili dalla coda.

Caricamento asincrono senza un plugin

Per impedire al browser di attendere il file CSS prima di renderizzare la pagina, aggiungi gli attributi media="print" e onload tramite il filtro style_loader_tag:

1
/**
2
 * Change media="print" to onload-switch for asynchronous CSS loading.
3
 */
4
function sdstudio_async_css( $html, $handle ) {
5
    if ( 'sdstudio-dequeued' !== $handle ) {
6
        return $html;
7
    }
8
    return str_replace(
9
        "media='all'",
10
        "media='print' onload=\"this.media='all'; this.onload=null;\"",
11
        $html
12
    );
13
}
14
add_filter( 'style_loader_tag', 'sdstudio_async_css', 10, 2 );

Il meccanismo è semplice: il browser vede media="print" e non blocca il rendering, poiché il tipo di media print non influisce sullo schermo. Dopo che il file è stato caricato, onload si attiva, imposta media su all e gli stili vengono applicati all'istante. L'utente vede una pagina completamente stilizzata senza alcun ritardo al caricamento iniziale.

Quando non disabilitare gli stili via functions.php

Il metodo wp_dequeue_style è potente, ma non universale. Ecco tre casi in cui è inutile o dannoso:

• Stili incorporati in linea via wp_add_inline_style. Questi stili vivono dentro un tag <style> e non hanno un handle separato. Dovrai disabilitarli tramite wp_deregister_script dello script padre o trovare l'hook che il plugin usa per aggiungere stili inline.

• Il plugin inserisce CSS direttamente nel <head> via echo. È un espediente usato da alcuni plugin datati. Solo individuare l'hook specifico o, come ultima risorsa, il buffering dell'output può aiutare in questo caso.

• Lavori con un tema di terze parti che gestisce le dipendenze in modo autonomo. Alcuni temi, specie quelli premium, usano un proprio asset loader che bypassa WP_Styles. Prima di scrivere codice, controlla il header.php del tema: se vedi un echo '<link...' diretto, il sistema di deregistrazione non funzionerà.

In questi casi, è meglio usare plugin specializzati come Asset CleanUp o Perfmatters, che lavorano a livello di URL e disabilitano gli asset pagina per pagina senza scavare negli hook.

Guarda la video guida su come disabilitare gli stili: l'intero processo dalla ricerca dell'handle alla verifica del risultato in 8 minuti.

⁉️🤔 Domande frequenti

Devo disabilitare gli stili CSS nel pannello di amministrazione (*/wp-admin/*)?

No. Gli stili caricati tramite l'hook admin_enqueue_scripts non influenzano il frontend e non vanno disabilitati. Inoltre, provare a deregistrare gli stili di amministrazione attraverso wp_enqueue_scripts non sortirà alcun effetto, perché sono registrati separatamente. Se il pannello di amministrazione è lento, il problema di solito è altrove: script di analytics pesanti nella dashboard, Google Fonts esterni o l'API Heartbeat.

È sicuro* rimuovere -css dall'attributo id per ottenere l'handle? Questa regola funziona sempre?*

Sì, il suffisso -css è aggiunto dal core di WordPress nel metodo WP_Dependencies::enqueue() dalla versione 2.6; è un meccanismo invariato. Ma c'è una sfumatura: se lo sviluppatore del plugin ha assegnato manualmente un id personalizzato al tag <link>, il suffisso potrebbe non essere presente. In quel caso, l'handle è il secondo argomento della chiamata wp_enqueue_style() nel codice sorgente del plugin. La regola del -css copre la stragrande maggioranza dei casi.

Posso disabilitare gli stili solo su pagine specifiche?

Sì, e questo è l'approccio corretto in produzione. Avvolgi la chiamata wp_dequeue_style in un tag condizionale di WordPress: is_front_page() per la homepage, is_single() per gli articoli, is_page() per le pagine, is_archive() per gli archivi. Per escludere per ID articolo, usa ! is_single(123). La rimozione condizionale su URL specifici riduce il carico sull'intero sito, non solo dove il plugin non serve.

Cosa succede se chiamo wp_dequeue_style per un handle che non è registrato?

Nulla. La funzione termina silenziosamente senza errori, notice PHP o warning. È sicuro. Ma non fare affidamento su questo come strategia: raccogli gli handle solo dalle pagine reali, altrimenti il tuo codice accumula righe "morte" che non fanno nulla e ingombrano solo functions.php.

Come verifico che uno stile sia stato effettivamente disabilitato, e non abbia semplicemente smesso di applicarsi per via della cache?

Apri il sorgente della pagina (Ctrl+U), non il pannello sviluppatore. Cerca un <link> con l'handle del plugin o il suo id. Se il tag non c'è, lo stile è disabilitato. La cache del browser non influisce sul codice sorgente, a differenza della scheda Network in DevTools. Inoltre, puoi svuotare la cache di WordPress: qualsiasi plugin di caching, poi Purge All.

Punti chiave su come disabilitare i CSS in WordPress

Tre conclusioni principali da tutta questa guida:

• L'handle è la chiave di tutto. Senza l'identificatore corretto, nessuna funzione funzionerà. Trova sempre l'handle tramite l'attributo id nel codice sorgente della pagina. La regola di togliere -css funziona quasi sempre; per le eccezioni, controlla il codice sorgente del plugin.

• Dequeue + Deregister è la combinazione standard. La prima funzione rimuove lo stile dalla coda, la seconda assicura che non riemerga attraverso la catena delle dipendenze. La priorità 9999 copre qualsiasi plugin "ostinato", e l'hook wp_enqueue_scripts è l'unico posto corretto per questa operazione.

• Gli stili disabilitati non devono scomparire. Combinali in un unico file e caricalo in modo asincrono via media="print" + onload. L'utente ottiene una pagina completamente stilizzata, e il browser non aspetta i CSS prima di renderizzare.

Prova oggi stesso con uno o due plugin. Un paio di minuti in functions.php, e il risultato è immediatamente visibile in PageSpeed Insights. Inizia dal plugin "più pesante", quello con più file CSS: disabilita, combina, misura la velocità. Molto probabilmente, basterà questo per passare dalla zona arancione a quella verde.