วิธีเพิ่ม crossorigin และ integrity ใน wp_register_style? (ตัวอักษรยอดเยี่ยม 5)

ฉันกำลังอัปเกรด Font Awesome 4 เป็นเวอร์ชัน 5 ซึ่งแนะนำทั้งคุณสมบัติที่สมบูรณ์และแอตทริบิวต์ทางเลือกข้ามสู่<link rel="stylesheet">มาร์กอัพ

ขณะนี้ฉันกำลังใช้:

wp_register_style('FontAwesome', 'https://example.com/font-awesome.min.css', array(), null, 'all' );
wp_enqueue_style('FontAwesome');

ซึ่งแสดงผลเป็น:

<link rel="stylesheet" id="FontAwesome-css" href="https://example.com/font-awesome.min.css" type="text/css" media="all" />

ด้วยตัวอักษรที่น่ากลัว 5 มันแนะนำสองคุณลักษณะใหม่และค่า ( integrityและcrossorigin) เช่น:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

ดังนั้นผมจึงต้องไปหาวิธีการที่ฉันสามารถเพิ่มทั้งความสมบูรณ์และ crossorigin เพื่อ wp_register_style ผมได้พยายาม แต่ความพยายามของฉันที่จะใช้งานwp_style_add_dataได้ล้มเหลวก็จะดูเหมือนว่าวิธีนี้สนับสนุนเฉพาะconditional, rtlและsuffix, และalttitle

style_loader_tag
style_loader_tag เป็น WordPress API อย่างเป็นทางการ, ดูเอกสาร: https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
กรองแท็กลิงก์ HTML ของสไตล์ที่จัดคิว

ขั้นแรกให้จัดสไตล์ชีทของคุณดูเอกสาร: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );

$handleเป็น'font-awesome-5'
ที่ฉันทำnullเพื่อให้มีหมายเลขรุ่นไม่มี วิธีนี้จะถูกแคช

Simple str_replace Simple str_replace
เพียงพอที่จะบรรลุสิ่งที่คุณต้องการดูตัวอย่างด้านล่าง

function add_font_awesome_5_cdn_attributes( $html, $handle ) {
    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_font_awesome_5_cdn_attributes', 10, 2 );

เพิ่มแอททริบิวที่แตกต่างกัน
ด้านล่างตัวอย่างเพื่อเพิ่มแอททริบิวที่แตกต่างกันไปที่ (หลาย ๆ ) สไตล์ชีตที่แตกต่างกัน

function add_style_attributes( $html, $handle ) {

    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }

    if ( 'another-style' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='blajbsf' example", $html );
    }

    if ( 'bootstrap-css' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='something-different' crossorigin='anonymous'", $html );
    }

    return $html;
}
add_filter( 'style_loader_tag', 'add_style_attributes', 10, 2 );

เพิ่มแอททริบิวให้กับสไตล์ทั้งหมด
ด้านล่างตัวอย่างเพื่อเพิ่มแอททริบิวเดียวกันไปยังมากกว่าหนึ่งสไตล์ชีต

function add_attributes_to_all_styles( $html, $handle ) {

        // add style handles to the array below
        $styles = array(
            'font-awesome-5',
            'another-style',
            'bootstrap-css'
        );

        foreach ( $styles as $style ) {
            if ( $style === $handle ) {
                return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
            }
        }

        return $html;
}
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );

script_loader_tag
ฉันยังต้องการที่จะอธิบาย script_loader_tag เพราะนี้เป็นประโยชน์ แต่ API นี้ทำงานร่วมกับwp_enqueue_script

script_loader_tag API เกือบเหมือนกันมีความแตกต่างเพียงเล็กน้อยเท่านั้นดูเอกสารประกอบ: https://developer.wordpress.org/reference/hooks/script_loader_tag/

apply_filters( 'script_loader_tag', $tag, $handle, $src )
กรองแท็กสคริปต์ HTML ของสคริปต์ที่เข้าคิว

ด้านล่างตัวอย่างเพื่อเลื่อนไปที่สคริปต์เดี่ยว

function add_defer_jquery( $tag, $handle ) {
    if ( 'jquery' === $handle ) {
        return str_replace( "src", "defer src", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_jquery', 10, 2 );

ด้านล่างตัวอย่างเพื่อเลื่อนมากกว่าหนึ่งสคริปต์

function add_defer_attribute( $tag, $handle ) {

    // add script handles to the array below
    $scripts_to_defer = array(
        'jquery',
        'jquery-migrate',
        'bootstrap-bundle-js'
    );

    foreach ( $scripts_to_defer as $defer_script ) {
        if ( $defer_script === $handle ) {
            return str_replace( "src", "defer src", $tag );
        }
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );

ดังนั้นผมจึงได้อธิบายทั้งของ API และstyle_loader_tag script_loader_tagและฉันยกตัวอย่างบางส่วนสำหรับ API ทั้งสองฉันหวังว่านี่จะเป็นประโยชน์สำหรับผู้คนจำนวนมากออกไปที่นั่น ฉันมีประสบการณ์กับทั้งสอง API

UPDATE
@CKMacLeod ขอบคุณสำหรับการอัปเดตของคุณสิ่งนี้ชัดเจน เราส่วนใหญ่อยู่ในหน้าเดียวกัน อย่างที่ฉันบอกว่าฉันเป็นนักพัฒนา WordPress และถ้าคุณต้องการเผยแพร่ธีมและ / หรือปลั๊กอินบนhttps://wordpress.orgคุณจำเป็นต้องปฏิบัติตาม " มาตรฐานการเข้ารหัสของ WordPress " ไม่เช่นนั้นพวกเขาจะปฏิเสธคุณ ธีมและ / หรือปลั๊กอิน

นั่นเป็นเหตุผลที่ฉันสนับสนุนให้นักพัฒนาออกไปใช้ "วิธี WordPress" ฉันเข้าใจว่าบางครั้งไม่มีความแตกต่างใด ๆ แต่ก็สะดวก ดังที่คุณพูดด้วยตนเองว่าคุณสามารถดาวน์โหลด Font Awesome และรวมไว้ในธีมและ / หรือปลั๊กอินของคุณได้ด้วยวิธีนี้คุณเพียงแค่ลบฟังก์ชั่น style_loader_tag และแก้ไขฟังก์ชั่น wp_enqueue_style ของคุณ

และสิ่งหนึ่งที่ผ่านมาในอดีต (5 ปีที่แล้ว) บางแคชการรวมและการลดขนาดปลั๊กอินไม่ทำงานและส่วนใหญ่ฉันจะพบว่าทำไมนักพัฒนาเหล่านั้นที่สร้างธีมเพียงแค่นำสิ่งต่าง ๆ มาใส่ในธีมและ / หรือสะท้อนพวกเขา ปลั๊กอินแคชส่วนใหญ่ซึ่งส่วนมาก (ส่วนใหญ่) มีตัวเลือกในการรวมลดขนาดและชะลอการเรียกใช้สคริปต์อย่างชาญฉลาดและตรวจจับโค้ดที่ไม่ดีและทำงานได้ดีขึ้น แต่สิ่งนี้ไม่เป็นที่ต้องการ นั่นเป็นเหตุผลที่ฉันสนับสนุนให้ผู้คนเขียนรหัสด้วยมาตรฐาน / ข้อตกลงในใจ

ในฐานะนักพัฒนาคุณต้องคำนึงถึงสิ่งที่ผู้คนสามารถทำกับโค้ดของคุณและคำนึงถึงความเข้ากันได้ ดังนั้นไม่ควรใช้วิธีแก้ปัญหาง่ายๆ ฉันหวังว่าฉันได้ชี้แจงมุมมองของฉัน

EDIT
@CKMacLeod ขอบคุณสำหรับการอภิปราย (ทางเทคนิค) ฉันหวังว่าคุณจะรู้ว่าเรื่องนี้มีความสำคัญเพียงใด (โดยใช้ WordPress API ในการพัฒนาของคุณเอง) อีกครั้งฉันได้รับการมองไปรอบ ๆ และแม้ว่าตอนนี้ถ้าฉันดูคำถามที่พบบ่อยของปลั๊กอินลดขนาดที่นิยมมากที่สุดที่ฉันมักจะเห็นวิธีนี้หรืออื่น ๆ ตัวอย่างเช่น:

คำถาม:เหตุใดไฟล์ CSS และ JS บางไฟล์จึงไม่ถูกรวมกัน
คำตอบ:ปลั๊กอินประมวลผลไฟล์ JS และ CSS เท่านั้นโดยใช้วิธี WordPress API อย่างเป็นทางการ - https://developer.wordpress.org/themes/basics/including-css-javascript/- รวมถึงไฟล์จากโดเมนเดียวกัน (เว้นแต่จะระบุไว้ ในการตั้งค่า)

ดูคำถามที่พบบ่อย: https://wordpress.org/plugins/fast-velocity-minify/

บทวิจารณ์ของ script_ และ style_loader_tag โดย @Remzi Cavdar นั้นน่าสนใจ แต่มีความเสี่ยงที่จะยั่วโมโหและหวังว่าใครบางคนสามารถเตือนฉันได้ว่าข้อดีของการใช้คิว WP จะเป็นอย่างไรในกรณีเช่นนี้ฉัน ' จะแนะนำให้ใช้วิธีง่ายๆและโหลดสไตล์ชีทของ Fontawesome ผ่านทาง hook

/* ADD FONTAWESOME 5.5.0 via action hook */
add_action( 'wp_head', 'sewpd_add_fontawesome' );

function sewpd_add_fontawesome() {

echo '
<!--FONTAWESOME 5.5.0 added via functions.php -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!--END FONTAWESOME -->
'; 

}

บางคนอาจโต้แย้งว่าถ้าคุณใช้ FA สำหรับพูดไอคอนบางอย่างในส่วนท้ายของธีมหรือภายในโพสต์คุณควรเพิ่มมันลงในส่วนของหน้าเพราะวิธีนั้นมันจะไม่เกิดขึ้น การปิดกั้นการเรนเดอร์ แต่ฉันยอมรับว่าฉันไม่เคยทำแบบนั้น ... และฉันจะไม่แนะนำให้เพิ่มไปยัง header.php หรือไฟล์เทมเพลตอื่น ๆ โดยตรง นั่นคงจะผิด ;)

UPDATE

Remzi Cavdar ใจดีพอที่จะตอบคำขอของฉันเพื่อเตือนความจำว่าทำไมเพียงแค่เพิ่มแท็ก Fontawesome หรือคล้ายกันผ่านทางตะขอ wp_head () อาจจะเป็นที่ต้องการน้อยกว่าการใช้คิว WordPress เขาอ้างถึงแนวคิดทั่วไปของแนวปฏิบัติที่ดีที่สุดและค่อนข้างเฉพาะเจาะจงกับแนวคิดที่ว่าปลั๊กอินแคชอาจต้องสามารถเข้าถึงสไตล์ชีทผ่านคิว

ก่อนที่ฉันจะพูดถึงรายละเอียดฉันจะบอกว่าถึงแม้ว่าฉันจะไม่ทราบเหตุผลที่สำคัญอื่น ๆ นอกเหนือจากนั้นคือ "วิธี WordPress" ฉันชอบแนวทางของ Comrade Cavdar และอาจใช้ตัวเองในอนาคต .

อย่างไรก็ตามข้อเรียกร้องอื่น ๆ ของเขาสำหรับเรื่องนี้ไม่ได้โน้มน้าวใจฉัน บางทีเขาหรือคนอื่นสามารถเพิ่มพวกเขา ถ้าเป็นเช่นนั้นฉันหูทั้งหมด บรรทัดล่างเท่าที่ฉันสามารถบอกได้หลังจากใช้งานการทดสอบมากกว่า 20 ครั้งใน Pingdom และ GTMetrix เปรียบเทียบ "เพิ่มผ่านคิว" และ "เพิ่มผ่านหัว" ในบล็อกทดสอบไม่มีความแตกต่างอย่างมีนัยสำคัญและสอดคล้องกันในแง่ของประสิทธิภาพการให้คะแนน จำนวนการร้องขอหน้าทั้งหมดหรือเวลาในการโหลด (เช่น "First Paint," "First Contentful Paint" และ "OnLoad" ที่ GTMetrix) ระหว่างสองวิธีนี้

เกี่ยวกับการแคชโดยเฉพาะปลั๊กอินสำหรับการแคชไม่สามารถทำอะไรได้มากกับไฟล์ที่โฮสต์ภายนอกไม่ว่าจะเพิ่มเข้ากับคิว WP หรือไม่ก็ตาม ไฟล์จะไม่ได้รับผลกระทบและหน้าของคุณจะยังคงสร้างคำขอสำหรับแต่ละไฟล์

โดยทั่วไปแล้วฉันได้เห็นวิธีการที่หลากหลายในการโหลดสคริปต์และสไตล์ บางคนจะข้ามคิว WP บางส่วนหรือทั้งหมด เป็นไปได้อย่างแน่นอนว่าจะมีอินสแตนซ์ - ฟังก์ชั่นที่ใช้อาเรย์ของสไตล์ที่จับในขณะที่ป้องกันไม่ให้โหลดบนหน้าบางหน้าโดยเฉพาะ - การใช้ Fontawesome หรือแท็กของบุคคลที่สามอื่น ๆ ฟังก์ชั่น - enqueueing และการกรอง - จริง ๆ แล้วจะกลายเป็นทางการเงินมากกว่าเพียงแค่การโหลดอย่างใดอย่างหนึ่ง

ในกรณีของ FA สไตล์ชีทจะถูกลดขนาดไปแล้วและโหลดผ่าน CDN ของ FA เอง ผลกระทบที่แท้จริงของมันต่อประสิทธิภาพจะมีเพียงเล็กน้อยไม่ว่าจะโหลดผ่าน wp_head () หรือผ่านคิวก็ตามมันจะยังคงลงทะเบียน demerits ในจุดต่าง ๆ บนตัวปรับประสิทธิภาพการทำงานเช่นเดียวกับ Google Page Speed ​​Insights และ GTMetrix และ Pingdom ที่จะเทียบท่าประสิทธิภาพให้คุณโดยไม่บันทึกสองสามไบต์ (ไม่ได้เป็นกิโลไบต์) การปรับไฟล์ภาพหนึ่งไฟล์ให้เหมาะสมอีกครั้ง

การโหลดผ่าน wp_head แทนคิวอาจตรวจสอบ "ลำดับที่ถูกต้องของสคริปต์และสไตล์" (แม้ว่าบุคคลอื่นจะให้คะแนนคุณสูงกว่าสำหรับการโหลดไฟล์โฮสต์ภายนอกจากโฮสต์ที่อยู่ในเครื่อง) แต่ถ้าคุณกังวลเกี่ยวกับการโหลดจริงๆ FA ในวิธีที่ดีที่สุดสำหรับเว็บไซต์ของคุณจากนั้นคุณจะลองโฮสต์ไฟล์และไฟล์ย่อยในเครื่องทั้งสไตล์และแบบอักษรที่สไตล์ชีทเรียกผ่าน @ font-face ในกรณีนี้คุณสามารถจัดคิวชีทสไตล์เหมือนกับไฟล์โลคอลอื่น ๆ ต่อกันและรวมเข้าด้วยกันผ่านปลั๊กอินการปรับให้เหมาะสมหรือโดยตรง "ด้วยมือ" คุณสามารถแก้ไข Fontawesome ที่ยอดเยี่ยมของคุณเองและรวมเข้ากับสไตล์ชีทและโครงสร้างของธีมของคุณ หรือ (ตามที่กล่าวไว้ก่อนหน้านี้สั้น ๆ ) คุณสามารถลองใช้กลยุทธ์การเพิ่มประสิทธิภาพที่แปลกใหม่บางอย่างเช่นการเพิ่ม CSS แบบอินไลน์ก่อนที่จะต้องการในโครงสร้างของหน้าเฉพาะ

อย่างไรก็ตามคุณไม่จำเป็นต้องกังวลเกี่ยวกับแท็ก "integrity" และ "cross-origin" ใหม่และคุณไม่ต้องกังวลหากวันหนึ่ง Fontawesome ลืมที่จะจ่ายบิล CDN

หรือคุณอาจกำลังทำงานบนไซต์ที่ยุ่งเหยิงไปหมดแล้วด้วยสไตล์ชีตและสคริปต์ที่โหลดในทุก ๆ วิธีและมันอาจจะง่ายกว่าที่คุณจะมีส่วนเสริมล่าสุดที่ด้านบนของไฟล์ function.php ดังนั้นคุณหรือ นักพัฒนาซอฟต์แวร์รายต่อไปสามารถค้นหาได้ง่าย ๆ ...