Skip to content

Все для WordPress, веб-розробки — і не тільки

📝 Як додати текст на зображення запису в WordPress

📝 Як додати текст на зображення запису в WordPress

Ви обрали ідеальне зображення для запису, завантажили його як featured image, опублікували пост, а підпис не з’явився. Або з’явився, але не там і не так, як ви хотіли. Знайома ситуація?

WordPress сам по собі не виводить підписи до вибраних зображень на сторінці запису. За це відповідає тема, і далеко не кожна тема товаришує з caption із медіатеки. Хороша новина в тому, що додати текст поверх featured image можна без правок шаблонів і без найму розробника: вистачить вбудованого блока, одного безплатного плагіна або конструктора сторінок.

Нижче, три робочі способи для будь-якої версії WordPress (від 6.0 і вище), від найпростішого до найгнучкішого. Без коду, без ризику зламати сайт і з живими скриншотами кожного кроку.

Спочатку перевірте, чи підтримує ваша тема підписи до вибраних зображень

💡 Швидкий огляд:

  • Перевірте підтримку підписів до featured image у вашій темі WordPress
  • Додайте текстовий оверлей через вбудований блок Cover у редакторі Gutenberg
  • Установіть безплатний плагін FSM Custom Featured Image Caption для гнучких підписів
  • Створіть кастомний шаблон запису в Elementor Pro для повного контролю

Перш ніж ставити плагіни й розбиратися з блоками, відкрийте будь-який запис на сайті та подивіться, чи виводиться підпис під featured image прямо зараз?

Річ у тім, що частина тем WordPress уміє працювати з полем «Заголовок» із медіатеки автоматично. Наприклад, стандартна тема Twenty Twenty (і більшість сучасних блокових тем на Full Site Editing) сама підхоплює заголовок, заданий для зображення в бібліотеці:

Підпис до обраного зображення в темі Twenty Twenty

Заголовок задається тут само, у медіатеці WordPress, поле «Заголовок» під час редагування файлу:

Поле заголовка зображення в медіатеці WordPress

Якщо ваша тема підтримує цю механіку, ви розв’язали задачу за 30 секунд. Достатньо заповнити «Заголовок» у кожного зображення, і тема сама виведе його під featured image на сторінці запису.

Але працює це далеко не в усіх. Роком раніше та сама Twenty Nineteen заголовок із медіатеки не показувала. І більшість комерційних тем, теж ні. Тому переходимо до методів, які працюють гарантовано.

1. Блок «Обкладинка» в редакторі Gutenberg

Найпростіший і при цьому повністю нативний спосіб, вбудований блок Cover. Він з’явився із запуском редактора Gutenberg і відтоді стабільно оновлюється: у сучасних версіях WordPress підтримує фонове відео, фільтри накладення, закріплений фон і повноширинні розкладки.

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

У редакторі записів додайте новий блок, виберіть Cover (або наберіть /cover), завантажте зображення та впишіть текст:

Блок Cover з текстом поверх зображення в редакторі Gutenberg

На фронтенді це виглядає як повноцінний банер із текстом поверх featured image:

Результат роботи блока Cover з текстовим накладенням на сайті

Пара важливих нюансів. По-перше, блок Cover технічно не пов’язаний із featured image запису — це окремий медіафайл усередині контенту. Якщо тема все ж виводить featured image автоматично, зображення подвоїться. Рішення: у налаштуваннях теми (через Customizer або редактор сайту для FSE-тем) вимкніть автоматичний вивід featured image для single post і залиште тільки блок Cover.

По-друге, блок Cover дає текст поверх зображення, але не класичний підпис «під зображенням». Якщо вам потрібен саме підпис (як у фото в статті), дивіться наступний метод.

FSM Custom Featured Image Caption, безкоштовний плагін з WordPress.org, який вирішує рівно одне завдання: додає настроюваний підпис до featured image. Працює і з Gutenberg, і з класичним редактором, і навіть із темами Divi (через опцію сумісності в налаштуваннях).

Станом на квітень 2026 року плагін має версію 1.26, 5 000+ активних встановлень і рейтинг 4,6/5. Він регулярно оновлюється, останній реліз вийшов 27 квітня 2026.

Встановіть плагін через Плагіни → Додати новий, активуйте. Потім перейдіть у Налаштування → FSM Custom Featured Image Caption і налаштуйте поведінку:

Сторінка налаштувань плагіна FSM Custom Featured Image Caption

Головні опції, на які варто звернути увагу:

  • Show image captions in lists, увімкніть, якщо хочете бачити підписи не лише всередині запису, а й на сторінках архіву/категорій;
  • CSS for caption text, клас(и) для стилізації підпису (за замовчуванням wp-caption-text);
  • Allow HTML code, дозволяє HTML усередині тексту підпису;
  • Custom Style, поле для інлайн-CSS, якщо потрібно зсунути підпис поверх зображення.

За замовчуванням плагін бере заголовок із поля «Заголовок» медіатеки WordPress і виводить його як стандартний підпис під featured image:

Підпис до featured image зі стилем за замовчуванням у плагіні FSM

Якщо хочете, щоб текст «плавав» поверх зображення, додайте в поле Custom Style приблизно такий CSS:

position: relative; bottom: 50px; left: 35px; color: white; font-size: 22px;

Результат: текст зміщується вгору і накладається на нижню частину зображення:

Текст підпису поверх зображення через CSS у плагіні FSM

FSM також дає шорткод [FSM_featured_image] для ручного розміщення featured image з підписом у будь-якому місці контенту, з параметром size для вибору одного зі стандартних розмірів WordPress. А для розробників є PHP-функції get_FSM_featured_image_caption() і the_FSM_featured_image_caption() з детальними параметрами виводу.

3. Конструктор Elementor Pro, повний контроль над шаблоном запису

Якщо вам потрібно не просто «додати підпис», а повністю керувати тим, як виглядає сторінка запису, з довільним розташуванням featured image, тексту, метаданих і коментарів, підключайте Elementor Pro.

Ключовий інструмент тут, Theme Builder. Він дає змогу створити кастомний Single Post Template: шаблон, який автоматично застосовується до всіх записів (або до вибраних категорій) і збирається у візуальному редакторі Elementor з віджетів.

Як це робиться:

  • Встановіть безкоштовний Elementor і активуйте Elementor Pro (функція Theme Builder доступна тільки у Pro-версії).
  • Перейдіть у Templates → Theme Builder → Add New, виберіть тип Single Post.
  • У редакторі Elementor перетягніть віджет Featured Image на полотно — це ваше вибране зображення.
  • Додайте віджет Post Title (або Heading з динамічним тегом) поверх зображення, налаштуйте позиціювання через Absolute Positioning (доступне в Pro).
  • Опублікуйте шаблон, він застосується до всіх записів сайту.

У налаштуваннях віджета Featured Image можна вибрати розмір (thumbnail, medium, large, full) і задати вирівнювання:

Налаштування віджета Featured Image в Elementor Theme Builder

Elementor Pro коштує грошей (від $59/рік за один сайт станом на червень 2026, актуальні ціни на elementor.com/pricing), і для задачі «просто додати текст поверх картинки» це забагато. Але якщо ви вже користуєтеся Elementor для дизайну сайту, Theme Builder повністю закриває питання з featured image, плюс дає контроль над шапкою, підвалом, сторінками архівів і 404.

⁉️🤔 Часті запитання

Чи можна додати текст поверх featured image без плагінів?

Так, через вбудований блок Cover у редакторі Gutenberg. Ви додаєте блок на початок запису, ставите зображення фоном і пишете текст поверх. Мінус: блок не пов’язаний із полем «Featured Image» запису, коли ви змінюєте featured image в адмінці, блок Cover сам не оновиться, картинку доведеться міняти вручну. Плюс: працює взагалі без плагінів, навіть на WordPress без права встановлення розширень.

Чи підтримує FSM Custom Featured Image Caption тему Divi?

Так, починаючи з версії 1.21 у налаштуваннях плагіна є опція «Enable compatibility with Divi themes». Вона замінює стандартну функцію виведення featured image у Divi на хук плагіна. Рішення експериментальне (залежить від версії Divi та конкретного макета), але для більшості типових розкладок працює. Якщо підпис не з’явився, найімовірніше, доведеться дописати CSS у Customizer.

Що робити, якщо після активації FSM-плагіна підпис не відображається?

Три найчастіші причини. Перша: тема не використовує get_the_post_thumbnail() для виведення featured image (рідко, але трапляється в кастомних темах). Друга: поле «Заголовок» у медіатеці не заповнене, а кастомний підпис у редакторі запису не вказано, плагіну немає що виводити. Третя: конфлікт CSS теми (підпис є в HTML, але візуально прихований або зливається з фоном). Перевірте код сторінки через інспектор браузера: якщо тег <figcaption> із класом wp-caption-text присутній, справа в CSS.

Чим FSM відрізняється від закритого Featured Image Caption?

Плагін Featured Image Caption (by Christiaan Conover) було закрито на WordPress.org у квітні 2025 року через порушення правил директорії, і він більше не доступний для встановлення. FSM Custom Featured Image Caption — це жива й оновлювана альтернатива: версія 1.26 від квітня 2026, активна підтримка, більше налаштувань (зокрема шорткод, PHP-функції для розробників і режим сумісності з Divi). Якщо ви користувалися Featured Image Caption раніше, переходьте на FSM, логіка роботи аналогічна, а можливостей більше.

Чи потрібен Elementor Pro, якщо я просто хочу підпис під featured image?

Ні. Elementor Pro з Theme Builder — це інструмент повного контролю над шаблоном запису, а не спеціалізоване рішення для підписів. Якщо завдання обмежується текстом поверх або під featured image, вам вистачить блока Cover (безплатно, нативно) або плагіна FSM (безплатно, гнучко). Elementor Pro має сенс, коли ви в принципі будуєте дизайн записів на Elementor і хочете керувати featured image в межах єдиної дизайн-системи сайту.

Який спосіб підійде вашому сайту?

Вибір зводиться до трьох сценаріїв, і відповідь залежить від того, як влаштований ваш сайт просто зараз.

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

Якщо потрібен саме підпис як окремий елемент (текст під картинкою, зі стилізацією та підтримкою шорткодів), ставте FSM Custom Featured Image Caption. Він безплатний, регулярно оновлюється й покриває переважну більшість сценаріїв «підпис до featured image».

Якщо ви вже в екосистемі Elementor Pro, Theme Builder закриє питання дизайну записів повністю, включно з featured image із текстом, метаданими, бічною колонкою та коментарями. Але для самого лише підпису купівля Pro-ліцензії не виправдана: починайте з блока Cover або FSM.

Спробуйте найпростіший спосіб під ваш сценарій просто зараз, і якщо щось піде не так, повертайтеся із запитанням у коментарі. Ми відповідаємо.