style_loader_tag
style_loader_tag resmi bir WordPress API'sıdır, belgelere bakın: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Sıkıştırılmış bir stilin HTML bağlantı etiketini filtreler.
İlk önce stil sayfanızı sıralayın, belgelere bakın: 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 );
$handleOlduğu 'font-awesome-5'
yapmam nullsürüm numarası olacak şekilde. Bu şekilde önbelleğe alınır.
Basit str_replace
İstediğinizi elde etmek için basit bir str_replace yeterlidir, aşağıdaki örneğe bakın
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 );
Farklı
özellikler ekleme (Birden çok) farklı stil sayfasına farklı özellikler eklemek için bir örneğin altında
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 );
Tüm stillere nitelik
ekleme Aynı nitelikleri birden fazla stil sayfasına eklemek için bir örnek aşağıda
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
Ben de script_loader_tag açıklamak istiyorum, çünkü bu da kullanışlı, ama bu API wp_enqueue_script ile birlikte çalışır .
Script_loader_tag API'sı neredeyse aynı, sadece bazı küçük farklılıklar, belgelere bakın: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
Sıralanmış bir komut dosyasının HTML komut dosyası etiketini filtreler.
Tek bir komut dosyasını ertelemek için bir örnek aşağıda
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 );
Birden fazla komut dosyasını ertelemek için bir örnek aşağıda
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 );
Her iki API en açıkladık Yani style_loader_tagve script_loader_tag. Ve her iki API için bazı örnekler verdim Umarım bu bir sürü insan için faydalıdır. Her iki API ile deneyimim var.
UPDATE
@CKMacLeod Güncellemeniz için teşekkür ederiz, bu durum netleşir. Çoğunlukla aynı sayfadayız. Dediğim gibi, ben bir WordPress geliştiricisiyim ve https://wordpress.org adresinde bir tema ve / veya eklenti yayınlamak istiyorsanız, esasen " WordPress Kodlama Standartları " na uymak zorundasınız ya da sadece tema ve / veya eklenti.
Bu yüzden geliştiricileri "WordPress yolunu" kullanmaya teşvik ediyorum. Bazen hiçbir fark olmadığını anlıyorum, ama aynı zamanda kolaylık. Kendinizi söylediğiniz gibi, Font Awesome'i indirebilir ve temanıza ve / veya eklentinize ekleyebilirsiniz, bu şekilde sadece style_loader_tag işlevini kaldırmanız ve wp_enqueue_style işlevinizi değiştirmeniz gerekir.
Ve son bir şey, geçmişte (5 yıl önce) bazı önbellekleme, birleştirme ve küçültme eklentileri işe yaramadı ve çoğu zaman temayı yapan geliştiricilerin neden temayı kafasına koyduğunu ve / veya yankılandı. Ayrıca (çoğu zaman) komut dosyalarının yürütülmesini birleştirmek, küçültmek ve geciktirmek için seçenekler sunan çoğu önbellek eklentisi, kötü kodu tespit etmek ve bunların etrafında çalışmak için daha akıllı ve daha iyi hale geldi. Ancak bu tercih edilmez. Bu yüzden insanları standartları / sözleşmeleri göz önünde bulundurmaya teşvik ediyorum.
Bir geliştirici olarak, insanların kodunuzla neler yapabileceğini ve uyumluluğu dikkate alarak her zaman göz önünde bulundurmanız gerekir. Bu yüzden kolay çözümü değil, en iyi çözümü elde ediyoruz. Umarım bakış açımı netleştirdim.
@CKMacLeod EDIT (Teknik) tartışma için teşekkür ederim, umarım bunun ne kadar önemli olduğunu fark edersiniz (WordPress API'lerini kendi gelişiminizde kullanarak). Yine, etrafa bakıyordum ve şimdi bile en popüler küçültme eklentilerinin SSS'lerine bakarsam, genellikle bunu şu ya da bu şekilde görüyorum, örneğin:
Soru: Bazı CSS ve JS dosyaları neden birleştirilmiyor?
Yanıt: Eklenti yalnızca resmi WordPress API yöntemiyle ( https://developer.wordpress.org/themes/basics/include-css-javascript/
-as) ve aynı etki alanındaki dosyaları (belirtilmedikçe) kullanarak oluşturulan JS ve CSS dosyalarını işler.
ayarlarda).
SSS'ye bakın: https://wordpress.org/plugins/fast-velocity-minify/