Сайт на WordPress працює, але хочеться трохи більшого: прибрати дату з певного блоку, змінити шрифт у заголовків, додати мікророзмітку, якої немає в темі. Знайомо? Кожен власник WP-сайту рано чи пізно впирається в обмеження теми та плагінів. Далі, п’ять безпечних способів додати свій код: від встановлення плагіна за хвилину до написання власного мініплагіна.

У мережі повно готових сніпетів PHP і CSS під будь-яке завдання. Проблема не в тому, щоб знайти код, проблема в тому, куди його вставити, щоб не вбити сайт під час найближчого оновлення теми. Ми зібрали всі робочі методи в одному місці: з конкретними місцями запуску, застереженнями та прикладами.

💡 Швидкий огляд:

• Встановіть WPCode або Code Snippets, найбезпечніший спосіб для початківців: код не губиться під час зміни теми, кожен сніпет можна ввімкнути або вимкнути окремо.
• Якщо правите CSS, почніть із Customizer (Зовнішній вигляд → Налаштувати → Додатковий CSS) — це вбудовано у WordPress і не потребує плагінів.
• Для правок functions.php і шаблонів створіть дочірню тему: це збереже ваші зміни під час оновлення батьківської теми.
• Коли сніпетів набирається багато або вони змінюють логіку сайту глобально, оформіть їх у власний плагін.

Спосіб 1: Плагіни для вставки сніпетів

Найбезпечніший спосіб для новачка, спеціальний плагін-менеджер сніпетів. Ви вставляєте PHP, CSS або JavaScript в адмінці через звичайне текстове поле, а плагін виконує код там, де потрібно. У разі помилки в коді такий плагін перехоплює фатальну помилку та вимикає сніпет автоматично, сайт не падає, ви не втрачаєте доступ до адмінки.

Два основні кандидати у 2026 році:

WPCode (колишній Insert Headers and Footers), найпопулярніший, 2+ мільйони активних установок і рейтинг 4,9 на WordPress.org. Безплатна версія вміє вставляти код у header, footer, перед і після контенту. Pro-тариф додає умовну логіку (показувати сніпет лише на певних сторінках), генератор сніпетів за описом і бібліотеку готових рецептів.

Code Snippets, 700 000+ установок, рейтинг 4,8. Повністю безплатний, із графічним редактором і підсвічуванням синтаксису. Сніпети зберігаються в базі даних і не залежать від теми. Можна експортувати набір сніпетів у JSON і перенести на інший сайт.

Обидва плагіни працюють за одним принципом: ви створюєте новий сніпет, обираєте тип коду (PHP / CSS / JS), вставляєте код і натискаєте «Активувати». Якщо сніпет викликає фатальну помилку, WordPress автоматично деактивує його під час наступного запиту, білий екран смерті вам не загрожує.

Перед вставкою будь-якого коду зробіть повний бекап. На практиці безплатна версія WPCode закриває більшість типових завдань: додаткові пікселі аналітики, мікророзмітка, приховування елементів через CSS.

Спосіб 2: Вбудований CSS-редактор WordPress

Перевірте, що тема не перевизначає ваші стилі: відкрийте сайт у режимі інкогніто після додавання CSS.

Якщо завдання суто косметичне (колір кнопки, відступ у віджета, розмір шрифту в підвалі), плагін не потрібен. WordPress із версії 4.7 містить вбудований редактор Additional CSS прямо в Customizer:

• Зовнішній вигляд → Налаштувати → Додатковий CSS.
• Вставте CSS-правило в ліву панель.
• Справа, живий перегляд: ви бачите зміни до публікації.

Цей метод хороший тим, що CSS зберігається в базі даних разом із налаштуваннями теми, оновлення теми його не стирає. Мінус, редактор базовий, без підсвічування синтаксису та перевірки помилок. Для десятка рядків CSS, ідеально, для сотні, беріть плагін на кшталт Simple Custom CSS and JS (200 000+ установок), який дає редактор із підсвічуванням і дозволяє підключити CSS зовнішнім файлом для кращого кешування.

Важливий нюанс: CSS каскадується зверху вниз, правило, написане пізніше, перевизначає більш раннє. Тому CSS із Additional Customs або плагіна завжди перебиває стилі теми. Якщо ваше правило не застосувалося, додайте !important або уточніть селектор до більш специфічного.

Спосіб 3: Дочірня тема для правок PHP і шаблонів

Дочірня тема успадковує все від батьківської, але дає змогу перезаписати будь-який файл шаблону чи функцію. Це класичний спосіб вносити зміни в логіку сайту без страху втратити їх під час оновлення.

Коли потрібна дочірня тема:

• Змінюєте розмітку сторінок (header.php, single.php, footer.php).
• Додаєте код у functions.php батьківської теми, напряму цього робити не можна, бо оновлення затирає файл.
• Перевизначаєте шаблони WooCommerce під свій магазин.

Створення, 5 хвилин:

Створіть папку в /wp-content/themes/, наприклад twentytwentyfive-child. Всередині два файли:

1
/*
2
 Theme Name:   Twenty Twenty-Five Child
3
 Template:     twentytwentyfive
4
*/
5
@import url("../twentytwentyfive/style.css");

Файл functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', function () {
3
    wp_enqueue_style(
4
        'child-style',
5
        get_stylesheet_directory_uri() . '/style.css',
6
        ['parent-style'],
7
        wp_get_theme()->get('Version')
8
    );
9
});

Заархівуйте папку в ZIP, завантажте через Appearance → Themes → Add New та активуйте. Докладніше, у нашому посібнику з дочірніх тем WordPress.

Єдиний мінус дочірньої теми, потрібно вивчити структуру батьківської, щоб не зламати залежності. Якщо ви правите лише CSS і додаєте пару PHP-хуків, плагіна зі сніпетами зі способу 1 достатньо, дочірня тема не потрібна.

Спосіб 4: Власний плагін для постійного коду

Якщо сніпетів накопичилося більше десятка і частина з них критична для роботи сайту (кастомні типи записів, перевизначення кінцевих точок REST API, власна таксономія), оформіть їх у власний плагін. Він не вимкнеться при зміні теми й не загубиться під час оновлення.

Мінімальний плагін, один PHP-файл:

Створіть папку my-site-core у /wp-content/plugins/. Всередині, my-site-core.php:

1
<?php
2
/**
3
 * Plugin Name:       My Site Core
4
 * Description:       Пользовательский код сайта: CPT, хуки, шорткоды
5
 * Version:           1.0.0
6
 * Requires at least: 6.0
7
 * Requires PHP:      8.0
8
 */

Весь кастомний PHP пишіть нижче цього заголовка. Плагін з’явиться в списку Plugins, його можна активувати й деактивувати як звичайний.

Для коду, який має працювати завжди (наприклад, реєстрація кастомного типу записів, критичного для контенту), використовуйте must-use плагіни. Створіть папку /wp-content/mu-plugins/ і покладіть туди PHP-файл. MU-плагіни виконуються автоматично й не мають перемикача в адмінці, їх не можна випадково вимкнути.

Зверніть увагу: якщо просто скласти PHP-файли в mu-plugins без завантажувача, WordPress не підхопить їх із підпапок. Або кладіть файл у корінь mu-plugins, або додайте завантажувач, однорядковий PHP-файл, який підключає файли з підпапок через require_once.

Спосіб 5: Показ коду в записі, без виконання

Окреме завдання, не додати код на сайт, а показати його читачам у статті. WordPress за замовчуванням виконує HTML і PHP, вставлені у візуальний редактор, що може зламати верстку запису. Рішення залежить від того, який редактор ви використовуєте:

Gutenberg (блоковий редактор): використовуйте блок Code або Custom HTML. Блок Code показує код моноширинним шрифтом у рамці, не виконуючи його. Для підсвічування синтаксису PHP і CSS підключіть плагін Syntax-highlighting Code Block, він розфарбовує код усередині блоку Code за мовою.

Classic Editor: у візуальній вкладці вставка коду як звичайного тексту працює для показу (але не дає моноширинного форматування). У HTML-вкладці код інтерпретується як справжній, WordPress виконає теги й зламає сторінку. Щоб цього уникнути, замініть активні символи на HTML-сутності:

Для одиночного тега ручна заміна працює. Для блоку з 20 рядків використовуйте онлайн-енкодер або плагін. Повний перелік символьних сутностей є в довіднику WordPress.

⁉️🤔 Часті запитання

Чи можна вставити PHP-код безпосередньо в запис WordPress?

Ні, WordPress не виконує PHP всередині контенту запису з міркувань безпеки. Якщо потрібно виконати PHP на конкретній сторінці, використовуйте шорткод, зареєстрований у functions.php дочірньої теми або в плагіні сніпетів. Альтернатива, плагіни на кшталт Insert PHP Code Snippet, які дозволяють створити сніпет і вставити його шорткодом у будь-який запис.

Що безпечніше для новачка: плагін сніпетів чи дочірня тема?

Плагін WPCode або Code Snippets. Він ізолює кожен фрагмент коду: помилка в одному сніпеті не зачіпає решту, а фатальну помилку WordPress перехоплює та деактивує проблемний сніпет автоматично. Дочірня тема такого механізму не дає, друкарська помилка в functions.php кладе весь сайт. Крім того, плагін не прив’язаний до теми: змінили тему, код залишився.

Як протестувати код перед запуском на живому сайті?

Створіть staging-копію сайту. Більшість хостингів (SiteGround, Cloudways, Kinsta) пропонують кнопку «Create Staging» у панелі керування. На локалці розгорніть копію через Local або XAMPP. Протестували на копії, перенесли на бойовий сайт. Для швидких CSS-правок достатньо відкрити DevTools у Chrome (F12), знайти елемент і застосувати стиль прямо в браузері — це тимчасово й видно лише вам.

Чи обов’язково створювати дочірню тему, якщо я лише правлю CSS?

Ні. Почніть із вбудованого Additional CSS у Customizer (Appearance → Customize). Його вистачає для більшості візуальних правок, він не стирається під час оновлення теми й не потребує ані плагіна, ані дочірньої теми. Дочірня тема потрібна, коли ви перезаписуєте PHP-файли шаблонів (header.php, single.php, функції теми).

Який спосіб обрати для критичного коду, який не можна втратити?

Must-use плагін (/wp-content/mu-plugins/). Код у MU-плагінах виконується завжди, його неможливо вимкнути з адмінки, і він переживає зміну теми та оновлення звичайних плагінів. Підходить для реєстрації кастомних типів записів (CPT), таксономій і критичних перевизначень REST API. Не підходить для косметичних правок, для них достатньо Additional CSS або плагіна сніпетів.

Що обрати під вашу задачу

Якщо потрібно один раз виправити колір кнопки, відкрийте Appearance → Customize → Additional CSS, вставте правило й забудьте. Якщо збираєте колекцію корисних PHP-сніпетів для сайту, поставте WPCode: він безплатний, безпечний і не залежить від теми. Якщо правите шаблони сторінок або підключаєте свої скрипти через wp_enqueue_scripts, створіть дочірню тему. А коли сніпетів стає більше десятка й половина з них критичні для роботи сайту, оформіть їх у власний плагін.

Почніть із малого: відкрийте Customizer і додайте перше CSS-правило прямо зараз. Напишіть у коментарях, який метод використовуєте ви і який сніпет виявився найкориснішим на вашому сайті.