Cum să Schimbi Spațierea Liniilor în WordPress: Toate Metodele Explicate

Spațierea dintre rânduri în WordPress — controlată de proprietatea CSS line-height — definește distanța verticală dintre rândurile de text dintr-un element bloc. Ajustarea acesteia afectează direct lizibilitatea, ierarhia vizuală și calitatea tipografică a întregului site. Cele patru metode principale pentru a o modifica sunt: controalele native ale editorului de blocuri Gutenberg, WordPress Theme Customizer, CSS personalizat prin panoul Additional CSS și pluginuri de tipografie. Fiecare metodă se potrivește unui nivel diferit de acces tehnic și domeniului de aplicare al modificării.

Acest ghid acoperă fiecare metodă în profunzime tehnică completă, inclusiv cazuri limită, capcane legate de specificitatea selectorilor și compromisuri ale pluginurilor pe care majoritatea tutorialelor le omit complet.

De ce contează înălțimea rândului dincolo de estetică

Specificația CSS definește line-height ca înălțimea minimă a casetelor de rând din cadrul elementului. Pentru textul de bază, ghidul de accesibilitate WCAG 2.1 (Criteriul de succes 1.4.12) recomandă un line-height minim de 1,5 ori dimensiunea fontului. Ignorarea acestui aspect afectează nu doar designul vizual, ci și conformitatea și semnalele de calitate pentru motoarele de căutare legate de Core Web Vitals și de metricile de implicare ale utilizatorilor.

Un line-height setat greșit — în special valori sub 1.2 pentru textul de bază — face ca textul să pară înghesuit, crește rata de respingere și poate declanșa probleme de Cumulative Layout Shift (CLS) atunci când este combinat cu fonturi web care se încarcă asincron.

Metoda 1: Controalele native ale editorului de blocuri Gutenberg

Editorul Gutenberg expune controale line-height în mod nativ pentru blocurile Paragraph, Heading, List și Quote, dar această funcție trebuie activată explicit la nivelul temei prin theme.json sau funcția add_theme_support().

Pasul 1: Verificați dacă suportul pentru înălțimea rândului este activ

Dacă nu vedeți un câmp Line Height în panoul de setări al blocului, tema activă nu a declarat suport pentru aceasta. Îl puteți activa adăugând următorul cod în fișierul functions.php al temei:

add_theme_support( 'custom-line-height' );

Pentru temele de blocuri care utilizează theme.json, asigurați-vă că următorul cod este prezent sub settings:

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

Pasul 2: Selectați blocul țintă

În editorul de postări sau pagini, faceți clic pe blocul Paragraph sau Heading pe care doriți să îl modificați. Bara de instrumente a blocului apare în partea de sus, iar bara laterală din dreapta comută automat la fila Block.

Pasul 3: Localizați panoul Typography

În panoul Block din dreapta, derulați până la secțiunea Typography. Dacă este restrânsă, faceți clic pe etichetă pentru a o extinde. Veți vedea un câmp de introducere Line Height.

Introduceți o valoare fără unitate. WordPress o transmite direct ca valoare CSS line-height în stilul inline al blocului. Intervale recomandate:

• Paragrafe de text: 1.5 până la 1.8
• Titluri (H1–H2): 1.1 până la 1.3
• Subtitluri (H3–H4): 1.2 până la 1.4

Caz limită critic: Valorile fără unitate (de ex., 1.6) sunt puternic preferate față de valorile în pixeli sau em (de ex., 24px sau 1.6em), deoarece se scalează proporțional atunci când un element copil moștenește proprietatea și își modifică propria dimensiune a fontului. Utilizarea px în acest context este o greșeală frecventă care strică spațierea elementelor imbricate.

Pasul 4: Salvați și validați

Faceți clic pe Update sau Publish. Utilizați DevTools din browser (F12 > Elements > Computed) pentru a confirma că stilul inline line-height: 1.6 este aplicat elementului corect și nu este suprascris de o foaie de stil a temei cu specificitate mai mare.

Metoda 2: WordPress Theme Customizer pentru tipografie la nivelul întregului site

Customizer-ul (Appearance > Customize) oferă o interfață cu previzualizare în timp real pentru modificări la nivelul întregului site. Controalele de tipografie din Customizer nu sunt o funcție de bază WordPress — ele sunt furnizate în întregime de tema activă sau de un plugin companion.

Teme cu panouri native de tipografie

Temele construite pe framework-uri precum GeneratePress, Astra, Kadence sau OceanWP expun secțiuni dedicate de tipografie cu cursoare line-height pentru textul de bază, titluri și zone de widget-uri în mod individual.

Pasul 1: Navigați la setările de tipografie

Accesați Appearance > Customize. Căutați o secțiune etichetată Typography, Fonts sau Global Styles în funcție de tema dvs. Dacă nu există o astfel de secțiune, tema dvs. nu suportă controlul tipografiei prin Customizer — continuați cu Metoda 3 sau Metoda 4.

Pasul 2: Ajustați înălțimea rândului per element

Majoritatea customizer-elor de teme vă permit să vizați:

• Textul de bază (corespunde selectorului body sau p)
• Titlurile H1 până la H6
• Meniurile de navigare
• Titlurile widget-urilor

Setați valorile și utilizați panoul de previzualizare în timp real pentru a valida simultan pe breakpoint-urile desktop și mobil.

Pasul 3: Publicați modificările

Faceți clic pe Publish în colțul din stânga sus al Customizer-ului. Modificările sunt scrise în opțiunile stocate ale temei și aplicate global prin foaia de stil a temei sau blocul inline <style> din <head>.

Capcană: Setările de tipografie din Customizer sunt stocate în opțiunile temei, nu în style.css. Dacă schimbați tema, toate aceste ajustări se pierd. Documentați întotdeauna valorile înainte de a schimba tema.

Metoda 3: CSS personalizat — Metoda cea mai precisă și portabilă

CSS-ul personalizat vă oferă control complet asupra targetării selectorilor, specificității și breakpoint-urilor responsive. Este abordarea corectă atunci când aveți nevoie de control granular pe care nici editorul de blocuri, nici Customizer-ul nu îl oferă.

Pasul 1: Accesați panoul Additional CSS

Navigați la Appearance > Customize > Additional CSS. Acest CSS este stocat în baza de date și afișat inline în <head>, oferindu-i un avantaj de specificitate față de majoritatea foilor de stil ale temelor.

Alternativ, dacă vă gestionați propriul mediu de server — de exemplu, pe un plan de VPS Hosting — puteți înregistra o foaie de stil personalizată prin functions.php pentru un control mai bun al cache-ului și performanță:

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' );

Pasul 2: Scrieți reguli CSS targetate

Înălțimea globală a rândului pentru paragrafe:

p {
    line-height: 1.6;
}

Toate nivelurile de titluri:

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

Doar blocurile de paragrafe specifice Gutenberg (evită afectarea textului din bara laterală sau subsol):

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

Limitat la un șablon de pagină specific sau tip de postare folosind clasa body pe care WordPress o generează automat:

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

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

Ajustare responsive pentru mobil (ecranele mai mici beneficiază de un spațiu ușor mai strâns):

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

Pasul 3: Rezolvați conflictele de specificitate

Dacă CSS-ul dvs. nu are efect, o regulă a temei sau a unui plugin cu specificitate mai mare o suprascrie. Diagnosticați acest lucru în DevTools inspectând elementul și verificând care regulă este tăiată în panoul Styles.

Pentru a crește specificitatea fără a recurge la !important, definiți selectorul mai precis:

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

Utilizați !important doar ca ultimă soluție, deoarece creează o datorie de întreținere care se acumulează cu fiecare adăugare viitoare de CSS:

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

Metoda 4: Pluginuri de tipografie

Pluginurile sunt alegerea potrivită atunci când aveți nevoie de o interfață fără cod, când gestionați un site pentru un client care trebuie să îl întrețină independent sau când aveți nevoie de funcții tipografice avansate OpenType dincolo de line-height.

Comparație de pluginuri

Instalarea și configurarea Advanced Editor Tools

Advanced Editor Tools (fostul TinyMCE Advanced) este opțiunea cea mai utilizată pentru adăugarea controalelor de spațiere a rândurilor direct în bara de instrumente a editorului de blocuri.

1. Accesați Plugins > Add New, căutați Advanced Editor Tools și faceți clic pe Install Now, apoi pe Activate.
2. Navigați la Settings > Advanced Editor Tools.
3. În fila Block Editor, activați butonul de bară de instrumente Line Height trăgându-l în rândul activ al barei de instrumente.
4. Reveniți la orice postare sau pagină. Selectați un bloc Paragraph. Controlul pentru înălțimea rândului apare acum în bara de instrumente a blocului.

Utilizarea WP Typography pentru reguli globale

WP Typography aplică reguli tipografice la nivelul de randare PHP, ceea ce înseamnă că modifică rezultatul HTML înainte ca acesta să ajungă în browser. Acest lucru este util pentru a impune un line-height consistent în tot textul fără a atinge blocurile individuale.

După activare, accesați Settings > WP Typography și localizați secțiunea CSS Classes pentru a aplica reguli de înălțime a rândului limitate la containere specifice.

Capcană: Procesarea textului de către WP Typography poate intra în conflict cu pluginurile de caching dacă este activat caching-ul complet al paginii. Testați întotdeauna după activarea sa într-un mediu de staging, în special dacă stiva de hosting include caching la nivel de server — o configurație frecventă pe Servere Dedicate care rulează Nginx cu cache FastCGI.

Full-Site Editing (FSE) și theme.json: Abordarea modernă

Pentru site-urile care utilizează o temă de blocuri (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE etc.), metoda canonică pentru setarea valorilor implicite line-height este theme.json. Acest fișier definește token-uri de design care se propagă prin întreaga interfață a editorului de blocuri.

{
  "$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"
        }
      }
    }
  }
}

Valorile setate în styles din theme.json sunt afișate ca proprietăți CSS personalizate și aplicate prin selectorul :root, oferindu-le o acoperire largă, rămânând în același timp suprascriptibile la nivel de bloc. Aceasta este arhitectura cea mai ușor de întreținut pentru site-urile WordPress de producție în 2024 și ulterior.

Dacă construiți sau gestionați o temă de blocuri personalizată pe un server pe care îl controlați — cum ar fi un VPS cu cPanel — editarea directă a theme.json prin managerul de fișiere sau SSH este mai rapidă și mai fiabilă decât utilizarea Customizer-ului pentru token-urile de tipografie.

Alegerea metodei potrivite: Matrice de decizie

Listă de verificare tehnică înainte de lansare

• Confirmați că valorile line-height sunt fără unitate sau utilizează em — evitați px pentru proprietățile moștenite.
• Validați WCAG 2.1 SC 1.4.12: line-height pentru textul de bază trebuie să fie cel puțin 1.5.
• Inspectați stilurile calculate în DevTools pentru a confirma că nicio regulă cu specificitate mai mare nu suprascrie valorile dvs.
• Testați pe cel puțin două breakpoint-uri mobile — line-height care funcționează la 1440px poate părea excesiv la 375px.
• Dacă utilizați un plugin de caching (WP Rocket, W3 Total Cache), goliți cache-ul după orice modificare CSS.
• Pentru site-urile găzduite pe Shared Web Hosting, utilizați panoul Additional CSS în loc să editați direct fișierele temei pentru a evita suprascrierea modificărilor la actualizările temei.
• Documentați toate valorile line-height personalizate într-un ghid de stil sau un bloc de comentarii din fișierul CSS.
• Dacă implementați o temă copil personalizată sau theme.json pe un server gestionat, asigurați-vă că permisiunile fișierului theme.json sunt setate la 644 pentru a preveni erorile de scriere din editorul de fișiere WordPress.

Întrebări frecvente

Modificarea înălțimii rândului în editorul Gutenberg afectează dispozitivele mobile?

Da. Valorile setate prin câmpul Line Height al editorului de blocuri sunt aplicate ca stiluri inline fără interogare media, deci se aplică la toate lățimile viewport-ului. Pentru control responsive — valori diferite pe mobil față de desktop — trebuie să utilizați CSS personalizat cu interogări @media sau un plugin de blocuri precum Kadence Blocks care expune controale de tipografie per breakpoint.

De ce CSS-ul meu personalizat line-height nu se aplică, deși l-am adăugat în Additional CSS?

Cea mai frecventă cauză este o regulă a foii de stil a temei sau a unui plugin cu specificitate CSS mai mare care vizează același element. Deschideți DevTools, inspectați elementul paragraf și căutați regulile tăiate în panoul Styles. Creșteți specificitatea selectorului (de ex., .entry-content p în loc de p) sau, ca ultimă soluție, adăugați !important.

Care este diferența dintre line-height: 1.6 și line-height: 1.6em?

O valoare fără unitate precum 1.6 este moștenită ca raport — elementele copil înmulțesc propria dimensiune a fontului cu 1.6. O valoare de 1.6em este calculată relativ la dimensiunea fontului părintelui și apoi moștenită ca valoare fixă în pixeli, ceea ce poate cauza spațiere dezaliniată în elementele imbricate cu dimensiuni diferite ale fontului. Utilizați întotdeauna valori fără unitate pentru line-height în textul de bază.

Pot seta înălțimi de rând diferite pentru vizualizarea editorului și pentru front end?

Da. WordPress aplică stilurile editorului separat de stilurile front-end. Pentru a targeta canvas-ul editorului de blocuri, înregistrați o foaie de stil folosind hook-ul enqueue_block_editor_assets și limitați regulile la .editor-styles-wrapper p. Aceasta asigură că experiența de editare corespunde vizual cu rezultatul publicat.

Ajustarea înălțimii rândului va strica aspectul site-ului sau va cauza Cumulative Layout Shift?

Modificarea line-height pe elementele de text statice nu cauzează CLS în sine. CLS este declanșat atunci când elementele își schimbă poziția după randarea inițială — cauzat de obicei de fonturile web care se încarcă și se schimbă. Dacă utilizați Google Fonts sau un font web personalizat, asociați ajustările line-height cu font-display: swap și indicii de preîncărcare pentru a minimiza instabilitatea aspectului în timpul încărcării fontului. Găzduirea fonturilor local — simplă într-un mediu de VPS Hosting — elimină latența fonturilor terțe care declanșează cel mai frecvent CLS alături de modificările de tipografie.