Коротко: сделать кнопки на сайте WordPress можно тремя путями: блоком «Кнопка» в редакторе, ссылкой с классом кнопки в HTML, или в шаблоне темы через функцию вывода. Внешний вид задают в настройках блока или в CSS, а чтобы стили не «слетали» — используют единый класс кнопки и модификаторы.
Способы добавить кнопку
| Способ | Где | Плюсы |
|---|---|---|
| Блок «Кнопка» | редактор записей/страниц | быстро, без кода |
| Ссылка с классом | блоки «HTML» | полный контроль |
| Шаблон темы | PHP-файлы | кнопка на всех страницах |
| Виджет/блок CTA | настройки темы | повторное использование |
Вкладки: пошагово
- В редакторе нажмите «+» → «Кнопка».
- Введите текст и вставьте ссылку.
- Настройте цвета и скругление в панели блока.
- При необходимости задайте «Дополнительный CSS-класс».
- Опубликуйте и проверьте клик.
У блока есть свои настройки, но наследовать фирменные стили лучше через класс темы.
<a class="btn btn--primary" href="/contacts/">Оставить заявку</a>Ссылку со классом вставляют блоком «HTML». Так удобно задавать единый стиль для всех кнопок, если он описан в теме.
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 8px;
background: #003F8F;
color: #fff;
text-decoration: none;
border: 0;
font: inherit;
cursor: pointer;
transition: background .2s ease;
}
.btn:hover { background: #002a61; }
.btn--ghost {
background: transparent;
border: 1px solid #003F8F;
color: #003F8F;
}Базовый класс плюс модификаторы: «.btn + вариант». Так вы не дублируете код и легко добавляете новые виды.
Если кнопка нужна в шаблоне темы (например, в карточке товара или записи):
<?php
printf(
'<a class="btn btn--primary" href="%s">%s</a>',
esc_url(get_permalink()),
esc_html__('Подробнее', 'textdomain')
);
?>Обязательно экранируйте ссылку (esc_url) и текст (esc_html__) — это базовая безопасность темы.
<a>). Если что-то отправляет или меняет состояние — кнопка (<button>). Визуально они одинаковы, но назначение разное — важно для SEO и доступности.Практика: система кнопок
- Опишите базовый класс
.btnс отступами и радиусом. - Добавьте модификаторы:
--primary(заливка),--outline(рамка),--large/--small. - Опишите состояния:
:hover,:focus-visible,:active,[disabled]. - Соберите «библиотеку» кнопок на отдельной странице для проверки вида.
- Используйте на сайте только классы из системы.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кнопки разного вида | правились настройки каждого блока | единый класс темы |
| Стиль «слетел» | задавали инлайн-стилем | класс + CSS темы |
| Кнопка не кликается | битая ссылка или pointer-events: none |
проверить href и стили |
| Не видно фокуса | убрали outline без замены | свой индикатор фокуса |
Проверьте себя
Вопросы и ответы
В дочерней теме или в «Дополнительных стилях», чтобы они не слетали при обновлении и были доступны блоком «HTML».
Добавьте пункт-ссылку и задайте ему класс кнопки через настройки меню (поле «CSS-классы») и стили темы.
Блок добавляет свои классы и инлайн-стили, которые могут перебивать тему. Используйте один подход: либо настройки блока, либо свои классы.
Да, обязательно: esc_url() для ссылок и esc_html__() для текста. Это защита от XSS.
Итоги
- Кнопку добавляют блоком, HTML-кодом или в шаблоне темы.
- Единый класс
.btn+ модификаторы — правильный подход. - Ссылка или кнопка — по смыслу действия.
- В шаблоне всегда экранируйте URL и текст.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.