Коротко: кнопку в WordPress делают четырьмя способами: блоком «Кнопка» в редакторе (самый простой), HTML-кодом со классом, пунктом меню с классом кнопки или в шаблоне/виджете. Внешний вид задают настройками блока или собственным CSS-классом.
Способы
| Способ | Кому подходит |
|---|---|
| Блок «Кнопка» | новичку, без кода |
| HTML + класс | для единого стиля кнопок |
| Пункт меню | выделенная кнопка в шапке |
| Виджет/шаблон | кнопка на всех страницах |
Вкладки: пошагово
- В редакторе нажмите «+».
- Найдите блок «Кнопка».
- Впишите текст и вставьте ссылку.
- Настройте цвет, скругление и размер в панели блока.
- Опубликуйте и проверьте клик.
Самый быстрый путь — вариант «для тех, кто не пишет код».
<a class="btn btn--primary" href="/contacts/">Оставить заявку</a>Вставляют блоком «HTML». Плюс: используется общий класс кнопки, и все кнопки на сайте выглядят одинаково. Плюс: легко менять стиль в одном месте.
- «Внешний вид» → «Меню».
- Добавьте пункт (страницу или произвольную ссылку).
- В настройках пункта укажите «CSS-классы» — например,
btn. - Опишите стиль
.btnв теме.
Так делают заметную кнопку «Записаться» в шапке, отделённую от остальных ссылок.
.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; }Храните стили в «Дополнительных стилях» или в дочерней теме — тогда они не слетят при обновлении.
Практика: добавить кнопку заявки
- Определите главное действие страницы.
- Вставьте кнопку блоком или классом.
- Проверьте, что ссылка ведёт туда, куда нужно.
- Сделайте кнопку заметной: контрастный цвет, достаточный размер.
- Проверьте размер клика на мобильном (не меньше 44px).
- Добавьте событие в аналитику, чтобы считать клики.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кнопки разного вида | каждая настроена отдельно | единый класс |
| Стиль слетел | инлайн-стили/родительская тема | класс + дочерняя тема |
| Кнопка не кликается | битая ссылка | проверить href |
| Мелкая на телефоне | маленький padding | увеличить размеры |
Проверьте себя
Вопросы и ответы
В «Дополнительных стилях» или в дочерней теме — чтобы не потерять при обновлении.
Ссылка ведёт на другую страницу, кнопка выполняет действие (отправка формы). Визуально они могут выглядеть одинаково.
Через position: fixed в углу экрана. Используйте осторожно: она не должна перекрывать контент и кнопку «закрыть» попапов.
Свяжите «мессенджер» или «звонок» с иконкой: разместите SVG внутри кнопки и задайте fill: currentColor, чтобы иконка подхватила цвет текста.
Итоги
- Кнопку добавляют блоком, HTML-кодом, классом в меню или в шаблоне.
- Единый класс + модификаторы — правильный подход.
- Размер клика на мобильном — не меньше 44px.
- Стили держите в дочерней теме или доп. стилях.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.