web-dev-qa-db-ja.com

WordPressによって追加されたスクリプトおよびスタイルタグからtype属性を削除する

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

これらのエラーはW3Cによるいくつかの新しい導入であり、それらは最後の3〜4日でクリープし始めました。  enter image description here 

このようなスクリプトをエンキューします→

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

どういうわけか、上のエンキュー方法からこれを修正できますか？

更新→

これらは実際のエラーです。赤い枠内はW3合計キャッシュから来ています。  enter image description here 

functionserrorsvalidation
10
The WP Novice

それぞれのtype='*'フックを使用して、wp_enqueueのスクリプトとスタイルから*_loader_tagの属性と値を削除できます。

以下は私のために働いた：

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

これを土壌/ルーツプラグインから入手しました。ほとんどの仕事をしました。

    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

上記のstyle_loader_tagおよびscript_loader_tagのアプローチは、テーマ/プラグインが適切なエンキュー機能を使用している場合に、Wordpressが生成するマークアップに対して機能するように見えます。

協力しない問題のあるプラグインがある場合（IIRC Jetpackは、私の回想によりこれが修正されてから新しいバージョンでない限り、犯罪者である/だった！）、あなたはadamant訪問者が何らかの方法で影響を受ける可能性が低いという事実（ブラウザはページを正常にレンダリングします！）にもかかわらず、この問題を解決するために、いつでも全面的に出力バッファリングを使用できます。

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

これは解決策ですが、あまり効率的ではないことに注意してください。リクエストごとに、クライアントのブラウザに送信される前に、Wordpressからの「最終」出力全体に対してpreg_replace()を実行します。

出力バッファリングは、開始時にオンになります（wp_loadedフック）。つまり、wp +テーマ+プラグイン+などが完全にロードされるとすぐにオフになり、最後の瞬間（shutdownフック）にオフになります。 before PHPは実行をシャットダウンします。正規表現はeverythingを処理する必要があり、それは多くのコンテンツになる可能性があります！

上記のstyle_loader_tagおよびscript_loader_tagアプローチは、非常に小さな文字列（タグ自体）でのみ正規表現を実行するため、パフォーマンスへの影響は無視できます。

比較的静的なコンテンツがあり、キャッシングレイヤーを使用している場合は、パフォーマンスの懸念を軽減することができると思います。

pHPマニュアルリファレンス：

3
firxworx

これは私に大いに役立ちました：

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

Css-tricks（LeoNovais）に感謝します： https://css-tricks.com/forums/topic/clean-up- script-tag-in-wordpress /＃post-246425

1
nikeshulak

@ realmag77から構築。これは、自動最適化プラグインを利用してすべてのタイプ属性を除外できるようにしますが、インストールおよびアクティブ化されていなくても壊れません。フォールバックはうまくいきますが、プラグインを通してロードされたスクリプトやスタイルシートはフィルタリングされません。他にどのようにそれらをフィルタリングするのか私は知りませんが、自動最適化部分を使うことを通して。

/* ==========================================
   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
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 );
}
0
Jeevan Singla