Добавление кнопки в WordPress — одна из базовых задач при оформлении сайта и улучшении взаимодействия с пользователями. Кнопки помогают выделить важные действия: переходы, отправку заявок, покупки или подписки. В этой статье рассмотрим несколько способов создания кнопок: с помощью редактора Gutenberg, через кастомный шорткод и с использованием плагина. Вы сможете выбрать подходящий вариант в зависимости от уровня подготовки и задач проекта.
Способ 1.
Добавить кнопку в Gutenberg
Добавление кнопки в редакторе Gutenberg — самый простой и быстрый способ создать кликабельный элемент без использования кода.
Чтобы добавить кнопку на страницу или в запись нажмите кнопку Добавить блок в редакторе Gutenberg и выберите блок «Кнопки».
После добавления блока в редакторе появится кнопка и панель её настроек.
Настройка кнопки Gutenberg
Сначала задайте текст кнопки. Для этого кликните по ней и введите нужный текст, например:
- Купить
- Подробнее
- Обратная связь
После этого укажите ссылку для кнопки. Это может быть как внутренняя страница сайта, так и ссылка на другой сайт.
Когда текст и ссылка будут заданы, можно перейти к оформлению кнопки.
Оформление кнопки
В правой панели настроек доступны следующие параметры внешнего вида:
- Стиль — заливка или контур;
- Цвет — цвет фона и текста;
- Типографика — размер шрифта;
- Скругление углов — радиус закругления.
Дополнительно можно настроить:
- ширину кнопки;
- выравнивание на странице.
Дополнительные параметры
В разделе «Дополнительно» можно:
- указать якорь для кнопки
- добавить дополнительные классы
- выбрать HTML-элемент для кнопки (ссылка
<a>или кнопка<button>) - добавить атрибут
rel
Способ 2.
Добавление кнопки с помощью плагина MaxButtons
Плагин MaxButtons — это один из самых функциональных инструментов для создания кнопок в WordPress без кода. Он значительно расширяет возможности стандартного блока Gutenberg и подходит, когда нужны гибкие стили, повторное использование кнопок или сложные сценарии.
Установите и активируйте плагин в админке WordPress.
Процесс создания кнопки в плагине MaxButtons достаточно простой, но при этом даёт гибкие настройки. Ниже — пошаговая инструкция от установки до вставки на сайт.
Шаг 1.
Создание кнопки
В боковом меню админ-панели откройте раздел MaxButtons и нажмите кнопку «Добавить новую». Откроется редактор с настройками кнопки и окном предпросмотра.
Шаг 2.
Настройка кнопки
Редактор MaxButtons содержит большое количество параметров. Самое важное — указать URL и текст на кнопке. Остальные параметры оформления можно изменять по своему усмотрению.
После завершения настройки нажмите кнопку «Сохранить».
Шаг 3.
Добавление кнопки на страницу
После сохранения кнопки в верхней части страницы появится уведомление, которое будет содержать шорткод кнопки. Скопируйте его.
Чтобы добавить кнопку на страницу, откройте редактор страницы и добавьте в нужном месте шорткод кнопки.
- Сохраните изменения откройте страницу и проверьте результат.
Если вариант с шорткодом вам кажется сложным, можете добавить кнопку в редакторе Gutenberg через блок MaxButtons.
- Найдите блок MaxButtons в редакторе Gutenberg и добавьте его на страницу.
- В правой панели настроек нажмите кнопку Select Button.
- Во всплывающем окне выберите нужную кнопку и она сразу добавится на страницу редактирования.
- Сохраните изменения и проверьте результат.
- Готово! Кнопка добавлена на страницу.
Способ 3.
Добавление кнопки через кастомный шорткод
Добавление кнопки в WordPress через кастомный шорткод — более продвинутый и гибкий способ по сравнению с редактором Gutenberg или плагинами. Он подойдёт, если нужно полностью контролировать внешний вид и поведение кнопки.
Шаг 1.
Создание шорткода
Откройте файл functions.php и добавим код создания шорткода pretty_button.
/**
* Функция шорткода кнопки
*
* @param mixed $atts
* @return void
*/
function output_shortcode_pretty_button( $atts = [] ) {
$atts = shortcode_atts(array(
'text' => 'Кнопка',
'link' => '#',
'style' => 'fill',
'color' => 'blue',
'target' => '_self'
), $atts);
return sprintf(
'<a href="%s" class="pretty-button pretty-button--%s pretty-button--%s" target="%s">%s</a>',
esc_url($atts['link']),
esc_attr($atts['style']),
esc_attr($atts['color']),
esc_attr($atts['target']),
esc_html($atts['text'])
);
}
add_shortcode('pretty_button', 'output_shortcode_pretty_button');Шорткод поддерживает параметры, с помощью которых можно менять текст, стиль, цвет кнопки.
Шаг 2.
Добавление стилей для кнопки
Параметры шорткода позволяют создавать неограниченное количество вариантов оформления. Например, чтобы создать жёлтую кнопку с обводкой, добавьте следующий CSS-код:
.pretty-button--border.pretty-button--yellow{
border: 1px solid #ffc107;
color: #ffc107;
}Для примера рассмотрим стили для трех цветов кнопки: синяя, зеленая и красная.
.pretty-button{
--color-green: #28a745;
--color-blue: #0073aa;
--color-red: #dc3545;
padding: 12px 18px;
border-radius: 12px;
text-decoration: none !important;
white-space: nowrap;
display: inline-block;
}
.pretty-button--fill.pretty-button--blue{
background-color: var(--color-blue);
color: #fff;
}
.pretty-button--border.pretty-button--blue{
border: 1px solid var(--color-blue);
color: var(--color-blue);
}
.pretty-button--fill.pretty-button--green{
background-color: var(--color-green);
color: #fff;
}
.pretty-button--border.pretty-button--green{
border: 1px solid var(--color-green);
color: var(--color-green);
}
.pretty-button--fill.pretty-button--red{
background-color: var(--color-red);
color: #fff;
}
.pretty-button--border.pretty-button--red{
border: 1px solid var(--color-red);
color: var(--color-red);
}Шаг 3.
Добавление кнопки на страницу
Откройте редактор страницы и добавьте шорткод кнопки:
[pretty_button text="Контакты" link="/contacts/" style="border" color="green" target="_self"]Он поддерживает следующие параметры:
text– текст на кнопке;link– ссылка кнопки;style– стиль кнопки (border – обводка или fill – заливка);color– цвет кнопки;target– html-атрибут target (_self– открытие в текущем окне,_blank– открытие в новом окне).
[pretty_button text="Контакты" link="/contacts/" style="border" color="green"]Такой код добавит на страницу зеленую кнопку с обводкой и текстом Контакты.
Теперь выведем синюю кнопку с заливкой и ссылкой на внешний сайт.
[pretty_button text="Наши партнеры" link="https://external-site.ru" style="fill" color="blue"]
Стили кнопок, которые поддерживает данный шорткод по умолчанию:
[pretty_button text="Синяя с фоном" style="fill" color="blue"]
[pretty_button text="Синяя с обводкой" style="border" color="blue"]
[pretty_button text="Зеленая с фоном" style="fill" color="green"]
[pretty_button text="Зеленая с обводкой" style="border" color="green"]
[pretty_button text="Красная с фоном" style="fill" color="red"]
[pretty_button text="Красная с обводкой" style="border" color="red"]
Заключение
Теперь вы знаете несколько способов добавления кнопок в WordPress — от простого использования Gutenberg до создания собственных шорткодов с гибкой настройкой стилей. Для большинства задач подойдут стандартные инструменты редактора или плагин MaxButtons, а кастомный шорткод станет хорошим решением для более сложных и нестандартных проектов. Выбирайте вариант, который лучше всего подходит под ваши задачи.
