Нужна кнопка «Завантажити» посеред статті, а тема виводить лише синє посилання з підкресленням. Знайомо? У Block Editor кнопка додається кліком, але в класичному редакторі, у віджетах і в кастомних темах щоразу доводиться вручну писати HTML із класами.

Копіювання розмітки з допису в допис закінчується передбачувано: в одному місці забули клас, в іншому загубили rel="noopener", у третьому кнопка раптом іншого відтінку. Що більше матеріалів на сайті, то дорожче обходиться кожне виправлення стилю.

Розв’язання займає хвилин десять. Далі на вас чекає готовий PHP-шорткод [button], палітра на OKLCH, темна тема через light-dark() і доступність за WCAG 2.2. Усе перевірено на актуальних браузерах 2026 року.

Як додати кнопку через шорткод: план дій

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

• Крок 1: Додайте PHP-функцію кнопки у functions.php дочірньої теми
• Крок 2: Зареєструйте тег [button] через add_shortcode() на хуку init
• Крок 3: Підключіть CSS з усіма станами: базовий вигляд, наведення, натискання, фокус
• Крок 4: Задайте колірні схеми одним рядком OKLCH на кожен колір
• Крок 5: Вставте [button url="..." color="blue"]Текст[/button] у запис і перевірте фокус із клавіатури

Кожен крок нижче розібрано з готовим кодом, який можна копіювати цілком. Код кладіть у дочірню тему: оновлення батьківської тоді не зітре ваші правки. Якщо дочірньої теми ще немає, спочатку створіть її за офіційним посібником WordPress з child themes — це справа на кілька хвилин.

Але перш ніж копіювати, подивіться, що змінилося в самій стилізації. За останні роки CSS для кнопок переписали майже повністю.

Що змінилося в CSS для кнопок до 2026 року

Коротко: кнопку більше не збирають із вендорних префіксів і трьох наборів ручних hover-відтінків. Кастомні властивості, нативна вкладеність, колірна модель OKLCH і функція light-dark() скорочують типовий блок стилів приблизно вдвічі й прибирають дублювання.

Масштаб застосування цих прийомів величезний. За даними W3Techs на липень 2026 року WordPress працює на 41,5% усіх сайтів і тримає 59,2% ринку CMS. Будь-який патерн із цієї статті ви зможете переносити з проєкту на проєкт роками.

Почнімо з серверної частини: поки немає PHP-функції, стилізувати нічого.

PHP-функція кнопки

Функція приймає атрибути з редактора й повертає готовий тег <a> із класами, посиланням і текстом. Шорткоди з’явилися ще в WordPress 2.5 і досі залишаються найшвидшим способом вставити довільну розмітку в контент: add_shortcode() з офіційного довідника реєструє тег, а callback збирає HTML.

1
/**
2
 * Генерирует HTML кнопки через шорткод [button].
3
 *
4
 * @param array|string $atts    Атрибуты шорткода.
5
 * @param string|null  $content Текст внутри парного тега [button]...[/button].
6
 * @return string HTML разметка кнопки.
7
 */
8
function myprefix_button_shortcode( $atts, $content = null ) {
9
    $atts = shortcode_atts(
10
        array(
11
            'url'    => '',
12
            'title'  => '',
13
            'target' => '',
14
            'text'   => '',
15
            'color'  => 'green',
16
        ),
17
        $atts,
18
        'button'
19
    );
20
 
21
    // Текст кнопки: приоритет у атрибута text, затем содержимое тега
22
    $label = $atts['text'] ? $atts['text'] : $content;
23
 
24
    // Ссылка задана: формируем <a>
25
    if ( $atts['url'] ) {
26
        $target_attr = ( 'blank' === $atts['target'] ) ? ' target="_blank" rel="noopener noreferrer"' : '';
27
        $title_attr  = $atts['title'] ? ' title="' . esc_attr( $atts['title'] ) . '"' : '';
28
 
29
        return sprintf(
30
            '<a href="%s" class="myprefix-button color-%s"%s%s>%s</a>',
31
            esc_url( $atts['url'] ),
32
            esc_attr( $atts['color'] ),
33
            $target_attr,
34
            $title_attr,
35
            do_shortcode( $label )
36
        );
37
    }
38
 
39
    // Ссылки нет: оборачиваем в <span>
40
    return sprintf(
41
        '<span class="myprefix-button color-%s">%s</span>',
42
        esc_attr( $atts['color'] ),
43
        do_shortcode( $label )
44
    );
45
}

Зверніть увагу на три деталі. shortcode_atts() зливає передані атрибути зі значеннями за замовчуванням, тому в області видимості немає ні extract(), ні неоголошених змінних. Усі динамічні значення проходять через esc_url() та esc_attr(): WordPress не екранує вивід шорткодів за вас. А do_shortcode() усередині підпису дозволяє вкладати один шорткод в інший, наприклад іконку всередину кнопки.

Реєстрація шорткоду та виклик у редакторі

Реєстрацію вішаємо на хук init: до цього моменту ядро повністю завантажене, й інші плагіни за потреби зможуть перевизначити тег через remove_shortcode().

1
add_action( 'init', 'myprefix_register_button_shortcode' );
2
 
3
function myprefix_register_button_shortcode() {
4
    add_shortcode( 'button', 'myprefix_button_shortcode' );
5
}

Тепер відкрийте запис і вставте тег. У класичному редакторі прямо в текст, у Block Editor через блок «Шорткод»:

1
[button url="https://example.com/download" target="blank" text="Скачать бесплатно"]
2
 
3
[button url="https://example.com" color="blue"]Подробнее[/button]

Перший варіант самозакривний, із текстом в атрибуті. Другий парний: підпис стоїть між відкривним і закривним тегами. Результат однаковий, обирайте той синтаксис, який зручніший авторам.

Без стилів кнопка поки що виглядає як звичайне посилання. Механіка при цьому вже працює: клас myprefix-button color-green у розмітці є, залишилося його оформити.

Базові стилі: кастомні властивості та вкладеність

Увесь зовнішній вигляд тримається на одній змінній --btn-bg. Відтінки для наведення та натискання з неї обчислює color-mix(), тому ручний підбір темних варіантів більше не потрібен. Вкладені правила працюють нативно, без Sass.

1
.myprefix-button {
2
    --btn-bg: oklch(58% 0.15 145);
3
    --btn-fg: #fff;
4
 
5
    display: inline-block;
6
    padding: 12px 24px;
7
    background: var(--btn-bg);
8
    color: var(--btn-fg);
9
    font-weight: 600;
10
    text-decoration: none;
11
    border-radius: 8px;
12
    cursor: pointer;
13
    transition: background 0.2s ease, translate 0.15s ease;
14
 
15
    &:hover {
16
        background: color-mix(in oklch, var(--btn-bg), black 12%);
17
        color: var(--btn-fg);
18
        text-decoration: none;
19
    }
20
 
21
    &:active {
22
        background: color-mix(in oklch, var(--btn-bg), black 20%);
23
        translate: 0 1px;
24
    }
25
 
26
    &:focus-visible {
27
        outline: 3px solid color-mix(in oklch, var(--btn-bg), white 30%);
28
        outline-offset: 2px;
29
    }
30
}

Зсув translate: 0 1px при натисканні імітує фізичну кнопку тонше, ніж старий прийом із внутрішньою тінню. Плавність переходів задає transition, а колір тексту продубльовано на :hover явно, щоб стилі теми його не перебили.

Скопіюйте блок у style.css дочірньої теми або в розділ «Додаткові стилі» налаштовувача. Далі найприємніше: колірні схеми.

Палітра на OKLCH: новий колір одним рядком

Кожна схема тепер займає рівно один рядок: змінюється лише змінна, усі стани перераховуються автоматично.

1
.myprefix-button.color-blue   { --btn-bg: oklch(55% 0.17 255); }
2
.myprefix-button.color-red    { --btn-bg: oklch(55% 0.19 25); }
3
.myprefix-button.color-orange { --btn-bg: oklch(68% 0.16 60); }

Чому саме OKLCH, а не звичний HEX. В описі oklch() на MDN першим параметром іде сприймана світлота: два кольори з однаковим першим числом виглядають однаково яскравими. Синя та червона кнопки з прикладу вище візуально рівнозначні, у HEX такої гарантії немає. Підбирати нові схеми зручно, змінюючи лише третій параметр, тон.

Виклик у редакторі не змінюється: color="red" вмикає червону схему, color="orange" помаранчеву. Атрибут за замовчуванням залишено зеленим, як у вихідній функції.

Доступність: те, що найчастіше ламають

Пряма відповідь: кнопці потрібні видимий фокус, достатній розмір цілі та повага до налаштувань анімації. Це не рекомендації «для галочки». Аудит 17,2 млн сайтів у Web Almanac 2025 показав, що 67% сайтів прибирають обведення фокусу, а контраст за WCAG витримують лише 30%.

Правова рамка також посилилася: з 28 червня 2025 року застосовується European Accessibility Act, і вимоги доступності для цифрових продуктів у ЄС стали юридичною нормою, а не побажанням.

Критерій 2.5.8 Target Size (Minimum) рівня AA з WCAG 2.2 вимагає, щоб інтерактивна ціль займала не менше ніж 24 на 24 CSS-пікселі або мала еквівалентний вільний відступ навколо.

Наша кнопка з padding: 12px 24px проходить мінімум із запасом, але два правила варто додати окремо:

1
.myprefix-button {
2
    min-block-size: 44px;
3
    align-content: center;
4
}
5
 
6
@media (prefers-reduced-motion: reduce) {
7
    .myprefix-button {
8
        transition: none;
9
    }
10
}

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

Темна тема через light-dark()

Одна функція замінює медіазапит prefers-color-scheme повністю. Вказуєте два значення, світле й темне, а браузер сам обирає потрібне за активною схемою. Згідно з довідкою MDN, функція light-dark() має статус Baseline Newly available із травня 2024 року, тобто працює в усіх актуальних браузерах.

1
:root {
2
    color-scheme: light dark;
3
}
4
 
5
.myprefix-button {
6
    --btn-bg: light-dark(oklch(58% 0.15 145), oklch(70% 0.13 145));
7
    --btn-fg: light-dark(#fff, oklch(22% 0.02 145));
8
}

Рядок color-scheme: light dark обов’язковий: без нього функція не активується. Для темної схеми фон зроблено світлішим, а текст темним: на темному полотні насичені темні кнопки провалюються — це типова помилка. Детальний розбір темізації з усіма підводними каменями є в матеріалі web.dev про колірні теми.

Якщо ваша аудиторія користується старими корпоративними браузерами, загорніть новинки в @supports і залиште звичайний HEX запасним значенням: кнопка деградує м’яко, втрачаючи лише точність відтінків.

Безпека: три рядки, про які забувають

Спочатку головне: target="_blank" без rel="noopener noreferrer" відкриває tabnabbing-уразливість. Сторінка, на яку веде кнопка, отримує доступ до window.opener і може підмінити вкладку з вашим сайтом. У нашій функції атрибут додається автоматично, але під час доопрацювань його легко втратити.

Екранування не менш важливе. esc_url() відсікає небезпечні протоколи на кшталт javascript:, а esc_attr() не дає вирватися з атрибута. Прибирати ці виклики заради стислості не можна в жодному шорткоді, який приймає дані з редактора.

І останнє: вміст $content навмисно не проганяється через wp_kses_post(), щоб працювали вкладені шорткоди. Якщо ж ви дозволите вставляти кнопки через форми з фронтенду, обгорніть $label у wp_kses_post() перед виведенням.

Як перевірити кнопку перед публікацією

Швидка перевірка займає пару хвилин і ловить майже всі проблеми, з якими потім приходять читачі. Пройдіться за списком до того, як ставити кнопку в робочі записи:

• Клацніть по кнопці мишею і переконайтеся, що посилання відкривається в потрібній вкладці.
• Пройдіть сторінку клавішею Tab: обведення фокуса має бути помітним з першого погляду.
• Увімкніть емуляцію темної схеми в DevTools (панель Rendering, пункт prefers-color-scheme) і подивіться обидва варіанти фону.
• Там же увімкніть емуляцію prefers-reduced-motion і переконайтеся, що кнопка перестала анімуватися.
• Відкрийте сторінку в мобільному режимі та спробуйте влучити по кнопці великим пальцем.

Якщо всі пункти пройдено, шорткод готовий до масового використання. Заведіть звичку проганяти цей список після кожного виправлення стилів: регресії в станах фокуса та темної теми очима не видно, поки спеціально не подивишся. А найчастіші запитання про роботу шорткода зібрані нижче.

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

Чи працює такий шорткод у Block Editor?

Так, повністю. Вставте блок «Шорткод» і всередині рядок [button ...]. Розмітка збирається на сервері під час виведення запису, тому редактору байдуже, яким способом тег потрапив у контент. Для часто використовуваних елементів з часом має сенс зареєструвати нативний блок через register_block_type(), але це окремий проєкт.

Що робити, якщо браузер відвідувача не розуміє oklch() або light-dark()?

Загорніть сучасні значення в директиву @supports і залиште звичайний HEX як значення за замовчуванням. Старий браузер застосує запасний колір, новий візьме OKLCH. Кнопка залишиться робочою в обох випадках: м’яка деградація зачіпає тільки точність відтінків і автоматику темної теми, а не функціональність.

Чому шорткод виводиться на сторінці як текст у квадратних дужках?

Найчастіше функція не зареєстрована: перевірте, що functions.php зберігся без синтаксичних помилок і хук init спрацював. Другий варіант: ви вставили тег у файл шаблона, а там потрібен явний виклик echo do_shortcode( '[button ...]' ). Увімкніть WP_DEBUG і подивіться лог помилок.

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

Найшвидший шлях: емодзі прямо в тексті, наприклад text="📥 Скачать". Для SVG передайте адресу файлу окремим атрибутом і виведіть тег <img> всередині посилання через той самий sprintf. Варіант із набором Dashicons теж робочий: псевдоелемент ::before плюс font-family: dashicons в окремому класі.

Чи потрібні у 2026 році вендорні префікси для border-radius і transition?

Ні. Ці властивості давно в стандарті й працюють в усіх актуальних браузерах без префіксів. Підтримку конкретної новинки зручно перевіряти за таблицями MDN або на caniuse.com: там же видно статус Baseline, який підказує, коли функцію можна застосовувати без запасних варіантів.

💎 Підсумки та висновки

Для сайту, де потрібна пара типових кнопок, свій шорткод виграє в будь-якого плагіна: повний контроль над розміткою, нуль зайвих скриптів у черзі завантаження і жодної залежності, яку доведеться оновлювати. Візуальний конструктор із десятками готових стилів потрібен рідше, ніж здається, але якщо без нього ніяк, дивіться MaxButtons із каталогу wordpress.org.

Практичний лайфхак: почніть впровадження з рядка color-scheme: light dark у :root і змінних через light-dark(). Це найдешевший спосіб отримати чесну темну тему, який окупається на кожному наступному елементі інтерфейсу. І підводний камінь наостанок: перевіряйте кнопку не лише мишею. Пройдіть сторінку клавішею Tab і переконайтеся, що обведення фокуса видно, інакше частина відвідувачів просто не знайде вашу кнопку.

Забирайте код, вставляйте в дочірню тему і перевірте кнопку на своєму сайті прямо сьогодні. Вийшло чи вперлися в конфлікт із темою? Розкажіть у коментарях, розберемо разом. І підпишіться на оновлення блогу: попереду розбори інших корисних шорткодів.