Создание кнопки в WordPress является одной из основных задач при разработке сайта и взаимодействии с посетителями. Кнопки играют важную роль в акцентировании внимании на ключевых действиях: переходах, оформлении заявок, покупках или подписках. В этой статье мы рассмотрим различные методы добавления кнопок: с помощью редактора Gutenberg, через индивидуальный шорткод и с использованием плагина. Вы сможете выбрать наиболее подходящий способ в зависимости от ваших навыков и целей проекта.
1. Редактор Gutenberg: Один из самых простых способов создания кнопки — это использование встроенного блока «Кнопка» в редакторе Gutenberg. Просто добавьте новый блок, выберите «Кнопка», и введите текст, который хотите отобразить на кнопке. Вы можете легко изменить цвет и стиль кнопки через панель настроек блока.
2. Шорткоды: Если вы хотите использовать кнопки более универсально или в местах, где редактор Gutenberg не доступен, вы можете создать шорткод. Например, добавив следующий код в файл functions.php вашей темы:
function my_button_shortcode($atts) { $atts = shortcode_atts( array( 'text' => 'Кнопка', 'url' => '#' ), $atts ); return ''. esc_html($atts['text']) .''; } add_shortcode('my_button', 'my_button_shortcode');Теперь вы можете использовать шорткод [my_button text=»Нажми меня» url=»https://example.com»] в любом месте вашего контента.
3. Плагины: Существует множество плагинов для создания кнопок в WordPress, которые предоставляют обширные возможности. Популярные плагины, такие как Elementor или Buttonizer, предлагают различные стили и дополнительные функции, такие как анимация и интеграция с формами. Установите плагин через админ панель, активируйте его, и следуйте инструкциям для создания кнопок.
Независимо от выбранного метода, помните, что кнопки должны быть заметными и интуитивно понятными для пользователей. Это поможет повысить конверсию и улучшить взаимодействие с вашим сайтом.
Добавить кнопку в Gutenberg
Вставка кнопки с помощью редактора Gutenberg представляет собой самый интуитивно-понятный и быстрый метод создания кликабельного элемента без необходимости писать код.
Чтобы разместить кнопку на странице или в записи, нажмите на кнопку Добавить блок в редакторе Gutenberg и выберите блок «Кнопки».
После этого в редакторе появится кнопка вместе с панелью для её настройки.
Настройка кнопки в Gutenberg
Сначала вам нужно задать текст для кнопки. Для этого кликните по кнопке и введите нужное слово, например:
- Купить
- Подробнее
- Обратная связь
После этого задайте ссылку для кнопки. Это может быть как страница вашего сайта, так и внешний ресурс.
Когда текст и ссылка будут установлены, можно переходить к оформлению кнопки.
Оформление кнопки
В правой панели управления имеются следующие возможности для настройки внешнего вида:
- Стиль — заливка или контур;
- Цвет — оттенок фона и текста;
- Типографика — размер шрифта;
- Скругление углов — радиус закругления.
Вы также можете настроить:
- ширину кнопки;
- выравнивание на странице.
Также не забудьте протестировать кнопку, чтобы убедиться, что она работает так, как задумано. Вы можете изменить текст или оформление в любое время, даже после публикации записи или страницы.
Дополнительные настройки
В разделе «Дополнительно» можно:
- задать якорь для кнопки;
- добавить дополнительные CSS-классы;
- выбрать HTML-элемент для кнопки (ссылка или кнопка);
- добавить атрибут rel.
Обратите внимание, что правильная настройка атрибутов может способствовать улучшению SEO и безопасности. Например, добавление атрибута rel=»noopener noreferrer» для внешних ссылок может снизить риск уязвимостей.
Добавление кнопки с помощью плагина MaxButtons
Плагин MaxButtons — это один из самых мощных инструментов для создания кнопок в WordPress без необходимости программирования. Он значительно расширяет функционал стандартного блока Gutenberg и подходит для создания кнопок с гибкими стилями, их повторного использования или реализации сложных сценариев.
Установите и активируйте плагин в админке вашего WordPress.
Процесс создания кнопки в MaxButtons простой, но при этом разнообразный. Далее представлена пошаговая инструкция от установки до добавления на сайт.
Создание кнопки
В боковом меню административной панели выберите раздел MaxButtons и нажмите на кнопку «Добавить новую». Откроется редактор с настройками кнопки и окном предварительного просмотра.
Настройка кнопки
Редактор MaxButtons предлагает множество параметров для настройки. Главное — указать URL и текст для кнопки. Остальные параметры оформления можно настроить по своему усмотрению. Например, вы можете изменить цвет фона, шрифт, размер и добавить специальные эффекты при наведении курсора.
По завершении настройки нажмите кнопку «Сохранить».
Добавление кнопки на страницу
После сохранения в верхней части страницы появится уведомление с шорткодом кнопки. Скопируйте его.
Чтобы вставить кнопку на страницу, перейдите в редактор страницы и в нужном месте добавьте скопированный шорткод.
- Сохраните изменения, откройте страницу и проверьте результат.
Если использование шорткода кажется вам сложным, можно вставить кнопку в редакторе Gutenberg через блок MaxButtons.
- Найдите блок MaxButtons в редакторе Gutenberg и добавьте его на страницу.
- В правой панели настройки нажмите на кнопку Select Button.
- В появившемся окне выберите нужную кнопку, и она будет добавлена на страницу редактирования.
- Сохраните изменения и проверьте результат.
- Готово! Кнопка успешно добавлена на страницу.
Дополнительные возможности
МаксКнопки также позволяют создавать кнопки, которые перенаправляют пользователей на внешние ссылки, загружают документы, запускают всплывающие окна или формы. Используйте кнопку «Дополнительные настройки» для установки параметров, таких как размер кнопки и отступы.
Советы по улучшению дизайна кнопок
— Оптимизируйте текст кнопки для лучшей считываемости: используйте контрастные цвета и подходящий шрифт.
— Применяйте эффекты при наведении (hover) для большей интерактивности.
— Не перегружайте кнопку лишней информацией; текст должен быть кратким и ясным.
Следуя этой инструкции и полезным советам, вы сможете создавать привлекательные и функциональные кнопки, которые улучшат пользовательский опыт вашего сайта.
Добавление кнопки через кастомный шорткод
Создание кнопки в WordPress через кастомный шорткод представляет собой более сложный и гибкий подход по сравнению с редактором Gutenberg или плагинами. Этот способ подходит, если вам необходимо полностью контролировать внешний вид и функциональность кнопки.
Чтобы создать кастомный шорткод, необходимо добавить соответствующий код в файл functions.php вашей темы или в специально созданный плагин. Например, вы можете использовать следующий код:
function custom_button_shortcode($atts) {
$atts = shortcode_atts(
array(
'text' => 'Нажми меня',
'url' => '#',
'class' => '',
),
$atts,
'custom_button'
);
return '' . esc_html($atts['text']) . '';
}
add_shortcode('custom_button', 'custom_button_shortcode');С помощью данного кода вы создаете шорткод [custom_button], который принимает три параметра: text (текст кнопки), url (ссылка, на которую ведет кнопка) и class (дополнительные классы для стилевого оформления). Вы можете использовать его в любом месте контента, добавляя, например, [custom_button text=»Кликни сюда» url=»https://example.com» class=»highlight»] для создания кнопки с индивидуальными параметрами.
Не забудьте стилизовать кнопку с помощью CSS, добавив соответствующие правила в файл стилей вашей темы. Пример простого стиля для кнопки:
.custom-button {
padding: 10px 20px;
background-color: #0073aa;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.custom-button:hover {
background-color: #005177;
}Такая настройка позволяет вам легко изменять внешний вид кнопки и адаптировать её под стиль вашего сайта. Этот подход дает возможность создавать более уникальный контент и улучшать пользовательский опыт на сайте.
Создание шорткода
Откройте файл 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(
'%s',
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');Шорткод поддерживает параметры, позволяющие изменять текст, стиль и цвет кнопки.
Добавление стилей для кнопки
Параметры шорткода позволяют создавать множество вариантов оформления. Например, для создания жёлтой кнопки с обводкой, используйте следующий CSS-код:
.pretty-button--border.pretty-button--yellow
В качестве примера рассмотрим стили для трёх цветов кнопки: синей, зеленой и красной.
.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);
}
Добавление кнопки на страницу
Перейдите в редактор страницы и вставьте шорткод кнопки:
[pretty_button text="Контакты" link="/contacts/" style="border" color="green" target="_self"]Шорткод поддерживает следующие параметры:
- text – текст кнопки;
- link – ссылка, на которую ведёт кнопка;
- style – стиль оформления кнопки (border – обводка или fill – заливка);
- color – цвет кнопки;
- target – атрибут 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, а создание кастомного шорткода станет отличным вариантом для более сложных и нестандартных проектов. Выбирайте тот способ, который лучше всего соответствует вашим требованиям.
Оптимизация пользовательского интерфейса
Чтобы кнопки смотрелись более профессионально, рекомендуется добавить эффект hover (наведение мыши). Например, можно использовать следующий CSS:
.pretty-button:hover {
opacity: 0.8;
transform: scale(1.05);
transition: 0.3s ease;
}
Это добавит немного динамики кнопкам и сделает их более интерактивными.
Тестирование и отладка
Не забудьте протестировать шорткод на различных устройствах и браузерах, чтобы убедиться, что кнопки отображаются корректно и ведут себя как ожидается. Также полезно обеспечить достаточный контраст текста и фона для лучшей читаемости.
Дополнительные функции
Вы можете расширить функциональность шорткода, добавив дополнительные параметры, такие как иконки перед текстом кнопки. Для этого потребуется изменить функцию и добавить соответствующий HTML-код. Например:
function output_shortcode_pretty_button( $atts = [] ) {
$atts = shortcode_atts(array(
'text' => 'Кнопка',
'link' => '#',
'style' => 'fill',
'color' => 'blue',
'target' => '_self',
'icon' => '' // новый параметр
), $atts);
return sprintf(
'%s %s',
esc_url($atts['link']),
esc_attr($atts['style']),
esc_attr($atts['color']),
esc_attr($atts['target']),
!empty($atts['icon']) ? ' .')
' : '',
esc_html($atts['text'])
);
}
Это даст возможность использовать иконки для кнопок, что добавит визуальный интерес и сделает их более привлекательными.