Jak zmienić odstępy między wierszami w WordPress: wszystkie metody wyjaśnione

Interlinia w WordPress — kontrolowana przez właściwość CSS line-height — definiuje pionową odległość między wierszami tekstu w elemencie blokowym. Jej dostosowanie bezpośrednio wpływa na czytelność, hierarchię wizualną i jakość typograficzną całej witryny. Cztery główne metody jej zmiany to: natywne kontrolki edytora bloków Gutenberg, Kreator motywów WordPress, niestandardowy CSS w panelu Dodatkowy CSS oraz wtyczki typograficzne. Każda metoda odpowiada innemu poziomowi dostępu technicznego i zakresowi zmian.

Ten przewodnik omawia każdą metodę w pełnej głębi technicznej, w tym przypadki brzegowe, pułapki związane ze specyficznością selektorów i kompromisy wtyczek, które większość poradników całkowicie pomija.

Dlaczego interlinia ma znaczenie wykraczające poza estetykę

Specyfikacja CSS definiuje line-height jako minimalną wysokość pól wierszy w elemencie. W przypadku tekstu podstawowego wytyczna dostępności WCAG 2.1 (Kryterium sukcesu 1.4.12) zaleca minimalną wartość line-height wynoszącą 1,5-krotność rozmiaru czcionki. Ignorowanie tego wpływa nie tylko na projekt wizualny, ale także na zgodność z przepisami i sygnały jakości dla wyszukiwarek powiązane z Core Web Vitals i wskaźnikami zaangażowania użytkowników.

Źle ustawiona wartość line-height — szczególnie poniżej 1.2 w tekście podstawowym — sprawia, że tekst wydaje się ściśnięty, zwiększa współczynnik odrzuceń i może powodować problemy z Cumulative Layout Shift (CLS) w połączeniu z czcionkami internetowymi ładowanymi asynchronicznie.

Metoda 1: Natywne kontrolki edytora bloków Gutenberg

Edytor Gutenberg udostępnia natywne kontrolki line-height dla bloków Akapit, Nagłówek, Lista i Cytat, jednak funkcja ta musi być jawnie włączona na poziomie motywu za pomocą theme.json lub funkcji add_theme_support().

Krok 1: Sprawdź, czy obsługa interlinii jest aktywna

Jeśli w panelu ustawień bloku nie widać pola Interlinia, aktywny motyw nie zadeklarował jej obsługi. Możesz ją włączyć, dodając następujący kod do pliku functions.php swojego motywu:

add_theme_support( 'custom-line-height' );

W przypadku motywów blokowych używających theme.json upewnij się, że poniższy fragment jest obecny w sekcji settings:

{
  "settings": {
    "typography": {
      "lineHeight": true
    }
  }
}

Krok 2: Wybierz docelowy blok

W edytorze wpisu lub strony kliknij blok Akapit lub Nagłówek, który chcesz zmodyfikować. Na górze pojawi się pasek narzędzi bloku, a prawy pasek boczny automatycznie przełączy się na kartę Blok.

Krok 3: Znajdź panel Typografia

W prawym panelu Blok przewiń do sekcji Typografia. Jeśli jest zwinięta, kliknij etykietę, aby ją rozwinąć. Zobaczysz pole wprowadzania Interlinia.

Wprowadź wartość bez jednostki. WordPress przekazuje ją bezpośrednio jako wartość CSS line-height w stylu inline bloku. Zalecane zakresy:

• Akapity tekstu podstawowego: 1.5 do 1.8
• Nagłówki (H1–H2): 1.1 do 1.3
• Podnagłówki (H3–H4): 1.2 do 1.4

Krytyczny przypadek brzegowy: Wartości bez jednostek (np. 1.6) są zdecydowanie preferowane nad wartościami w pikselach lub em (np. 24px lub 1.6em), ponieważ skalują się proporcjonalnie, gdy element potomny dziedziczy właściwość i zmienia własny rozmiar czcionki. Używanie px w tym miejscu jest częstym błędem, który psuje odstępy w zagnieżdżonych elementach.

Krok 4: Zapisz i zweryfikuj

Kliknij Aktualizuj lub Opublikuj. Użyj DevTools przeglądarki (F12 > Elements > Computed), aby potwierdzić, że styl inline line-height: 1.6 jest zastosowany do właściwego elementu i nie jest nadpisywany przez arkusz stylów motywu o wyższej specyficzności.

Metoda 2: Kreator motywów WordPress dla typografii obejmującej całą witrynę

Kreator (Appearance > Customize) zapewnia interfejs podglądu na żywo dla zmian obejmujących całą witrynę. Kontrolki typografii w Kreatorze nie są funkcją rdzenia WordPress — są dostarczane wyłącznie przez aktywny motyw lub wtyczkę towarzyszącą.

Motywy z natywnymi panelami typografii

Motywy zbudowane na frameworkach takich jak GeneratePress, Astra, Kadence lub OceanWP udostępniają dedykowane sekcje Typografia z suwakami line-height dla tekstu podstawowego, nagłówków i obszarów widżetów osobno.

Krok 1: Przejdź do ustawień typografii

Przejdź do Wygląd > Dostosuj. Poszukaj sekcji oznaczonej Typografia, Czcionki lub Style globalne w zależności od motywu. Jeśli taka sekcja nie istnieje, Twój motyw nie obsługuje kontroli typografii opartej na Kreatorze — przejdź do Metody 3 lub Metody 4.

Krok 2: Dostosuj interlinię dla każdego elementu

Większość kreatorów motywów pozwala na targetowanie:

• Tekstu podstawowego (mapuje do selektora body lub p)
• Nagłówków H1 do H6
• Menu nawigacyjnych
• Tytułów widżetów

Ustaw wartości i użyj panelu podglądu na żywo, aby jednocześnie zweryfikować je na punktach przerwania dla komputerów i urządzeń mobilnych.

Krok 3: Opublikuj zmiany

Kliknij Opublikuj w lewym górnym rogu Kreatora. Zmiany są zapisywane w opcjach przechowywanych przez motyw i stosowane globalnie za pomocą arkusza stylów motywu lub bloku inline <style> w <head>.

Pułapka: Ustawienia typografii Kreatora są przechowywane w opcjach motywu, a nie w style.css. Jeśli zmienisz motyw, wszystkie te dostosowania zostaną utracone. Zawsze dokumentuj swoje wartości przed zmianą motywu.

Metoda 3: Niestandardowy CSS — najdokładniejsza i najbardziej przenośna metoda

Niestandardowy CSS daje pełną kontrolę nad targetowaniem selektorów, specyficznością i responsywnymi punktami przerwania. Jest to właściwe podejście, gdy potrzebujesz szczegółowej kontroli, której nie zapewnia ani edytor bloków, ani Kreator.

Krok 1: Uzyskaj dostęp do panelu Dodatkowy CSS

Przejdź do Wygląd > Dostosuj > Dodatkowy CSS. Ten CSS jest przechowywany w bazie danych i wyświetlany inline w <head>, co daje mu przewagę specyficzności nad większością arkuszy stylów motywu.

Alternatywnie, jeśli zarządzasz własnym środowiskiem serwerowym — na przykład w planie Hosting VPS — możesz dodać niestandardowy arkusz stylów za pomocą functions.php dla lepszej kontroli pamięci podręcznej i wydajności:

function mytheme_custom_styles() {
    wp_enqueue_style(
        'custom-typography',
        get_stylesheet_directory_uri() . '/css/custom-typography.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Krok 2: Napisz ukierunkowane reguły CSS

Globalna interlinia akapitów:

p {
    line-height: 1.6;
}

Wszystkie poziomy nagłówków:

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

Tylko bloki akapitów specyficzne dla Gutenberga (unika wpływania na tekst na pasku bocznym lub w stopce):

.wp-block-paragraph {
    line-height: 1.7;
}

Ograniczone do konkretnego szablonu strony lub typu wpisu przy użyciu klasy body, którą WordPress generuje automatycznie:

.single-post .entry-content p {
    line-height: 1.65;
}

.page-template-landing-page p {
    line-height: 1.5;
}

Responsywne dostosowanie dla urządzeń mobilnych (mniejsze ekrany korzystają z nieco ciaśniejszego odstępu):

@media (max-width: 768px) {
    p {
        line-height: 1.5;
    }
}

Krok 3: Rozwiąż konflikty specyficzności

Jeśli Twój CSS nie działa, reguła motywu lub wtyczki o wyższej specyficzności ją nadpisuje. Zdiagnozuj to w DevTools, sprawdzając element i sprawdzając, która reguła jest przekreślona w panelu Styles.

Aby zwiększyć specyficzność bez uciekania się do !important, zawęź selektor dokładniej:

body .site-content .entry-content p {
    line-height: 1.6;
}

Używaj !important tylko w ostateczności, ponieważ tworzy dług utrzymaniowy, który narasta przy każdym kolejnym dodaniu CSS:

p {
    line-height: 1.6 !important; /* Use only if specificity cannot be resolved otherwise */
}

Metoda 4: Wtyczki typograficzne

Wtyczki są właściwym wyborem, gdy potrzebujesz interfejsu bez kodu, gdy zarządzasz witryną dla klienta, który musi ją samodzielnie utrzymywać, lub gdy potrzebujesz zaawansowanych funkcji typograficznych OpenType wykraczających poza line-height.

Porównanie wtyczek

Instalacja i konfiguracja Advanced Editor Tools

Advanced Editor Tools (dawniej TinyMCE Advanced) to najszerzej stosowana opcja dodawania kontrolek odstępów między wierszami bezpośrednio do paska narzędzi edytora bloków.

1. Przejdź do Wtyczki > Dodaj nową, wyszukaj Advanced Editor Tools i kliknij Zainstaluj teraz, a następnie Aktywuj.
2. Przejdź do Ustawienia > Advanced Editor Tools.
3. Na karcie Edytor bloków włącz przycisk paska narzędzi Interlinia, przeciągając go do aktywnego wiersza paska narzędzi.
4. Wróć do dowolnego wpisu lub strony. Wybierz blok Akapit. Kontrolka interlinii pojawi się teraz na pasku narzędzi bloku.

Używanie WP Typography dla reguł globalnych

WP Typography stosuje reguły typograficzne na poziomie renderowania PHP, co oznacza, że modyfikuje dane wyjściowe HTML przed dotarciem do przeglądarki. Jest to przydatne do wymuszania spójnej wartości line-height we wszystkich tekstach bez dotykania poszczególnych bloków.

Po aktywacji przejdź do Ustawienia > WP Typography i znajdź sekcję Klasy CSS, aby zastosować reguły interlinii ograniczone do określonych kontenerów.

Pułapka: Przetwarzanie tekstu przez WP Typography może powodować konflikty z wtyczkami do buforowania, jeśli włączone jest buforowanie całych stron. Zawsze testuj po aktywacji w środowisku testowym, szczególnie jeśli Twój stos hostingowy obejmuje buforowanie na poziomie serwera — częsta konfiguracja na Serwerach dedykowanych z Nginx i pamięcią podręczną FastCGI.

Full-Site Editing (FSE) i theme.json: nowoczesne podejście

W przypadku witryn używających motywu blokowego (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE itp.) kanoniczną metodą ustawiania domyślnych wartości line-height jest theme.json. Plik ten definiuje tokeny projektowe, które propagują się przez cały interfejs edytora bloków.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "lineHeight": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.25"
        }
      },
      "h1": {
        "typography": {
          "lineHeight": "1.1"
        }
      }
    }
  }
}

Wartości ustawione w styles w theme.json są wyświetlane jako niestandardowe właściwości CSS i stosowane za pomocą selektora :root, co daje im szeroki zasięg przy jednoczesnej możliwości nadpisania na poziomie bloku. Jest to najbardziej utrzymywalna architektura dla produkcyjnych witryn WordPress w 2024 roku i później.

Jeśli budujesz lub zarządzasz niestandardowym motywem blokowym na serwerze, który kontrolujesz — takim jak VPS z cPanel — bezpośrednia edycja theme.json za pomocą menedżera plików lub SSH jest szybsza i bardziej niezawodna niż używanie Kreatora do tokenów typograficznych.

Wybór właściwej metody: macierz decyzyjna

Lista kontrolna techniczna przed uruchomieniem

• Potwierdź, że wartości line-height są bez jednostek lub używają em — unikaj px dla właściwości dziedziczonych.
• Zweryfikuj WCAG 2.1 SC 1.4.12: wartość line-height tekstu podstawowego musi wynosić co najmniej 1.5.
• Sprawdź obliczone style w DevTools, aby potwierdzić, że żadna reguła o wyższej specyficzności nie nadpisuje Twoich wartości.
• Przetestuj na co najmniej dwóch mobilnych punktach przerwania — wartość line-height działająca przy 1440px może być nadmierna przy 375px.
• Jeśli używasz wtyczki do buforowania (WP Rocket, W3 Total Cache), wyczyść pamięć podręczną po każdej zmianie CSS.
• W przypadku witryn hostowanych na Hostingu współdzielonym używaj panelu Dodatkowy CSS zamiast bezpośredniej edycji plików motywu, aby uniknąć nadpisania zmian podczas aktualizacji motywu.
• Dokumentuj wszystkie niestandardowe wartości line-height w przewodniku po stylach lub bloku komentarzy w pliku CSS.
• Jeśli wdrażasz niestandardowy motyw potomny lub theme.json na zarządzanym serwerze, upewnij się, że uprawnienia pliku theme.json są ustawione na 644, aby zapobiec błędom zapisu z edytora plików WordPress.

FAQ

Czy zmiana interlinii w edytorze Gutenberg wpływa na urządzenia mobilne?

Tak. Wartości ustawione za pomocą pola Interlinia w Edytorze bloków są stosowane jako style inline bez zapytania media, więc obowiązują przy wszystkich szerokościach widoku. Aby uzyskać responsywną kontrolę — różne wartości na urządzeniach mobilnych i komputerach — musisz użyć niestandardowego CSS z zapytaniami @media lub wtyczki blokowej, takiej jak Kadence Blocks, która udostępnia kontrolki typografii dla każdego punktu przerwania.

Dlaczego mój niestandardowy CSS line-height nie jest stosowany, mimo że dodałem go do Dodatkowego CSS?

Najczęstszą przyczyną jest reguła arkusza stylów motywu lub wtyczki o wyższej specyficzności CSS targetująca ten sam element. Otwórz DevTools, sprawdź element akapitu i poszukaj przekreślonych reguł w panelu Styles. Zwiększ specyficzność selektora (np. .entry-content p zamiast p) lub, w ostateczności, dodaj !important.

Jaka jest różnica między line-height: 1.6 a line-height: 1.6em?

Wartość bez jednostki, taka jak 1.6, jest dziedziczona jako współczynnik — elementy potomne mnożą własny rozmiar czcionki przez 1.6. Wartość 1.6em jest obliczana względem rozmiaru czcionki rodzica, a następnie dziedziczona jako stała wartość w pikselach, co może powodować nieprawidłowe odstępy w zagnieżdżonych elementach o różnych rozmiarach czcionek. Zawsze używaj wartości bez jednostek dla line-height w tekście podstawowym.

Czy mogę ustawić różne interlinię dla widoku edytora i strony frontowej?

Tak. WordPress stosuje style edytora oddzielnie od stylów strony frontowej. Aby targetować kanwę edytora bloków, dodaj arkusz stylów za pomocą hooka enqueue_block_editor_assets i ogranicz reguły do .editor-styles-wrapper p. Zapewnia to wizualną zgodność środowiska edycji z opublikowanym wynikiem.

Czy dostosowanie interlinii zepsuje układ witryny lub spowoduje Cumulative Layout Shift?

Zmiana line-height w statycznych elementach tekstowych sama w sobie nie powoduje CLS. CLS jest wyzwalany, gdy elementy przesuwają się po początkowym renderowaniu — zazwyczaj spowodowane ładowaniem i zamianą czcionek internetowych. Jeśli używasz Google Fonts lub niestandardowej czcionki internetowej, połącz dostosowania line-height z font-display: swap i wskazówkami preload, aby zminimalizować niestabilność układu podczas ładowania czcionek. Hostowanie czcionek lokalnie — proste w środowisku Hostingu VPS — eliminuje opóźnienie czcionek zewnętrznych, które najczęściej wyzwala CLS wraz ze zmianami typografii.