SebWeo.com
Статичний HTML-сайт — це як будинок, збудований за індивідуальним проєктом. Він надійний, швидкий і виглядає саме так, як ви задумали. Але є проблема: щоб пересунути меблі або додати нову кімнату, вам щоразу потрібно викликати бригаду будівельників (веб-розробників). WordPress — це система “розумний дім”, яка дозволяє вам керувати всім за допомогою зручної панелі.
Перенесення сайту з HTML на CMS WordPress — це крок від статичної вітрини до динамічного, гнучкого та масштабованого вебресурсу. В даному уроці я детально, з кодом та прикладами, розкажу два основні шляхи для такої міграції.
Перш ніж занурюватися в технічні деталі, стисло нагадаю, заради чого все це робиться.
Існує два основні підходи до перетворення HTML-сайту на WordPress. Вибір залежить від вашого бюджету, часу та технічних навичок.
| Критерій | Ручний метод (Створення теми) | Автоматизований (За допомогою плагінів) |
|---|---|---|
| Рівень складності | Високий (потрібні знання HTML, CSS, PHP) | Низький / Середній |
| Контроль та якість | Повний контроль, чистий код | Обмежений контроль, можливий “брудний” код |
| Швидкість | Повільно, залежить від складності сайту | Швидко, для простих сайтів |
| Найкраще для | Індивідуальних дизайнів, професійних проєктів | Простих сайтів-візиток, лендінгів, швидкого імпорту |
Цей метод найбільш правильний та професійний. Він полягає у створенні власної теми WordPress на основі вашого існуючого HTML-верстання.
Ніколи не працюйте на “живому” сайті! Спершу налаштуйте робоче середовище.
Перейдіть до папки /wp-content/themes/ вашого локального сайту WordPress і створіть нову папку для вашої теми, наприклад, mytheme. У цій папці створіть два основні файли:
style.css — файл стилів та інформації про тему.index.php — головний шаблонний файл.Відкрийте style.css і додайте заголовок теми. Це обов’язкова частина, яка дозволяє WordPress “побачити” вашу тему.
/* Theme Name: My Custom Theme Author: SebWeo Description: Власна тема на основі статичного HTML-сайту. Version: 1.0 */
index.html на частиниВаш статичний index.html потрібно розділити на стандартні для WordPress частини: хедер, футер та основний контент.
header.php: Скопіюйте все з вашого index.html від початку до тегу, що відкриває основний контент (наприклад, <main> або <div class="content">). Замініть все, що знаходиться всередині <head>, на функцію <?php wp_head(); ?>. Вона автоматично підключить стилі та скрипти.footer.php: Скопіюйте все від тегу, що закриває основний контент, і до кінця файлу. Перед закриваючим тегом </body> додайте функцію <?php wp_footer(); ?>.Тепер ваш index.php буде виглядати дуже просто:
<?php get_header(); ?>
<!-- Сюди потрібно вставити контент з вашого index.html -->
<main>
<h1>Привіт, світ!</h1>
<p>Це мій новий сайт на WordPress.</p>
</main>
<?php get_footer(); ?>
Щоб виводити пости та сторінки з адмін-панелі WordPress, а не статичний текст, використовується знаменитий цикл The Loop.
Замініть статичний контент у вашому index.php на цей код:
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="content">
<?php the_content(); ?>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'На жаль, нічого не знайдено.' ); ?></p>
<?php endif; ?>
</main>
Неправильно просто прописувати стилі в header.php. Правильний шлях — “ставити їх у чергу” через файл functions.php.
Створіть файл functions.php у папці вашої теми і додайте до нього наступний код, щоб підключити ваш style.css:
<?php
function mytheme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
?>
Скопіюйте всі ваші CSS-стилі у файл style.css. Аналогічно підключаються і JS-скрипти.
Після цього активуйте новостворену тему: перейдіть у Майстерні > Зовнішній вигляд > Теми, і ваша щойно створена тема має там з’явитися. Активуйте її!
Тепер все, що залишилося зробити на цьому етапі, це перенести на ваш новий сайт на WordPress контент зі старого сайту.
Якщо ручний метод здається занадто складним, ви можете спробувати автоматизувати процес за допомогою плагінів.
Такі плагіни працюють за схожим принципом: вони “парсять” ваш HTML-сайт, витягують з нього контент (тексти, зображення) і створюють відповідні пости або сторінки у вашому WordPress. Це не створює тему з вашим дизайном, а лише переносить вміст.
Для перенесення дизайну вам доведеться скористатися візуальним конструктором (наприклад, Elementor або Divi) і відтворити вигляд вашого старого сайту вручну, але вже в середовищі WordPress, а потім вставити імпортований контент.
Цей метод підходить для простих сайтів, де головне — швидко перенести текстову інформацію.
Перенесення сайту з HTML на WordPress — це не просто технічна процедура, а стратегічне рішення, яке відкриває нові можливості для управління та розвитку вашого вебресурсу.
Ручний метод, хоч і складніший, дає вам повний контроль та якісний результат. Автоматизований підхід економить час, але може вимагати компромісів у дизайні та чистоті коду. Обирайте шлях, що відповідає вашим навичкам та цілям, і ваш сайт отримає друге дихання.
Ваші щоденні дії на роботі – те, як ви спілкуєтеся, керуєте своїм часом, вирішуєте проблеми…
Мабуть, багато разів було таке, що ви в захваті починаєте новий проєкт, але пізніше «перегораєте»…
Уявіть, що кожне посилання на вашому сайті — це двері. Звичайне посилання веде відвідувача до…
Коли мені хочеться освіжити свій гаджет, прикупити ігрову консоль чи, наприклад, розумний пилосос для дому,…
Уявіть, що ваш основний сайт — це великий будинок, що стоїть на вашій земельній ділянці…
Є два способи командувати жінкою, але ніхто їх не знає Френк МакКінні Кін Хаббард