Как создать свою тему для WordPress с нуля
Пошаговая инструкция по созданию темы WordPress
1. Подготовка рабочего окружения
Необходимое ПО:
- Локальный сервер: XAMPP, MAMP, Local by Flywheel или аналогичный. Можно в принципе сделать и на рабочем.
- WordPress: Скачайте последнюю версию с wordpress.org.
- Кодовый редактор: Notepad++, VS Code, Sublime Text и др. Я использую Phpstorm.
- Базовые знания HTML, CSS, PHP, JS и структуры WordPress.
2. Создание папки темы
Перейдите в папку wp-content/themes/
Создайте папку для вашей темы, например: wp-content/themes/mytheme
3. Минимальный набор файлов темы
Чтобы тема появилась в админке, достаточно двух файлов:
- style.css — Заголовочный файл с метаинформацией.
- index.php — Главный файл шаблона.
Пример style.css:
/* Theme Name: Моя первая тема Theme URI: http://example.com Author: Ваше имя Author URI: http://example.com Description: Моя первая тема для WordPress Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mytheme */
Пример index.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</body>
</html>
Теперь ваша тема видна в Внешний вид → Темы.
4. Структура стандартной темы
Для удобства и расширяемости добавьте следующие файлы:
| Файл | Назначение |
| style.css | Стили для элементов шаблона |
| index.php | Основной и главный файл шаблона |
| functions.php | Подключение скриптов, меню, настройка темы |
| header.php | Шапка сайта |
| footer.php | Подвал сайта |
| sidebar.php | Боковая панель (если нужно) |
| single.php | Отдельная запись |
| page.php | Страница |
| archive.php | Архив записей |
| 404.php | Страница 404 |
| screenshot.png | Превью темы (размер 1200×900 пикселей) |
5. Разделение шаблона
Вместо повторения кода шапки и подвала используйте:
В index.php:
<?php get_header(); ?> <!-- Основной контент --> <?php get_footer(); ?>
6. Настройка functions.php
Важный файл для настройки темы:
<?php
// Включение поддержки меню
add_theme_support('menus');
// Включение поддержки миниатюр
add_theme_support('post-thumbnails');
// Регистрация меню
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
// Подключение стилей и скриптов
function load_theme_scripts() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'load_theme_scripts');
?>
7. Подключение меню
В нужном месте вывода меню:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
8. Подключение миниатюр:
В цикле WordPress:
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>
9. Работа с шаблонами страниц
Можно создать отдельный шаблон для страницы: page-about.php:
<?php /* Template Name: About Page */ get_header(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php get_footer(); ?>
10. Создание кастомайзера (по желанию)
Добавить настройки темы в админке:
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section( 'header_section' , array(
'title' => __( 'Настройки Шапки', 'mytheme' ),
'priority' => 30,
));
$wp_customize->add_setting( 'header_text' , array(
'default' => 'Привет, мир!',
'transport' => 'refresh',
));
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_text_control', array(
'label' => __( 'Текст шапки', 'mytheme' ),
'section' => 'header_section',
'settings' => 'header_text',
)));
}
add_action( 'customize_register', 'mytheme_customize_register' );
Вывести в шаблоне:
<?php echo get_theme_mod('header_text'); ?>
11. Проверка и оптимизация
- Проверить валидность кода;
- Убедиться, что используются стандартные функции WordPress;
- Тестировать тему на мобильных устройствах;
- Использовать инструмент Theme Check.
12. Подготовка темы для публикации
- Добавьте файл README.
- Лицензия (обычно GPL).
- Можно залить на WordPress.org или продать на маркетплейсах (ThemeForest, TemplateMonster).
Скачать готовый пример
Скачать zip архив с шаблоном
Просто распакуйте архив в папку wp-content/themes/, активируйте тему в админке WordPress, и она готова к использованию!