Jak zmienić rozmiar czcionki w WordPress: Gutenberg, wtyczki, CSS i Kreator motywów

Zmiana rozmiaru czcionki w WordPress oznacza dostosowanie skali typograficznej elementów tekstowych witryny — nagłówków, treści głównej, podpisów i etykiet nawigacyjnych — na poziomie bloku, motywu lub globalnie za pomocą CSS. Wybrana metoda określa zakres zmiany: pojedynczy akapit, typ treści na wszystkich stronach lub każdy element tekstowy w całej witrynie.

Ten przewodnik omawia wszystkie praktyczne metody dostępne w nowoczesnej instalacji WordPress, w tym edytor bloków Gutenberg, wtyczki typograficzne, natywny Kreator motywów oraz bezpośrednie nadpisania CSS. Każde podejście ma odrębne zastosowanie, a wybór niewłaściwego tworzy dług techniczny, który narasta z czasem.

Dlaczego decyzje dotyczące rozmiaru czcionki są bardziej techniczne, niż się wydaje

Typografia nie jest kwestią estetyczną. Rozmiar czcionki bezpośrednio wpływa na wyniki Core Web Vitals, a konkretnie na wskaźnik Cumulative Layout Shift (CLS), gdy czcionki ładują się asynchronicznie, oraz na Largest Contentful Paint (LCP), gdy duży tekst nagłówka jest głównym elementem widocznego obszaru. Źle określone reguły font-size — na przykład zastosowanie font-size do elementu body bez uwzględnienia dziedziczenia opartego na em — kaskadują nieprzewidywalnie przez elementy podrzędne, psując odstępy, proporcje wysokości linii i układy komponentów.

Jeśli uruchamiasz WordPress w środowisku VPS Hosting z dostępem root, masz dodatkową możliwość bezpośredniej edycji plików motywu i zarządzania warstwami pamięci podręcznej, które wpływają na sposób propagowania zmian CSS do użytkowników końcowych. Ten poziom kontroli jest niedostępny we współdzielonej infrastrukturze, co sprawia, że wybór metody jest jeszcze ważniejszy.

Porównanie: wszystkie cztery metody w skrócie

Użyj tej tabeli jako matrycy decyzyjnej przed zmianą jakichkolwiek ustawień. Właściwa metoda zależy od zakresu, poziomu umiejętności technicznych i tego, czy pracujesz na motywie podrzędnym.

Metoda 1: Edytor bloków Gutenberg

Edytor bloków Gutenberg, wprowadzony w WordPress 5.0, obsługuje rozmiar czcionki na poziomie poszczególnych bloków. Jest to właściwe podejście, gdy trzeba dostosować rozmiar konkretnego akapitu, nagłówka lub grupy elementów bez modyfikowania stylów globalnych.

Krok po kroku: dostosowywanie rozmiaru czcionki w bloku

1. Zaloguj się do panelu WordPress i otwórz wpis lub stronę, którą chcesz edytować.
2. Kliknij blok tekstowy, który chcesz zmodyfikować — zazwyczaj blok Akapit, Nagłówek lub Lista.
3. Na prawym pasku bocznym znajdź kartę Blok (nie kartę Dokument). Jeśli pasek boczny jest ukryty, kliknij ikonę koła zębatego w prawym górnym pasku narzędzi, aby go wyświetlić.
4. Przewiń w dół do sekcji Typografia w panelu ustawień bloku.
5. Zobaczysz wstępnie zdefiniowane opcje rozmiaru: Mały, Średni, Duży i Bardzo duży. Wartości te są zdefiniowane przez plik theme.json aktywnego motywu.
6. Aby ustawić dokładną wartość, kliknij opcję Niestandardowy i wprowadź rozmiar w pikselach (np. 18px) lub użyj jednostek względnych, takich jak rem (np. 1.125rem).
7. Kliknij Aktualizuj lub Opublikuj, aby zapisać.

Używanie theme.json do definiowania niestandardowych ustawień wstępnych (WordPress 5.8+)

Jeśli zarządzasz motywem blokowym lub klasycznym motywem z plikiem theme.json, możesz zdefiniować dokładne rozmiary wstępne, które pojawiają się na pasku bocznym edytora. Jest to najbardziej łatwe w utrzymaniu podejście dla środowisk programistycznych.

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "14px" },
        { "name": "Regular", "slug": "regular", "size": "16px" },
        { "name": "Large", "slug": "large", "size": "22px" },
        { "name": "Extra Large", "slug": "x-large", "size": "32px" }
      ]
    }
  }
}

Umieszczenie tego pliku w katalogu głównym motywu podrzędnego zapewnia, że ustawienia wstępne są zachowywane po aktualizacjach motywu i są dostępne dla każdego redaktora w witrynie bez znajomości CSS.

Przypadek brzegowy: konflikt rozmiaru czcionki na poziomie bloku z stylami globalnymi

Częstą pułapką jest sytuacja, gdy blok ma jawnie ustawiony rozmiar czcionki za pomocą edytora, ale globalny arkusz stylów motywu również celuje w ten sam element z regułą o wyższej specyficzności CSS. Edytor bloków wstrzykuje style inline, takie jak style="font-size:22px", które zazwyczaj nadpisują większość reguł arkusza stylów. Jednak jeśli motyw używa deklaracji !important w swoim CSS, styl inline traci. Zawsze sprawdzaj renderowany element w DevTools przeglądarki, aby potwierdzić, która reguła jest stosowana.

Metoda 2: Wtyczki typograficzne

Wtyczki są właściwym wyborem, gdy potrzebujesz ogólnowitrynowej kontroli typograficznej bez ręcznego pisania CSS. Są szczególnie przydatne dla osób niebędących programistami, zarządzających witrynami na hostingu zarządzanym lub VPS z cPanel, gdzie bezpośredni dostęp do plików jest mniej powszechny.

Zalecana wtyczka: Easy Google Fonts

Easy Google Fonts integruje się bezpośrednio z Kreatorem WordPress i zapewnia kontrolę rozmiaru czcionki dla poszczególnych elementów w całej witrynie.

Instalacja i konfiguracja:

1. W panelu WordPress przejdź do Wtyczki > Dodaj nową.
2. Wyszukaj Easy Google Fonts i kliknij Zainstaluj teraz, a następnie Aktywuj.
3. Przejdź do Wygląd > Dostosuj.
4. Wybierz Typografia z menu Kreatora.
5. Wybierz element, który chcesz zmodyfikować: Treść, Nagłówki (H1–H6), Akapity lub dowolny niestandardowy selektor, który zdefiniujesz.
6. Użyj suwaka Rozmiar czcionki lub pola wprowadzania, aby ustawić wartość.
7. Kliknij Opublikuj, aby zastosować zmiany na żywo.

Alternatywna wtyczka: Fonts Plugin | Google Fonts Typography

Ta wtyczka oferuje bardziej szczegółowy interfejs i obsługuje czcionki zmienne, które są coraz bardziej istotne dla witryn zoptymalizowanych pod kątem wydajności. Czcionki zmienne zmniejszają liczbę żądań HTTP, dostarczając pojedynczy plik czcionki obejmujący wiele grubości i stylów.

Ważne ostrzeżenie: konflikty wtyczek z motywami blokowymi

Jeśli używasz motywu blokowego Full Site Editing (FSE) (takiego jak Twenty Twenty-Three lub Twenty Twenty-Four), wtyczki typograficzne wstrzykujące CSS do <head> za pomocą wp_enqueue_style mogą kolidować ze stylami globalnymi motywu zdefiniowanymi w theme.json. Rezultatem są nieprzewidywalne konflikty specyficzności. W środowiskach FSE używaj Edytora witryny (Wygląd > Edytor) do globalnych zmian typograficznych zamiast wtyczki.

Metoda 3: Kreator motywów

Kreator motywów WordPress (Appearance > Customize) to wbudowany interfejs do wprowadzania zmian na poziomie motywu. Nie wszystkie motywy udostępniają tutaj kontrolki typograficzne — zależy to wyłącznie od tego, co deweloper motywu zarejestrował za pomocą API Kreatora WordPress.

Krok po kroku: dostosowywanie rozmiaru czcionki za pomocą Kreatora

1. Przejdź do Wygląd > Dostosuj w panelu WordPress.
2. Poszukaj sekcji Typografia, Czcionki lub Tekst w lewym panelu. Jeśli taka sekcja nie istnieje, Twój motyw nie obsługuje tego natywnie.
3. Wybierz typ elementu: tekst główny, H1, H2, nawigacja, stopka itp.
4. Dostosuj rozmiar czcionki za pomocą dostępnego suwaka lub pola numerycznego.
5. Podgląd na żywo po prawej stronie aktualizuje się w czasie rzeczywistym.
6. Kliknij Opublikuj, aby zatwierdzić zmiany.

Ważne ograniczenie: ustawienia Kreatora motywów nie są przenośne

Ustawienia Kreatora są przechowywane w bazie danych WordPress jako modyfikacje motywu (theme_mods). Jeśli zmienisz motyw, wszystkie zmiany rozmiaru czcionki oparte na Kreatorze zostaną utracone. Nie można ich również przenosić za pomocą standardowych narzędzi eksportu, chyba że użyjesz wtyczki zaprojektowanej specjalnie do migracji danych Kreatora. Jest to kluczowa kwestia przy planowaniu migracji motywu na witrynach produkcyjnych.

Metoda 4: Własny CSS

Własny CSS jest najbardziej precyzyjną i elastyczną metodą. Jest odpowiedni, gdy pozostałe trzy metody nie mogą celować w konkretny element, którego potrzebujesz, lub gdy musisz zastosować responsywne skalowanie czcionek za pomocą zapytań medialnych.

Dodawanie CSS za pomocą Kreatora (bez edycji plików)

1. Przejdź do Wygląd > Dostosuj > Dodatkowy CSS.
2. Wprowadź reguły CSS bezpośrednio w edytorze.
3. Kliknij Opublikuj.

To podejście przechowuje CSS w bazie danych i jest bezpieczne dla osób niebędących programistami. Ma jednak limit rozmiaru i nie obsługuje preprocesorów takich jak Sass.

Celowanie w konkretne elementy za pomocą CSS

/* Set base body font size */
body {
  font-size: 17px;
  line-height: 1.7;
}

/* Override heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Target a specific Gutenberg block class */
.wp-block-paragraph.is-style-lead {
  font-size: 1.25rem;
}

Responsywne skalowanie czcionek za pomocą clamp()

Nowoczesny CSS obsługuje płynną typografię za pomocą funkcji clamp(), która eliminuje potrzebę stosowania wielu punktów przełamania zapytań medialnych:

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

To podejście płynnie skaluje rozmiar czcionki między wartością minimalną a maksymalną w zależności od szerokości okna przeglądarki. Jest to aktualna najlepsza praktyka dla responsywnej typografii i jest obsługiwana przez wszystkie nowoczesne przeglądarki.

Bezpośrednia edycja plików motywu (wymagany motyw podrzędny)

Jeśli musisz trwale dodać CSS do arkusza stylów motywu i uniknąć narzutu bazy danych pola Dodatkowy CSS, dodaj reguły do pliku style.css motywu podrzędnego. Nigdy nie edytuj bezpośrednio plików motywu nadrzędnego — aktualizacje nadpiszą Twoje zmiany.

Na serwerze z dostępem SSH możesz edytować plik bezpośrednio:

nano /var/www/html/wp-content/themes/your-child-theme/style.css

Po zapisaniu wyczyść pamięć podręczną po stronie serwera oraz wszelką pamięć podręczną CDN, aby zaktualizowane style były serwowane odwiedzającym. W środowisku VPS Hosting zazwyczaj oznacza to uruchomienie polecenia czyszczenia pamięci podręcznej dla wtyczki buforującej lub odwrotnego proxy (Nginx, Varnish itp.).

Pułapki specyficzności, których należy unikać

• Unikaj !important jako domyślnego rozwiązania. Tworzy to wyścig specyficzności, który znacznie utrudnia przyszłe utrzymanie.
• Nie ustawiaj rozmiarów czcionek w pikselach na elemencie html, jeśli Twój motyw używa skalowania opartego na em. Zmiana html { font-size: 20px; } przeskaluje każdą wartość opartą na em w całej witrynie, często psując odstępy i układ.
• Używaj jednostek rem dla skalowalności. Wartości rem są względne do głównego elementu html, co czyni je przewidywalnymi i dostępnymi. Użytkownicy, którzy zwiększają domyślny rozmiar czcionki w przeglądarce, skorzystają z układów opartych na rem, co jest wymogiem dostępności WCAG.

Dostępność i rozmiar czcionki: co ocenia Google

Audyt Lighthouse Google oznacza zbyt mały tekst jako problem z użytecznością. Minimalny zalecany rozmiar czcionki treści głównej to 16px dla komputerów stacjonarnych i 14px dla urządzeń mobilnych, choć 16px na wszystkich urządzeniach jest bezpieczniejszym punktem wyjścia. Kryterium sukcesu WCAG 2.1 1.4.4 wymaga, aby tekst mógł być powiększony do 200% bez utraty treści lub funkcjonalności — wymóg, który jednostki rem i em spełniają domyślnie, podczas gdy układy oparte wyłącznie na px często go nie spełniają.

Jeśli hostujesz witrynę obsługującą globalną publiczność lub wymagającą zgodności z wymogami dostępności, te kwestie powinny kierować decyzjami dotyczącymi implementacji rozmiaru czcionki, a nie wyłącznie preferencje wizualne.

Kwestie buforowania i wdrażania na VPS

Gdy modyfikujesz CSS w witrynie WordPress hostowanej w środowisku VPS Hosting lub Serwerów dedykowanych, zmiany mogą nie być natychmiast widoczne z powodu wielu warstw buforowania:

• Pamięć podręczna obiektów WordPress (Redis, Memcached)
• Wtyczki buforowania stron (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Pamięć podręczna Nginx FastCGI
• Pamięć podręczna krawędzi CDN (Cloudflare, BunnyCDN)

Po wprowadzeniu jakiejkolwiek zmiany rozmiaru czcionki wyczyść wszystkie aktywne pamięci podręczne po kolei — najpierw pamięć podręczną wtyczki, następnie pamięć podręczną na poziomie serwera, a potem CDN. Pominięcie tego kroku jest najczęstszym powodem, dla którego programiści zgłaszają, że zmiany CSS „nie działają”.

Aby ręcznie wyczyścić pamięć podręczną Nginx FastCGI na Linux VPS:

sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

Dla LiteSpeed Cache za pomocą WP-CLI:

wp litespeed-purge all

Praktyczna lista kontrolna decyzji

Użyj tej listy kontrolnej, aby wybrać właściwą metodę dla swojej sytuacji:

• Zmiana jednego akapitu lub nagłówka na pojedynczej stronie — Użyj panelu Typografia edytora bloków Gutenberg.
• Zmiana rozmiaru czcionki dla całego tekstu głównego lub wszystkich nagłówków w całej witrynie — Użyj wtyczki typograficznej lub Kreatora motywów, jeśli Twój motyw to obsługuje.
• Używanie motywu blokowego Full Site Editing — Użyj Edytora witryny (Wygląd > Edytor > Style) i ustawień wstępnych theme.json.
• Potrzeba responsywnej, płynnej typografii — Napisz własny CSS używając clamp() w arkuszu stylów motywu podrzędnego lub Dodatkowym CSS.
• Potrzeba zachowania zmian po aktualizacjach motywu — Użyj motywu podrzędnego, wtyczki lub theme.json w niestandardowym motywie blokowym.
• Wymagana jest zgodność z wymogami dostępności — Używaj jednostek rem lub em; unikaj deklaracji opartych wyłącznie na px dla tekstu głównego.
• Zmiany nie pojawiają się po edycji — Wyczyść wszystkie warstwy buforowania: wtyczki, serwera i CDN.
• Konflikt między edytorem bloków a stylami motywu — Sprawdź element w DevTools przeglądarki, zidentyfikuj dominującą regułę CSS i odpowiednio dostosuj specyficzność.

FAQ

Jaka jest najlepsza jednostka dla rozmiarów czcionek w WordPress: px, em czy rem?

rem jest zalecaną jednostką dla rozmiarów czcionek w WordPress. Jest ona względna do głównego elementu html, co czyni ją przewidywalną w zagnieżdżonych komponentach i inherentnie dostępną — preferencje rozmiaru czcionki ustawione przez użytkownika na poziomie przeglądarki są automatycznie respektowane. Używaj px tylko dla stałych elementów dekoracyjnych, gdzie skalowanie jest niepożądane.

Dlaczego zmiana rozmiaru czcionki w edytorze Gutenberg nie jest widoczna na stronie frontowej?

Najczęstsze przyczyny to warstwa buforowania serwująca nieaktualną wersję strony, reguła arkusza stylów motywu o wyższej specyficzności CSS nadpisująca styl inline bloku lub wtyczka typograficzna globalnie resetująca rozmiary czcionek. Otwórz stronę w oknie incognito i sprawdź element w DevTools, aby zidentyfikować przyczynę.

Czy mogę zmieniać rozmiary czcionek w WordPress bez wtyczki lub kodowania?

Tak. Panel Typografia edytora bloków Gutenberg umożliwia zmiany rozmiaru czcionki dla poszczególnych bloków bez znajomości kodowania. Kreator motywów również zapewnia kontrolki rozmiaru czcionki, jeśli aktywny motyw je rejestruje. Żadne z tych podejść nie wymaga instalacji wtyczki ani znajomości CSS.

Czy zmiana rozmiarów czcionek w Kreatorze motywów wpłynie na moją witrynę po aktualizacji motywu?

Same ustawienia są przechowywane w bazie danych WordPress i nie zostaną usunięte przez aktualizację motywu. Jednak jeśli aktualizacja motywu zmieni podstawową strukturę CSS lub usunie opcję Kreatora kontrolującą rozmiar czcionki, wynik wizualny może się zmienić. Używanie motywu podrzędnego i własnego CSS jest bardziej odporne na zmiany w motywie nadrzędnym.

Jak ustawić różne rozmiary czcionek dla urządzeń mobilnych i komputerów stacjonarnych w WordPress?

Użyj zapytań medialnych CSS w panelu Dodatkowy CSS lub arkuszu stylów motywu podrzędnego, albo użyj funkcji clamp() do płynnego skalowania. Edytor bloków Gutenberg obsługuje również ustawienia typografii dla poszczególnych punktów przełamania w niektórych motywach za pomocą konfiguracji theme.json layout, choć ta funkcja zależy od poziomu implementacji motywu.