Wordpress

Preload CSS – WordPress 79

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