Создание кнопки – это иногда необходимая задача при разработке контента. Кнопка представляет собой графический элемент, который имеет текст и по которому можно нажать, чтобы перейти по определенной ссылке. Эти элементы делают ссылки более заметными среди остального текста, тем самым улучшая их видимость и кликабельность, что в свою очередь упрощает пользователям поиск необходимой информации.
В актуальной версии WordPress можно изготовить кнопки, не прибегая к установке дополнительных плагинов. Эта функция встроена в стандартный пакет CMS, и в данной статье мы рассмотрим, как ее использовать.
- 1 Как создать кнопку в записи или на странице WordPress
- 2 Альтернативные виды кнопок
- 3 Плагины для создания кнопок в WordPress
1 Как создать кнопку в записи или на странице WordPress
Чтобы создать кнопку в редакторе Gutenberg, выполните следующие шаги:
- Откройте редактор записи или страницы, в которой вы хотите разместить кнопку.
- Нажмите на кнопку +, чтобы добавить новый блок. В открывшемся меню выберите блок Кнопка.
- В текстовом поле, появившемся в блоке кнопки, введите текст, который хотите отобразить на кнопке.
- С правой стороны вы сможете настроить ссылку, на которую будет вести кнопка, с помощью поля Ссылка.
- Можно также изменить стиль кнопки и цвет фона через панель настроек.
- После завершения все изменения будут автоматически сохранены. Нажмите Опубликовать или Обновить, чтобы сохранить изменения.
2 Альтернативные виды кнопок
Кроме стандартной кнопки, в WordPress вы можете создавать различные виды кнопок:
- Кнопки в виде текстовых ссылок – иногда для стилистики лучше использовать выделенные ссылки, которые выглядят как текст.
- Стилевые кнопки – с помощью кастомных CSS-стилей можно создать уникальные кнопки, соответствующие дизайну вашего сайта.
- Кнопки с иконками – добавление иконок к кнопкам помогает привлекать внимание к важным действиям. Попробуйте использовать библиотеки иконок, такие как Font Awesome.
3 Плагины для создания кнопок в WordPress
Если вам нужны более сложные функции или стильные дизайны кнопок, вы можете использовать плагины. Вот некоторые популярные плагины для создания кнопок:
- MaxButtons – позволяет создавать кнопки с помощью визуального редактора, с возможностью выбора стилей и настроек CSS.
- Buttonizer – многофункциональный плагин для создания кнопок с различными функциями и эффектами.
- Shortcodes Ultimate – этот плагин предоставляет широкий набор шорткодов, включая кнопки, которые можно легко вставить в ваш контент.
Как сделать кнопку в странице/записи WordPress
Процесс создания кнопки в WordPress осуществляется быстро и просто. Как упоминалось ранее, для этого не потребуются плагины, и, соответственно, дополнительная настройка. Все манипуляции выполняются в стандартном редакторе записей и страниц (Gutenberg) платформы WordPress.
Зайдите в редактор и нажмите на иконку плюса в любом месте, чтобы добавить новый блок.
Ищите блок “Кнопки” и выберите его. Вы можете найти его, используя строку поиска.
После этого в редакторе появится кнопка. Установите курсор на кнопке, дважды кликнув по ней левой кнопкой мыши, и задайте её текст. Вы можете просто ввести текст прямо на кнопке.
Для того чтобы открыть меню настройки кнопки, необходимо кликнуть на неё в редакторе. Нажмите на иконку в виде цепного звена и укажите URL, на который кнопка должна ссылаться при нажатии. Также URL можно задать в правой панели редактора в поле “Ссылка”. Кроме того, вы можете выбрать опцию открытия данного URL в новой вкладке.
В правой панели редактора также доступны косметические настройки: вы можете выбрать один из двух предложенных стилей, указать цвет фона и текста, настроить радиус скругления углов, а также задать ширину кнопки относительно страницы.
На данный момент в редакторе WordPress нет возможности выравнивать кнопку по левой, правой стороне или по центру с использованием встроенных инструментов. Она будет находиться по левому краю. Также нельзя добавить кнопку в сайдбар или другие области с виджетами.
После того как вы создали кнопку, не забудьте сохранить изменения и опубликовать страницу или запись, чтобы кнопка стала активной для пользователей. Вы также можете использовать специальные CSS-классы для более детальной настройки внешнего вида кнопки, если вы знакомы с основами CSS. Для этого перейдите в настройки блока кнопки и введите свои CSS-классы в поле “Дополнительные CSS-классы”.
Если вы хотите добавить дополнительный функционал, например, отслеживание кликов на кнопку с помощью Google Analytics, вы можете использовать специальные UTM-метки в URL, которые позволят вам анализировать эффективность ваших призывов к действию.
Не забывайте о важности А/Б тестирования: попробуйте разные тексты и цвета кнопок, чтобы определить, что лучше всего работает на вашей аудитории.
Дополнительные варианты кнопок
На момент написания этого обзора в WordPress, помимо стандартной кнопки, существуют еще два дополнительных варианта. Они отличаются визуальным оформлением и представляют собой готовые паттерны настройки.
Первый вариант — “Две кнопки”. Как уже можно понять по названию, это паттерн, состоящий из двух кнопок, каждая из которых имеет свой уникальный стиль. Эти кнопки можно редактировать, как и стандартную, поэтому их стили можно изменять. Все настройки находятся в правой колонке редактора и в дополнительном меню, которое открывается при нажатии на блок в редакторе. Чтобы сделать кнопки более интерактивными, вы можете задать ссылки на страницы вашего сайта или внешние ресурсы. Также рекомендуется использовать разные цвета для кнопок, чтобы привлечь внимание пользователя к ключевым действиям.
Второй вариант — блок “Текст в три столбца с кнопками”. Это паттерн, состоящий из “Абзаца” и “Кнопки”, размещенных в трех столбцах. Каждый блок “Абзац” можно редактировать как текст, а “Кнопки” – соответственно, как кнопки, как было описано ранее. Подобный формат удобен для представления информации, например, описания услуг или товаров, что может повысить вовлеченность пользователей. Не забывайте оптимизировать текст и кнопки под разные устройства, чтобы обеспечить удобное взаимодействие для пользователей на мобильных телефонах и планшетах.
Количество столбцов можно увеличивать, нажав на иконку плюса, или убирать через меню блока. Также вы можете экспериментировать с расположением и размерами столбцов, чтобы создать современный и привлекательный дизайн страницы.
Плагины для создания кнопок в WordPress
Если вам нужно установить кнопку в WordPress лишь несколько раз, то нет смысла загромождать сайт плагинами. Гораздо разумнее воспользоваться существующими функциями WordPress, даже несмотря на их ограничения. Однако, если кнопки нужны часто и с расширенными возможностями, вам придется использовать плагины. На сегодняшний день существует множество плагинов для реализации кнопок в WordPress:
- Shortcodes Ultimate — это плагин, который предоставляет большой выбор шорткодов, позволяющих создавать различные функциональные элементы в контенте, включая кнопки. Он подойдет тем, кто желает не только кнопки, но и другие дополнительные функции.
- WordPress Button Plugin MaxButtons — плагин с множеством настроек для создания кнопок. С его помощью можно детально определить функциональность и внешний вид каждой кнопки.
- WPi Designer Button — аналог предыдущего плагина, обладающий широкими возможностями для настройки дизайна и функций кнопок.
- SiteOrigin Сборник Виджетов — это набор виджетов, который добавляет дополнительные элементы к стандартному выбору WordPress, включая кнопки. Подходит тем, кому нужно разместить кнопку в сайдбаре или других областях с виджетами.
Кроме того, стоит обратить внимание на следующие плагины:
- Elementor — популярный конструктор страниц, который позволяет легко добавлять кнопки и настраивать их стиль. Пользователи могут использовать готовые шаблоны и создавать уникальные дизайны без необходимости программирования.
- WP Buttons — простой в использовании плагин для создания кнопок, который предлагает несколько шаблонов и возможностей настройки стиля. Подходит для тех, кто ищет быстрое и эффективное решение.
- Gravity Forms — хотя это плагин для создания форм, он также позволяет добавлять кнопки с расширенными возможностями взаимодействия, такими как отправка данных или переход на другие страницы.
- Advanced Gutenberg — этот плагин расширяет функциональность редактора Gutenberg и добавляет блоки кнопок с разнообразными настройками для стильного оформления и поведения кнопок.
При выборе плагина важно учитывать, насколько он соответствует вашим потребностям, и проверять совместимость с другими установленными на сайте плагинами. Также стоит обращать внимание на отзывы пользователей и регулярность обновлений, чтобы обеспечить безопасность и стабильность работы вашего сайта.