Jak wczytywać style i skrypty tylko tam, gdzie są potrzebne (enqueue z warunkami)

Jednym z najczęstszych błędów popełnianych przez twórców stron na WordPressie jest ładowanie wszystkich stylów i skryptów na każdej podstronie.
Efekt? Wolniejsze ładowanie witryny, gorszy wynik w Google PageSpeed i mniejsza wydajność serwera.

Na szczęście WordPress oferuje prosty sposób, by wczytywać style i skrypty tylko tam, gdzie są faktycznie potrzebne — za pomocą funkcji wp_enqueue_script() i wp_enqueue_style() z warunkami.

Dlaczego to takie ważne?

Każdy dodatkowy plik CSS lub JS:

• zwiększa liczbę żądań HTTP,
• wydłuża czas ładowania strony,
• może powodować konflikty między wtyczkami lub motywami.

Jeśli np. slider JavaScript jest używany tylko na stronie głównej, nie ma sensu ładować go również na stronach kontaktu czy wpisach blogowych.

Podstawy – jak działa enqueue w WordPressie

Prawidłowe wczytywanie skryptów i stylów odbywa się za pomocą funkcji:

function my_enqueue_scripts() {
    wp_enqueue_style('style-handle', get_stylesheet_uri());
    wp_enqueue_script('script-handle', get_template_directory_uri() . '/js/script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

To bezpieczny sposób, ponieważ WordPress automatycznie unika konfliktów i dba o poprawne kolejności ładowania plików.

Wczytywanie warunkowe – tylko tam, gdzie potrzeba

Załóżmy, że chcesz, by slider ładował się tylko na stronie głównej.
Wystarczy dodać prosty warunek is_front_page():

function my_enqueue_conditional_scripts() {
    if (is_front_page()) {
        wp_enqueue_script('home-slider', get_template_directory_uri() . '/js/slider.js', array('jquery'), null, true);
        wp_enqueue_style('home-slider-style', get_template_directory_uri() . '/css/slider.css');
    }
}
add_action('wp_enqueue_scripts', 'my_enqueue_conditional_scripts');

Dzięki temu skrypty będą ładowane tylko tam, gdzie są faktycznie potrzebne.

Inne przydatne warunki

WordPress oferuje wiele wbudowanych funkcji warunkowych, które pomagają w precyzyjnym ładowaniu plików:

Możesz też łączyć warunki, np.:

if (is_page('kontakt') || is_page('o-nas')) {
    wp_enqueue_script('contact-map', get_template_directory_uri() . '/js/map.js', array('jquery'), null, true);
}

Wczytywanie skryptów tylko w panelu administracyjnym

Jeśli chcesz, aby dany plik był dostępny tylko w kokpicie, użyj:

function my_admin_enqueue($hook) {
    if ($hook === 'toplevel_page_my-plugin') {
        wp_enqueue_style('admin-style', get_template_directory_uri() . '/admin.css');
    }
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue');

Pro tip: dequeue – usuwanie zbędnych skryptów

Możesz też usunąć niepotrzebne skrypty ładowane przez inne wtyczki:

function remove_unnecessary_scripts() {
    if (!is_page('kontakt')) {
        wp_dequeue_script('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'remove_unnecessary_scripts', 100);

Dzięki temu Twoja strona pozostanie lekka i szybka.

Podsumowanie

Wczytywanie stylów i skryptów tylko tam, gdzie są potrzebne, to jedna z najprostszych, a zarazem najskuteczniejszych metod optymalizacji WordPressa.
Wystarczy kilka warunków i przemyślane ładowanie plików, by znacząco przyspieszyć działanie strony i poprawić wyniki SEO.

Dbaj o to, by każdy plik miał swoje uzasadnienie — Twoi użytkownicy (i Google) na pewno to docenią.