Адаптация и кастомизация готовой темы WordPress
Покупка готовой темы (Avada, Divi, Astra, GeneratePress) и её адаптация под конкретный бренд — быстрее разработки с нуля, но требует правильного подхода. Главное правило: никогда не редактируйте файлы родительской темы напрямую — обновление затрёт все изменения.
Дочерняя тема
Все кастомизации делаются через child theme:
my-theme-child/
├── style.css
├── functions.php
└── (переопределённые шаблоны)
style.css:
/*
Theme Name: My Theme Child
Template: parent-theme-folder-name
Version: 1.0.0
*/
functions.php:
<?php
// Загружаем стили родительской темы
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Наш CSS поверх
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
['parent-style']
);
});
Переопределение шаблонов
Скопируйте нужный шаблон из папки родительской темы в папку дочерней с тем же путём — WordPress автоматически использует версию из child theme:
parent-theme/
template-parts/
post/
content-single.php ← оригинал
my-theme-child/
template-parts/
post/
content-single.php ← ваша версия (переопределяет)
Кастомизация через Customizer API
Для добавления настроек в стандартный Customizer WordPress:
add_action('customize_register', function (WP_Customize_Manager $wp_customize) {
// Новая секция
$wp_customize->add_section('brand_settings', [
'title' => 'Настройки бренда',
'priority' => 30,
]);
// Цвет акцента
$wp_customize->add_setting('brand_accent_color', [
'default' => '#0066cc',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage', // обновление без перезагрузки
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'brand_accent_color', [
'label' => 'Цвет акцента',
'section' => 'brand_settings',
]));
// Логотип в подвале
$wp_customize->add_setting('footer_logo');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'footer_logo', [
'label' => 'Логотип в подвале',
'section' => 'brand_settings',
]));
});
// Применяем цвет акцента через динамический CSS
add_action('wp_head', function () {
$color = get_theme_mod('brand_accent_color', '#0066cc');
echo '<style>:root { --accent: ' . esc_attr($color) . '; }</style>';
});
Хуки для модификации контента
// Добавить блок после заголовка страницы
add_action('mytheme_after_page_title', function () {
if (!is_page('about')) return;
echo '<div class="breadcrumbs">' . get_breadcrumbs() . '</div>';
});
// Изменить excerpt length
add_filter('excerpt_length', fn() => 25);
// Убрать ненужные элементы из <head>
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');
Кастомные CSS-переменные поверх темы
Вместо переопределения каждого CSS-класса — CSS custom properties:
/* style.css дочерней темы */
:root {
--color-primary: #1a1a2e;
--color-accent: #e94560;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Inter', sans-serif;
--border-radius: 8px;
}
/* Переопределяем переменные темы */
.site-header {
background: var(--color-primary);
}
.btn-primary,
.wp-block-button__link {
background: var(--color-accent);
border-radius: var(--border-radius);
font-family: var(--font-heading);
}
Замена шрифтов
// Отключаем шрифты темы
add_filter('parent_theme_enqueue_fonts', '__return_false');
// Подключаем свои
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'custom-fonts',
'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Inter:wght@400;500&display=swap'
);
});
Сроки
Настройка дочерней темы, замена шрифтов/цветов, адаптация 5–10 шаблонов — 2–4 дня в зависимости от сложности дизайна.