WP-DOC

Pisanie motywu

06.10 Ograniczanie ładowania plików CSS oraz JS wtyczki

Ostatnia modyfikacja: 14.10.2021

Czym są wtyczki w WordPress, każdy użytkownik tego systemu CMS wie. Instalujemy, jeżeli trzeba konfigurujemy i możemy cieszyć się jej funkcjonalnością na stronie. Po zainstalowaniu kilku wtyczek nasza strona główna może zacząć się dłużej ładować. Na przykład z 5 zainstalowanych wtyczek tylko jedna z nich jest wykorzystywana na stronie głównej. Tymczasem wszystkie 5 wtyczek dołącza swoje pliki CSS lub/oraz JS do całej witryny.

Weźmy na przykład wtyczkę, za pomocą której możemy utworzyć formularz kontaktowy. Bardzo popularną wtyczką dająca taką możliwość jest Contact Form 7. Jak każda wtyczka dołącza swój kod CSS oraz JS na całej stronie. Natomiast z formularza kontaktowego możemy korzystać tylko na na jednej stronie. Najczęściej jest to strona „Kontakt”, warto by wtedy ładować pliki wtyczki tylko i wyłącznie na tej jednej podstronie.

Jakie pliki CSS oraz JS są ładowane

Za pomocą drobnego kodu w pliku functions.php, możemy sprawdzić jakie pliki CSS oraz JS są ładowane na stronie głównej oraz każdej podstronie. Da nam to niezbędną informację do dalszego ograniczania ładowania plików przez wtyczki. Jeżeli sami piszemy motyw to doskonale wiemy jaki pliki CSS oraz JS ładujemy. Natomiast po instalacji wtyczki, nie wiemy pod jaką nazwą programista/programiści zarejestrowali pliki w wp_enqueue_style() dla CSS oraz wp_enqueue_script() dla pliku JS.

Dla przykładu zainstalowałem wyżej wymienioną wtyczkę, a formularz kontaktowy znajduje się tylko na podstronie „Kontakt”. Następnie w pliku functions.php umieściłem poniższy kod.

functions.php – wyświetlanie załadowanych plików CSS oraz JS do motywu

// Wyświetlanie wszystkich styli dołączanych do strony
function get_all_stylesheets() {
    global $wp_styles;
  
	echo '<pre>Style:<br><br>';
    print_r($wp_styles->queue);
	echo '</pre>';
}
add_action('wp_print_styles', 'get_all_stylesheets');

// Wyświetlanie wszystkich skryptów dołączanych do strony
function get_all_scripts() {
    global $wp_scripts;
  
	echo '<pre>Skrypty:<br><br>';
    print_r($wp_scripts->queue);
	echo '</pre>';
}
add_action('wp_print_scripts', 'get_all_scripts');
// ------------------------------------------------------------

Obie funkcje są podpięte pod akcje odpowiednio wp_print_styles dla CSS oraz wp_print_scripts dla JS. W każdej funkcji na początku odwołujemy się do zmiennej globalnej. Wyświetlony wynik funkcji umieszczam w znacznikach <pre>, gdyż zmienna globalna zwróci tablice. W moim motywie zwrócona tablica dla ładowanych plików CSS oraz JS wygląda jak na listingu niżej.

Wyświetlanie ładowanych plików CSS oraz JS

Style:

Array
(
    [0] => wp-block-library // style WordPress
    [1] => contact-form-7   // style wtyczki Contact Form 7
    [2] => google-font      // Font od Googli
    [3] => wpnauka-style    // Style motywu
)

Skrypty:

Array
(
    [0] => contact-form-7         // JavaScript wtyczki Contact Form 7
    [1] => wpnauka-script-jquery  // JavaScript motywu
)

Ilość ładowanych plików CSS oraz JS będzie różnić się od motywu oraz ilości zainstalowanych i włączonych wtyczek. Choć w swoim przykładowym motywie nie używam żadnego JavaScript, jednak dodałem bibliotekę jQuery dla lepszej wizualizacji. Zauważ, że nazwy wyświetlane w tablicach odpowiadają tym samym nazwą, które są podane w wp_enqueue_style() oraz wp_enqueue_script().

Ładowanie plików CSS oraz JS tam gdzie są potrzebne

Powyższy przykład pokazuje, że na każdej podstronie witryny zobaczymy załadowany plik CSS oraz JS wtyczki Contact Form 7, niezależnie od tego czy na danej podstronie znajduje się formularz kontaktowy czy też nie. Tak działają wtyczki. Ładowanie plików wtyczki, można ograniczyć do wybranych podstron witryny. W moim przypadku formularz kontaktowy znajduje się tylko i wyłącznie na „stronie” o numerze ID 23. W pliku functions.php, w funkcji która dołącza pliki CSS oraz JS, dodaj instrukcję warunkową, która sprawdzi, czy aktualnie załadowana strona jest różna od strony „Kontakt” o numerze ID 23. Jeżeli tak

functions.php – wewnątrz funkcji ładującej pliki CSS oraz JS

if(!is_page(23)) {
    wp_dequeue_style('contact-form-7');
    wp_deregister_style('contact-form-7');
    
    wp_dequeue_script('contact-form-7');
    wp_deregister_script('contact-form-7');        
}

Po zapisaniu pliku i odświeżeniu strony, w tablicy w której pokazuje ładowanie pliki te od wtyczki Contact Form 7, będą załadowane tylko na stronie „Kontakt” o numerze ID 23. Funkcja wp_dequeue_style() usunie umieszczony styl z kolejki, natomiast funkcja wp_deregister_style() wyrejestruje styl. Analogicznie działa funkcja wp_dequeue_script() oraz wp_deregister_script().

W przykładzie, do ograniczenia działania wtyczki, wykorzystałem funkcję is_page(). Jeżeli chcemy ograniczyć działanie wtyczki do strony kategorii, należy skorzystać z funkcji is_category(). Można również budować bardziej rozwinięte instrukcje warunkowe.

KOMENTARZE

Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.

Napisz komentarz

Wszystkie pola są obowiązkowe. E-mail nie będzie udostępniony, ani wykorzystywany do rozsyłania wiadomości reklamowych.

Jeszcze nikt nie napisał komentarza.