Розробка кастомної теми WordPress з нуля

Розробка кастомної теми WordPress з нуля

Кастомна тема — единственний правильний шлях, коли дизайн не вписується в рамки готових шаблонів, потрібна максимальна продуктивність без балласту сторонніх фреймворків, або сайт повинен точно відповідати фірмовому стилю. Розробка ведеться на PHP + сучасний CSS + vanilla JS або сборщик.

Структура теми

my-theme/
├── style.css              # Заголовок теми (обов'язково)
├── functions.php          # Хуки, реєстрація ресурсів
├── index.php              # Fallback шаблон
├── header.php
├── footer.php
├── single.php             # Шаблон запису
├── page.php               # Шаблон сторінки
├── archive.php
├── search.php
├── 404.php
├── front-page.php         # Головна сторінка
├── template-parts/
│   ├── content-post.php
│   ├── content-card.php
│   └── navigation.php
├── inc/
│   ├── theme-setup.php
│   ├── enqueue.php
│   ├── custom-post-types.php
│   └── acf-fields.php
├── src/
│   ├── scss/
│   └── js/
└── package.json

functions.php: Правильна структура

<?php
// Підключаємо модульно, не пишемо всё в один файл
require get_template_directory() . '/inc/theme-setup.php';
require get_template_directory() . '/inc/enqueue.php';
require get_template_directory() . '/inc/custom-post-types.php';

inc/theme-setup.php:

<?php
function mytheme_setup(): void {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('html5', ['search-form', 'comment-form', 'gallery', 'caption', 'style', 'script']);
    add_theme_support('custom-logo', [
        'height' => 60,
        'width' => 200,
        'flex-height' => true,
    ]);
    add_theme_support('woocommerce'); // якщо потрібно

    load_theme_textdomain('mytheme', get_template_directory() . '/languages');

    register_nav_menus([
        'primary' => __('Главное меню', 'mytheme'),
        'footer'  => __('Меню подвала', 'mytheme'),
    ]);
}
add_action('after_setup_theme', 'mytheme_setup');

Підключення ресурсів

function mytheme_enqueue_assets(): void {
    $theme_version = wp_get_theme()->get('Version');

    // CSS
    wp_enqueue_style(
        'mytheme-style',
        get_template_directory_uri() . '/dist/css/main.css',
        [],
        $theme_version
    );

    // JS (defer для продуктивності)
    wp_enqueue_script(
        'mytheme-main',
        get_template_directory_uri() . '/dist/js/main.js',
        [],
        $theme_version,
        ['strategy' => 'defer', 'in_footer' => true]
    );

    // Передача даних у JS
    wp_localize_script('mytheme-main', 'siteData', [
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce'   => wp_create_nonce('mytheme_nonce'),
        'homeUrl' => home_url(),
    ]);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');

Шаблон запису (single.php)

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    while (have_posts()) :
        the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class('entry'); ?>>
            <header class="entry-header">
                <?php if (has_post_thumbnail()) : ?>
                    <div class="entry-thumbnail">
                        <?php the_post_thumbnail('large', ['loading' => 'eager', 'fetchpriority' => 'high']); ?>
                    </div>
                <?php endif; ?>

                <h1 class="entry-title"><?php the_title(); ?></h1>

                <div class="entry-meta">
                    <time datetime="<?php echo get_the_date('c'); ?>">
                        <?php echo get_the_date(); ?>
                    </time>
                </div>
            </header>

            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

    <?php endwhile; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Збірка з Vite

// vite.config.js
import { defineConfig } from 'vite';
import liveReload from 'vite-plugin-live-reload';

export default defineConfig({
  plugins: [liveReload('**/*.php')],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: 'src/js/main.js',
        admin: 'src/js/admin.js',
      },
    },
  },
  css: {
    preprocessorOptions: {
      scss: { additionalData: '@use "src/scss/variables" as *;' },
    },
  },
});

Терміни

Базова тема з шаблонами (головна, блог, сторінка, 404) без дизайну — 2–3 дні. Тема по готовому дизайну з 10–15 типами сторінок, ACF-полями та кастомними типами записів — 2–3 тижні.