style_loader_tag
style_loader_tag jest oficjalnym API WordPress, zobacz dokumentację: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filtruje tag HTML stylu kolejkowanego.
Najpierw uporządkuj swój arkusz stylów, zobacz dokumentację: 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 );
$handleTo 'font-awesome-5'
zrobić nulltak, że nie ma numer wersji. W ten sposób będzie buforowane.
Prosty str_replace
Prosty str_replace wystarczy, aby osiągnąć to, czego chcesz, patrz przykład poniżej
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 );
Dodaj różne atrybuty
Poniżej przykładu, aby dodać różne atrybuty do (wielu) różnych arkuszy stylów
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 );
Dodaj atrybuty do wszystkich stylów
Poniżej przykład, aby dodać te same atrybuty do więcej niż jednego arkusza stylów
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
Chciałbym również wyjaśnić skrypt_loader_tag, ponieważ jest to również przydatne, ale ten interfejs API działa w połączeniu z wp_enqueue_script .
Interfejs API script_loader_tag jest prawie taki sam, tylko z niewielkimi różnicami, zobacz dokumentację: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
Filtruje znacznik skryptu HTML w kolejce skryptu.
Poniżej przykład odłożenia pojedynczego skryptu
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 );
Poniżej przykład odroczenia więcej niż jednego skryptu
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 );
Wyjaśniłem więc zarówno API, jak style_loader_tagi script_loader_tag. Podałem kilka przykładów obu interfejsów API. Mam nadzieję, że jest to przydatne dla wielu osób. Mam doświadczenie w obu interfejsach API.
AKTUALIZACJA
@CKMacLeod Dziękujemy za aktualizację, która wyjaśnia wszystko. Przeważnie jesteśmy na tej samej stronie. Jak powiedziałem, jestem programistą WordPress i jeśli chcesz opublikować motyw i / lub wtyczkę na https://wordpress.org , jesteś zasadniczo zmuszony do przestrzegania „ Standardów kodowania WordPress ” lub po prostu odrzuci twój motyw i / lub wtyczka.
Dlatego zachęcam programistów do korzystania z „sposobu WordPressa”. Rozumiem, że czasami nie ma żadnych różnic, ale jest to również wygoda. Jak sam powiedziałeś, możesz pobrać Font Awesome i dołączyć go do motywu i / lub wtyczki, w ten sposób wystarczy usunąć funkcję style_loader_tag i zmodyfikować funkcję wp_enqueue_style.
I ostatnia rzecz, w przeszłości (5 lat temu) niektóre buforowanie, łączenie i minimalizowanie wtyczek nie działało i przez większość czasu dowiedziałem się, dlaczego programiści, którzy stworzyli ten motyw, po prostu wrzucali to do głowy i / lub echo. Większość wtyczek buforujących, które również (przez większość czasu) zapewniają opcje łączenia, minimalizowania i opóźniania wykonywania skryptów, stały się mądrzejsze i lepiej wykrywają zły kod i obchodzą je. Ale to nie jest preferowane. Dlatego zachęcam ludzi do kodowania z myślą o standardach / konwencjach.
Jako programista zawsze musisz wziąć pod uwagę to, co ludzie mogą zrobić z twoim kodem i wziąć pod uwagę kompatybilność. Więc nie biorąc łatwego rozwiązania, ale najlepsze optymalne rozwiązanie. Mam nadzieję, że wyjaśniłem swój punkt widzenia.
EDYCJA
@CKMacLeod Dziękuję za debatę (techniczną), mam nadzieję, że zdajesz sobie sprawę z tego, jak ważna jest to (używając API WordPressa we własnym rozwoju). Znowu rozglądałem się i nawet teraz, gdy patrzę na najczęściej zadawane pytania dotyczące najpopularniejszych wtyczek minify, zwykle widzę to w ten lub inny sposób, na przykład:
Pytanie: Dlaczego niektóre pliki CSS i JS nie są scalane?
Odpowiedź: Wtyczka przetwarza tylko pliki JS i CSS kolejkowane przy użyciu oficjalnej metody API WordPress -
https://developer.wordpress.org/themes/basics/inclusion-css-javascript/
- jak również pliki z tej samej domeny (chyba że określono inaczej w ustawieniach).
Zobacz FAQ: https://wordpress.org/plugins/fast-velocity-minify/