Вордпресс способен на многое. Движок развивается, даже если вы делаете свой сайт на вордпресс впервые, то можете делать его современным и красивым. А также кастомизировать (уникализировать) шаблонную тему и сделать сайт непохожим на другие за счет уникальных картинок, блоков внимания и кнопок. Вот как добавить кнопки в постах и на страницах рассмотрим в этой статье.
- Способы добавление кнопки на сайт
- Плагины добавления кнопки через шорткод
- Shortcodes Ultimate
- Button Plugin MaxButtons
- Button Pro — CSS3
- WPi Designer Button Shortcode
- Плагин добавления кнопки без шорткода
- Forget About Shortcode Buttons
- Как добавить кнопку в водпресс с помощью внешнего генератора
- Daruse.ru
- Maxzon.ru
- Добавление кнопки без плагина, через CSS/HTML код
- Простая HTML кнопка
- Редактор блоков
- Заключение
Способы добавление кнопки на сайт
Способов добавления кнопок я знаю три- с помощью плагинов и шорткодов и ковыряясь в CSS/HTML коде. Первый способ вполне доступен начинающим, второй, понятное дело более продвинутым пользователям, зато он может быть более легким. Есть еще один способ — это генерирование кнопки на внешних сервисах и добавление ее в пост.
- Шорткоды и плагины
- Внешние сервисы
- CSS/HTML код
Более подробно рассмотрим все варианты.
Плагины добавления кнопки через шорткод
Преимущество плагинов в удобстве — они добавляют нужный функционал, остается только вставить шорткод или нажать кнопку действия в редакторе и вы легко добавляете красивую кнопку в текст. Недостаток плагинов — они могут утяжелять сайт и увеличивать время загрузки.
Shortcodes Ultimate
Это целый комбайн шорткодов, причем достаточно удобный в использовании. Я уже писал, как с помощью этого плагина добавить блоки внимания. Рассмотрим как добавить кнопку.
Пишу достаточно подробно, так как сам использую этот плагин, имею возможность показать результат в действии
После установки плагина, над редактором появится кнопка [Вставить шорткод]. Кликаем на нее
Откроется поле вариантов, среди которых выбираем иконку со стильной кнопкой, она обозначена сердечком.
Далее вы заполняете все нужные поля:
- ссылка
- открытие страницы (в новом окне или в том же)
- Выбираете стиль (я в этот раз выбрал стекло, а еще есть 7 вариантов бесплатно)
- Цвет фона кнопки и текста (можно поиграть цветами или выбрать фирменные цвета сайта)
- Размер и размещение
- Радиус скругления — несколько вариантов
- Можно добавить иконку (из каталога или загрузить свою)
- Цветом иконки тоже можно поиграть, как и тенью
- Далее поля заполняете на ваше усмотрение, можно опустить
- В конце, в разделе «содержимое» пишите текст на кнопке
- И жмете «Вставить шорткод»
В итоге у вас получится что-то такое ( а результат в действии вы видите под картинкой)
Красная резиновая кнопка, стиль — мягкий («стекло», который хотел ранее — не самый прикольный), иконка в виде сердечка и внутренняя ссылка на карту сайта (проверьте — кликабельно).
Кнопку можно сохранить как шаблон, чтобы затем использовать его для похожих целей.
Резюме: плагин достаточно удобен, учитывая, что это комбайн и дает возможность не только ставить кнопки, но много других украшений (блоки внимания, буквицы, разделители, списки и др.) — рекомендую. Плагин русифицирован, даже более того делается русскоязычным разработчиком.
Button Plugin MaxButtons
Под номером два идет не менее популярный плагин. У него две функции — это кнопки социальных сетей и кастомные кнопки. Кнопки шаринга — это тема иной статьи. Мы рассмотрим создание произвольных кнопок.
В отличие от Shortcodes Ultimate, здесь нужно заранее создать кнопку, а уже потом ее вставить в пост. В этом есть свои недостатки и прелести. Преимуществом будет быстрое добавление готовой уникальной кнопки. Недостатки — нужно выходить из поста, чтобы сформировать новую кнопку. и плагин не русифицирован (хотя, когда это нас останавливало).
Итак создаем новую кнопку:
- Вводим название кнопки
- Урл,
- Выбираем атрибуты
- Выбираем шрифт, его положение и цвет
- Далее настраиваем рамки и скругления,
- Выбираем цвет рамок и играем тенями
- Ну и цвет самой кнопки (можно настроить градиент)
Здесь удобно, что справа сразу отображается предпросмотр, поэтому можно делать правки в режиме реального времени:
Вот только когда кнопка готова, придется каждый раз ползать на страницу MaxButtons, чтобы скопировать настроенный шорткод созданной кнопки.
В редакторе он сам не появляется (только в про-версии за 49 баксов). Также по цене 5 баксов вы можете купить уже готовые наборы кнопок от maxbutton.
Для быстрой вставки шорткодов можно воспользоваться дополнительным плагином AddQuicktag (о нем я писал в статье про блоки внимания). Но это еще один плагин, что может утяжелять сайт.
Резюме: плагин интересен только в платной версии
Button Pro — CSS3
Button Pro — это простой в использовании и красочный набор кнопок, выполненный в CSS3.
В пакет также входит набор кнопок, используемых известными веб-сервисами (google, twitter, facebook, wordpress), воссозданными на чистом CSS3.
Имеется только платная версия (простая лицензия 4$, расширенная 20$). Купить его можно по ссылке.
- 11 цветовых вариаций
- 3 доступных размера
- Легко реализовать, вам просто нужно добавить пару классов.
- Работает над ссылками, входами, кнопками
- Вы можете легко добавить значок к кнопкам, чтобы привлечь внимание пользователя
- Также включен мини-набор кнопок, используемых известными веб-сервисами (Google, Twitter, Facebook, WordPress)
WPi Designer Button Shortcode
Это мини-дизайнерская студия на вордпресс позволяет генерировать уникальные и стильные CSS3 кнопки в постах для ссылок и призыва к действию (CTA). Поддерживает функции:
- Создание красивых кнопок.
- Создание двойных кнопок.
- Создание призыва к действию.
- Создание кнопок «Поделиться».
- Создание многократно используемых стилей кнопок для кнопок, кнопок CTA и кнопок Share.
- Создание кнопок с всплывающим окном, где вы можете вставить шорткоды.
- Создание кнопок с выпадающим меню.
- Создание кнопки «Один запрос» для нескольких продуктов или услуг с помощью плагина Contact Form 7.
После установки нужно сделать несколько действий в настройках. Плагин не русифицирован, но онлайн-переводчик вам в помощь. Переходим в глобальные настройки и делаем как на скриншоте:
Там же — в глобальных настройках можно включить кнопки «поделиться» и кнопки call-to-action. Дальше вы можете насоздавать бесконечное количество нужных стилей и кнопок. Вставляются они через редактор — там появляется дополнительный значок.
Остается только настроить стили и создать «готовые» кнопки. В генераторе много подсказок, есть готовые пресеты, есть подборки цветов, поэтому экспериментируйте — там все достаточно понятно. Рассмотрим на примере создания готовой кнопки, стили, двойные кнопки и призыв к действию делаются похожим образом.
Чтобы создать кнопку сначала идем Настройки — Buttom WPi — button — добавить новую. Откроется страница, где будем создавать кнопку. Введите ее название и сразу обратите внимание на номер Id и шорткод (зеленые стрелки на скрине). Выбрать стили из предложенных или ввести прессет из ранее созданных вами стилей.
Далее можем выбрать иконку из набора:
Можно также поиграть с настройками ссылок:
На самом деле не так сложно как кажется, зато вы сможете создавать классные кнопки. Вставить их просто — вам нужно выбрать айди заранее созданной и вписать его в всплывающее окно при добавлении.
Редактор сам подставить шорткод.
Резюме: вполне годный инструмент для вставки в вордпресс многообразия кнопок.
Есть и другие плагины, но на мой взгляд — эти более удобные в работе, имеют необходимые функции и выдают более современные кнопки.
Плагин добавления кнопки без шорткода
Шорткод — это удобно. Но может случиться так, что разработчик забросил плагин и с обновленным движком плагин конфликтует. Или вы решили заменить плагин на новый. Отключая вышеописанные плагины, вы можете получить мусорный код в текстах, кнопки просто пропадут оставив после себя что-то подобное:
Поэтому, следующий плагин — это суперрешение создания кнопок на css3 без шорткодов.
Forget About Shortcode Buttons
Классный плагин, который не всталяет шорткоды. Устанавливается обычным путем, мусорный код не вставляет и главное, все кнопки остаются на месте даже после удаления плагина. Идеален для малостраничников — сделал и удалил все лишние плагины.
Чтобы добавить кнопку:
- откройте на редактирование запись/страницу;
- поставьте курсор в место, где будет кнопка;
- нажмите на панели инструментов кнопку Insert Button.
В появившемся окне, вводите текст кнопки, URL-адрес и выберите параметры цвета/стиля. Так же, как и с MaxButtons, вы можете просмотреть изменения в режиме реального времени:
В принципе, хотя плагин не русифицирован — все интуитивно понятно. Кнопки получаются вполне себе симпатичные.
Резюме: отличный плагин, рекомендую для использования. Особенно если у вас не стоит Shortcodes Ultimate. На сегодняшний день это, пожалуй, самый быстрый и простой способ, чтобы сделать активные кнопки для WordPress, которые будут все время работать на вас и повышать конверсию ваших публикаций.
Как добавить кнопку в водпресс с помощью внешнего генератора
Так как спрос на красивые кнопки есть, то есть и онлайн-генераторы кнопок. Суть работы этих сервисов проста – с помощью разных инструментов настраивается дизайн и параметры кнопки, а затем просто генерируется код, который можно использовать на сайте.
Кому это подходит? Вебмастерам и блогерам, которым на проекте нужно 1 — 2 кнопки и ставить плагин нет необходимости.
Daruse.ru
Достаточно простой генератор. Из доступных опций есть текст кнопки, цвет текста, цвет кнопки и границы, толщина границ, настройка отступов, закругление углов. А также есть возможность установки ссылки, которая будет открываться при клике на вашу кнопку. Не достаёт только опций, связанных с эффектом, который включается при наведении мышки. Поэтому кнопки из этого сервиса выглядят статично.
С моей темой вордпресс кнопки не хотели устанавливаться корректно. Пришлось делить: отдельно стили и код кнопки (есть там такая опция). Залазить в настройки css та еще работа.
Резюме: слишком много телодвижений — проще установить плагин Forget About Shortcode Buttons (см.выше). Хотя вы можете попробовать.
Maxzon.ru
Более интересный инструмент — множество настроек, причем с ползунками, можно добиться интересного эффекта.
Есть возможность настроить вид кнопки в обычном состоянии, при наведении мышки и при нажатии. Можно настраивать размеры самой кнопки, шрифта, а также все цвета.
Сервис сразу выдает два кода:
- для стилей (правим файл style.css или добавляем через настройку темы как это сделано в root)
- для самой кнопки (код тоже нужно править, заменив href=»#» на нужную ссылку)
Резюме: в целом имеет место быть, но опять же необходимо знание как вставить код.
Добавление кнопки без плагина, через CSS/HTML код
Простая HTML кнопка
Старый как веб-мир способ — прописать в коде тег button:
<button >Seodelux.ru</button>
Кнопку можно выровнять и прописать ей урл, будет выглядеть так:
Не очень хорошо, верно. Ну да стили не прописаны, все по умолчанию. Но есть и еще способ сделать красивую кнопку без плагинов.
Редактор блоков
Всё еще пользуетесь классическим редактором вордпресс? Я тоже, поэтому у меня стоит плагин шорткодес ультимате. Для создания кнопок без плагинов, нужно просто переключиться на новый редактор гутенберг и добавить там кнопку.
Жмем на плюсик слева вверху. Выбираем блок «кнопка».
Настраиваем стиль кнопки и цвет текста.
Можно также настроить:
- цвет фона (сплошной и градиентный)
- выбрать произвольный цвет (не из набора)
- закругление углов — от квадратной до круглой кнопки
- открытие в этой вкладке или в новой
- атрибуты rel, например nofollow
Всё. Очень просто, без дополнительных плагинов, настройки html кодов и правки файлов сайта. Водпресс- это сила, надо просто полностью использовать его функционал.
Заключение
Есть много способов добавить кнопку на сайт. Если у вас это разовая потребность — воспользуйтесь редактором блоков. Если вы часто пользуете кнопки, стоит выбрать один из плагинов.
Спасибо, что дочитали, надеюсь информация была полезна. Смело можете поставить рейтинг. Вам несложно, а мне приятно.