Bagaimana cara menambahkan crossorigin dan integritas ke wp_register_style? (Font Keren 5)

Saya meningkatkan Font Awesome 4 ke versi 5 yang memperkenalkan atribut integritas dan crossorigin ke <link rel="stylesheet">markup.

Saat ini, saya menggunakan:

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

Yang output sebagai:

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

Dengan Font Awesome 5 itu memperkenalkan dua atribut dan nilai baru ( integritydan crossorigin) misalnya:

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

Jadi saya perlu mencari tahu bagaimana saya dapat menambahkan integritas dan crossorigin ke wp_register_style, saya telah mencoba tetapi upaya saya untuk menggunakan wp_style_add_datagagal, sepertinya metode ini hanya mendukung conditional, rtldan suffix, altdan title.

style_loader_tag
style_loader_tag adalah API WordPress resmi, lihat dokumentasi: https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Memfilter tag tautan HTML dengan gaya enqueued.

Pertama enqueue stylesheet Anda, lihat dokumentasi: 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 );

The $handleadalah 'font-awesome-5'
saya lakukan nullagar tidak ada nomor versi. Dengan cara ini akan di-cache.

Simple str_replace Str_replace
sederhana sudah cukup untuk mencapai apa yang Anda inginkan, lihat contoh di bawah ini

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

Tambahkan atribut yang berbeda
Di bawah ini contoh untuk menambahkan atribut yang berbeda ke (beberapa) lembar gaya yang berbeda

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

Tambahkan atribut ke semua gaya
Di bawah contoh untuk menambahkan atribut yang sama ke lebih dari satu lembar gaya

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
Saya juga ingin menjelaskan script_loader_tag, karena ini juga berguna, tetapi API ini bekerja dalam kombinasi dengan wp_enqueue_script .

API script_loader_tag hampir sama, hanya beberapa perbedaan kecil, lihat dokumentasi: https://developer.wordpress.org/reference/hooks/script_loader_tag/

apply_filters( 'script_loader_tag', $tag, $handle, $src )
Memfilter tag skrip HTML dari skrip enqueued.

Di bawah ini adalah contoh untuk menunda satu skrip

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

Di bawah ini adalah contoh untuk menunda lebih dari satu skrip

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

Jadi saya sudah menjelaskan API style_loader_tagdan script_loader_tag. Dan saya memberikan beberapa contoh untuk kedua API. Saya berharap ini bermanfaat bagi banyak orang di luar sana. Saya memiliki pengalaman dengan kedua API itu.

UPDATE
@CKMacLeod Terima kasih atas pembaruan Anda, ini menjelaskan beberapa hal. Kami kebanyakan berada di halaman yang sama. Seperti yang saya katakan, saya adalah pengembang WordPress dan jika Anda ingin menerbitkan tema dan / atau plugin di https://wordpress.org Anda pada dasarnya dipaksa untuk mematuhi " Standar Pengodean WordPress " atau mereka hanya akan menolak Anda tema dan / atau plugin.

Itu sebabnya saya mendorong pengembang di luar sana untuk menggunakan "cara WordPress". Saya mengerti bahwa kadang-kadang tidak ada perbedaan apa pun, tetapi juga kenyamanan. Seperti yang Anda katakan sendiri, Anda dapat mengunduh Font Awesome dan memasukkannya ke dalam tema dan / atau plugin Anda, dengan cara ini Anda hanya perlu menghapus fungsi style_loader_tag dan memodifikasi fungsi wp_enqueue_style Anda.

Dan satu hal terakhir, di masa lalu (5 tahun yang lalu) beberapa caching, menggabungkan dan mengecilkan plugin tidak bekerja dan sebagian besar waktu saya akan mencari tahu mengapa para pengembang yang membuat tema hanya meletakkan hal-hal di kepala dalam tema dan / atau menggema mereka. Sebagian besar plugin caching, yang juga (sebagian besar waktu) menyediakan opsi untuk menggabungkan, memperkecil, dan menunda eksekusi skrip menjadi lebih pintar dan lebih baik dalam mendeteksi kode yang buruk dan mengatasinya. Tapi ini tidak disukai. Itu sebabnya saya mendorong orang untuk kode dengan standar / konvensi dalam pikiran.

Sebagai pengembang, Anda selalu perlu mempertimbangkan apa yang dapat dilakukan orang dengan kode Anda dan mempertimbangkan kompatibilitas. Jadi tidak mengambil solusi mudah tetapi solusi optimal terbaik. Saya harap saya telah mengklarifikasi sudut pandang saya.

EDIT
@CKMacLeod Terima kasih atas debat (teknis), saya harap Anda menyadari betapa pentingnya hal ini (menggunakan WordPress API dalam pengembangan Anda sendiri). Sekali lagi, saya telah melihat-lihat dan bahkan sekarang jika saya melihat FAQ tentang plugin minify paling populer, saya biasanya melihat ini dengan satu atau lain cara, misalnya:

Pertanyaan: Mengapa beberapa file CSS dan JS tidak digabung?
Jawaban: Plugin ini hanya memproses file JS dan CSS yang dibuat menggunakan metode WordPress API resmi - https://developer.wordpress.org/themes/basics/includes-css-javascript/ -serta file dari domain yang sama (kecuali ditentukan pada pengaturan).

Lihat FAQ: https://wordpress.org/plugins/fast-velocity-minify/

Tinjauan script_ dan style_loader_tag oleh @Remzi Cavdar menarik, tetapi, dengan risiko memancing kemarahan, dan dengan harapan bahwa seseorang dapat mengingatkan saya apa keuntungan menggunakan antrian WP dalam kasus seperti ini, saya ' saya akan merekomendasikan mengambil jalan keluar yang mudah, dan memuat stylesheet Fontawesome melalui 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 -->
'; 

}

Beberapa bahkan mungkin berpendapat bahwa, jika Anda menggunakan FA hanya untuk, katakanlah, beberapa ikon di footer tema atau di dalam posting, Anda harus menambahkannya lebih rendah, di dalam tubuh halaman, karena dengan cara itu tidak akan muncul sebagai render-blocking, tapi saya akui saya belum pernah melakukan itu ... Dan saya tidak akan merekomendasikan untuk menambahkannya langsung ke header.php atau file templat lainnya. Itu salah. ;)

MEMPERBARUI

Remzi Cavdar berbaik hati untuk menjawab permintaan saya untuk pengingat mengapa hanya menambahkan Fontawesome atau tag serupa melalui wp_head () hook mungkin kurang diinginkan daripada menggunakan antrian WordPress. Secara umum ia merujuk pada gagasan praktik terbaik dan agak lebih khusus pada gagasan bahwa plugin caching mungkin harus dapat mengakses stylesheet melalui antrian.

Sebelum saya merinci, saya akan mengatakan itu, meskipun saya tidak benar-benar mengetahui adanya pembenaran khusus yang signifikan selain bahwa itu semacam "Jalan WordPress," Saya menyukai pendekatan Kamerad Cavdar, dan mungkin menggunakannya sendiri di masa depan. .

Namun, klaimnya yang lain untuk itu, tidak meyakinkan saya. Mungkin dia atau orang lain bisa menambahkannya. Jika demikian, saya semua telinga. Intinya, sejauh yang saya tahu, setelah menjalankan lebih dari 20 tes pada Pingdom dan GTMetrix membandingkan "tambah via antrian" vs "tambah via head" di blog uji, tidak ada perbedaan yang signifikan dan konsisten dalam hal kinerja yang dinilai, jumlah total permintaan halaman, atau memuat kali (mis., "Cat Pertama," "Cat Isi Pertama," dan "OnLoad" di GTMetrix) antara dua pendekatan.

Khusus tentang caching, plugin caching tidak dapat melakukan banyak hal dengan file yang di-host secara eksternal, terlepas dari apakah mereka ditambahkan ke antrian WP atau tidak. File-file itu sendiri akan tetap tidak terpengaruh, dan halaman Anda akan tetap menghasilkan permintaan untuk masing-masing file.

Secara umum, saya telah melihat berbagai pendekatan berbeda untuk memuat skrip dan gaya. Beberapa dari mereka akan memotong sebagian atau seluruhnya antrian WP. Bisa dibayangkan bahwa akan ada contoh - fungsi yang menggunakan berbagai pegangan gaya sambil mencegah mereka dimuat pada halaman tertentu, katakanlah - di mana memiliki Fontawesome atau Tag Pihak ke-3 lainnya enqueued akan sedikit berguna, dan bahwa awal pengerahan dua fungsi - enqueueing dan filtering - sebenarnya akan berubah menjadi lebih pelit daripada sekadar memuat satu.

Dalam kasus FA, stylesheet sudah diperkecil dan dimuat melalui CDN FA sendiri. Dampak intrinsiknya pada kinerja akan minimal, meskipun, apakah dimuat melalui wp_head () atau melalui antrian, itu masih akan mendaftarkan kekurangan di beberapa tempat pada kinerja kelas - yang sama, seperti Google Page Speed ​​Insights dan GTMetrix dan Pingdom yang disebutkan sebelumnya, itu akan membuat Anda titik kinerja untuk tidak menyimpan beberapa byte (bahkan kilobyte) mengoptimalkan kembali satu atau file gambar lain.

Memuat melalui wp_head daripada antrian dapat menyebabkan cek "urutan skrip dan gaya" yang benar (meskipun orang lain akan menilai Anda lebih tinggi karena memuat file yang di-hosting secara eksternal setelah yang di-host secara lokal), tetapi, jika Anda benar-benar khawatir tentang memuat FA dengan cara terbaik untuk situs Anda, maka Anda akan mencoba meng-hosting file dan sub-file secara lokal, baik gaya dan font yang disebut stylesheet melalui @ font-face. Dalam hal ini Anda dapat membuat enseue stylesheet seperti file lokal lainnya, menggabungkan dan menggabungkannya melalui plugin yang mengoptimalkan atau langsung "dengan tangan." Anda bahkan dapat membuat modifikasi Fontawesome yang mengagumkan dan mengintegrasikannya dengan stylesheet dan struktur tema Anda. Atau (seperti yang disebutkan sebelumnya secara singkat) Anda dapat mencoba beberapa taktik optimasi kinerja yang lebih eksotis seperti menambahkan inline CSS tepat sebelum diperlukan dalam struktur halaman tertentu.

Bagaimanapun, Anda tidak perlu khawatir tentang tag "integritas" dan "lintas asal" yang baru, dan Anda juga tidak perlu khawatir jika suatu hari Fontawesome lupa membayar tagihan CDN-nya.

Atau Anda mungkin bekerja di situs yang sudah berantakan di bawah tenda, dengan stylesheet dan skrip dimuat dalam segala hal, dan mungkin lebih mudah hanya memiliki tambahan terbaru di bagian atas file functions.php sehingga Anda atau pengembang selanjutnya dapat menemukannya lagi dengan mudah ...