Перейти до вмісту
themeforge
UA
EnglishDeutschEspañolFrançaisУкраїнськаРусский
Почати безплатно
Меню
Почати безплатно Як це працює ДжерелаHTML Будь-який статичний сайтClaude Сайти, написані ClaudeChatGPT Сайти, написані ChatGPTCursor Проєкти в CursorWebflow Сайти на WebflowУсі джерела → МожливостіМагазин на WooCommerce Каталог, товар, кошик, оформленняБагатомовний сайт Polylang і WPMLФорми та заявки Заявки зберігаються в адмінці ThemeForge Документація Ціни Увійти
Довідник атрибутів AI генерація Початок роботи Доступ Вихідний код на вашому сайті Theme Reference

Початок роботи

Це керівництво проведе вас через весь процес: від створення проекту в ThemeForge до працюючого WordPress сайту з редагованим контентом в адмінці.

1. Створіть проект

  1. Увійдіть в ThemeForge та перейдіть до розділу Проекти
  2. Натисніть «Новий проект» і введіть адресу джерела. Якщо сайт — лише папка чи архів (наприклад, згенерований нейромережею), замість адреси позначте «Джерело буде завантажено на сайті» — див. «Вихідний код на вашому сайті».
  3. Налаштуйте параметри проекту: назва теми, слаг, сторінки для включення
  4. Натисніть «Згенерувати» — ThemeForge створить ZIP-файл з вашою WordPress темою

Підтримувані джерела

  • Webflow — вставте URL .webflow.io або .webflow.com. ThemeForge завантажить усі сторінки та ресурси автоматично
  • Звичайний HTML — будь-який статичний сайт з HTML/CSS/JS/зображеннями. Завантажте як ZIP або вкажіть URL
  • HTML від AI — сайти, згенеровані з Figma або AI-асистентами з уже розставленими атрибутами ThemeForge

2. Встановіть тему

  1. Завантажте згенерований ZIP-файл зі сторінки проекту
  2. В адмінці WordPress перейдіть до Зовнішній вигляд → Теми → Додати → Завантажити тему
  3. Виберіть ZIP-файл та натисніть Встановити
  4. Натисніть Активувати — ваша тема тепер активна

Важливо: проект повинен містити головну сторінку (/). Вона обов'язкова для генерації теми.

Тема автоматично включає сторінку помилки 404 та сторінку результатів пошуку — додаткове налаштування не потрібне.

Що відбувається після активації

  • Усі сторінки з вашого дизайну створюються як сторінки WordPress
  • Кастомні поля з'являються в адмінці для кожної сторінки (організовані по секціях)
  • Панель налаштувань теми доступна в Зовнішній вигляд → Налаштування теми
  • CSS, JS, зображення та шрифти з вашого дизайну включені в тему

Віддалене оновлення (альтернатива)

Замість завантаження ZIP можна вказати URL вашого WordPress сайту в налаштуваннях проекту. ThemeForge відправить тему напряму на ваш WordPress.

3. Імпорт контенту

Після встановлення теми потрібно імпортувати контент (текст, зображення) з вашого дизайну в WordPress. ThemeForge зберігає весь контент з HTML у файлі pages.json всередині теми.

Порядок імпорту

Завжди імпортуйте в такому порядку, щоб зображення були доступні коли текстові поля посилаються на них:

  1. Спочатку зображення — завантажує усі зображення з папки images/ теми в медіатеку WordPress
  2. Потім дані — заповнює усі текстові поля, посилання та зображення для кожної сторінки
  3. Потім меню — створює навігаційні меню WordPress з усіма посиланнями з дизайну

Імпорт усього одразу

Кнопки імпорту знаходяться в адмінці WordPress: Зовнішній вигляд → Налаштування теми → вкладка Адмін-панель. Там дві кнопки:

  1. «Завантажити медіа» — завантажує усі зображення з папки images/ теми в медіатеку WordPress
  2. «Завантажити дані» — заповнює усі текстові поля, посилання та зображення для всіх сторінок одразу
  3. Для меню використовуйте кнопки імпорту на сторінці Зовнішній вигляд → Меню (див. «Імпорт меню» нижче)

Імпорт окремих сторінок

На кожній сторінці є свої кнопки імпорту. Відкрийте будь-яку сторінку для редагування в WordPress — у бічній панелі з'явиться метабокс «ThemeForge Import» (натисніть щоб розгорнути). Дві кнопки: «Завантажити дані» та «Завантажити медіа». Імпорт однієї сторінки не зачіпає інші.

Особливо зручно, коли ви оновили одну сторінку в дизайні та хочете переімпортувати лише її, не чіпаючи решту сайту.

Імпорт опцій сайту

Глобальні налаштування (телефон, email, логотип) мають свій імпорт. Перейдіть до Зовнішній вигляд → Налаштування теми → вкладка Опції — у бічній панелі з'явиться блок «ThemeForge Import».

Імпорт меню

Перейдіть до Зовнішній вигляд → Меню — там з'явиться «ThemeForge — Імпорт меню з HTML». Можна імпортувати кожне меню окремо або всі одразу.

Імпорт та переклад для різних мов

З Polylang кожна мова має свій «шар» полів. При натисканні «Завантажити дані» на перекладеній сторінці — оригінальний контент з дизайну імпортується в поля цієї мови. Потім його можна перекласти вбудованим помічником — натисніть «Перекласти» біля поля або «Перекласти все» для всієї сторінки. Все прямо в адмінці WordPress.

Як локалі Webflow: кожна мова — окремий шар. Імпортуйте базовий контент, перекладіть на місці — поля кожної мови незалежні.

4. Редагування в панелі теми

Після імпорту контент редагується з адмінки WordPress. Тема генерує кастомні поля для елементів з атрибутами ThemeForge. Важливо: поля в адмінці створюються тільки для елементів всередині секції wp-fields-group — елементи без wp-fields-group конвертуються в PHP, але не мають редагованих полів.

Де знайти ваш контент

  • Поля сторінки — відкрийте будь-яку сторінку в WordPress, прокрутіть нижче редактора. Поля згруповані по секціях з вкладками
  • Глобальні налаштування (телефон, email, логотип) — Зовнішній вигляд → Налаштування теми → вкладка Опції
  • Конфігурація теми (перемикання бекенду, безпека, розширення) — Зовнішній вигляд → Налаштування теми

Secure Custom Fields vs ACF Pro

За замовчуванням тема використовує Secure Custom Fields — безкоштовний плагін із WordPress.org, що дає всі типи полів ACF PRO без ліцензії. Хочете свій ACF PRO? Встановіть його — тема використає його автоматично. Дані полів зберігаються в будь-якому разі, без втрати контенту.

5. Мультимовність (опціонально)

Мультимовність — додаткова опція, тема чудово працює і без неї. Якщо потрібні кілька мов, встановіть Polylang (безкоштовно) або WPML.

Налаштування Polylang

  1. Встановіть та активуйте Polylang з WordPress → Плагіни → Додати
  2. Перейдіть до Мови → Налаштування та додайте ваші мови
  3. Тема автоматично визначить Polylang та покаже перемикач мов в налаштуваннях теми
  4. Відкрийте перекладену сторінку в WordPress, натисніть «Завантажити дані» в метабоксі ThemeForge Import, потім використовуйте кнопки «Перекласти» для перекладу полів

Вбудований помічник перекладу

В темі є кнопка перекладу в один клік. Перемкніться на мову, натисніть «Перекласти» — використовується Google Translate для чернетки. Є також «Перекласти все».

6. Сумісні плагіни

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

Протестовано та сумісно

  • Yoast SEO / Rank Math — повна сумісність
  • Плагіни кешу (WP Super Cache, W3 Total Cache, LiteSpeed Cache) — повністю сумісні
  • Polylang — глибока інтеграція: поля по мовах, помічник перекладу, мовний імпорт
  • WPML — підтримується: автовизначення, мовні поля працюють коректно
  • WooCommerce — повна підтримка: сторінки товарів, кошик, оформлення, фільтри, варіативні товари
  • ACF Pro — нативна підтримка як альтернативний бекенд
  • Будь-який інший плагін WordPress — тема стандартна, тому будь-який плагін, що працює з WordPress, працюватиме і з темами ThemeForge

Вбудовані форми

Теми ThemeForge включають повну систему форм — сторонні плагіни форм не потрібні. Можливості: відправка через SMTP, сповіщення в Telegram, reCAPTCHA v3, антиспам, автовідповідь, валідація (JustValidate). Усі заявки зберігаються в WordPress з експортом у CSV. Налаштування: Налаштування теми → вкладка Розширення.

7. Кастомний код та захищені файли

Потрібно додати свої PHP-функції, CSS або JavaScript? Є два варіанти:

Плагін Code Snippets (рекомендовано)

Встановіть плагін Code Snippets — він дозволяє додавати PHP, CSS та JS прямо з адмінки WordPress. Сніпети зберігаються в базі даних, тому переживуть будь-яке оновлення теми.

Користувацькі файли теми

В темі є захищені файли, які не перезаписуються при оновленні:

  • user-functions.php — кастомні PHP-функції
  • css/user.css — кастомні CSS-стилі (завантажуються після CSS теми)
  • js/user.js — кастомний JavaScript

Також можна позначити будь-який файл як захищений за допомогою атрибута wp_include в HTML. Ці файли потраплять до themeforge_protected.json.

Порядок завантаження CSS: main.css (ваш дизайн) → themeforge.css (згенеровані перевизначення) → user.css (ваші кастомізації). user.css завжди перемагає.

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

8. Бекапи

Робіть регулярні бекапи та обов'язково — перед критичними операціями: масовий імпорт контенту, перемикання бекенду, великі оновлення теми.

Бекапи хостингу

Більшість хостинг-провайдерів пропонують автоматичні щоденні бекапи. Перевірте панель хостингу (cPanel, Plesk, HestiaCP). Це ваша перша лінія захисту.

Плагіни бекапів

  • UpdraftPlus — бекапи за розкладом у хмару (Google Drive, Dropbox, S3)
  • Duplicator — повні снапшоти сайту, чудово для міграції
  • All-in-One WP Migration — простий експорт/імпорт усього сайту в один клік

Порада: налаштуйте автоматичні періодичні бекапи (щоденно або щотижня) та робіть ручний перед критичними операціями. Якщо щось піде не так — відновите за хвилини.