Rimuovere l'attributo type dai tag script e style aggiunti da WordPress

WordPress 5.3 introduce un modo considerevolmente più semplice per ottenere questo risultato. Registrando il supporto del tema per HTML 5 per script e style, l'attributo type="" verrà omesso:

add_action(
    'after_setup_theme',
    function() {
        add_theme_support( 'html5', [ 'script', 'style' ] );
    }
);

Puoi rimuovere gli attributi type='*' e i relativi valori dagli script e stili caricati con wp_enqueue, utilizzando i rispettivi hook *_loader_tag.

Il seguente codice ha funzionato per me:

add_action( 'wp_enqueue_scripts', 'myplugin_enqueue' );

function myplugin_enqueue() {
    // wp_register_script(...
    // wp_enqueue_script(...
}


add_filter('style_loader_tag', 'myplugin_remove_type_attr', 10, 2);
add_filter('script_loader_tag', 'myplugin_remove_type_attr', 10, 2);

function myplugin_remove_type_attr($tag, $handle) {
    return preg_replace( "/type=['\"]text\/(javascript|css)['\"]/", '', $tag );
}

Ho ottenuto questo dal plugin soil / roots. Ha funzionato per la maggior parte.

    add_filter( 'style_loader_tag',  'clean_style_tag'  );
add_filter( 'script_loader_tag', 'clean_script_tag'  );

/**
 * Pulizia dell'output dei tag <link> dei fogli di stile
 */
function clean_style_tag( $input ) {
    preg_match_all( "!<link rel='stylesheet'\s?(id='[^']+')?\s+href='(.*)' type='text/css' media='(.*)' />!", $input, $matches );
    if ( empty( $matches[2] ) ) {
        return $input;
    }
    // Mostra il media solo se è significativo
    $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';

    return '<link rel="stylesheet" href="' . $matches[2][0] . '"' . $media . '>' . "\n";
}

/**
 * Pulizia dell'output dei tag <script>
 */
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );

    return str_replace( "'", '"', $input );
}

Gli approcci style_loader_tag e script_loader_tag sopra menzionati sembrano funzionare per qualsiasi markup generato da WordPress, nei casi in cui il tema/plugin utilizza le funzioni di enqueue appropriate.

Se hai plugin problematici che non cooperano (se memoria non mi inganna Jetpack è/stato uno di questi, a meno che una versione più recente non abbia risolto il problema!), e sei determinato a risolvere questa questione nonostante il fatto che i tuoi visitatori difficilmente ne saranno influenzati (il loro browser renderizzerà la pagina senza problemi!), puoi sempre optare per una soluzione radicale usando l'output buffering:

add_action('wp_loaded', 'output_buffer_start');
function output_buffer_start() { 
    ob_start("output_callback"); 
}

add_action('shutdown', 'output_buffer_end');
function output_buffer_end() { 
    ob_end_flush(); 
}

function output_callback($buffer) {
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Tieni presente che, sebbene questa sia una soluzione, non è molto efficiente. Dovrai eseguire preg_replace() sull'intero output "finale" di WordPress prima che venga inviato al browser del client, per ogni richiesta.

L'output buffering viene attivato all'inizio (hook wp_loaded), cioè proprio quando WordPress + tema + plugin + ecc. sono completamente caricati, e viene disattivato all'ultimo momento (hook shutdown) che viene eseguito appena prima che PHP termini l'esecuzione. L'espressione regolare deve elaborare tutto, e potrebbero esserci molti contenuti!

Gli approcci style_loader_tag e script_loader_tag sopra menzionati eseguono l'espressione regolare solo su una stringa molto piccola (il tag stesso), quindi l'impatto sulle prestazioni è trascurabile.

Suppongo che se avessi contenuti relativamente statici e utilizzassi un layer di caching potresti cercare di mitigare il problema delle prestazioni.

Riferimenti dal manuale PHP:

• http://php.net/manual/en/function.ob-start.php
• http://php.net/manual/en/function.ob-end-flush.php

Questo mi è stato molto utile:

add_filter('script_loader_tag', 'clean_script_tag');
  function clean_script_tag($input) {
  $input = str_replace("type='text/javascript' ", '', $input);
  return str_replace("'", '"', $input);
}

Grazie a css-tricks (LeoNovais): https://css-tricks.com/forums/topic/clean-up-script-tags-in-wordpress/#post-246425

Secondo il codice in script-loader.php, l'attributo type viene omesso quando il supporto per html5 è aggiunto al tema con gli argomenti script e style.

Vedi i link qui sotto:

• https://build.trac.wordpress.org/browser/tags/5.3/wp-includes/script-loader.php#L2576
• https://build.trac.wordpress.org/browser/tags/5.3/wp-includes/script-loader.php#L2758

function yourthemeprefix_theme_supportt() {
    add_theme_support(
        'html5',
        array(
            'script', // Correzione per: L'attributo "type" non è necessario per le risorse JavaScript.
            'style',  // Correzione per: L'attributo "type" per l'elemento "style" non è necessario e dovrebbe essere omesso.
        )
    );
}
add_action( 'after_setup_theme', 'yourthemeprefix_theme_support' );

Basandosi su @realmag77. Questo codice sfrutterà il plugin Autoptimize per filtrare TUTTI gli attributi type senza rompere il sito se non è installato e attivato. Il fallback funziona bene ma gli script e i fogli di stile caricati tramite plugin non verranno filtrati. Non conosco altri modi per filtrarli se non utilizzando la parte di Autoptimize.

/* ==========================================
   Rimuovi l'attributo type su JS/CSS
   (richiede il plugin Autoptimize e l'opzione "Ottimizza HTML" attivata)
   ma con un fallback per sicurezza
========================================== */

// Se Autoptimize è installato e attivo, rimuove gli attributi type per tutti i JS/CSS
if ( is_plugin_active( 'autoptimize/autoptimize.php' ) ) {

    add_filter('autoptimize_html_after_minify', function($content) {

        $site_url = home_url();
        $content = str_replace("type='text/javascript'", '', $content);
        $content = str_replace('type="text/javascript"', '', $content);

        $content = str_replace("type='text/css'", '', $content);
        $content = str_replace('type="text/css"', '', $content);

        $content = str_replace($site_url . '/wp-includes/js', '/wp-includes/js', $content);
        $content = str_replace($site_url . '/wp-content/cache/autoptimize', '/wp-content/cache/autoptimize', $content);
        $content = str_replace($site_url . '/wp-content/themes/', '/wp-content/themes/', $content);
        $content = str_replace($site_url . '/wp-content/uploads/', '/wp-content/uploads/', $content);
        $content = str_replace($site_url . '/wp-content/plugins/', '/wp-content/plugins/', $content);

        return $content;

    }, 10, 1);

} else {

    // Fallback per rimuovere gli attributi type eccetto quelli caricati tramite plugin
    add_filter('style_loader_tag', 'pss_remove_type_attr', 10, 2);
    add_filter('script_loader_tag', 'pss_remove_type_attr', 10, 2);
    function pss_remove_type_attr($tag, $handle) {
        return preg_replace( "/type=['\"]text\/(javascript|css)['\"]/", '', $tag );
    }
}

add_action('wp_loaded', 'prefix_output_buffer_start');
function prefix_output_buffer_start() { 
    ob_start("prefix_output_callback"); 
}

add_action('shutdown', 'prefix_output_buffer_end');
function prefix_output_buffer_end() { 
    ob_end_flush(); 
}

function prefix_output_callback($buffer) {
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Puoi utilizzare le funzioni qui sotto per rimuovere gli attributi type dai tag link e script.

Incolla la funzione seguente in functions.php per rimuovere il type=text/css dai tag link

/* Rimuove l'attributo " 'type=text/css' " dagli stylesheet  */
function wpse51581_hide_type($src) {
    return str_replace("type='text/css'", '', $src);
}
add_filter('style_loader_tag', 'wpse51581_hide_type');

===========================================================================

Incolla la funzione seguente in functions.php per rimuovere il type='text/javascript' dai tag script

//* Rimuove il type tag dagli script e style
add_filter('script_loader_tag', 'codeless_remove_type_attr', 10, 2);
function codeless_remove_type_attr($tag, $handle) {
    return preg_replace( "/type=['\"]text\/(javascript|css)['\"]/", '', $tag );
}

Bene, perché ho provato tonnellate di altri codici e quelli menzionati qui, ci sono ancora tracce di text/javascript dai file core di WordPress e anche da altri plugin e codici javascript inline. Dopo aver testato questo codice, tutto è stato risolto:

// Rimuove l'avviso del validatore w3 riguardo "text/javascript"
add_action('wp_loaded', 'prefix_output_buffer_start');
function prefix_output_buffer_start() { 
    ob_start("prefix_output_callback"); 
}
add_action('shutdown', 'prefix_output_buffer_end');
function prefix_output_buffer_end() { 
    ob_end_flush(); 
}
function prefix_output_callback($buffer) {
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Spero possa aiutare qualcuno :)

Grazie

Se stai riscontrando questo problema con WP Fastest Cache, puoi eliminare manualmente l'attributo type nello script PHP del plugin. Questo metodo dovrebbe funzionare anche con altri plugin, ma non conosco i file specifici in cui aggiungono l'attributo type. Per WP Fastest Cache, devi andare nella cartella wp-content/plugins/wp-fastest-cache/inc e aprire il file js-utilities.php, poi cerca text/javascript ed eliminalo insieme all'attributo. Ho risolto così un avviso ricevuto su W3 Validator. Tieni presente che quando aggiornerai il plugin questa modifica potrebbe essere annullata. Per disabilitare gli aggiornamenti del plugin puoi modificare wpFastestCache e cambiare la versione del plugin con qualcosa tipo 10.0.8.7.7

Puoi ottimizzare il codice HTML del tuo sito come preferisci in 2 passaggi:

• Installa questo plugin: https://wordpress.org/plugins/autoptimize/
• Abilita nelle opzioni del plugin 'Ottimizza codice HTML?'

• Nel file functions.php del tuo tema WordPress corrente applica il seguente codice:

  add_filter('autoptimize_html_after_minify', function($content) {

      $site_url = 'https://bulk-editor.com';    
      $content = str_replace("type='text/javascript'", ' ', $content);
      $content = str_replace('type="text/javascript"', ' ', $content);
  
      $content = str_replace("type='text/css'", ' ', $content);
      $content = str_replace('type="text/css"', ' ', $content);
  
      $content = str_replace($site_url . '/wp-includes/js', '/wp-includes/js', $content);
      $content = str_replace($site_url . '/wp-content/cache/autoptimize', '/wp-content/cache/autoptimize', $content);
      $content = str_replace($site_url . '/wp-content/themes/', '/wp-content/themes/', $content);
      $content = str_replace($site_url . '/wp-content/uploads/', '/wp-content/uploads/', $content);
      $content = str_replace($site_url . '/wp-content/plugins/', '/wp-content/plugins/', $content);    
      return $content;    }, 10, 1);
  

  e non dimenticare di cambiare $site_url con il link del tuo sito senza slash alla fine