Адаптація та кастомізація готової теми 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',
]));
});
// Застосуємо колір акцента через динамічний 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
add_filter('excerpt_length', fn() => 25);
// Убрати ненужні елементи із <head>
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_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 {
background: var(--color-accent);
border-radius: var(--border-radius);
}
Замена шрифтів
// Вимкнемо шрифти теми
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 дні залежно від складності дизайну.