Eliminarea atributului type din tag-urile script și style adăugate de WordPress

WordPress 5.3 introduce o metodă considerabil mai simplă pentru a realiza acest lucru. Prin înregistrarea suportului temei pentru HTML 5 pentru script și style, atributul type="" va fi omis:

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

Puteți elimina atributele type='*' și valorile acestora din scripturile și stilurile încărcate cu wp_enqueue, folosind cârligele respective *_loader_tag.

Următoarea soluție a funcționat pentru mine:

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 );
}

Am obținut acest cod din plugin-ul soil / roots. A funcționat în mare parte.

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

/**
 * Curăță output-ul tag-urilor <link> pentru fișierele CSS
 */
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;
    }
    // Afișează media doar dacă are sens
    $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';

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

/**
 * Curăță output-ul tag-urilor <script>
 */
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );

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

Abordările style_loader_tag și script_loader_tag menționate mai sus ar trebui să funcționeze pentru orice markup generat de WordPress, în cazurile în care tema/pluginul utilizează funcțiile corecte de încărcare (enqueue).

Dacă aveți pluginuri care nu cooperează (Jetpack a fost/s-ar putea să fie unul dintre ele, dacă versiunile mai noi nu au rezolvat problema!), și sunteți ferm hotărât să rezolvați această problemă în ciuda faptului că vizitatorii dumneavoastră nu vor fi afectați (browserul lor va afișa pagina corect!), puteți recurge la buffering-ul de ieșire:

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 );
}

Atenție: deși aceasta este o soluție, nu este foarte eficientă. Veți rula preg_replace() pe întregul conținut final al WordPress înainte de a fi trimis browserului clientului, pentru fiecare cerere.

Buffering-ul de ieșire este pornit la început (cu hook-ul wp_loaded), adică atunci când WordPress, tema, pluginurile etc. sunt încărcate complet, și este oprit în ultimul moment (cu hook-ul shutdown), care rulează chiar înainte ca PHP să încheie execuția. Regex-ul trebuie să proceseze totul, iar acest lucru poate implica mult conținut!

Abordările style_loader_tag și script_loader_tag rulează regex-ul doar pe un șir foarte mic (tag-ul în sine), astfel încât impactul asupra performanței este neglijabil.

Presupun că, dacă aveți conținut relativ static și utilizați un strat de caching, ați putea încerca să atenuați problema de performanță.

Referințe din manualul php:

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

Acest cod m-a ajutat foarte mult:

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

Mulțumiri lui css-tricks (LeoNovais): https://css-tricks.com/forums/topic/clean-up-script-tags-in-wordpress/#post-246425

Conform codului din script-loader.php, atributul type este omis atunci când suportul pentru temă html5 este adăugat cu argumentele script și style.

Consultați linkurile de mai jos:

• 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', // Corecție pentru: Atributul "type" este inutil pentru resursele JavaScript.
            'style',  // Corecție pentru: Atributul "type" pentru elementul "style" nu este necesar și ar trebui omis.
        )
    );
}
add_action( 'after_setup_theme', 'yourthemeprefix_theme_support' );

Extinderea soluției @realmag77. Aceasta va folosi pluginul Autoptimize pentru a filtra TOATE atributele de tip, dar nu va cauza probleme dacă nu este instalat și activat. Soluția alternativă funcționează bine, dar scripturile și fișierele de stil încărcate prin pluginuri nu vor fi filtrate. Nu cunosc alt mod de a le filtra decât prin utilizarea porțiunii Autoptimize.

/* ==========================================
   Elimină atributul type din JS/CSS
   (necesită pluginul Autoptimize și opțiunea Optimize HTML bifată)
   dar cu o soluție alternativă pentru orice eventualitate
========================================== */

// Dacă Autoptimize este instalat și activat, elimină atributele type pentru toate 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 {

    // Soluție alternativă pentru a elimina atributele type, cu excepția celor încărcate prin pluginuri
    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 );
    }
}

// Adaugă acțiunea 'wp_loaded' pentru a porni buffer-ul de ieșire
add_action('wp_loaded', 'prefix_output_buffer_start');
function prefix_output_buffer_start() { 
    // Pornește buffer-ul de ieșire cu funcția de callback
    ob_start("prefix_output_callback"); 
}

// Adaugă acțiunea 'shutdown' pentru a încheia buffer-ul de ieșire
add_action('shutdown', 'prefix_output_buffer_end');
function prefix_output_buffer_end() { 
    // Trimite conținutul buffer-ului și oprește buffering-ul
    ob_end_flush(); 
}

// Funcția de callback pentru procesarea buffer-ului
function prefix_output_callback($buffer) {
    // Elimină atributul 'type="text/javascript"' sau 'type="text/css"' din HTML
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Puteți utiliza funcțiile de mai jos pentru a elimina atributele de tip din tag-urile de legătură și script.

Lipiți funcția de mai jos în functions.php pentru a elimina type=text/css din tag-urile link

/* Elimină atributul " 'type=text/css' " din fișierele de stil */
function wpse51581_hide_type($src) {
    return str_replace("type='text/css'", '', $src);
}
add_filter('style_loader_tag', 'wpse51581_hide_type');

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

Lipiți funcția de mai jos în functions.php pentru a elimina type='text/javascript' din tag-urile script

//* Elimină atributul type din tag-urile script și 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 );
}

Ei bine, pentru că am încercat o mulțime de alte coduri și cele menționate aici, încă există urme ale text/javascript din fișierele de bază WordPress și, de asemenea, din alte pluginuri și coduri JavaScript inline. După ce am testat acest cod, totul a fost rezolvat:

// Elimină eroarea de validare w3 referitoare la "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 );
}

Sper că poate ajuta pe cineva :)

Mulțumesc

Dacă întâmpinați această problemă cu WP Fastest Cache, puteți șterge manual atributul type din scriptul PHP al plugin-ului. Această soluție ar trebui să funcționeze și cu alte plugin-uri, dar nu știu exact în ce fișiere este adăugat atributul type. Pentru WP Fastest Cache, trebuie să accesați folderul wp-content/plugins/wp-fastest-cache/inc și să deschideți fișierul js-utilities.php, apoi să căutați text/javascript și să ștergeți acel atribut. Am avut această avertizare în W3 Validator și am rezolvat-o în acest fel. De asemenea, rețineți că la actualizarea plugin-ului, această modificare ar putea fi anulată. Pentru a dezactiva actualizarea plugin-ului, puteți edita wpFastestCache și să schimbați versiunea plugin-ului la ceva de genul 10.0.8.7.7

Puteți optimiza codul HTML al site-ului dvs. după preferință în 2 pași:

• Instalați acest plugin: https://wordpress.org/plugins/autoptimize/
• Activați în opțiunile plugin-ului 'Optimize HTML Code?'

• În functions.php din tema WordPress curentă aplicați următorul cod:

  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);
  

  și nu uitați să schimbați $site_url cu link-ul site-ului dvs. fără slash la sfârșit