style_loader_tag
style_loader_tag là một API WordPress chính thức, xem tài liệu: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Lọc thẻ liên kết HTML theo kiểu mê hoặc.
Trước tiên hãy liệt kê biểu định kiểu của bạn, xem tài liệu: https://developer.wordpress.org/reference/fifts/wp_enqueue_style/
wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );
Các $handlelà 'font-awesome-5'
tôi làm nullnhư vậy là không có số phiên bản. Bằng cách này, nó sẽ được lưu trữ.
Chuỗi
đơn giản Một chuỗi thông số đơn giản là đủ để đạt được những gì bạn muốn, xem ví dụ dưới đây
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 );
Thêm các thuộc tính khác nhau
Bên dưới một ví dụ để thêm các thuộc tính khác nhau cho (nhiều) biểu định kiểu khác nhau
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 );
Thêm thuộc tính cho tất cả các kiểu
Bên dưới một ví dụ để thêm các thuộc tính giống nhau cho nhiều hơn một biểu định kiểu
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
Tôi cũng muốn giải thích về script_loader_tag, bởi vì điều này cũng tiện dụng, nhưng API này hoạt động kết hợp với wp_enqueue_script .
API script_loader_tag gần như giống nhau, chỉ có một số khác biệt nhỏ, xem tài liệu: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
Lọc thẻ tập lệnh HTML của tập lệnh được xử lý.
Dưới đây là một ví dụ để trì hoãn một tập lệnh
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 );
Dưới đây là một ví dụ để trì hoãn nhiều hơn một tập lệnh
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 );
Vì vậy, tôi đã giải thích cả API style_loader_tagvà script_loader_tag. Và tôi đã đưa ra một số ví dụ cho cả hai API. Tôi hy vọng rằng điều này hữu ích cho nhiều người ngoài kia. Tôi có kinh nghiệm với cả hai API.
CẬP NHẬT
@CKMacLeod Cảm ơn bạn đã cập nhật, điều này làm rõ mọi thứ. Chúng tôi chủ yếu trên cùng một trang. Như tôi đã nói, tôi là nhà phát triển WordPress và nếu bạn muốn xuất bản một chủ đề và / hoặc plugin trên https://wordpress.org về cơ bản bạn buộc phải tuân theo " Tiêu chuẩn mã hóa WordPress " hoặc họ sẽ từ chối chủ đề và / hoặc plugin.
Đó là lý do tại sao tôi khuyến khích các nhà phát triển ngoài kia sử dụng "cách WordPress". Tôi hiểu rằng đôi khi không có sự khác biệt nào, nhưng đó cũng là sự tiện lợi. Như bạn đã nói, bạn có thể tải xuống Font Awesome và đưa nó vào chủ đề và / hoặc plugin của mình, bằng cách này, bạn chỉ cần xóa chức năng style_loader_tag và sửa đổi chức năng wp_enqueue_style của bạn.
Và một điều cuối cùng, trong quá khứ (5 năm trước) một số bộ đệm, kết hợp và rút gọn các plugin không hoạt động và hầu hết mọi lúc tôi sẽ tìm hiểu lý do tại sao những nhà phát triển tạo ra chủ đề chỉ đơn giản là đặt mọi thứ vào chủ đề và / hoặc lặp lại chúng. Hầu hết các plugin lưu đệm, những người cũng (hầu hết thời gian) cung cấp các tùy chọn để kết hợp, giảm thiểu và trì hoãn thực thi các tập lệnh trở nên thông minh hơn và tốt hơn trong việc phát hiện mã xấu và làm việc xung quanh chúng. Nhưng điều này không được ưa thích. Đó là lý do tại sao tôi khuyến khích mọi người viết mã với các tiêu chuẩn / quy ước trong tâm trí.
Là một nhà phát triển, bạn luôn cần xem xét những gì mọi người có thể làm với mã của bạn và chú ý đến tính tương thích. Vì vậy, không dùng giải pháp dễ dàng nhưng giải pháp tối ưu tốt nhất. Tôi hy vọng tôi đã làm rõ quan điểm của tôi.
EDIT
@CKMacLeod Cảm ơn bạn về cuộc tranh luận (kỹ thuật), tôi hy vọng rằng bạn nhận ra tầm quan trọng của việc này (sử dụng API của WordPress trong sự phát triển của chính bạn). Một lần nữa, tôi đã tìm kiếm xung quanh và thậm chí bây giờ nếu tôi nhìn vào các plugin minify phổ biến nhất của FAQ, tôi thường thấy cách này hay cách khác, ví dụ:
Câu hỏi: Tại sao một số tệp CSS và JS không được hợp nhất?
Trả lời: Plugin chỉ xử lý các tệp JS và CSS được sử dụng bằng phương pháp API chính thức của WordPress -
https://developer.wordpress.org/theme/basics/including-css-javascript/
-as cũng như các tệp từ cùng một tên miền (trừ khi được chỉ định trên cài đặt).
Xem Câu hỏi thường gặp: https://wordpress.org/plugins/fast-velocity-minify/