Как сделать кнопку в вордпрессе
Как сделать кнопку в посте или на странице в WordPress
Вордпресс способен на многое. Движок развивается, даже если вы делаете свой сайт на вордпресс впервые, то можете делать его современным и красивым. А также кастомизировать (уникализировать) шаблонную тему и сделать сайт непохожим на другие за счет уникальных картинок, блоков внимания и кнопок. Вот как добавить кнопки в постах и на страницах рассмотрим в этой статье.
Способы добавление кнопки на сайт
Способов добавления кнопок я знаю три- с помощью плагинов и шорткодов и ковыряясь в CSS/HTML коде. Первый способ вполне доступен начинающим, второй, понятное дело более продвинутым пользователям, зато он может быть более легким. Есть еще один способ — это генерирование кнопки на внешних сервисах и добавление ее в пост.
Более подробно рассмотрим все варианты.
Плагины добавления кнопки через шорткод
Преимущество плагинов в удобстве — они добавляют нужный функционал, остается только вставить шорткод или нажать кнопку действия в редакторе и вы легко добавляете красивую кнопку в текст. Недостаток плагинов — они могут утяжелять сайт и увеличивать время загрузки.
Shortcodes Ultimate
Это целый комбайн шорткодов, причем достаточно удобный в использовании. Я уже писал, как с помощью этого плагина добавить блоки внимания. Рассмотрим как добавить кнопку.
Пишу достаточно подробно, так как сам использую этот плагин, имею возможность показать результат в действии
После установки плагина, над редактором появится кнопка [Вставить шорткод]. Кликаем на нее
Откроется поле вариантов, среди которых выбираем иконку со стильной кнопкой, она обозначена сердечком.
Далее вы заполняете все нужные поля:
В итоге у вас получится что-то такое ( а результат в действии вы видите под картинкой)
Красная резиновая кнопка, стиль — мягкий («стекло», который хотел ранее — не самый прикольный), иконка в виде сердечка и внутренняя ссылка на карту сайта (проверьте — кликабельно).
Кнопку можно сохранить как шаблон, чтобы затем использовать его для похожих целей.
Резюме: плагин достаточно удобен, учитывая, что это комбайн и дает возможность не только ставить кнопки, но много других украшений (блоки внимания, буквицы, разделители, списки и др.) — рекомендую. Плагин русифицирован, даже более того делается русскоязычным разработчиком.
Button Plugin MaxButtons
Под номером два идет не менее популярный плагин. У него две функции — это кнопки социальных сетей и кастомные кнопки. Кнопки шаринга — это тема иной статьи. Мы рассмотрим создание произвольных кнопок.
В отличие от Shortcodes Ultimate, здесь нужно заранее создать кнопку, а уже потом ее вставить в пост. В этом есть свои недостатки и прелести. Преимуществом будет быстрое добавление готовой уникальной кнопки. Недостатки — нужно выходить из поста, чтобы сформировать новую кнопку. и плагин не русифицирован (хотя, когда это нас останавливало).
Итак создаем новую кнопку:
Здесь удобно, что справа сразу отображается предпросмотр, поэтому можно делать правки в режиме реального времени:
Вот только когда кнопка готова, придется каждый раз ползать на страницу MaxButtons, чтобы скопировать настроенный шорткод созданной кнопки.
В редакторе он сам не появляется (только в про-версии за 49 баксов). Также по цене 5 баксов вы можете купить уже готовые наборы кнопок от maxbutton. 
Для быстрой вставки шорткодов можно воспользоваться дополнительным плагином AddQuicktag (о нем я писал в статье про блоки внимания). Но это еще один плагин, что может утяжелять сайт.
Резюме: плагин интересен только в платной версии
Button Pro — CSS3
Button Pro — это простой в использовании и красочный набор кнопок, выполненный в CSS3.
В пакет также входит набор кнопок, используемых известными веб-сервисами (google, twitter, facebook, wordpress), воссозданными на чистом CSS3.
Имеется только платная версия (простая лицензия 4$, расширенная 20$). Купить его можно по ссылке.
WPi Designer Button Shortcode
Это мини-дизайнерская студия на вордпресс позволяет генерировать уникальные и стильные CSS3 кнопки в постах для ссылок и призыва к действию (CTA). Поддерживает функции:
После установки нужно сделать несколько действий в настройках. Плагин не русифицирован, но онлайн-переводчик вам в помощь. Переходим в глобальные настройки и делаем как на скриншоте:
Там же — в глобальных настройках можно включить кнопки «поделиться» и кнопки call-to-action. Дальше вы можете насоздавать бесконечное количество нужных стилей и кнопок. Вставляются они через редактор — там появляется дополнительный значок.
Остается только настроить стили и создать «готовые» кнопки. В генераторе много подсказок, есть готовые пресеты, есть подборки цветов, поэтому экспериментируйте — там все достаточно понятно. Рассмотрим на примере создания готовой кнопки, стили, двойные кнопки и призыв к действию делаются похожим образом.
Чтобы создать кнопку сначала идем Настройки — Buttom WPi — button — добавить новую. Откроется страница, где будем создавать кнопку. Введите ее название и сразу обратите внимание на номер Id и шорткод (зеленые стрелки на скрине). Выбрать стили из предложенных или ввести прессет из ранее созданных вами стилей.
Далее можем выбрать иконку из набора:
Можно также поиграть с настройками ссылок:
На самом деле не так сложно как кажется, зато вы сможете создавать классные кнопки. Вставить их просто — вам нужно выбрать айди заранее созданной и вписать его в всплывающее окно при добавлении.
Редактор сам подставить шорткод.
Резюме: вполне годный инструмент для вставки в вордпресс многообразия кнопок.
Есть и другие плагины, но на мой взгляд — эти более удобные в работе, имеют необходимые функции и выдают более современные кнопки.
Плагин добавления кнопки без шорткода
Шорткод — это удобно. Но может случиться так, что разработчик забросил плагин и с обновленным движком плагин конфликтует. Или вы решили заменить плагин на новый. Отключая вышеописанные плагины, вы можете получить мусорный код в текстах, кнопки просто пропадут оставив после себя что-то подобное:
Поэтому, следующий плагин — это суперрешение создания кнопок на css3 без шорткодов.
Forget About Shortcode Buttons
Классный плагин, который не всталяет шорткоды. Устанавливается обычным путем, мусорный код не вставляет и главное, все кнопки остаются на месте даже после удаления плагина. Идеален для малостраничников — сделал и удалил все лишние плагины.
Чтобы добавить кнопку:
В появившемся окне, вводите текст кнопки, URL-адрес и выберите параметры цвета/стиля. Так же, как и с MaxButtons, вы можете просмотреть изменения в режиме реального времени: 
В принципе, хотя плагин не русифицирован — все интуитивно понятно. Кнопки получаются вполне себе симпатичные.
Резюме: отличный плагин, рекомендую для использования. Особенно если у вас не стоит Shortcodes Ultimate. На сегодняшний день это, пожалуй, самый быстрый и простой способ, чтобы сделать активные кнопки для WordPress, которые будут все время работать на вас и повышать конверсию ваших публикаций.
Как добавить кнопку в водпресс с помощью внешнего генератора
Так как спрос на красивые кнопки есть, то есть и онлайн-генераторы кнопок. Суть работы этих сервисов проста – с помощью разных инструментов настраивается дизайн и параметры кнопки, а затем просто генерируется код, который можно использовать на сайте.
Кому это подходит? Вебмастерам и блогерам, которым на проекте нужно 1 — 2 кнопки и ставить плагин нет необходимости.
Daruse.ru
Достаточно простой генератор. Из доступных опций есть текст кнопки, цвет текста, цвет кнопки и границы, толщина границ, настройка отступов, закругление углов. А также есть возможность установки ссылки, которая будет открываться при клике на вашу кнопку. Не достаёт только опций, связанных с эффектом, который включается при наведении мышки. Поэтому кнопки из этого сервиса выглядят статично.
С моей темой вордпресс кнопки не хотели устанавливаться корректно. Пришлось делить: отдельно стили и код кнопки (есть там такая опция). Залазить в настройки css та еще работа.
Резюме: слишком много телодвижений — проще установить плагин Forget About Shortcode Buttons (см.выше). Хотя вы можете попробовать.
Maxzon.ru
Более интересный инструмент — множество настроек, причем с ползунками, можно добиться интересного эффекта.
Есть возможность настроить вид кнопки в обычном состоянии, при наведении мышки и при нажатии. Можно настраивать размеры самой кнопки, шрифта, а также все цвета.
Сервис сразу выдает два кода:
Резюме: в целом имеет место быть, но опять же необходимо знание как вставить код.
Добавление кнопки без плагина, через CSS/HTML код
Простая HTML кнопка
Старый как веб-мир способ — прописать в коде тег button:
button > Seodelux.ru button >
Кнопку можно выровнять и прописать ей урл, будет выглядеть так:
Не очень хорошо, верно. Ну да стили не прописаны, все по умолчанию. Но есть и еще способ сделать красивую кнопку без плагинов.
Редактор блоков
Всё еще пользуетесь классическим редактором вордпресс? Я тоже, поэтому у меня стоит плагин шорткодес ультимате. Для создания кнопок без плагинов, нужно просто переключиться на новый редактор гутенберг и добавить там кнопку.
Жмем на плюсик слева вверху. Выбираем блок «кнопка».
Настраиваем стиль кнопки и цвет текста.
Можно также настроить:
Всё. Очень просто, без дополнительных плагинов, настройки html кодов и правки файлов сайта. Водпресс- это сила, надо просто полностью использовать его функционал.
Заключение
Есть много способов добавить кнопку на сайт. Если у вас это разовая потребность — воспользуйтесь редактором блоков. Если вы часто пользуете кнопки, стоит выбрать один из плагинов.
Спасибо, что дочитали, надеюсь информация была полезна. Смело можете поставить рейтинг. Вам несложно, а мне приятно.
Как добавить кнопку Click-to-Call в WordPress (2 способа)
Поскольку все больше людей посещают ваш сайт используя смартфоны, добавление кнопки звонка «Click-to-Call» позволяет связаться с вами буквально в один клик. В этой статье представлены два способа добавления такой кнопки.
Зачем добавлять кнопку Click-to-Call
Многие веб-сайты для малого бизнеса нацелены на предпродажное общение с клиентом. Именно поэтому необходимо добавить контактную форму всем владельцам веб-сайтов. Но это процесс общения, растянутый во времени. Поскольку мобильный веб-трафик растет по всему миру, пользователям удобно и просто обратиться за получением необходимой информации, сразу позвонив.
Если вы только начинаете бизнес, то рекомендуем обратиться к профессиональному телефонному сервису, чтобы вы могли переадресовывать звонки, делиться номерами с сотрудниками и отвечать на звонки, используя свои мобильные телефоны из любого места (вместо стационарных).
Рассмотрим два способа, как добавить кнопку click-to-call на сайт WordPress.
Способ 1. Добавление кнопки Click-to-Call через плагин
Этот метод проще, но недостатком является то, что он будет отображать кнопку для вызова только на мобильных устройствах. Чтобы добавить номер телефона для вызова со всех устройств, подойдет способ 2, рассмотренный ниже.
Сначала установите на сайт плагин Call Now Button и активируйте его. Затем перейдите на страницу Настройки » Call Now Button, чтобы настроить параметры плагина.
При желании вы можете ввести текст для отображения информации о звонке или скрыть значок. Если вы оставите его пустым, тогда плагин отобразит кнопку вызова с помощью значка телефона.
По ссылке «Дополнительные настройки», можно добавить отслеживание, позицию управления и ограничение внешнего вида.
На вкладке дополнительных настроек первая опция изменяет цвета кнопки. Вы можете изменить цвет в соответствии с цветовой схемой вашей темы.
Можно включить отслеживание Google Analytics, которое позволит увидеть, как пользователи реагируют на кнопку вызова в отчетах Google Analytics.
Также можно выборочно отображать или исключать кнопку из определенных записей и страниц WordPress.
После изменения настроек, сохраните их и перейдите на веб-сайт на мобильном устройстве, чтобы увидеть кнопку вызова в действии.
Какие плагины использовать для создания кастомных кнопок на WordPress.
Способ 2. Ручное добавление кнопки
Этот метод позволяет вручную добавлять кнопки вызова и ссылки в любом месте вашего сайта WordPress.
Самый простой способ добавить номер мобильного телефона на ваш сайт – это добавить их следующим образом:
Эти ссылки откроют приложение на мобильных устройствах. На настольных компьютерах пользователи Mac получат возможность открыть ссылку в Facetime, тогда как пользователи Windows 10 смогут открыть ее в Skype.
Вы также можете использовать HTML для добавления изображения или значка рядом со ссылкой на вызов.
Добавление значка или изображения
Перейдите на Медиафайлы » Добавить новый файлу и загрузите изображение, которое хотите использовать. После загрузки изображения нажмите Edit (Редактировать).
Теперь можно редактировать запись, страницу или пользовательский HTML-виджет, где будет отображаться значок телефона «Click-to-Call». В редакторе добавьте изображение значка телефона, добавив скопированную ссылку:
Посетите свой веб-сайт, чтобы увидеть ссылку «Click-to-Call» с загруженным изображением.
Добавление ссылки Click-to-Call в меню навигации
Также можно добавить кнопку звонка в меню навигации WordPress. Перейдите на страницу Внешний вид » Меню и нажмите вкладку пользовательских ссылок в правом столбце. Теперь вы можете добавить номер телефона в поле ссылки в следующем формате:
После этого добавьте текст, который хотите отобразить, например Позвоните нам (Call Us), и нажмите кнопку «Добавить в меню».
Убедитесь, что на сайте отображается все правильно и по ссылке производится звонок.
Кнопки для wordpress: плагин-конструктор.
Приветствую друзья, сегодня будем разбирать один довольно интересный плагин, я бы его охарактерзовал как плагин кнопки для wordpress, потому что его основная задача состоит в том, чтобы создавать на сайте wordpress, да, именно, кнопки.
Плагин кнопки для wordpress
После того, как вы скачаете, установите и активирует плагин, вы увидите, что на сайте появился дополнительный раздел, кроме того, перед вами откроется страница приветствия от плагина:
На этой странице нет какой бы то ни было полезной информации, разве что ссылки на документацию.
Прежде чем переходить к разбору плагина кнопок wordpress, хотелось бы сразу сказать для кого он подходит. По своим возможностям он оптимально подойдет тем, кто создает landing page или занимается продажами, например, продает информационные продукты. Кроме того, кнопки для wordpress можно использовать для того, чтобы увеличить конверсию на блоге. В одной из своих статей, я уже писал о том, как делать конверсионный блог, ознакомиться с ней вы можете по этой ссылке: Сбор подписчиков на сайте wordpress.
Как обычно, я буду разбирать плагин с конца, чтобы у вас создалось максимально полное впечатление о том, нужен ли он вам.
По мимо встроенных в качестве примера 4-х видов кнопок, вы так же можете скачать дополнительные кнопки. Примеры на скриншоте выше, правда, есть нюанс — они продаются за деньги. А этот вариант, я думаю, нам не очень подойдет.
Кроме того, плагин предлагает дополнения для работы: Live Composer, Google Analytics, Tooltips — бесплатные, остальные 2 за 9$. Но, не думаю, что платные дополнения могут сильно заинтересовать.
После того, как вы посмотрели приложения, вы можете произвести импорт, они предоставляются в 4-х вариантах. Кроме того, вы можете импортировать свои кнопки для wordpress:
Вот один из примеров, после того, как я произвел импорт пред установленных кнопок:
Переходим к настройкам плагина кнопки для wordpress.
Плагин кнопок wordpress: настройки
Автоматическое обновление нас не сильно должно интересовать, так как кода активации у нас, к сожалению, нет.
Следующий раздел фильтр содержимого — в этом разделе мы выбираем, где будут отображаться кнопки для wordpress, до контента или после контента:
Доступно несколько настроек:
Устанавливаем размеры того, как кнопки для wordpress будут отображаться в мобильной версии сайта.
Социальные настройки — выбираем в каких типах записях будут отображаться социальные кнопки.
Ну и, разумеется, раздел про социальные счётчики — довольно обширный, нужно сказать, присутствует даже социальная сеть Вконтакте, что не может не радовать.
Настройки для каждой социальной сети прописываются отдельно.
Последний раздел посвящен WooCommerce и в нем вы выбираете какие кнопки и где будут отображаться в интернет магазине.
В возможностях плагина кнопок wordpress существует так же такая функция, как создание двойной кнопки и разумеется, вы можете настроить ее так как вам будет угодно:
Кроме того, вы можете настраивать внешний вид отображения социальных кнопок счетчиков (существует 4 варианта).
Как сделать кнопку в wordpress
Теперь перейдем к самому интересному, попробуем в wordpress добавить кнопку и посмотрим что из этого получится. Если честно, я не стал делать огромное количество скриншотов своих действий, поэтому покажу лишь начальный и конечный вариант.
Настроек в этом разделе огромное количество.
Попробуем пройтись по этим настройкам, что нам предлагает плагин кнопок wordpress?
В крайней правой колонке мы можем задать цвет и фон изображения (да, вы можете вставить любое изображение и отцентровать его так, как вам вздумается).
При этом вы сможете видеть, как будет изменяться ваша кнопка — есть привью, то есть в слепую ни чего создавать не требуется. Согласитесь, процесс того как сделать кнопку на wordpress за счет этого плагина значительно упростился.
Вы можете выбрать тип связей для кнопки, поставить на нее какую-то внешнюю или внутреннюю ссылку.
Можете задать первоначальный и вторичный текст и расскрасить его как вам вздумается, кроме того, в наличии большое количество шрифтов, а так же иконок для дополнтельной взуализации кнопки для wordpress.
Задать задний фон? Какой желаете? Может быть это будет обычный цвет, а может быть картинка? Все настраивается.
Рамки, иконки, градиент и т.д. Все настраивается. Вы можете создавать сколько угодно кнопок, ставить на них любые значения и использовать их как вам заблагорассудится.
А теперь, итоговый скриншот того, что получилось у меня:
Как видите ни чего сложного. За то на landing page инфо бизнесмена эта кнопка будет смотреться превосходно. 🙂