Skip to content

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

🛠️ Создание темы WordPress из HTML: пошаговое руководство (часть 1)
Темы WordPressВеб-разработка
7 мин1,377 слов2 163

🛠️ Создание темы WordPress из HTML: пошаговое руководство (часть 1)

Готовый 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/*
2Theme Name: My HTML-to-WordPress Theme
3Theme URI: https://example.com
4Description: Тема, собранная из статичного HTML-макета.
5Version: 1.0
6Author: Your Name
7Author URI: https://example.com
8Tags: 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 с живыми постами внутри, остальное пойдёт легче.

Редакция
РедакцияРедакционная команда→ Все публикации

Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.