HTML (HyperText Markup Language) i CSS (Cascading Style Sheets) to dwa języki leżące u podstaw każdej strony internetowej. W WordPressie HTML opisuje strukturę i treść — nagłówki, akapity, linki, obrazy. CSS decyduje o wyglądzie — kolorach, czcionkach, marginesach i układzie elementów na ekranie.
WordPress nie serwuje statycznego HTML. Kod PHP przetwarza dane z bazy danych, łączy je z szablonami motywu i dopiero wtedy generuje HTML wysyłany do przeglądarki.
Jak WordPress generuje HTML
W tradycyjnych motywach szablony to pliki PHP: header.php, single.php, archive.php i inne. Silnik WordPressa wybiera odpowiedni plik szablonu w zależności od odwiedzanej strony — i PHP generuje HTML na bieżąco, przy każdym żądaniu.
W motywach blokowych opartych na Full Site Editing szablony to pliki HTML zawierające znaczniki bloków Gutenberga. Mechanizm jest inny, ale przeglądarka i tak dostaje gotowy kod HTML — tyle że tworzony w nowszy sposób.
Efektem końcowym w obu przypadkach jest HTML wysłany do przeglądarki. Przeglądarka nie wie, jak ani kiedy ten kod powstał.
Skąd pochodzi CSS w WordPress
Główne style motywu wczytywane są z pliku style.css. Oprócz niego strona może ładować dziesiątki dodatkowych arkuszy CSS — z wtyczek, bibliotek zewnętrznych, edytora bloków.
Wszystkie pliki CSS powinny być rejestrowane i wczytywane przez system kolejkowania WordPressa — funkcję wp_enqueue_style(). Ładowanie CSS z pominięciem tego systemu może prowadzić do konfliktów lub wielokrotnego wczytywania tych samych styli. Więcej: kolejkowanie skryptów i stylów.
W motywach blokowych (FSE) ważną rolę gra plik theme.json, który definiuje paletę kolorów, typografię i układ w ujednoliconym formacie. Zmiany w theme.json są przetwarzane przez rdzeń WordPressa jako nadrzędna warstwa stylów.
Gdzie edytować style CSS w WordPress
WordPress daje kilka możliwości dodania własnych stylów. Wybór metody ma znaczenie — niektóre przetrwają aktualizacje motywu, inne nie.
Dodatkowy CSS w Customizerze. Opcja dostępna przez Dostosuj (Customizer). Reguły CSS wpisane w to pole są zapisywane w bazie danych — nie w plikach motywu — i przetrwają aktualizacje.
Motyw potomny (child theme). Przy rozbudowanych modyfikacjach często lepsze rozwiązanie. Motyw potomny dziedziczy style rodzica, a własne zmiany w jego plikach nie są nadpisywane przy aktualizacji motywu głównego. Więcej: Motyw w WordPress.
Edytor stylów globalnych w Site Editorze. W motywach blokowych Edytor Witryny pozwala edytować style globalne bez dotykania plików.
Bezpośrednia edycja style.css głównego motywu. Możliwa technicznie, ale ryzykowna — aktualizacja motywu nadpisze wszystkie ręcznie wprowadzone zmiany. W większości sytuacji lepiej użyć jednej z powyższych metod.
HTML, CSS i wydajność strony
Struktura HTML i sposób ładowania CSS mają wpływ na szybkość strony.
Przeglądarka musi pobrać i przetworzyć arkusze CSS zanim wyrenderuje zawartość — opóźnienie w ładowaniu CSS może spowalniać First Contentful Paint (FCP). Technika Critical CSS adresuje ten problem przez osadzenie najważniejszych stylów bezpośrednio w kodzie HTML strony, co pozwala wyświetlić pierwszy widok szybciej.
Nadmiar zagnieżdżonych elementów HTML (tzw. DOM bloat) — charakterystyczny dla niektórych page builderów — może wpływać na czas odpowiedzi na interakcje użytkownika (INP) i stabilność układu strony (CLS). To nie problem HTML i CSS jako takich, ale wynikający z ilości elementów, które przeglądarka musi obsłużyć jednocześnie.
Czego nie mylić
HTML i CSS działają po stronie przeglądarki. PHP wykonuje się po stronie serwera i generuje HTML — ale sam kod PHP nie trafia do przeglądarki. To różne warstwy, choć w WordPressie ściśle ze sobą powiązane. Więcej o warstwie frontendowej: Frontend w WordPress.
CSS w WordPress to nie to samo co style generowane przez page buildery jak Elementor czy Divi. Każdy taki kreator tworzy własną strukturę HTML i CSS, często znacznie różniącą się od kodu generowanego przez motyw.