JavaScript to język programowania wykonywany w przeglądarce użytkownika. W WordPress odpowiada za interaktywność strony — animacje, formularze, dynamiczne menu, AJAX — a w panelu administracyjnym napędza cały edytor blokowy Gutenberg.
Rola JavaScript w WordPress
JavaScript działa po stronie przeglądarki (frontend), nie serwera. To odróżnia go od PHP, który wykonuje się na serwerze i generuje kod HTML przed wysłaniem do przeglądarki.
W typowej witrynie WordPress JavaScript odpowiada za:
- interakcje użytkownika (kliknięcia, hover, scroll)
- dynamiczne ładowanie treści bez przeładowania strony (AJAX)
- formularze z walidacją po stronie klienta
- slidery, galerie, mapy, widżety czatu
W panelu administracyjnym rola JS jest znacznie większa. Edytor Gutenberg to aplikacja zbudowana na React.js — frameworku JavaScript. Bloki, pola boczne, podgląd na żywo — to wszystko kod JS, nie PHP.
Jak prawidłowo dodawać skrypty w WordPress
WordPress ma własny system zarządzania skryptami, oparty na funkcji wp_enqueue_script(). To zalecany i właściwy sposób dodawania plików JavaScript do strony.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script(
'moj-skrypt',
get_template_directory_uri() . '/js/skrypt.js',
array( 'jquery' ), // zależności
'1.0.0',
true // ładuj w stopce
);
} );
System enqueue pilnuje, żeby jQuery i inne biblioteki nie były dołączane wielokrotnie przez różne wtyczki. Wpis skryptu bezpośrednio w <head> przez edycję header.php omija ten system i może powodować konflikty.
Defer i async — optymalizacja ładowania
Zewnętrzne pliki JS mogą blokować renderowanie strony, jeśli ładują się synchronicznie w sekcji <head>. Atrybuty defer i async pozwalają na ich asynchroniczne pobieranie.
defer— plik pobiera się w tle, ale wykonuje dopiero po sparsowaniu HTML. Właściwy dla skryptów potrzebnych po załadowaniu strony.async— plik pobiera się i wykonuje niezależnie, bez czekania na HTML. Używany dla skryptów niezależnych (np. analityka).
WordPress 6.3 dodał natywne wsparcie dla strategii ładowania defer i async w funkcjach enqueue. Wcześniej wymagało to filtrów PHP lub wtyczek. Więcej o opóźnionym ładowaniu: Defer loading w WordPress.
JavaScript a responsywność strony (INP)
Gdy przeglądarka ładuje i przetwarza skrypty JS, główny wątek jest zajęty — nie może jednocześnie reagować na kliknięcia użytkownika. Im więcej kodu JS ładuje strona, tym dłużej użytkownik może czekać na reakcję po kliknięciu w link, przycisk czy menu.
To właśnie mierzy metryka INP (Interaction to Next Paint) — czas od interakcji do widocznej odpowiedzi strony. Główne przyczyny słabego INP w WordPress:
Page buildery. Elementor, Divi i podobne narzędzia generują zwykle dużo JavaScript obsługującego interaktywne elementy strony.
Wiele aktywnych wtyczek. Każda wtyczka może dołączać własne skrypty — nawet na stronach, gdzie jej funkcje nie są używane.
Skrypty zewnętrzne. Piksele reklamowe, czaty, narzędzia analityczne — ich kod wykonuje się na głównym wątku, konkurując z kodem odpowiadającym za interakcje użytkownika.
jQuery w WordPress
WordPress ładuje jQuery jako wbudowaną zależność. Wiele starszych wtyczek i motywów z niego korzysta.
Usunięcie jQuery może rozwiązać konflikty — ale może też popsuć wtyczki, które na nim polegają. Warto najpierw sprawdzić, czy problematyczne skrypty faktycznie zależą od jQuery, zanim podejmie się taką decyzję.
JavaScript a PHP — kluczowe różnice
| JavaScript | PHP | |
|---|---|---|
| Gdzie działa | Przeglądarka | Serwer |
| Dostęp do bazy danych | Pośredni (przez REST API lub AJAX) | Bezpośredni |
| Widoczność kodu | Publicznie w DevTools | Ukryty (przetworzony przez serwer) |
PHP generuje kod HTML na serwerze, który przeglądarka wyświetla. JavaScript działa na tym gotowym HTML po stronie klienta. W nowoczesnych konfiguracjach obie technologie współpracują — PHP przetwarza dane, JS renderuje interfejs.