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

12

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.

Pipo
sumber
Terima kasih @JacobPeattie, pertanyaannya sedikit berbeda tetapi jawaban yang diberikan dapat diterapkan dalam kasus ini. Namun tanggal kembali ke 2016, mungkin sekarang ada cara yang tampaknya kurang hacky ...
Pipo
@ Pipo Saya adalah pengembang WordPress dan membuat beberapa plugin WordPress, saya banyak menggunakan style_loader_tag dan script_loader_tag untuk melakukan pemuatan khusus. Bahkan menambahkan penundaan dan asinkron ke tag skrip saya. Lihat salah satu plugin open source saya: github.com/Remzi1993/wp-jquery-manager
Remzi
@ Paco Anda juga benar. Posting lainnya sudah usang dan tidak akan berfungsi lagi. Dalam contoh pertama saya, saya telah memamerkan bagaimana Anda bisa melakukan ini dengan mengganti string sederhana. Saya juga telah memberikan sedikit informasi lebih banyak sehingga orang lain dapat menggunakan informasi ini
Remzi Cavdar
@ JacobPeattie Bisakah Anda melihatnya? Saya mungkin memiliki beberapa kesalahan tata bahasa, bahasa Inggris adalah bahasa kedua saya
Remzi Cavdar

Jawaban:

16

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/

Remzi Cavdar
sumber
@Pipo Sama-sama :)
Remzi Cavdar
RC - Saya kira jawaban Anda mungkin secara keseluruhan lebih baik daripada menggunakan latihan WordPress daripada saya (meskipun saya ingin melakukan penelitian lebih lanjut tentang enqueueing skrip dan file yang di-host secara eksternal). Namun, saya pikir kita harus jelas tentang pembenaran kita, dan tidak membesar-besarkannya, dan juga mengakui bahwa jawaban yang tepat untuk menggabungkan layanan pihak ke-3 dapat bervariasi dalam konteks yang berbeda. Pada catatan ini, jawaban lain yang tidak kita pertimbangkan adalah menggunakan plug-in yang bagus - seperti Better Font Awesome for FA, karena mereka dapat menangani pembaruan dan tugas lainnya dengan baik.
CK MacLeod
Ya, Anda benar tentang menggunakan plugin untuk FA. Saya hanya tidak tahu apakah ini juga disukai ketika pengembang membuat tema WP. Biasanya Anda ingin memasukkan semuanya ke dalam tema Anda dan menggunakan plugin sebanyak mungkin di luar kotak.
Remzi Cavdar
Periksa solusi ini, stackoverflow.com/questions/44827134/…
Gnanasekaran Loganathan
-1

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 ...

CK MacLeod
sumber
Saya ingin tahu juga, apa kerugiannya melakukannya dengan cara ini, atau langsung menambahkannya ke file tema?
Jersh
Terima kasih atas sudut pandang Anda, satu-satunya solusi Anda akan membuat frustasi banyak plugin minify dan caching. Seperti: wordpress.org/plugins/fast-velocity-minify , wordpress.org/plugins/wp-fastest-cache dan etca ....
Remzi Cavdar
1
Plugin lain dapat memanipulasi stylesheet dan skrip jika mereka benar enqueued, jika Anda meletakkan kode Anda langsung di kepala plugin ini tidak akan dapat mengecilkan, menggabungkan dan membangun cache dengan pesanan yang tepat.
Remzi Cavdar
Remzi Cavdar: Terima kasih atas balasan Anda, tetapi, sebelum saya mengedit jawaban saya dan mengatasi masalah yang Anda sampaikan secara terperinci, saya bertanya-tanya apakah Anda memiliki contoh tentang mereka secara khusus terkait dengan Fontawesome atau umumnya terkait dengan stylesheet lain seperti itu, seperti dalam sudah diperkecil dan di-host secara eksternal.
CK MacLeod
1
"Cara wordpress" memastikan kompatibilitas maksimal dengan plugin. Apakah itu untuk mengambil sesuatu dari CDN, atau menghapus tautan untuk beberapa halaman tertentu, dengan cara Anda hal itu tidak akan mungkin terjadi tanpa benar-benar mengedit kode. +1 untuk
mendukung kepercayaan