📘 Конвертація HTML в тему WordPress: від статичної верстки до завантаження в адмінку

Q: Чи можна зробити тему без сайдбара?

Так, і це навіть спрощує завдання. Просто видаліть виклик з index.php і не створюйте файл sidebar.php. Багато сучасних тем, включно з блоковими темами WordPress, обходяться взагалі без бічної панелі.

Q: Чи обов’язково використовувати саме header.php, index.php, sidebar.php і footer.php?

index.php і style.css обов’язкові, без них WordPress не побачить тему. Решта файлів опціональні. Але саме header.php, sidebar.php і footer.php, стандарт де-факто для класичних тем: їх розуміють усі розробники, під них заточені функції get_header(), get_sidebar() і get_footer(). Для першої теми дотримуйтеся цієї четвірки.

Готовий HTML-сайт не обов’язково викидати, коли переходите на WordPress. Ви можете взяти своє верстання, index.html і style.css, і перетворити його на повноцінну тему за годину-півтори. Це не магія: WordPress побудований на PHP-шаблонах, а ті, своєю чергою, збираються зі звичайного HTML, розбитого на логічні частини.

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

Наприкінці цього посібника у вас буде готова тема, яку можна завантажити в адмінку WordPress, активувати й побачити свій HTML усередині динамічної платформи. Це перша частина, фундамент. У другій частині ми розберемо шаблони окремих сторінок, довільні поля та кастомізатор.

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

Даємо темі унікальне ім’я та заповнюємо заголовок style.css, WordPress упізнає тему за цими метаданими.
Розрізаємо вихідний index.html на чотири PHP-файли: header.php, index.php, sidebar.php і footer.php.
Впроваджуємо стандартні хуки WordPress (get_header, get_sidebar, get_footer, wp_head і wp_footer), щоб платформа «бачила» й підхоплювала ваше верстання.
Додаємо Цикл WordPress в index.php, той самий фрагмент коду, який виводить записи блогу всередині вашого HTML-каркаса.
Збираємо ZIP-архів, завантажуємо тему в адмінку й активуємо, ваш сайт оживає на WordPress.

1. Іменування теми та файл style.css

Перше, що потрібно зробити,, дати темі унікальне ім’я. Навіть якщо ви робите тему винятково для свого сайту, WordPress мусить її якось ідентифікувати на панелі «Зовнішній вигляд → Теми».

Вихідні умови:

У вас є index.html і файл стилів style.css (або будь-який інший CSS-файл).
У вас є робоча інсталяція WordPress із хоча б однією стандартною темою, наприклад, Twenty Twenty-Five.
Ви вже створили папку для майбутньої теми всередині /wp-content/themes/.

Відкрийте редактор коду (ми рекомендуємо Sublime Text або VS Code), скопіюйте вміст вашої таблиці стилів у новий файл і збережіть його як style.css у папці теми. У самий верх файлу, перед усім CSS-кодом, додайте блок метаданих:

1 /*
2 Theme Name: My HTML-to-WordPress Theme
3 Theme URI: https://example.com
4 Description: Тема, собранная из статичного HTML-макета.
5 Version: 1.0
6 Author: Your Name
7 Author URI: https://example.com
8 Tags: custom-theme, html-to-wordpress, beginner
9 */

Не видаляйте символи коментаря /* і */, WordPress читає саме їх. Поле Theme Name тут ключове: саме під цією назвою тема з’явиться в адмінці. Решта полів опціональні, але ми радимо заповнити їх усі — це хороша практика.

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

2. Розбиваємо HTML на PHP-шаблони

Класична тема WordPress збирається з кількох PHP-файлів, кожен із яких відповідає за свою ділянку сторінки. Найпоширеніший макет, шапка, контент, сайдбар, футер. Якщо ваш HTML влаштований інакше (наприклад, сайдбар ліворуч або дві бічні колонки), принцип не змінюється, просто адаптуйте розбивку під свою структуру.

Створіть у папці теми чотири порожні файли:

header.php, шапка сайту
index.php, головний шаблон, точка збирання
sidebar.php, бічна панель
footer.php, підвал

Поки вони порожні, не чекайте див. Підемо по порядку.

2.1 Header.php, шапка сайту

Зайдіть в адмінку WordPress, відкрийте «Зовнішній вигляд → Редактор теми» і виберіть стандартну тему (наприклад, Twenty Twenty-Five). Знайдіть її header.php і скопіюйте блок <head> цілком — це мінімальний набір метатегів і хуків, без яких WordPress не працює коректно. Ось що потрібно перенести у ваш header.php:

1 <head>
2     <meta charset="<?php bloginfo( 'charset' ); ?>">
3     <meta name="viewport" content="width=device-width">
4     <title>&lt;?php wp_title( '|', true, 'right' ); ?&gt;</title>
5     <link rel="profile" href="https://gmpg.org/xfn/11">
6     <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
7     <?php wp_head(); ?>
8 </head>

Функція bloginfo() підставляє налаштування сайту динамічно (кодування, URL пінгбека). Хук wp_head() критичний: через нього плагіни та ядро WordPress вставляють свої скрипти, стилі й метатеги. Без нього тема буде наполовину мертвою.

Тепер відкрийте ваш вихідний index.html і скопіюйте код шапки, все, що знаходиться всередині <header> або аналогічного блоку, і вставте його в header.php **одразу після закривного тега </head> і відкривного **<body>. У нашому демонстраційному верстанні це виглядає так:

1 <body>
2     <header class="header">
3         <p>This is header section. Put your logo and other details here.</p>
4     </header>
5

Додайте підключення вашої таблиці стилів між тегами <head>:

1 <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />

Функція get_template_directory_uri() повертає URL папки вашої теми, шлях до CSS буде робочим на будь-якому сервері, без хардкоду. Збережіть header.php.

2.2 Index.php, точка збирання

index.php у WordPress, обов’язковий файл. Він не зберігає верстання як таке, а збирає сторінку з частин. Відкрийте ваш порожній index.php і додайте три рядки:

1 <?php get_header(); ?>
2  
3 <?php get_sidebar(); ?>
4 <?php get_footer(); ?>

Перший рядок підключає header.php. Два останні, sidebar.php і footer.php, ідуть у самому низу. Між ними розташовуватиметься основний контент (контентна область і Цикл, про це в наступному розділі).

Скопіюйте з вихідного index.html блок із класом .content (основна контентна область) і вставте його між get_header() і get_sidebar():

1 <?php get_header(); ?>
2  
3     <div class="content">
4         <p>This is the main content area.</p>
5     </div><!-- .content -->
6  
7 <?php get_sidebar(); ?>
8 <?php get_footer(); ?>
9

Схема проста: WordPress послідовно збирає сторінку згори донизу, шапка, контент, сайдбар, футер. Кожен get_*() тягне відповідний PHP-файл.

2.3 Sidebar.php і footer.php

Із сайдбаром і футером зовсім просто. Скопіюйте вміст блоків .sidebar і .footer з вашого index.html у відповідні PHP-файли.

sidebar.php:

1 <aside class="sidebar">
2     <p>This is the side bar</p>
3 </aside>
4  
5 <?php dynamic_sidebar( 'sidebar' ); ?>
6

Функція dynamic_sidebar() виводить віджети, призначені в адмінці («Зовнішній вигляд → Віджети»). Якщо сайдбар не потрібен, видаліть цей рядок.

footer.php:

1 <footer class="footer">
2     <p>And this is the footer.</p>
3 </footer>
4  
5 <?php wp_footer(); ?>
6 </body>
7 </html>
8

Зверніть увагу: </body> і </html> переносяться у footer.php. У вашому вихідному HTML вони, найімовірніше, теж у самому низу, так і має бути. Хук wp_footer(), такий самий обов’язковий, як wp_head(): без нього не працюватимуть багато плагінів і сам WordPress (наприклад, адмін-бар не з’явиться).

3. Цикл WordPress: виведення записів

Тему зібрано, каркас працює. Але контентна область поки що статична, у ній жорстко прописаний текст із вихідного HTML. Щоб WordPress почав виводити реальні записи блогу, потрібен Цикл (The Loop), спеціальна PHP-конструкція, яка перебирає опубліковані пости й відображає їх один за одним усередині вашого верстання.

Це найважливіший фрагмент коду в темі. Він іде в index.php, усередину блоку <div class="content">, замінюючи статичний текст-заглушку:

1 <?php if ( have_posts() ) : ?>
2     <?php while ( have_posts() ) : the_post(); ?>
3         <article <?php post_class(); ?>>
4             <header class="post-header">
5                 <time datetime="<?php echo get_the_date( 'c' ); ?>">
6                     <?php echo get_the_date(); ?>
7                 </time>
8                 <h2>
9                     <a href="<?php the_permalink(); ?>" rel="bookmark">
10                         <?php the_title(); ?>
11                     </a>
12                 </h2>
13                 <span class="post-author"><?php the_author(); ?></span>
14             </header>
15  
16             <div class="entry">
17                 <?php if ( has_post_thumbnail() ) : ?>
18                     <?php the_post_thumbnail( 'medium' ); ?>
19                 <?php endif; ?>
20                 <?php the_content(); ?>
21                 <?php edit_post_link( 'Редактировать', '<span class="edit-link">', '</span>' ); ?>
22                 <?php wp_link_pages(); ?>
23             </div>
24  
25             <footer class="post-footer">
26                 <?php comments_popup_link(
27                     'Оставить комментарий',
28                     '1 комментарий',
29                     '% комментариев'
30                 ); ?>
31             </footer>
32         </article>
33     <?php endwhile; ?>
34  
35     <nav class="navigation">
36         <div class="prev-posts"><?php next_posts_link( '← Предыдущие записи' ); ?></div>
37         <div class="next-posts"><?php previous_posts_link( 'Новые записи →' ); ?></div>
38     </nav>
39 <?php else : ?>
40     <p>Записей не найдено.</p>
41 <?php endif; ?>
42

Як це працює:

have_posts() перевіряє, чи є записи для відображення. Якщо є, заходить у Цикл.
the_post() готує дані чергового запису.
post_class() додає стандартні CSS-класи до <article>, корисно для стилізації окремих типів записів.
the_permalink() і the_title() виводять URL і заголовок поста.
the_content(), власне тіло запису.
the_post_thumbnail(), мініатюра запису, якщо її задано.
comments_popup_link(), посилання на коментарі.
next_posts_link() і previous_posts_link(), посторінкова навігація.

Блок else спрацьовує, коли записів немає взагалі, виводиться повідомлення-заглушка.

Після вставлення Циклу ваш index.php у зборі виглядає так:

1 <?php get_header(); ?>
2  
3     <div class="content">
4         <?php if ( have_posts() ) : ?>
5             <?php while ( have_posts() ) : the_post(); ?>
6                 <article <?php post_class(); ?>>
7                     <header class="post-header">
8                         <time datetime="<?php echo get_the_date( 'c' ); ?>">
9                             <?php echo get_the_date(); ?>
10                         </time>
11                         <h2>
12                             <a href="<?php the_permalink(); ?>" rel="bookmark">
13                                 <?php the_title(); ?>
14                             </a>
15                         </h2>
16                         <span class="post-author"><?php the_author(); ?></span>
17                     </header>
18                     <div class="entry">
19                         <?php if ( has_post_thumbnail() ) : ?>
20                             <?php the_post_thumbnail( 'medium' ); ?>
21                         <?php endif; ?>
22                         <?php the_content(); ?>
23                         <?php edit_post_link( 'Редактировать', '<span class="edit-link">', '</span>' ); ?>
24                         <?php wp_link_pages(); ?>
25                     </div>
26                     <footer class="post-footer">
27                         <?php comments_popup_link(
28                             'Оставить комментарий',
29                             '1 комментарий',
30                             '% комментариев'
31                         ); ?>
32                     </footer>
33                 </article>
34             <?php endwhile; ?>
35             <nav class="navigation">
36                 <div class="prev-posts"><?php next_posts_link( '← Предыдущие записи' ); ?></div>
37                 <div class="next-posts"><?php previous_posts_link( 'Новые записи →' ); ?></div>
38             </nav>
39         <?php else : ?>
40             <p>Записей не найдено.</p>
41         <?php endif; ?>
42     </div><!-- .content -->
43  
44 <?php get_sidebar(); ?>
45 <?php get_footer(); ?>
46

4. Збирання та встановлення теми

Усі п’ять файлів, style.css, header.php, index.php, sidebar.php і footer.php, мають лежати в папці вашої теми (назвіть її, скажімо, my-html-theme). Запакуйте папку в ZIP-архів.

Далі стандартний сценарій: адмінка WordPress → «Зовнішній вигляд» → «Теми» → «Додати тему» → «Завантажити тему». Виберіть ZIP-файл, натисніть «Встановити», потім «Активувати». Зайдіть на сайт, ваш HTML-макет ожив усередині WordPress, а в контентній області виводяться записи блогу.

На цьому першу частину завершено. Ви отримали робочий каркас теми: WordPress розпізнає її, підхоплює хуки й виводить динамічний контент через Цикл. У наступній частині ми розберемо шаблони окремих сторінок (single.php, page.php), ієрархію шаблонів і підключення скриптів через functions.php.

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

Чи потрібно знати PHP, щоб зібрати тему з HTML?

Ні. Мінімум, який ви напишете, — це кілька викликів функцій на кшталт get_header() і Цикл із 15 рядків. Усе решта, копіювання HTML-коду, який у вас уже є. PHP тут виступає «клеєм», а не основною мовою. Якщо ви розумієте, де відкривається й закривається <?php ?>, цього достатньо для старту.

Що робити, якщо мій HTML-макет не схожий на «шапка-контент-сайдбар-футер»?

Принцип не змінюється. WordPress збирає сторінку послідовним викликом PHP-файлів, їхній порядок в index.php визначає розкладку. Якщо у вас сайдбар ліворуч, просто викличте get_sidebar() перед контентним блоком. Дві бічні колонки, створіть sidebar-left.php і sidebar-right.php з окремими викликами. Схема гнучка.

Чи можна зробити тему без сайдбара?

Так, і це навіть спрощує завдання. Просто видаліть виклик <?php get_sidebar(); ?> з index.php і не створюйте файл sidebar.php. Багато сучасних тем, включно з блоковими темами WordPress, обходяться взагалі без бічної панелі.

Чи обов’язково використовувати саме header.php, index.php, sidebar.php і footer.php?

index.php і style.css обов’язкові, без них WordPress не побачить тему. Решта файлів опціональні. Але саме header.php, sidebar.php і footer.php, стандарт де-факто для класичних тем: їх розуміють усі розробники, під них заточені функції get_header(), get_sidebar() і get_footer(). Для першої теми дотримуйтеся цієї четвірки.

Чи працює цей підхід із блоковими темами (FSE)?

Ні, цей посібник, для класичних PHP-тем, які живуть і підтримуються (WordPress не відмовлявся від них і не планує). Блокові теми (Full Site Editing) використовують HTML-шаблони та файл theme.json. Якщо ваша мета, швидко перетворити наявний HTML на робочу тему, класичний підхід значно простіший: менше абстракцій, звична модель «header-content-sidebar-footer».

Що далі: ваш перший крок у розробці тем

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

Якщо вам достатньо виведення постів у своєму верстанні, наповнюйте сайт контентом і допрацьовуйте CSS під бренд.

Почніть із малого: зберіть тему за цим посібником, активуйте її та додайте пару тестових записів. Коли побачите свій HTML із живими постами всередині, решта піде легше.