web-dev-qa-db-fra.com

Supprimer l'attribut de type des balises de script et de style ajoutées par WordPress

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 10, column 146; to line 10, column 176
    feed/" /> <script type="text/javascript">window

 Warning: The type attribute for the style element is not needed and should be omitted.
    From line 11, column 1798; to line 11, column 1820
    </script> <style type="text/css">img.wp

Warning: The type attribute for the style element is not needed and should be omitted.
    From line 23, column 193; to line 23, column 251
    a='all' /><style id='kirki-styles-global-inline-css' type='text/css'>.envel

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 23, column 905; to line 23, column 1010
    }</style> <script async type="text/javascript" src="http://....../wp-content/cache/minify/df983.js"></scri

Warning: The type attribute for the style element is not needed and should be omitted.
    From line 70, column 126; to line 70, column 167
    70.png" /><style type="text/css" id="wp-custom-css">@media

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 441, column 156; to line 441, column 261
    iv></div> <script defer type="text/javascript" src="http://......./wp-content/cache/minify/26938.js"></scri

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 441, column 272; to line 441, column 302
    </script> <script type='text/javascript'>/*  */

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 443, column 17; to line 443, column 122
    </script> <script defer type="text/javascript" src="http://......../wp-content/cache/minify/6ce07.js"></scri

Ces erreurs sont une nouvelle introduction du W3C et elles ont commencé à s’infiltrer au cours des 3-4 derniers jours seulement.  enter image description here 

Nous mettons en file d'attente les scripts comme ceci →

wp_register_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.1', true );
    wp_enqueue_script( 'custom-js' );

Pouvons-nous résoudre ce problème avec la méthode de mise en file d'attente ci-dessus?

Mettre à jour →

ce sont les erreurs réelles. Dans la boîte rouge viennent de W3 total cache.  enter image description here 

functionserrorsvalidation
10
The WP Novice

Vous pouvez supprimer les attributs et les valeurs type='*' des scripts et des styles wp_enqueue 'ed à l'aide des points d'ancrage *_loader_tag.

Ce qui suit a fonctionné pour moi:

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 );
}
14
David Sword

Cela vient du plugin sol/racines. fait le travail pour la plupart.

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

/**
 * Clean up output of stylesheet <link> tags
 */
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;
    }
    // Only display media if it is meaningful
    $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';

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

/**
 * Clean up output of <script> tags
 */
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );

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

Les approches style_loader_tag et script_loader_tag ci-dessus donnent l'impression qu'elles devraient fonctionner pour le balisage généré par Wordpress, dans les cas où le thème/le plug-in utilise les fonctions de mise en file d'attente appropriées.

Si vous avez des plugins offensants qui ne coopèrent pas (IIRC Jetpack est/était un délinquant à moins d’une version plus récente depuis que je me souvienne a révisé cela!), Et vous êtes adamant à propos de résoudre ce problème malgré le fait que votre les visiteurs ne seront probablement pas touchés de quelque manière que ce soit (leur navigateur rendra la page correctement!), vous pouvez toujours aller au maximum et utiliser la mise en mémoire tampon de sortie:

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

Soyez averti que même s’il s’agit d’une solution, elle n’est pas très efficace. Vous exécuteriez preg_replace() sur toute la sortie "finale" de Wordpress avant que celle-ci ne soit envoyée au navigateur du client, pour chaque demande.

La mise en mémoire tampon de sortie est activée au début (crochet wp_loaded), c’est-à-dire que wp + thème + plugins + etc est entièrement chargée, et est désactivée au dernier moment (crochet shutdown) qui se déclenche juste avant PHP ferme l'exécution. La regex doit fonctionner avec tout , et cela pourrait être beaucoup de contenu!

Les approches style_loader_tag et script_loader_tag ci-dessus n'exécutent la regex que sur une très petite chaîne (la balise elle-même), l'impact sur les performances est donc négligeable.

Je suppose que si vous aviez un contenu relativement statique et utilisiez une couche de mise en cache, vous pourriez essayer d’atténuer les problèmes de performances.

références manuelles php:

3
firxworx

Cela m'a beaucoup aidé:

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

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

1
nikeshulak

Construire à partir de @ realmag77. Ceci utilisera le plug-in Autoptimize pour pouvoir filtrer TOUS les attributs de type, mais ne sera pas interrompu s'il n'est pas installé et activé. La solution de secours fonctionne bien, mais les scripts et les feuilles de style chargés via des plugins ne seront pas filtrés. Je ne sais pas comment les filtrer autrement, mais en utilisant la partie Autoptimize.

/* ==========================================
   Remove type attribute on JS/CSS
   (requires Autoptimize plugin and Optimize HTML checked)
   but with fallback just in case
========================================== */

// If Autoptimize is installed and activated, remove type attributes for all 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 to remove type attributes except for those loaded through plugins
    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 );
    }
}
0
amlcreative