Skip to content

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

💡 Як створити сайт WordPress з динамічним контентом: два робочих методи

💡 Як створити сайт WordPress з динамічним контентом: два робочих методи

Зверстали головну, додали меню, і застрягли. Під кожним пунктом меню своя сторінка: «Тренажерний зал на Арбаті», «Тренажерний зал у Строгіно», ще два десятки таких самих. Копіювати-вставити в редакторі? За тиждень підприємець змінює ціну на абонемент, і ви йдете правити 20 сторінок руками.

Динамічний контент WordPress прибирає цей біль повністю. Один шаблон, і десятки (або сотні) сторінок збираються автоматично з бази даних. Без копіювання. Без програміста на кожен чих. Нижче, два робочі методи, які закривають переважну більшість реальних задач: від карток філій до каталогів і портфоліо.

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

  • Що таке динамічний контент і чим він відрізняється від статичного, з конкретним прикладом
  • Метод 1: Toolset Blocks, візуальний конструктор шаблонів на базі Gutenberg, без жодного рядка коду
  • Метод 2: Total Theme, вбудовані динамічні шаблони через WPBakery, для тих, хто вже сидить на Total
  • Порівняльна таблиця методів + матриця вибору під вашу задачу

Що таке динамічний контент і чому статика програє

Звичайна WordPress-сторінка — це статика. Текст, зображення, кнопка, все вбито руками в редакторі. Якщо у вас мережа з 30 фітнес-клубів і в кожного своя сторінка з адресою, фото та ціною, ви або копіюєте контент 30 разів, або кличете розробника правити шаблони PHP.

Динамічний контент працює інакше. Дані зберігаються окремо від верстки, у настроюваних полях (Custom Fields) і таксономіях. WordPress збирає сторінку на льоту: підставляє заголовок, ціну, галерею та контакти з бази в заздалегідь підготовлений шаблон.

Схема роботи динамічного контенту в WordPress

Механіка проста. Коли відвідувач відкриває сторінку «Тренажерний зал у Строгіно», система йде в базу, знаходить запис із цією назвою, дістає пов’язані поля та рендерить готову сторінку. Для сторінки «Тренажерний зал на Арбаті», той самий шаблон, але інші дані.

Чим це краще за статику:

  • Одна зміна, everywhere. Змінили ціну в настроюваному полі, оновилися всі сторінки, де ця ціна виводиться. Без заходу в кожну.
  • Контент-менеджер не ламає верстку. Шаблон задаєте ви, команда лише заповнює поля: заголовок, опис, ціну. Дизайн не поїде.
  • Масштабування без болю. Додати соту філію, створити новий запис і заповнити поля. Сторінка готова за хвилину.
  • Адаптивність із коробки. Динамічний шаблон успадковує responsive-сітку теми, мобільна версія не потребує окремих танців.
Приклад статичної сторінки WordPress

Статика ліворуч, контент жорстко вшитий у сторінку. Динаміка праворуч, ті самі дані, але зібрані шаблоном із бази.

Приклад динамічної сторінки WordPress з підстановкою даних

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

Нижче, два інструменти під різні сценарії. Обидва перевірені на практиці.

Метод 1: Toolset Blocks, візуальні шаблони на Gutenberg

Плагін Toolset Blocks у WordPress

Toolset Blocks — це комерційний плагін від команди, яка понад десять років робить інструменти для роботи з настроюваними типами записів і полями в WordPress. Плагін додає в редактор Gutenberg блоки з динамічними джерелами: замість «встав зображення ось це» ви кажете «встав featured image поточного запису».

🔗 Toolset Blocks, офіційний сайт

Головна перевага, нульовий поріг входу. Жодного рядка коду. Жодного functions.php. Ви просто збираєте шаблон у візуальному редакторі з готових блоків: Image, Heading, Single Field, і призначаєте джерело даних. Для кожної сторінки система сама підставить правильний контент.

Як Toolset Blocks працює під капотом

Плагін дає два ключові механізми:

  • Шаблони контенту (Content Templates). Ви створюєте єдиний макет для всіх записів певного типу, наприклад, для «Тренажерних залів». Усередині шаблону розміщуєте блоки Toolset із прив’язкою до динамічних джерел. Коли відкривається будь-який запис цього типу, WordPress рендерить шаблон і підставляє конкретні дані.
  • Динамічні джерела для блоків. Кожен блок Toolset уміє брати дані не «як вбито в редакторі», а з бази: featured image, значення настроюваного поля, заголовок запису, таксономію. Ви один раз налаштовуєте, система підставляє.
Приклад шаблону контенту Toolset Blocks для фітнес-клубу

Створюємо шаблон: покроково

Перед стартом встановіть Toolset Blocks (плагін платний, посилання вище). Також корисно освіжити основи редактора Gutenberg, шаблони збираються саме в ньому.

Крок 1: Створіть шаблон контенту

Перейдіть у Toolset → Dashboard і натисніть Create Content Template навпроти потрібного типу запису, у нашому прикладі це «Gyms» (тренажерні зали).

Створення шаблону контенту в Toolset Dashboard

Відкриється редактор Gutenberg. Далі, збирання шаблону з блоків.

Крок 2: Додайте динамічне зображення

Натисніть + у верхньому лівому куті редактора, щоб відкрити панель блоків. Прокрутіть до секції Toolset і виберіть блок Image.

Додавання блоку в редакторі Gutenberg

У панелі, що відкрилася, знайдіть секцію Toolset і виберіть блок Image.

Вибір блоку Image зі списку Toolset

Система запитає: використовувати динамічні джерела? Натисніть Yes (Так).

Запит на використання динамічних джерел

Виберіть джерело, Featured Image Data. Тепер замість однієї картинки для всіх сторінок блок відображатиме вибране зображення конкретного запису.

Вибір джерела Featured Image Data для динамічного зображення

У правій бічній панелі можна доналаштувати розмір, вирівнювання та CSS-класи зображення.

Налаштування динамічного зображення на бічній панелі

Крок 3: Підключіть настроюване поле

Тепер додамо рейтинг, значення, яке зберігається в настроюваному полі «Rating» для кожної зали.

У списку блоків Toolset виберіть Single Field.

Додавання блоку Single Field з Toolset

У правій панелі, в розділі Field Source, вкажіть:

  • Тип поля, Custom Field;
  • Група полів, ваш тип запису (Gyms);
  • Саме поле, Rating (рейтинг).
Налаштування джерела динамічного поля Rating

Усе. Тепер під час перемикання між сторінками різних зал у цьому місці відображатиметься правильний рейтинг. Нуль рядків коду.

Результат

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

Готовий динамічний шаблон на фронті сайту

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

Метод 2: Total Theme, вбудовані динамічні шаблони через WPBakery

Створення динамічного шаблону в Total Theme

Якщо ви вже використовуєте тему Total (одна з найпопулярніших premium-тем на ThemeForest, 55 000+ активних встановлень), динамічні шаблони у вас вбудовані «з коробки». Жодних додаткових плагінів не потрібно.

🔗 Total Theme на офіційному сайті

Total працює у зв'язці з WPBakery Page Builder (включений у тему, не потрібно купувати окремо). Динамічні шаблони тут називаються Dynamic Templates і будуються на елементах WPBakery з динамічними джерелами, логіка схожа на Toolset, але в іншому інтерфейсі.

Що Total дає для динамічного контенту

  • Елемент Post Media, автоматично підставляє featured image, галерею або відео із запису. Один елемент для всієї медійної частини.
  • Елемент Post Content, виводить основний контент запису (те, що в редакторі).
  • Post Title, Post Meta, Related Items, Social Links, десятки готових елементів для складання шаблону під будь-який тип контенту.

Плюс до цього: 90+ патернів WPBakery, 40+ готових демо-сайтів для імпорту, Slim Mode (вимикає непотрібні скрипти WPBakery для пришвидшення), 450+ сніпетів для розробників.

Створюємо динамічний шаблон у Total

Крок 1: Новий шаблон

Перейдіть у WPBakery Page Builder → Templates і натисніть Add New. Дайте шаблону ім'я, наприклад, «Картка портфоліо».

Додавання елементів Post Media та Post Content у шаблон Total

Крок 2: Додайте динамічні елементи

Першим ділом додайте елемент Post Media, він відобразить усі медіафайли, прикріплені до запису: вибране зображення, галерею, відео.

Потім увімкніть модуль Post Content, він виведе текст із редактора запису.

За бажанням додайте Post Title (заголовок запису), Post Meta (дата, автор, рубрики), Related Items (схожі записи) і Social Links (кнопки «Поділитися»).

Коли закінчили, натисніть Publish.

Крок 3: Призначте шаблон типу запису

Перейдіть у Appearance → Customize, потім у розділ Portfolio (або ваш кастомний тип запису) і виберіть створений шаблон у випадному списку Dynamic Template (Advanced).

Призначення динамічного шаблону в кастомайзері Total Theme

Результат

Збережіть зміни, і всі записи портфоліо автоматично отримають новий макет. Медіа, заголовки, контент підставляться з кожного конкретного запису.

Динамічний шаблон портфоліо на фронті сайту

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

Toolset Blocks чи Total Theme: що обрати

Обидва інструменти вирішують одне завдання, але підходять різним людям і різним сценаріям. Нижче, чесне порівняння за ключовими параметрами.

Критерій

Toolset Blocks

Total Theme

Поріг входу

Нижчий: тільки Gutenberg, візуально

Середній: потрібно освоїти WPBakery

Код

Не потрібен взагалі

Не потрібен для шаблонів; для кастомізації, 450+ готових сніпетів

Фреймворк

Gutenberg (вбудований у WordPress)

WPBakery (включений у тему)

Гнучкість

Вища: окремий плагін, працює з будь-якою темою

Прив'язаний до Total: якщо зміните тему, втратите шаблони

Ціна

Підписка Toolset (від $69/рік)

Тема Total $59 (разова, включає WPBakery)

Для кого

Новачок на будь-якій темі; потрібен максимум контролю над полями

Власник Total; фрилансер, який робить сайти потоково

Супутні плюси

Types (типи записів), Views (виведення списків), у комплекті

40+ демо, Slim Mode, 80+ своїх елементів WPBakery

Мінуси

Платна підписка; залежність від екосистеми Toolset

Прив'язка до однієї теми; WPBakery не всім подобається

Матриця вибору

  • Ви тільки починаєте, тема будь-яка, беріть Toolset Blocks. Поріг входу нульовий, результат за годину.
  • Уже сидите на Total, не винаходьте велосипед. Вбудовані Dynamic Templates покривають завдання повністю, без додаткових витрат.
  • Робите сайти клієнтам потоково, Total. Шаблон один раз, демо-імпорт для швидкого старту, клієнт заповнює поля і не ламає верстку.
  • Потрібні складні зв'язки та фільтри, Toolset. Views і настроювані типи записів у комплекті дають значно більше можливостей для кастомної логіки.

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

Чи можна зробити динамічний контент безкоштовно?

Так, зв'язкою плагінів Advanced Custom Fields (ACF, безкоштовна версія) + невеликий PHP-код у файлах теми. Але це потребує хоча б базового розуміння WordPress-хуків. Для новачка Toolset або Total окупаються зекономленими годинами гугління та налагодження. Безкоштовний шлях реальний, але крива навчання крутіша. ACF дає поля, а от як їх вивести в шаблоні, вирішувати вам. Для одиничного проєкту з простою структурою (адреса, телефон, картинка), ок. Для клієнтських сайтів і складних зв'язків інструменти зі статті економлять дні.

Toolset Blocks чи ACF, що краще?

Різні ніші. ACF — це конструктор полів. Toolset, екосистема: поля + типи записів + візуальні шаблони + Views для виведення списків. Якщо вам потрібні тільки поля, ACF легший і в нього величезна спільнота. Потрібен безкодовий конвеєр від поля до готової сторінки, Toolset. На практиці часто використовують ACF для полів і Toolset для шаблонів, вони сумісні. Але якщо починаєте з нуля і не хочете коду, Toolset покриває все один.

Чи працює це з будь-якими темами?

Toolset Blocks, так, з будь-якою темою, що підтримує Gutenberg (а це практично всі сучасні теми). Total Theme, тільки на своїй темі — це очевидно. Але Total дає натомість повну інтеграцію: не треба стежити за сумісністю, все протестовано вендором.

Що буде з динамічними шаблонами при зміні теми?

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

Скільки часу займає налаштування?

Перший шаблон у Toolset, близько години (розібратися в інтерфейсі + зібрати макет). Кожен наступний, 15-20 хвилин. У Total, схожі цифри: перший шаблон година, наступні швидше. Критичної різниці за швидкістю немає.

Що ставити під ваше завдання

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

Якщо коротко: Toolset Blocks, для максимальної гнучкості без прив'язки до теми. Total Theme, якщо ви вже на Total або будуєте сайти клієнтам потоково. Обидва варіанти працюють. Вибирайте той, під який у вас уже є фундамент, і збирайте перший шаблон сьогодні.