Создание темы WordPress с нуля за 1 час: пошаговый гайд
Что понадобится для быстрого старта
Для создания темы за один час достаточно базовых знаний PHP, HTML/CSS и доступа к локальному серверу (например, Apache или Nginx). Установите WordPress, создайте пустую папку в wp-content/themes и назовите её mytheme.
1. Структура темы: минимальный набор файлов
style.css– заголовок темы и базовые стили.functions.php– регистратор скриптов, меню и виджеты.index.php– основной шаблон.header.phpиfooter.php– части шаблона.
Создайте эти файлы в директории mytheme и откройте их в редакторе.
style.css – заголовок темы
/*
Theme Name: MyTheme
Theme URI: https://wpbox.by/creation-tutorial
Author: Your Name
Author URI: https://wpbox.by/
Description: Простая тема, созданная за 1 час.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-logo, responsive-layout
Text Domain: mytheme
*/
/* Базовые стили */
body {font-family: Arial, sans-serif; margin:0; padding:0;}
header, footer {background:#333; color:#fff; padding:20px; text-align:center;}
functions.php – подключаем стили и регистрируем меню
<?php
// Подключаем стили темы
function mytheme_enqueue_assets() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
wp_enqueue_script( 'mytheme-main', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
// Регистрация меню
function mytheme_register_menus() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'mytheme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_register_menus' );
// Поддержка виджетов в сайдбаре
function mytheme_widgets_init() {
register_sidebar( array(
'name' => __( 'Sidebar', 'mytheme' ),
'id' => 'sidebar-1',
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
?>2. Шаблоны: header, footer и index
Разделим вывод HTML на части, чтобы облегчить поддержку.
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=<?php bloginfo( 'charset' ); ?>>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>
footer.php
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Все права защищены.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
index.php – основной шаблон
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" class="<?php post_class(); ?>">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; else: ?>
<p>Контент не найден.</p>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
3. Добавляем виджет‑область
Создайте файл sidebar.php и выведите зарегистрированный сайдбар.
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside class="sidebar">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>
Теперь в админке Внешний вид → Виджеты появится новая область, где можно разместить поиск, последние записи и т.д.
4. Настройки темы через Customizer
Для управления цветом фона добавим простой контрол в functions.php:
// Добавляем настройку цвета фона
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section( 'mytheme_colors', array(
'title' => __( 'Цвета темы', 'mytheme' ),
'priority' => 30,
) );
$wp_customize->add_setting( 'header_bg_color', array(
'default' => '#333333',
'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_bg_color', array(
'label' => __( 'Цвет фона шапки', 'mytheme' ),
'section' => 'mytheme_colors',
'settings' => 'header_bg_color',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );
// Применяем выбранный цвет в CSS
function mytheme_dynamic_css() {
$header_bg = get_theme_mod( 'header_bg_color', '#333333' );
echo "
«; } add_action( ‘wp_head’, ‘mytheme_dynamic_css’ );
После сохранения в Customizer вы увидите ползунок для изменения цвета шапки в реальном времени.
5. Тестируем и публикуем
- Перейдите в «Внешний вид → Темы», активируйте MyTheme.
- Проверьте вывод на разных устройствах (отклик в
style.cssуже есть). - Если нужны ускорения, подключите CDN – отличный вариант BunnyCDN.
- Для чистой базы данных после разработки используйте скрипт из статьи Очистка базы данных WordPress.
Готово! Вы создали полностью рабочую тему за 60 минут. Дальше можно добавлять шаблоны страниц (page.php, single.php) и расширять функционал через плагины.
❓ Часто задаваемые вопросы
Как правильно назвать директорию темы?
Директория должна находиться в wp-content/themes и иметь уникальное название без пробелов, например mytheme.
Нужен ли файл style.css, если я использую только CSS‑файлы в папке /css?
Да. WordPress читает заголовок темы только из style.css, поэтому без него тема не будет распознана.
Можно ли подключать скрипты без jQuery?
Конечно, в wp_enqueue_script укажите массив зависимостей, например array(), если скрипт не требует jQuery.
Как быстро очистить базу после разработки темы?
Используйте планировщик cron и плагины из статьи «Очистка базы данных WordPress», они удаляют ревизии, автосохранения и спам‑комментарии.
