Як змінити розмір шрифту у WordPress: Gutenberg, плагіни, CSS та налаштувальник теми

Зміна розміру шрифту у WordPress означає налаштування типографічного масштабу текстових елементів вашого сайту — заголовків, основного тексту, підписів і навігаційних міток — на рівні блоку, теми або глобально через CSS. Обраний метод визначає область застосування змін: один абзац, тип контенту на всіх сторінках або кожен текстовий елемент у масштабах усього сайту.

Цей посібник охоплює всі практичні методи, доступні у сучасній інсталяції WordPress, включаючи блоковий редактор Gutenberg, плагіни типографіки, нативний Theme Customizer та прямі перевизначення CSS. Кожен підхід має конкретний випадок використання, і вибір невідповідного методу створює технічний борг, який накопичується з часом.

Чому рішення щодо розміру шрифту є більш технічними, ніж здається

Типографіка — це не косметична проблема. Розмір шрифту безпосередньо впливає на показники Core Web Vitals, зокрема на метрику Cumulative Layout Shift (CLS) під час асинхронного завантаження шрифтів, та на Largest Contentful Paint (LCP), коли великий текст заголовка є основним елементом у viewport. Погано обмежені правила font-size — наприклад, застосування font-size до елемента body без урахування успадкування на основі em — непередбачувано каскадують через дочірні елементи, порушуючи відступи, співвідношення міжрядкового інтервалу та макети компонентів.

Якщо ви запускаєте WordPress у середовищі VPS Хостинг з root-доступом, у вас є додаткова можливість редагувати файли теми безпосередньо та керувати рівнями кешування, які впливають на поширення змін CSS до кінцевих користувачів. Такий рівень контролю недоступний на спільній інфраструктурі, що робить вибір методу ще більш важливим.

Порівняння: усі чотири методи на перший погляд

Використовуйте цю таблицю як матрицю прийняття рішень перед зміною будь-яких налаштувань. Правильний метод залежить від області застосування, вашого технічного рівня та від того, чи працюєте ви з дочірньою темою.

Метод 1: Блоковий редактор Gutenberg

Блоковий редактор Gutenberg, представлений у WordPress 5.0, керує розміром шрифту на рівні окремого блоку. Це правильний підхід, коли потрібно налаштувати розмір конкретного абзацу, заголовка або групи елементів, не торкаючись глобальних стилів.

Покрокова інструкція: налаштування розміру шрифту в блоці

1. Увійдіть до панелі керування WordPress і відкрийте публікацію або сторінку, яку хочете відредагувати.
2. Натисніть на текстовий блок, який хочете змінити — зазвичай це блок Paragraph, Heading або List.
3. На правій бічній панелі знайдіть вкладку Block (не вкладку Document). Якщо бічна панель прихована, натисніть значок шестерні у верхньому правому куті панелі інструментів, щоб відобразити її.
4. Прокрутіть вниз до розділу Typography на панелі налаштувань блоку.
5. Ви побачите попередньо встановлені варіанти розміру: Small, Medium, Large та Extra Large. Ці значення визначаються файлом theme.json вашої активної теми.
6. Щоб задати точне значення, натисніть опцію Custom і введіть розмір у пікселях (наприклад, 18px) або використовуйте відносні одиниці, як-от rem (наприклад, 1.125rem).
7. Натисніть Update або Publish, щоб зберегти.

Використання theme.json для визначення власних пресетів (WordPress 5.8+)

Якщо ви керуєте блоковою темою або класичною темою з файлом theme.json, ви можете визначити точні попередньо встановлені розміри, які відображатимуться на бічній панелі редактора. Це найбільш зручний для підтримки підхід у середовищах розробки.

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

Розміщення цього файлу в кореневому каталозі вашої дочірньої теми гарантує, що пресети збережуться після оновлень теми та будуть доступні кожному редактору на сайті без необхідності знань CSS.

Граничний випадок: конфлікт між розміром шрифту на рівні блоку та глобальними стилями

Поширена проблема виникає, коли для блоку явно задано розмір шрифту через редактор, але глобальна таблиця стилів теми також націлена на той самий елемент із правилом з вищою специфічністю CSS. Блоковий редактор вставляє вбудовані стилі на кшталт style="font-size:22px", що зазвичай перевизначає більшість правил таблиці стилів. Однак якщо тема використовує оголошення !important у своєму CSS, вбудований стиль програє. Завжди перевіряйте відрендерений елемент у DevTools браузера, щоб підтвердити, яке правило є пріоритетним.

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

Плагіни є правильним вибором, коли потрібен типографічний контроль у масштабах усього сайту без ручного написання CSS. Вони особливо корисні для нерозробників, які керують сайтами на керованому хостингу або VPS з cPanel, де прямий доступ до файлів менш поширений.

Рекомендований плагін: Easy Google Fonts

Easy Google Fonts інтегрується безпосередньо з WordPress Customizer і надає вам контроль над розміром шрифту для кожного елемента в масштабах усього сайту.

Встановлення та налаштування:

1. На панелі керування WordPress перейдіть до Plugins > Add New.
2. Знайдіть Easy Google Fonts і натисніть Install Now, потім Activate.
3. Перейдіть до Appearance > Customize.
4. Виберіть Typography у меню Customizer.
5. Виберіть елемент, який хочете змінити: Body, Headings (H1–H6), Paragraphs або будь-який власний селектор, який ви визначите.
6. Використовуйте повзунок Font Size або поле введення, щоб задати значення.
7. Натисніть Publish, щоб застосувати зміни в реальному часі.

Альтернативний плагін: Fonts Plugin | Google Fonts Typography

Цей плагін пропонує більш деталізований інтерфейс і підтримує змінні шрифти, які стають дедалі більш актуальними для сайтів, оптимізованих за продуктивністю. Змінні шрифти зменшують кількість HTTP-запитів, надаючи один файл шрифту, що охоплює кілька насиченостей і стилів.

Критичне попередження: конфлікти плагінів із блоковими темами

Якщо ви використовуєте блокову тему з Full Site Editing (FSE) (наприклад, Twenty Twenty-Three або Twenty Twenty-Four), плагіни типографіки, які вставляють CSS у <head> через wp_enqueue_style, можуть конфліктувати з глобальними стилями теми, визначеними у theme.json. Результатом є непередбачувані конфлікти специфічності. У середовищах FSE використовуйте Site Editor (Appearance > Editor) для глобальних змін типографіки замість плагіна.

Метод 3: Theme Customizer

WordPress Theme Customizer (Appearance > Customize) — це вбудований інтерфейс для внесення змін на рівні теми. Не всі теми надають тут елементи керування типографікою — це повністю залежить від того, що розробник теми зареєстрував за допомогою WordPress Customizer API.

Покрокова інструкція: налаштування розміру шрифту через Customizer

1. Перейдіть до Appearance > Customize на панелі керування WordPress.
2. Знайдіть розділ Typography, Fonts або Text на лівій панелі. Якщо такого розділу немає, ваша тема не підтримує це нативно.
3. Виберіть тип елемента: основний текст, H1, H2, навігація, нижній колонтитул тощо.
4. Налаштуйте розмір шрифту за допомогою наданого повзунка або числового поля введення.
5. Попередній перегляд праворуч оновлюється в реальному часі.
6. Натисніть Publish, щоб зафіксувати зміни.

Важливе обмеження: налаштування Theme Customizer не є портативними

Налаштування Customizer зберігаються в базі даних WordPress як модифікації теми (theme_mods). Якщо ви зміните тему, всі зміни розміру шрифту на основі Customizer буде втрачено. Вони також не переносяться за допомогою стандартних інструментів експорту, якщо ви не використовуєте плагін, спеціально розроблений для міграції даних Customizer. Це критично важливий аспект при плануванні міграції теми на робочих сайтах.

Метод 4: Власний CSS

Власний CSS — це найточніший і найгнучкіший метод. Він підходить, коли три інші методи не можуть націлитися на конкретний елемент, який вам потрібен, або коли потрібно застосувати адаптивний розмір шрифту за допомогою медіа-запитів.

Додавання CSS через Customizer (без редагування файлів)

1. Перейдіть до Appearance > Customize > Additional CSS.
2. Введіть свої правила CSS безпосередньо в редакторі.
3. Натисніть Publish.

Цей підхід зберігає CSS у базі даних і є безпечним для нерозробників. Однак він має обмеження за розміром і не підтримує препроцесори, як-от Sass.

Націлювання на конкретні елементи за допомогою 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;
}

Адаптивний розмір шрифту з clamp()

Сучасний CSS підтримує плавну типографіку за допомогою функції clamp(), що усуває необхідність у кількох контрольних точках медіа-запитів:

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

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

Цей підхід плавно масштабує розмір шрифту між мінімальним і максимальним значенням залежно від ширини viewport. Це поточна найкраща практика для адаптивної типографіки, яку підтримують усі сучасні браузери.

Редагування файлів теми безпосередньо (потрібна дочірня тема)

Якщо вам потрібно постійно додати CSS до таблиці стилів теми та уникнути накладних витрат бази даних поля Additional CSS, додайте правила до файлу style.css вашої дочірньої теми. Ніколи не редагуйте файли батьківської теми безпосередньо — оновлення перезапишуть ваші зміни.

На сервері з SSH-доступом ви можете редагувати файл безпосередньо:

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

Після збереження очистіть кеш на стороні сервера та будь-який CDN-кеш, щоб переконатися, що оновлені стилі надаються відвідувачам. У середовищі VPS Хостинг це зазвичай означає виконання команди очищення кешу для вашого плагіна кешування або зворотного проксі (Nginx, Varnish тощо).

Проблеми специфічності, яких слід уникати

• Уникайте !important як стандартного рішення. Це створює гонку специфічності, яка робить майбутнє обслуговування надзвичайно складним.
• Не задавайте розміри шрифту в пікселях для елемента html, якщо ваша тема використовує розміри на основі em. Зміна html { font-size: 20px; } масштабуватиме кожне значення на основі em в масштабах усього сайту, часто порушуючи відступи та макет.
• Використовуйте одиниці rem для масштабованості. Значення rem відносні до кореневого елемента html, що робить їх передбачуваними та доступними. Користувачі, які збільшують стандартний розмір шрифту у браузері, отримають переваги від макетів на основі rem, що є вимогою доступності WCAG.

Доступність і розмір шрифту: що оцінює Google

Аудит Google Lighthouse позначає текст, який занадто малий для читання, як проблему зручності використання. Мінімальний рекомендований розмір шрифту основного тексту становить 16px для десктопу та 14px для мобільних пристроїв, хоча 16px для всіх viewport є більш безпечним базовим значенням. Критерій успіху WCAG 2.1 1.4.4 вимагає, щоб текст можна було збільшити до 200% без втрати вмісту або функціональності — вимога, яку одиниці rem та em задовольняють за замовчуванням, тоді як макети лише з px часто не відповідають їй.

Якщо ви розміщуєте сайт, що обслуговує глобальну аудиторію або потребує відповідності вимогам доступності, ці міркування мають визначати ваші рішення щодо реалізації розміру шрифту, а не лише візуальні переваги.

Кешування та аспекти розгортання на VPS

Коли ви змінюєте CSS на сайті WordPress, розміщеному у середовищі VPS Хостинг або Виділені сервери, зміни можуть бути не одразу видимі через кілька рівнів кешування:

• Кеш об’єктів WordPress (Redis, Memcached)
• Плагіни кешування сторінок (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Кеш Nginx FastCGI
• Кеш CDN на граничних вузлах (Cloudflare, BunnyCDN)

Після будь-якої зміни розміру шрифту послідовно очистіть усі активні кеші — спочатку кеш плагіна, потім кеш на рівні сервера, потім CDN. Невиконання цього є найпоширенішою причиною, через яку розробники повідомляють, що зміни CSS «не працюють».

Щоб вручну очистити кеш Nginx FastCGI на Linux VPS:

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

Для LiteSpeed Cache через WP-CLI:

wp litespeed-purge all

Практичний контрольний список для прийняття рішень

Використовуйте цей контрольний список, щоб вибрати правильний метод для вашої ситуації:

• Зміна одного абзацу або заголовка на одній сторінці — Використовуйте панель Typography блокового редактора Gutenberg.
• Зміна розміру шрифту для всього основного тексту або всіх заголовків у масштабах сайту — Використовуйте плагін типографіки або Theme Customizer, якщо ваша тема це підтримує.
• Використання блокової теми Full Site Editing — Використовуйте Site Editor (Appearance > Editor > Styles) та пресети theme.json.
• Потрібна адаптивна, плавна типографіка — Напишіть власний CSS з використанням clamp() у таблиці стилів дочірньої теми або Additional CSS.
• Потрібно, щоб зміни зберігалися після оновлень теми — Використовуйте дочірню тему, плагін або theme.json у власній блоковій темі.
• Потрібна відповідність вимогам доступності — Використовуйте одиниці rem або em; уникайте оголошень лише з px для основного тексту.
• Зміни не відображаються після редагування — Очистіть усі рівні кешування: плагін, сервер і CDN.
• Конфлікт між стилями блокового редактора та теми — Перевірте елемент у DevTools браузера, визначте пріоритетне правило CSS і відповідно налаштуйте специфічність.

FAQ

Яка одиниця найкраща для розмірів шрифту у WordPress: px, em або rem?

rem є рекомендованою одиницею для розмірів шрифту у WordPress. Вона відносна до кореневого елемента html, що робить її передбачуваною у вкладених компонентах та inherently доступною — налаштування розміру шрифту на рівні браузера, задані користувачем, автоматично враховуються. Використовуйте px лише для фіксованих декоративних елементів, де масштабування небажане.

Чому зміна розміру шрифту в редакторі Gutenberg не відображається на фронтенді?

Найпоширеніші причини: рівень кешування надає застарілу версію сторінки, правило таблиці стилів теми з вищою специфічністю CSS перевизначає вбудований стиль блоку, або плагін типографіки глобально скидає розміри шрифту. Відкрийте сторінку у вікні анонімного перегляду та перевірте елемент у DevTools, щоб визначити причину.

Чи можна змінити розміри шрифту у WordPress без плагіна або написання коду?

Так. Панель Typography блокового редактора Gutenberg дозволяє змінювати розмір шрифту для кожного блоку без написання коду. Theme Customizer також надає елементи керування розміром шрифту, якщо ваша активна тема їх реєструє. Жоден із підходів не потребує встановлення плагіна або знань CSS.

Чи вплине зміна розмірів шрифту в Theme Customizer на мій сайт після оновлення теми?

Самі налаштування зберігаються в базі даних WordPress і не будуть видалені оновленням теми. Однак якщо оновлення теми змінює базову структуру CSS або видаляє опцію Customizer, яка керувала розміром шрифту, візуальний результат може змінитися. Використання дочірньої теми та власного CSS є більш стійким до змін у батьківській темі.

Як задати різні розміри шрифту для мобільних пристроїв і десктопу у WordPress?

Використовуйте медіа-запити CSS на панелі Additional CSS або в таблиці стилів дочірньої теми, або використовуйте функцію clamp() для плавного масштабування. Блоковий редактор Gutenberg також підтримує налаштування типографіки для кожної контрольної точки в деяких темах через конфігурацію theme.json layout, хоча ця функція залежить від рівня реалізації теми.