Skip to content

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

🚀 Як перенести статичний HTML-сайт на WordPress: покрокове керівництво

🚀 Як перенести статичний HTML-сайт на WordPress: покрокове керівництво

Статичний HTML-сайт працював безвідмовно п’ять, сім, а то й десять років. Але в якийсь момент ви ловите себе на думці: додавати новий контент через FTP-клієнт набридло до скреготу, запустити блог неможливо без танців з бубном, а дизайн дихає ностальгією за епохою jQuery та Web 2.0. Знайомо?

WordPress давно переріс ярлик «рушія для блогів». За даними статистики за 2026 рік, на ньому працює 42,5% усіх сайтів в інтернеті, від корпоративних порталів до інтернет-магазинів і медіа рівня TechCrunch. І переїзд зі статичного HTML на WordPress — це не катастрофа для вашого контенту. Ви не втрачаєте позиції в пошуку, не переписуєте сайт з нуля і не жертвуєте дизайном. Але є нюанс: усе це працює, тільки якщо дотримуватися правильної послідовності кроків.

Нижче, вивірена на практиці методика міграції. Без паніки, з конкретними інструментами та сніпетами коду, які можна копіювати.

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

  • Складаєте чекліст: фіксуєте домен, структуру URL, обсяг контенту, сторонні сервіси та вимоги до хостингу до початку робіт
  • Розгортаєте WordPress на тестовому середовищі та вимикаєте індексацію для пошуковиків
  • Переносите контент: вручну для невеликих сайтів, через вбудований імпортер для відомих CMS, через скрипт або CSV-імпорт для нестандартних випадків
  • Оформлюєте зовнішній вигляд: готова тема з каталогу, преміум-тема з демо-імпортом, верстка власної теми з HTML-шаблону або фреймворк тем
  • Відновлюєте функціональність плагінами: SEO, безпека, кешування, форми, бекапи
  • Налаштовуєте 301-редиректи зі старих URL на нові через плагін Redirection або .htaccess
  • Перевіряєте всі сторінки, вмикаєте індексацію, спрямовуєте домен і запускаєтеся

Чекліст: що продумати до початку міграції

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

Домен. Залишаєте поточний чи берете новий? Якщо домен зберігається, міграція прозора для користувачів. Альтернатива: поставити WordPress у підкаталог yourdomain.com/wordpress/, а після повної готовності перенаправити домен на цей каталог. Так ви спокійно працюєте над новим сайтом, не чіпаючи старий.

Структура URL. HTML-файли зазвичай живуть за адресами на кшталт /about.html, /blog/post-title.html. Після переїзду на WordPress URL стануть чистими: /about/, /blog/post-title/. Зміна структури — це норма, але ви маєте бути готові налаштувати постійні 301-редиректи. Без них пошуковий трафік впаде в нуль за лічені дні.

Обсяг контенту. Порахуйте сторінки, пости, зображення, JS-файли. До 20-30 сторінок перенесення вручну займе пару годин. Сотні сторінок і медіафайлів, потрібен автоматизований імпорт або розробник, який напише скрипт-парсер.

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

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

Хостинг. На дешевому shared-тарифі WordPress працює, але гальмує. Під час міграції розумно переїхати на хостинг, оптимізований під WordPress. Шукайте тарифи з PHP 8.3 або вище, MariaDB 10.6+ (або MySQL 8.0+) і підтримкою актуального Apache або Nginx. Багато провайдерів пропонують встановлення WordPress в один клік прямо з панелі керування.

Важливо: перед будь-якими діями зробіть повний бекап HTML-сайту, всі файли та базу даних (якщо використовується). І не чіпайте працюючий сайт доти, доки новий не буде повністю готовий і протестований.

Крок 1: встановлення WordPress

Екран встановлення WordPress на хостингу

Встановити WordPress можна двома шляхами: локально для розробки й тестування або одразу на хостингу. Локальне середовище зручне: ви експериментуєте без ризику впустити живий сайт. Для Mac підійде MAMP, для Windows, Local від WP Engine або класичний XAMPP.

Якщо ставите одразу на хостинг, більшість провайдерів пропонують автоінсталятор WordPress у панелі керування. Три кліки, і рушій готовий до роботи.

Після встановлення зайдіть в адмінку WordPress: Налаштування → Читання і позначте галочку «Попросити пошукові системи не індексувати сайт». Поки ви переносите контент і тестуєте, пошуковики не повинні бачити проміжну версію. Коли сайт буде готовий, знімете галочку одним кліком.

На цьому ж етапі налаштуйте постійні посилання: Налаштування → Постійні посилання → Назва запису. Так ви отримаєте чисті URL (/nazvanie-posta/) замість стандартних /?p=123. Не відкладайте на потім: від структури URL залежить налаштування редиректів на наступних кроках.

Крок 2: імпорт контенту

Вміст сайту, текст, зображення, мета-поля, переміщується в WordPress одним із трьох способів, залежно від вихідної ситуації.

Сайт без CMS (чистий HTML). Контент переноситься вручну. Відкриваєте HTML-файл, копіюєте текст, вставляєте в редактор WordPress через кнопку «Вставити як звичайний текст», вона прибирає старе форматування. Зображення завантажуєте через медіабібліотеку. Сторінки створюєте в розділі Сторінки → Додати нову, пости, у Записи → Додати новий. Для сайту з 10-15 сторінок це займе годину-півтори. Для 50+ процес уже виснажливий, і тут розумніше найняти фрилансера або написати скрипт на Python для парсингу HTML і програмного створення записів через WP REST API.

Сайт на відомій CMS. WordPress пропонує вбудований інструмент імпорту: Інструменти → Імпорт. Там ви знайдете готові модулі для Blogger, Joomla, Drupal, Squarespace, Tumblr і десятка інших платформ. Запускаєте потрібний модуль, вказуєте файл експорту зі старої CMS, і записи, сторінки, медіафайли з’являються у WordPress автоматично. Повний список підтримуваних CMS дивіться в офіційній документації WordPress з імпорту контенту.

CMS є, а імпортера немає. Розробник пише скрипт-конвертер, який читає базу даних або API старої CMS і створює записи через wp_insert_post() або WP CLI. Альтернатива: експортуєте контент у CSV та імпортуєте через плагін WP All Import.

Порада: під час перенесення ведіть таблицю відповідності старих і нових URL. Колонка А: /about.html, колонка Б: /about/. Ця таблиця зекономить вам години на етапі налаштування переспрямувань.

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

Крок 3: оформлення сайту

Вибір теми в каталозі WordPress

Контент на місці, тепер сайт має виглядати гідно. Можливостей чотири:

  • Взяти готову тему з каталогу. На WordPress.org майже 14 000 безкоштовних тем. Фільтруєте за галуззю, макетом і функціями. Встановлення, один клік.

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

  • Зверстати з нуля або переробити HTML-шаблон. Підхід для розробників. Берете верстку свого HTML-сайту й оформлюєте її як тему WordPress: розбиваєте на header.php + footer.php + single.php і підключаєте WordPress-хуки. Трудомістко, але дає повний контроль над кожною деталлю.

  • Використати фреймворк тем. Genesis, GeneratePress або Kadence дають міцну основу, а дочірня тема додає кастомні стилі. Менше коду, вища продуктивність.

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

Крок 4: повертаємо функціональність плагінами

Встановлення плагінів в адмінці WordPress

Ваш старий сайт умів надсилати форми, показувати карту, збирати листи в розсилку. Усе це потрібно відтворити на WordPress, і тут у гру вступає екосистема з 61 000+ плагінів в офіційному каталозі.

Принцип простий: одна функція, один плагін. Не ставте монструозний комбайн «все в одному»: він роздмухає адмінку й уповільнить сайт. Ось мінімальний стартовий набір, який покриває базові потреби будь-якого сайту після міграції:

  • SEO: Rank Math або Yoast SEO, метатеги, XML-мапа сайту, Open Graph, schema-розмітка.
  • Безпека: Solid Security (раніше iThemes Security), двофакторна автентифікація, захист від брутфорсу, логування.
  • Кешування та швидкодія: WP Rocket (преміум) або W3 Total Cache (безплатний), стиснення, мініфікація CSS/JS, відкладене завантаження.
  • Форми: WS Form або WPForms, конструктор контактних і реєстраційних форм.
  • Резервне копіювання: UpdraftPlus, автоматичні бекапи в Google Drive, Dropbox або на FTP.

Специфічні потреби закриваються окремо: інтернет-магазин, WooCommerce, мультимовність, Polylang або WPML, форум, bbPress.

Правило: ставте плагіни лише з офіційного каталогу WordPress.org або з сайту перевіреного розробника. Плагін, який не оновлювався рік,, червоний прапорець. Плагін зі «збірки на торенті», гарантована діра в безпеці.

Крок 5: налаштування редіректів

Налаштування 301-редиректів у плагіні Redirection

Найнебезпечніше під час міграції, втратити пошуковий трафік через биті URL. Google індексував ваші HTML-сторінки роками, і кожна з них має вагу. Після переходу на WordPress /about.html перетворюється на /about/, і без редіректів відвідувач отримує 404.

Вирішується двома інструментами. Для більшості сайтів достатньо плагіна Redirection: 2 мільйони активних встановлень, керування через адмінку WordPress, логування всіх переходів. Додаєте правило «старий URL → новий URL», і плагін робить усе інше. Для моніторингу битих посилань додатково встановіть Broken Link Checker, він просканує сайт і покаже всі проблемні місця.

Якщо віддаєте перевагу ручному керуванню, редіректи прописуються у файлі .htaccess (для Apache-серверів) у корені сайту. Синтаксис простий:

1Redirect 301 /about.html https://yourdomain.com/about/
2Redirect 301 /folder/page.html https://yourdomain.com/page/

Перша частина, шлях до старої сторінки відносно кореня сайту, друга, повний URL нової сторінки (з протоколом https://). Якщо сторінки лежали в підкаталозі, шлях до файлу вказується повністю: /folder/page.html.

Після того як редіректи налаштовано, пройдіть за основними старими URL у браузері та переконайтеся, що вони коректно перекидають на нову адресу. Це 15 хвилин роботи, які рятують від катастрофи після запуску.

Крок 6: запуск і фінальна перевірка

Фінальна перевірка сайту перед запуском на WordPress

Фінальний ривок, шість дій, які перетворюють тестовий сайт на бойовий:

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

  • Скануйте биті посилання. Запустіть Broken Link Checker або зовнішній сервіс на кшталт W3C Link Checker. Кожна 404 — це втрачений відвідувач.

  • Налаштуйте SSL. Якщо на старому сайті HTTPS не було, зараз саме час. Більшість хостерів надають безплатний сертифікат Let's Encrypt в один клік.

  • Увімкніть індексацію. Налаштування → Читання → зніміть позначку «Видимість для пошукових систем». Додайте сайт у Google Search Console і надішліть XML-карту на повторний обхід.

  • Спрямуйте домен на новий сайт. Якщо WordPress стояв на піддомені або в підкаталозі, оновіть DNS-записи (A-запис у реєстратора або в панелі хостингу). DNS поширюється до 24-48 годин, але зазвичай, 1-2 години.

  • Зробіть фінальний бекап. Один, старого HTML-сайту (архів на згадку), другий, свіжого сайту на WordPress (на випадок, якщо щось зламається при першому ж редагуванні).

Після запуску моніторте Google Search Console перші два-три тижні. Бачите сплеск 404, оперативно додавайте редиректи для пропущених URL.

Наочно весь процес від початку до кінця показано в цьому відео:

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

Скільки часу займає перенесення HTML-сайту на WordPress?

Сайт із 10-15 сторінок без CMS, 4-6 годин роботи «під ключ»: встановлення, перенесення контенту, налаштування теми та плагінів, редіректи. Сайт на CMS із готовим інструментом імпорту, 1-2 години. Великий сайт із сотнями сторінок, від кількох днів до тижня, залежно від обсягу та складності автоматизації. Час вказано для людини, яка вже працювала з WordPress. Новачкові варто закласти запас на вивчення адмінки по ходу справи.

Я втрачу позиції в Google після міграції?

Короткочасне коливання позицій протягом перших двох тижнів, норма для будь-якої міграції. Але за правильно налаштованих 301-редіректів, збереженого контенту та оперативного надсилання XML-карти в Search Console позиції відновлюються і часто навіть зростають. WordPress із коробки SEO-friendly: чисті URL, швидкий відгук сервера з кешуванням, schema-розмітка через плагіни. Головна помилка, забути про редіректи або налаштувати їх неправильно. Друга, залишити тестовий сайт із noindex після запуску. Перевірте обидві.

Чи можна зберегти дизайн HTML-сайту під час переїзду?

Так. Ваш HTML-шаблон конвертується в тему WordPress. Для цього потрібно розділити верстку на стандартні файли теми (header.php + footer.php + functions.php + style.css) і замінити статичний контент на виклики WordPress-функцій: wp_title() для заголовка, цикл WordPress для виведення записів, wp_nav_menu() для меню. Розробник із досвідом інтеграції верстки в WordPress робить це за 1-2 дні для типового сайту.

Що робити з JavaScript-функціональністю старого сайту?

JS-скрипти підключаються в темі WordPress через wp_enqueue_script() у functions.php, це правильний шлях, тому що WordPress керує черговістю завантаження та вирішує конфлікти jQuery. Не підключайте скрипти голими тегами <script> у header.php, ризикуєте зламати роботу плагінів. Якщо функціональність складна (калькулятор, інтерактивна карта, кастомний плеєр), шукайте готовий плагін, який її відтворює. Писати з нуля має сенс, тільки якщо аналогів справді немає.

Чи потрібно змінювати хостинг під час переходу на WordPress?

Не обов’язково, але вкрай бажано. WordPress рекомендує PHP 8.3 або вище, MariaDB 10.6+ (або MySQL 8.0+) і підтримку mod_rewrite для красивих URL. Якщо ваш поточний shared-хостинг цим вимогам відповідає, залишайте. Якщо ні, переїжджайте на тариф, оптимізований під WordPress. Різниця у швидкості завантаження сторінок між звичайним і WordPress-оптимізованим хостингом може сягати 2-3 крат.

Переїзд без паніки: що робити після запуску

Міграція зі статичного HTML на WordPress — це не технічна катастрофа, а відпрацьований процес із шести кроків. Ви робите бекап, ставите WordPress на тестове середовище, переносите контент, оформлюєте сайт, налаштовуєте редіректи й запускаєтеся. Ключові точки, на яких найчастіше спотикаються: забуті 301-редіректи (прощавай, пошуковий трафік), незакрите від індексації тестове середовище (привіт, дублі в Google) і плагіни із сумнівних джерел (здрастуй, злам).

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

І головне: не дивіться на міграцію як на «переїзд того самого на інший рушій». Це можливість освіжити контент, причесати дизайн і закласти фундамент для зростання, блогу, розсилки, портфоліо. WordPress дає інструменти, яких у статичного HTML не було ніколи. Почніть із встановлення сьогодні, і через пару днів у вас буде сайт, яким зручно керувати без FTP-клієнта й текстового редактора.