W tym wpisie opiszę w jaki sposób wczytać wcześniej zewnętrzne zasoby motywu WordPress (tzw. preload css).
Nie będziemy tutaj polegać na wtyczkach tylko na naszym własnym kodzie.
W pliku functions.php dodamy funkcję :
function my_style_loader_tag_filter( $html, $handle ) {
$style_names = array( 'child-style', 'custom' );
foreach ( $style_names as $style ) {
if ( $style === $handle ) {
return str_replace(
"rel='stylesheet'",
"rel='preload' as='style' type='text/css' crossorigin='anonymous'",
$html
);
}
}
return $html;
}
Funkcja przyjmuje dwa argumenty: $html – który finalnie zwracamy po zmianach, oraz $handle. Więcej w dokumentacji wordpressa tutaj
W funkcji zaimplementowana została pętla foreach w celu dokonania preloadu wielu zasobów jednocześnie. W tablicy umieszczamy nazwy naszych styli, które chcemy załadować wcześniej.
Instrukcja warunkowa sprawdza czy w naszej tablicy znajdują się style załadowane przez WordPressa. Jeśli tak, za pomocą funkcji str_replace zamieniamy rel=”stylesheet” na rel=’preload’ as=’style’ type=’text/css’ crossorigin=’anonymous’ .
Po zakończeniu pętli zwracamy $html otrzymując html z preloadowanymi wybranymi stylami.
Aby nasz kod zadziałał niuezbędne jest dodanie filtra:
add_filter( 'style_loader_tag', 'my_style_loader_tag_filter', 10, 2 );
To wszystko.
Inne tipy TUTAJ