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


15
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日間でのみ忍び寄り始めました。ここに画像の説明を入力してください

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

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

上記のエンキュー方法からこれをどうにかして修正できますか?

更新→

これらは実際のエラーです。赤いボックスにあるのは、W3の合計キャッシュです。ここに画像の説明を入力してください


5
W3CバリデーターがWordpressサイトや一般的なcmsに対してエラーなしで戻ることはほとんどありません。毎年悪化しているようです。バリデーター(imho)は、いくつかの基本的なエラー(altタグを忘れたり、タグを閉じるのを忘れたりするなど)を明らかにするためのツールとして使用する必要がありますが、以前の標準として見るべきではありません。
David Sword

017年12月2日以降に導入されました。その前に、私のテーマはエラー/警告なしでした。それらを取り除く方法がいくつかあるはずです。
WP Intermediate

1
script_loader_tagフックを調べて、str_replace()それらを削除することができる場合があります。
David Sword

これらは単なる警告であり、エラーではないことを指摘する価値があります。サイトは引き続き検証されます。
swissspidy

また、次の答えを確認することができます- stackoverflow.com/a/53380692/2611955
Jahirulイスラム教Mamun

回答:


16

それぞれのフックを使用して、 'edスクリプトとスタイル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 );
}

これを試しましたが、問題は解決しませんでした。いくつかの操作が必要な場合があります。
WP Intermediate

1
私はと推測しているいくつかのプラグインからのスクリプトの(ともののプラグインのキャッシュのようなdeferタグ)を使用していないことがありwp_enqueue_script、その後、使用することはありません*_loader_tag。私のスニペットを追加custom.jsしてtype='text/javascript'も、サイトのソースコードにまだ含まれていることを確認できますか?
David Sword

いいえ、w3合計キャッシュプラグインを削除しました。3/8エラーは消えましたが、5つはまだ残っています。
WP Intermediate

5つのソースを追跡して、タグを編集できるかどうかを確認できます。おそらく彼らはおそらく使っていないのではないかと私は推測していますwp_enqueue。頑固な5を反映するために、元の投稿にUPDATEを追加し、コードとプラグインの参照を追加することをお勧めします-もう少し役立つかもしれません。
David Sword

今回は画像でエラーを更新しました。
WP中間

12

WordPress 5.3では、これを実現するためのかなり簡単な方法が導入されています。scriptおよびのHTML 5のテーマサポートを登録するとstyletype=""属性が省略されます。

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

感謝しました。
Michael Rogers

1
これが正しい方法です。
Ankit Chauhan

2
良いですね!これは受け入れられる答えになるはずです。
ジョー

3

これは、soil / rootsプラグインから取得しました。大部分の仕事をしました。

    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

上記のstyle_loader_tagscript_loader_tagアプローチは、テーマ/プラグインが適切なエンキュー関数を使用している場合、Wordpressが生成するマークアップに対して機能するはずです。

協力しない問題のあるプラグインがあり(IIRC Jetpackは、私の記憶がこれを改訂してから新しいバージョンでない限り、違反者でした)、あなたの訪問者がそうである可能性は低いという事実にもかかわらず、この問題の解決に固執している場合何らかの影響を受けた場合(ブラウザーはページを適切にレンダリングします!)、いつでも全面的に出力バッファーを使用できます。

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

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

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

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

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

PHPマニュアルリファレンス:


これが最良の答えであり、エラーなしで適切に機能します。ありがとう。
Ivijan StefanStipić18年

唯一の実用的なソリューション
ティムールガフォロフ2018年

誰かが興味を持っている場合、インラインスクリプトのタグを追加するときにWordPressはstyle_loader_tagまたはscript_loader_tagフィルターを使用しないようです。developer.wordpress.org/reference/classes/wp_scripts/...<script>
firxworx

1

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

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-tags-in-wordpress/#post-246425


上記の特定の投稿OPは実際にはここにあります:css-tricks.com/forums/topic/clean-up-script-tags-in-wordpress/…注:スクリプトはブラックアウトされていますが、テキストを選択すると、それを読んでください、そしてそれは上記に投稿されたとおりです。LeoNovaisは追加の説明を提供しません。CSS Tricksがスクリプトをブラックアウトした理由がわかりません。
SherylHohman

1

script-loader.phpのコードによると、scriptおよびstyle引数でhtml5テーマのサポートが追加されている場合、type属性は省略されます。

以下のリンクを参照してください。

function yourthemeprefix_theme_supportt() {
    add_theme_support(
        'html5',
        array(
            'script', // Fix for: The "type" attribute is unnecessary for JavaScript resources.
            'style',  // Fix for: The "type" attribute for the "style" element is not needed and should be omitted.
        )
    );
}
add_action( 'after_setup_theme', 'yourthemeprefix_theme_support' );

0

@ realmag77から構築。これは、Autoptimizeプラグインを利用して、すべてのタイプ属性をフィルターで除外できるようにしますが、インストールおよびアクティブ化されていない場合でも機能します。フォールバックは正常に機能しますが、プラグインを通じてロードされたスクリプトとスタイルシートはフィルタリングされません。他にどのようにそれらをフィルタリングするかはわかりませんが、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
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 );
}

WPSE、ジーバンへようこそ。なぜこれが問題を解決するのか、どのように機能するのかについての回答に説明を含めると役立ちます。
butlerblog

0

さて、私は他のたくさんのコードやここで述べたものを試してみたのでtext/javascript、WordPressコアファイルや他のプラグインやインラインJavaScriptコードからの痕跡がまだ残っています。このコードをテストした後、すべてが解決されました。

// Remove w3 validator regarding "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 );
}

それがいくつかを助けることができることを願っています:)

ありがとうございました


-1

WP Fastest Cacheでこれが発生している場合は、プラグインのPHPスクリプトで手動でtype属性を削除できます。これは他のプラグインでも機能するはずですが、type属性を追加しているファイルがわかりません。WP Fastest Cacheの場合は、wp-content / plugins / wp-fastest-cache / incフォルダーに移動してjs-utilities.phpを開き、text / javascriptを検索して、属性を指定して削除する必要があります。私はW3 Validatorでその警告を受け取り、そのように修正しました。変更を元に戻すことができるプラグインを更新する場合、プラグインの更新を無効にするには、wpFastestCacheを編集してプラグインのバージョンをこの10.0.8.7.7のようなものに変更できることにも注意してください


-1

2つのステップで、必要に応じてサイトのHTMLコードを最適化できます。

  • このプラグインをインストールします:https : //wordpress.org/plugins/autoptimize/
  • プラグインオプションで[HTMLコードを最適化しますか?]を有効にします
  • 現在のワードプレステーマのfunctions.phpで、次のコードを適用します。

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

    そして最後にスラッシュなしで $ site_urlをあなたのサイトリンクに変更することを忘れないでください


-1

以下の関数を使用して、リンクおよびスクリプトタグからタイプ属性を削除できます。

以下の関数をfunctions.phpに貼り付けて、type = text / cssを削除します linkタグます

/ *スタイルシートから属性「 'type = text / css'」を削除します* /
function wpse51581_hide_type($ src){
    str_replace( "type = 'text / css'"、 ''、$ src);を返します。
}
add_filter( 'style_loader_tag'、 'wpse51581_hide_type');

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

以下の関数をfunctions.phpに貼り付けて、type = 'text / javascript'を削除します script

// *スクリプトとスタイルからタイプタグを削除します
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);
}

答えは正しいが、それでも誰かが反対票を投じた
Infoconic
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.