ลบแอตทริบิวต์ประเภทจากสคริปต์และแท็กสไตล์ที่เพิ่มโดย WordPress


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 ยอดนิยมใด ๆ ดูเหมือนว่าจะเลวร้ายลงทุกปี validator (imho) ควรใช้เป็นเครื่องมือในการเปิดเผยข้อผิดพลาดพื้นฐานบางอย่าง (เช่นการลืมaltแท็กหรือลืมปิดแท็ก) แต่ไม่ควรมองว่าเป็นมาตรฐานเหมือนที่เคยเป็นมา
David Sword

พวกเขาได้แนะนำหลังจาก 2 ธันวาคม 017 ก่อนหน้านั้นชุดรูปแบบของฉันเป็นข้อผิดพลาด / คำเตือนฟรี ควรมีวิธีการกำจัดพวกเขา
WP Intermediate

1
ดูที่script_loader_tagตะขอคุณอาจจะสามารถstr_replace()ลบออกได้
ดาวิดดาบ

น่าจะชี้ให้เห็นว่าสิ่งเหล่านี้เป็นเพียงการเตือนไม่ใช่ข้อผิดพลาด เว็บไซต์ของคุณจะยังคงตรวจสอบ
swissspidy

คุณสามารถตรวจสอบคำตอบต่อไปนี้ได้เช่น - stackoverflow.com/a/53380692/2611955
Jahirul Islam Mamun

คำตอบ:


16

คุณสามารถลบtype='*'แอตทริบิวต์และค่าออกจากwp_enqueue'ed script and styles โดยใช้*_loader_taghooks ที่เกี่ยวข้อง

การทำงานต่อไปนี้สำหรับฉัน:

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

คุณสามารถติดตามแหล่งที่มาของทั้งห้าและดูว่าเป็นไปได้ในการแก้ไขแท็กหรือไม่ wp_enqueueผมคาดเดาอีกครั้งที่พวกเขาอาจจะไม่ได้ใช้ ฉันขอแนะนำให้เพิ่มการอัปเดตลงในโพสต์ต้นฉบับของคุณเพื่อสะท้อนถึงความดื้อรั้น 5 ที่เหลือด้วยการอ้างอิงโค้ดและปลั๊กอิน - อาจช่วยได้มากขึ้น
David Sword

ครับแก้ไขข้อผิดพลาดด้วยภาพในครั้งนี้
WP Intermediate

13

WordPress 5.3 แนะนำวิธีที่ง่ายกว่ามากในการบรรลุเป้าหมาย โดยการลงทะเบียนสนับสนุนชุดรูปแบบเพื่อใช้ HTML 5 scriptและstyleที่type=""แอตทริบิวต์จะถูกมองข้าม:

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

มันทำงานได้ดีขอบคุณ
Michael Rogers

1
นี่เป็นวิธีที่ถูกต้องที่จะทำ
Ankit Chauhan

2
ทำได้ดีนี่! นี่ควรเป็นคำตอบที่ยอมรับได้
โจ

3

รับสิ่งนี้จากปลั๊กอินดิน / ราก ทำงานส่วนใหญ่

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

คุณลองทำสิ่งนี้หรือไม่
WP Intermediate

3

style_loader_tagและscript_loader_tagวิธีการดังกล่าวข้างต้นมีลักษณะเหมือนที่พวกเขาควรจะทำงานสำหรับสิ่งที่มาร์กอัป Wordpress เป็นสร้างในกรณีที่ธีม / ปลั๊กอินจะใช้ฟังก์ชั่นที่เหมาะสม enqueue

หากคุณมีการละเมิดปลั๊กอินที่ไม่ให้ความร่วมมือ (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_loadedhook) นั่นคือขวาในขณะที่ wp + theme + plugins + etc เต็มแล้วและถูกปิดในช่วงเวลาสุดท้าย ( shutdownhook) ซึ่งไฟก่อน PHP จะหยุดการทำงาน regex ต้องทำงานผ่านทุกอย่างและนั่นอาจเป็นเนื้อหาจำนวนมาก!

กระบวนการstyle_loader_tagและscript_loader_tagวิธีการข้างต้นจะเรียกใช้ regex บนสตริงที่มีขนาดเล็กมาก (ตัวแท็กเอง) ดังนั้นผลกระทบต่อประสิทธิภาพจึงไม่มีความสำคัญ

ฉันคิดว่าถ้าคุณมีเนื้อหาที่ค่อนข้างคงที่และใช้เลเยอร์แคชคุณสามารถพยายามลดความกังวลเกี่ยวกับประสิทธิภาพ

PHP คู่มืออ้างอิง:


นี่คือคำตอบที่ดีที่สุดและทำงานได้อย่างถูกต้องโดยไม่มีข้อผิดพลาด ขอบคุณชาย
Ivijan Stefan Stipić

ทางออกเดียวที่ทำงาน
Timur Gafforov

หากใครอยากรู้อยากเห็น WordPress ดูเหมือนจะไม่ใช้style_loader_tagหรือscript_loader_tagตัวกรองเมื่อเพิ่ม<script>แท็กสำหรับสคริปต์แบบอินไลน์ developer.wordpress.org/reference/classes/wp_scripts/…
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 typeจะถูกละเว้นเมื่อเพิ่มการสนับสนุนธีม html5 ด้วยอาร์กิวเมนต์สคริปต์และสไตล์

ดูลิงค์ด้านล่าง:

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, Jeevan มันจะมีประโยชน์ถ้าคุณใส่คำอธิบายลงไปด้วยคำตอบว่าทำไมจึงแก้ปัญหาได้และมันทำงานอย่างไร
butlerblog

0

เพราะฉันได้ลองใช้รหัสอื่น ๆ มากมายและรหัสที่กล่าวถึงที่นี่ยังคงมีร่องรอยของtext/javascriptไฟล์หลักของ WordPress และจากปลั๊กอินอื่น ๆ และรหัสจาวาสคริปต์แบบอินไลน์ หลังจากทดสอบโค้ดนี้ทุกอย่างได้รับการแก้ไขแล้ว:

// 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 คุณสามารถลบแอตทริบิวต์ type ด้วยตัวเองในสคริปต์ PHP ปลั๊กอินซึ่งควรทำงานกับปลั๊กอินอื่น ๆ ด้วย แต่ฉันไม่ทราบว่ามีไฟล์ใดบ้างที่มีการเพิ่มแอตทริบิวต์ type สำหรับ WP Fastest Cache คุณควรไปที่โฟลเดอร์ wp-content / plugins / wp-เร็วที่สุด -cache / inc และเปิด js-utilities.php จากนั้นค้นหา text / javascript และลบด้วย attribute ฉันได้รับคำเตือนเรื่อง W3 Validator และแก้ไขด้วยวิธีนั้นโปรดทราบว่าเมื่อคุณจะอัปเดตปลั๊กอินที่สามารถเปลี่ยนกลับได้เพื่อปิดใช้งานการอัปเดตปลั๊กอินคุณสามารถแก้ไข wpFastestCache และเปลี่ยนเวอร์ชันปลั๊กอินเป็นสิ่งนี้ 10.0.8.7.7


-1

คุณสามารถเพิ่มประสิทธิภาพโค้ด HTML ของเว็บไซต์ของคุณตามที่คุณต้องการใน 2 ขั้นตอน:

  • ติดตั้งปลั๊กอินนี้: https://wordpress.org/plugins/autoptimize/
  • เปิดใช้งานในตัวเลือกปลั๊กอิน 'เพิ่มประสิทธิภาพโค้ด HTML หรือไม่'
  • ใน functions.php ของธีม wordpress ปัจจุบันของคุณใช้รหัสถัดไป:

    add_filter ('autoptimize_html_after_minify', ฟังก์ชัน ($ 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'" ออกจากสไตล์ชีท * /
ฟังก์ชั่น wpse51581_hide_type ($ src) {
    return 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);
ฟังก์ชัน codeless_remove_type_attr ($ tag, $ handle) {
    return preg_replace ("/ type = ['\"] ข้อความ \ / (javascript | css) [' \ "] /", '', $ tag);
}

คำตอบนั้นถูกต้อง แต่ก็ยังมีคนโหวตลบ
Infoconic
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.