Как изменить межстрочный интервал в WordPress: все методы объяснены

Межстрочный интервал в WordPress — управляемый CSS-свойством line-height — определяет вертикальное расстояние между строками текста внутри блочного элемента. Его настройка напрямую влияет на читаемость, визуальную иерархию и типографическое качество всего сайта. Существует четыре основных метода его изменения: встроенные элементы управления редактора блоков Gutenberg, Настройщик темы WordPress, пользовательский CSS через панель дополнительного CSS и плагины типографики. Каждый метод подходит для разного уровня технического доступа и масштаба изменений.

Это руководство охватывает каждый метод с полной технической глубиной, включая граничные случаи, проблемы специфичности селекторов и компромиссы плагинов, которые большинство руководств полностью пропускают.

Почему межстрочный интервал важен не только с эстетической точки зрения

Спецификация CSS определяет line-height как минимальную высоту строчных блоков внутри элемента. Для основного текста руководство по доступности WCAG 2.1 (критерий успеха 1.4.12) рекомендует минимальное значение line-height в 1,5 раза больше размера шрифта. Игнорирование этого влияет не только на визуальный дизайн, но и на соответствие требованиям, а также на сигналы качества поисковых систем, связанные с Core Web Vitals и показателями вовлечённости пользователей.

Неправильно заданное значение line-height — особенно значения ниже 1.2 для основного текста — делает текст тесным, увеличивает показатель отказов и может вызвать проблемы с Cumulative Layout Shift (CLS) в сочетании с веб-шрифтами, загружаемыми асинхронно.

Метод 1: Встроенные элементы управления редактора блоков Gutenberg

Редактор Gutenberg предоставляет встроенные элементы управления line-height для блоков Абзац, Заголовок, Список и Цитата, однако эта функция должна быть явно включена на уровне темы через theme.json или функцию add_theme_support().

Шаг 1: Убедитесь, что поддержка межстрочного интервала активна

Если вы не видите поле «Межстрочный интервал» в панели настроек блока, ваша активная тема не объявила его поддержку. Вы можете включить её, добавив следующее в файл functions.php вашей темы:

add_theme_support( 'custom-line-height' );

Для блочных тем, использующих theme.json, убедитесь, что следующее присутствует в разделе settings:

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

Шаг 2: Выберите целевой блок

В редакторе записи или страницы нажмите на блок Абзац или Заголовок, который хотите изменить. Панель инструментов блока появится вверху, а боковая панель справа автоматически переключится на вкладку Блок.

Шаг 3: Найдите панель «Типографика»

В правой панели Блок прокрутите до раздела Типографика. Если он свёрнут, нажмите на метку, чтобы развернуть его. Вы увидите поле ввода Межстрочный интервал.

Введите безразмерное значение. WordPress передаёт его напрямую как значение CSS line-height во встроенном стиле блока. Рекомендуемые диапазоны:

• Абзацы основного текста: 1.5 до 1.8
• Заголовки (H1–H2): 1.1 до 1.3
• Подзаголовки (H3–H4): 1.2 до 1.4

Важный граничный случай: Безразмерные значения (например, 1.6) настоятельно предпочтительнее значений в пикселях или em (например, 24px или 1.6em), поскольку они масштабируются пропорционально, когда дочерний элемент наследует свойство и изменяет собственный размер шрифта. Использование px здесь — распространённая ошибка, нарушающая отступы вложенных элементов.

Шаг 4: Сохраните и проверьте

Нажмите Обновить или Опубликовать. Используйте DevTools браузера (F12 > Elements > Computed), чтобы убедиться, что встроенный стиль line-height: 1.6 применён к правильному элементу и не переопределяется таблицей стилей темы с более высокой специфичностью.

Метод 2: Настройщик темы WordPress для типографики всего сайта

Настройщик (Appearance > Customize) предоставляет интерфейс с предварительным просмотром в реальном времени для изменений на всём сайте. Элементы управления типографикой в Настройщике не являются встроенной функцией WordPress — они полностью предоставляются вашей активной темой или сопутствующим плагином.

Темы со встроенными панелями типографики

Темы, построенные на фреймворках GeneratePress, Astra, Kadence или OceanWP, предоставляют специальные разделы типографики с ползунками line-height для основного текста, заголовков и областей виджетов по отдельности.

Шаг 1: Перейдите к настройкам типографики

Перейдите в Внешний вид > Настроить. Найдите раздел с названием Типографика, Шрифты или Глобальные стили в зависимости от вашей темы. Если такого раздела нет, ваша тема не поддерживает управление типографикой через Настройщик — перейдите к Методу 3 или Методу 4.

Шаг 2: Настройте межстрочный интервал для каждого элемента

Большинство настройщиков тем позволяют настраивать:

• Основной текст (соответствует селектору body или p)
• Заголовки от H1 до H6
• Меню навигации
• Заголовки виджетов

Задайте значения и используйте панель предварительного просмотра для одновременной проверки на настольных и мобильных контрольных точках.

Шаг 3: Опубликуйте изменения

Нажмите Опубликовать в верхнем левом углу Настройщика. Изменения записываются в сохранённые параметры темы и применяются глобально через таблицу стилей темы или встроенный блок <style> в <head>.

Предупреждение: Настройки типографики Настройщика хранятся в параметрах темы, а не в style.css. При смене темы все эти настройки будут утеряны. Всегда документируйте свои значения перед сменой темы.

Метод 3: Пользовательский CSS — наиболее точный и переносимый метод

Пользовательский CSS даёт вам полный контроль над выбором селекторов, специфичностью и адаптивными контрольными точками. Это правильный подход, когда вам нужен детальный контроль, который не обеспечивают ни редактор блоков, ни Настройщик.

Шаг 1: Откройте панель дополнительного CSS

Перейдите в Внешний вид > Настроить > Дополнительный CSS. Этот CSS хранится в базе данных и выводится встроенно в <head>, что даёт ему преимущество по специфичности над большинством таблиц стилей темы.

Кроме того, если вы управляете собственной серверной средой — например, на плане VPS Хостинг — вы можете подключить пользовательскую таблицу стилей через functions.php для лучшего управления кешем и производительности:

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

Шаг 2: Напишите целевые CSS-правила

Глобальный межстрочный интервал для абзацев:

p {
    line-height: 1.6;
}

Все уровни заголовков:

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

Только блоки абзацев Gutenberg (не затрагивает текст в боковой панели или подвале):

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

Ограничено конкретным шаблоном страницы или типом записи с использованием класса body, который WordPress выводит автоматически:

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

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

Адаптивная настройка для мобильных устройств (на небольших экранах немного более плотный интервал предпочтительнее):

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

Шаг 3: Устраните конфликты специфичности

Если ваш CSS не применяется, правило темы или плагина с более высокой специфичностью переопределяет его. Диагностируйте это в DevTools, проверив элемент и найдя зачёркнутые правила на панели Styles.

Чтобы увеличить специфичность без использования !important, уточните ваш селектор:

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

Используйте !important только в крайнем случае, так как это создаёт технический долг, который накапливается с каждым последующим добавлением CSS:

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

Метод 4: Плагины типографики

Плагины — правильный выбор, когда вам нужен интерфейс без написания кода, когда вы управляете сайтом для клиента, который должен самостоятельно его поддерживать, или когда вам нужны расширенные типографические функции OpenType, выходящие за рамки line-height.

Сравнение плагинов

Установка и настройка Advanced Editor Tools

Advanced Editor Tools (ранее TinyMCE Advanced) — наиболее широко используемый вариант для добавления элементов управления межстрочным интервалом непосредственно в панель инструментов редактора блоков.

1. Перейдите в Плагины > Добавить новый, найдите Advanced Editor Tools и нажмите Установить, затем Активировать.
2. Перейдите в Настройки > Advanced Editor Tools.
3. На вкладке Редактор блоков включите кнопку панели инструментов Межстрочный интервал, перетащив её в активную строку панели инструментов.
4. Вернитесь к любой записи или странице. Выберите блок «Абзац». Элемент управления межстрочным интервалом теперь отображается в панели инструментов блока.

Использование WP Typography для глобальных правил

WP Typography применяет типографические правила на уровне рендеринга PHP, то есть изменяет HTML-вывод до того, как он достигает браузера. Это полезно для обеспечения единообразного line-height во всём тексте без изменения отдельных блоков.

После активации перейдите в Настройки > WP Typography и найдите раздел CSS-классы для применения правил межстрочного интервала, ограниченных конкретными контейнерами.

Предупреждение: Обработка текста WP Typography может конфликтовать с плагинами кеширования при включённом полностраничном кешировании. Всегда проводите тестирование после его активации в промежуточной среде, особенно если ваш хостинг-стек включает кеширование на уровне сервера — распространённая конфигурация на Выделенных серверах, работающих под управлением Nginx с кешем FastCGI.

Полноценное редактирование сайта (FSE) и theme.json: современный подход

Для сайтов, использующих блочную тему (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE и др.), канонический метод установки значений line-height по умолчанию — это theme.json. Этот файл определяет дизайн-токены, которые распространяются через весь интерфейс редактора блоков.

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

Значения, заданные в styles внутри theme.json, выводятся как пользовательские CSS-свойства и применяются через селектор :root, обеспечивая широкий охват при возможности переопределения на уровне блока. Это наиболее поддерживаемая архитектура для производственных сайтов WordPress в 2024 году и далее.

Если вы создаёте или управляете пользовательской блочной темой на сервере, которым управляете сами — например, на VPS с cPanel — редактирование theme.json напрямую через файловый менеджер или SSH быстрее и надёжнее, чем использование Настройщика для токенов типографики.

Выбор правильного метода: матрица решений

Технический чеклист перед публикацией

• Убедитесь, что значения line-height безразмерные или используют em — избегайте px для наследуемых свойств.
• Проверьте соответствие WCAG 2.1 SC 1.4.12: значение line-height для основного текста должно быть не менее 1.5.
• Проверьте вычисленные стили в DevTools, чтобы убедиться, что ни одно правило с более высокой специфичностью не переопределяет ваши значения.
• Протестируйте как минимум на двух мобильных контрольных точках — line-height, который хорошо выглядит при 1440px, может казаться избыточным при 375px.
• При использовании плагина кеширования (WP Rocket, W3 Total Cache) очистите кеш после любого изменения CSS.
• Для сайтов, размещённых на Общем веб-хостинге, используйте панель дополнительного CSS вместо прямого редактирования файлов темы, чтобы избежать перезаписи изменений при обновлениях темы.
• Задокументируйте все пользовательские значения line-height в руководстве по стилю или блоке комментариев в вашем CSS-файле.
• При развёртывании пользовательской дочерней темы или theme.json на управляемом сервере убедитесь, что права доступа к файлу theme.json установлены на 644 во избежание ошибок записи из редактора файлов WordPress.

Часто задаваемые вопросы

Влияет ли изменение межстрочного интервала в редакторе Gutenberg на мобильные устройства?

Да. Значения, заданные через поле «Межстрочный интервал» редактора блоков, применяются как встроенные стили без медиазапроса, поэтому они действуют при любой ширине области просмотра. Для адаптивного управления — разных значений на мобильных и настольных устройствах — необходимо использовать пользовательский CSS с запросами @media или блочный плагин, например Kadence Blocks, который предоставляет элементы управления типографикой для каждой контрольной точки.

Почему мой пользовательский CSS line-height не применяется, хотя я добавил его в дополнительный CSS?

Наиболее распространённая причина — правило таблицы стилей темы или плагина с более высокой специфичностью CSS, нацеленное на тот же элемент. Откройте DevTools, проверьте элемент абзаца и найдите зачёркнутые правила на панели Styles. Увеличьте специфичность вашего селектора (например, .entry-content p вместо p) или, в крайнем случае, добавьте !important.

В чём разница между line-height: 1.6 и line-height: 1.6em?

Безразмерное значение, например 1.6, наследуется как коэффициент — дочерние элементы умножают собственный размер шрифта на 1.6. Значение 1.6em вычисляется относительно размера шрифта родителя и затем наследуется как фиксированное значение в пикселях, что может вызвать несоответствие отступов во вложенных элементах с разными размерами шрифта. Всегда используйте безразмерные значения для line-height в основном тексте.

Можно ли задать разные межстрочные интервалы для представления в редакторе и на внешнем интерфейсе?

Да. WordPress применяет стили редактора отдельно от стилей внешнего интерфейса. Чтобы нацелиться на холст редактора блоков, подключите таблицу стилей с помощью хука enqueue_block_editor_assets и ограничьте правила областью .editor-styles-wrapper p. Это обеспечивает визуальное соответствие опыта редактирования опубликованному результату.

Нарушит ли настройка межстрочного интервала макет сайта или вызовет Cumulative Layout Shift?

Изменение line-height для статических текстовых элементов само по себе не вызывает CLS. CLS возникает, когда элементы смещают своё положение после первоначального рендеринга — как правило, это вызвано загрузкой и заменой веб-шрифтов. Если вы используете Google Fonts или пользовательский веб-шрифт, сочетайте настройки line-height с font-display: swap и подсказками предварительной загрузки для минимизации нестабильности макета во время загрузки шрифта. Локальное размещение шрифтов — что легко реализовать в среде VPS Хостинг — устраняет задержку сторонних шрифтов, которая чаще всего вызывает CLS наряду с изменениями типографики.