Меню

Как настроить кнопки в вордпресс

Как сделать кнопку в посте или на странице в WordPress

Вордпресс способен на многое. Движок развивается, даже если вы делаете свой сайт на вордпресс впервые, то можете делать его современным и красивым. А также кастомизировать (уникализировать) шаблонную тему и сделать сайт непохожим на другие за счет уникальных картинок, блоков внимания и кнопок. Вот как добавить кнопки в постах и на страницах рассмотрим в этой статье.

Способы добавление кнопки на сайт

Способов добавления кнопок я знаю три- с помощью плагинов и шорткодов и ковыряясь в CSS/HTML коде. Первый способ вполне доступен начинающим, второй, понятное дело более продвинутым пользователям, зато он может быть более легким. Есть еще один способ — это генерирование кнопки на внешних сервисах и добавление ее в пост.

  1. Шорткоды и плагины
  2. Внешние сервисы
  3. 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). Поддерживает функции:

  1. Создание красивых кнопок.
  2. Создание двойных кнопок.
  3. Создание призыва к действию.
  4. Создание кнопок «Поделиться».
  5. Создание многократно используемых стилей кнопок для кнопок, кнопок CTA и кнопок Share.
  6. Создание кнопок с всплывающим окном, где вы можете вставить шорткоды.
  7. Создание кнопок с выпадающим меню.
  8. Создание кнопки «Один запрос» для нескольких продуктов или услуг с помощью плагина Contact Form 7.

После установки нужно сделать несколько действий в настройках. Плагин не русифицирован, но онлайн-переводчик вам в помощь. Переходим в глобальные настройки и делаем как на скриншоте:

Читайте также:  Как настроить прокси сервера 1xbet

Там же — в глобальных настройках можно включить кнопки «поделиться» и кнопки 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 кодов и правки файлов сайта. Водпресс- это сила, надо просто полностью использовать его функционал.

Читайте также:  Как настроить встряхивание айфона

Заключение

Есть много способов добавить кнопку на сайт. Если у вас это разовая потребность — воспользуйтесь редактором блоков. Если вы часто пользуете кнопки, стоит выбрать один из плагинов.

Спасибо, что дочитали, надеюсь информация была полезна. Смело можете поставить рейтинг. Вам несложно, а мне приятно.

Источник

Как добавить кнопку на сайт WordPress?

07 февраля 2017

У вас есть сайт на WordPress, но вы не умеете добавлять кнопки на страницы, тогда читайте внимательно эту статью. Сегодняшняя наша тема – это «Как сделать кнопку Вордпресс?».

Как и для чего добавляется кнопка на сайт WordPress?

Вордпресс позволяем вам использовать текстовый и визуальный редактор. Визуальный редактор своими опциями и внешним видом напоминает простой Word. Вы сможете выделить нужный заголовок или цитату жирным шрифтом, подчеркнуть или зачеркнуть участки текста. Так же присутствует функция пронумеровать и/или маркировать списки, отформатировать текст по ширине, краю или центру.

Все это входит в стандартные возможности WordPress. Если вам необходимо расширить возможности редактирования, то загрузка плагина позволит вам это сделать.

Расширение возможностей редактора при помощи плагина Ultimate TinyMCE

Чтоб расширить возможности TinyMCE устанавливают разные плагины. К примеру, это может быть Ultimate TinyMCE или Post Editor Buttons.

Я хочу рассказать, как сделать кнопку wordpress, используя плагин Ultimate TinyMCE. Сначала нужно установить данный плагин.

Важно! Скачивайте последнюю версию плагина и только с официального сайта WordPress.

После скачивания Ultimate TinyMCE, распаковываем его из архива и сохраняем в папку Файлы плагина. Далее копируем его на сервер в wp-content/plugins. Активируем и заходим Параметры — Ultimate TinyMCE.

После установки плагина, к имеющемуся ряду кнопок, дополнительно добавится около 40 функций.

В этом плагине настройки на английском языке, но после добавления их в редактор, все подсказки станут доступными на русском языке. После этого, вы сможете сделать практически все что хотите, при помощи понятного меню инструментов.

Мы с вами рассмотрели базовые этапы в WordPress, позволяющие добавить новые кнопки в визуальном редакторе, установив плагин Ultimate TinyMCE.

Однако подобные плагины добавляют к редактору массу функций, которыми в дальнейшем никто не пользуется. Кроме этого, какой бы плагин вы не загрузили, он будет нагружать вашу страницу, что отобразится на скорости ее загрузки.

При небольшой загрузке странички и редком посещении, этот факт не будет заметен. Тем более, если вы не разбираетесь в PHP, а термин FTP вызывает массу вопросов, то этот способ вставки кнопки в Вордпресс именно для вас.

При желании более профессионально подойти к вопросу добавления кнопок на сайт, придется обратиться к HTML коду.

Как добавить кнопку без плагина?

Если ваш текстовый и визуальный редактор не имеет кнопок тегов и , тогда открываете functions.php. Он находится в /wp-content/themes/. Это базисный файл, содержащий все настройки.

В него прописываем:

Данный javascript в админке создаст запись кода:

Далее авторизуемся в админ-панеле, заходим в редактор и вот что видим:

Как добавить кнопку «Мне нравится» от ВКонтакте?

Необходимость кнопки Мне нравится доказана множеством исследований, например, ресурсом Seomoz. Она нужна для продвижения вашего сайта на страницах социальных сетей Facebook.com, vk.com и т.д.

Добавить эту кнопку возможно двумя способами: используя базовые знания HTML или плагин.

Как же это сделать? Для примера попробует добавить кнопку Мне нравится от ВКонтакте без плагина.

  1. Переходим по ссылке http://vk.com/dev/Like — это виджет, с помощью которого посетители могут выражать отношение к вашей публикации. Тут выбираем Сайты и виджетыПодключить новый сайт. В открывшемся окне заполняем все поля.

Помним, что после заполнения нужно нажать Сохранить.

  1. Вставка кода в сайт/блог. Такие кнопки обычно размещают в конце статьи или записи. Мы же разместим ее немного ниже комментариев, чтоб пользователь, просмотрев публикацию, смог высказаться, оценить и лишь после этого лайкнуть.

После выполнения действий пункта 1, вам откроется окно с кодом.

Копируем всю часть кода, которую выдал ВКонтакте до строчки:

  1. Открываем файл php и вставляем скопированную часть кода перед тегом :

  1. После этого копируем весь оставшийся код:

  1. В самом конце вашей статьи или текста вставляете код, скопированный в файл php. В результате должно все выглядеть так:

  1. Обновляем страницу и все, у вас на странице должна показаться кнопка Мне нравится от ВКонтакте.

Кнопка Лайк от Facebook без плагина

1. Открываем файл single.php (расположен в каталоге шаблона). В цикл вашей публикации вставляем такой код:

2. Скопировали код и все. Переходим на страницу и проверяем, что все работает.

P.S. Для более требовательных владельцев сайта, есть еще дополнительный код, который анализирует численность лайков:

Как добавить на Вордпресс кнопки социальных сетей?

Есть много способов, как добавить социальные кнопки WordPress. Можно и код прописать, и плагин скачать. Я же расскажу, как это сделать в несколько действий.

На помощь нам придёт сервис Pluso. Пишем в строке поиска Pluso. Идем на сайт/страницу и выбираем стиль.

Копируете код и вставляете его в файл single.php после строчки:

Сохраняем и все. Проблема «Как добавить социальные кнопки на сайте WordPress?» решена.

Как сделать кнопку Далее WordPress?

Часто на блогах WordPress можно увидеть Читать далее. Как это сделать?

Все элементарно просто. Эта функция является встроенной и реализуется тегом [more].

Кнопку тега можно найти при создании страницы, на панели управления.

Читайте также:  Как настроить руль в the long drive

Если вы пользуетесь режимом HTML, то кнопка тега так и называется more.

Чтоб ею воспользоваться, нажимаем на more, в том месте, где нужно прервать текст. Все. На практике это будет выглядеть так:

Как сделать в WordPress кнопку Наверх без плагинов?

Чем меньше плагинов на WordPress, тем меньше тормозит сайт. Поэтому если что-то можно сделать без них, нужно это делать.

Идем по ссылке http://www.scrolltotop.com/ . Выбираем приглянувшуюся картинку кнопки. Возле нее копируем код.

Вставляем его в файл footer.php перед тегом . Жмем сохранить.

Отправляемся на сайт и проверяем работоспособность кнопки.

Как привязать к кнопке контактную форму на сайте WordPress?

Если при создании других кнопок можно было избежать установки плагинов, то в этом случае без них никак.

Начнем с установки плагина Contact Form 7.

  1. Копируем и активируем плагин.
  2. Переходим в Contact Form 7 -> Формы.

  1. В открывшемся окне нужно скопировать строчку Код вставки.

  1. Вставляем скопированный код на страницу, где хотим видеть Форму обратной связи. Жмем Обновить. В результате получаем:

Подводим итоги

WordPress, как мы смогли убедиться, очень удобная и современная система, позволяющая воплотить все пожелания, касательно настроек и работы сайта, в реальность.

Кроме этого, вам предоставляется самим определить, как работать на WordPress: пользоваться встроенными функциями, скачивать и устанавливать дополнительные (плагины) или работать с кодом. Благодаря этому, каждый владелец сайта на WordPress имеет возможность не только хотеть, но и создавать свой уникальный ресурс.

Источник



Как добавить кнопки в редактор WordPress

Последнее обновление — 22 января 2021 в 17:46

Не так давно у меня возникла необходимость добавить кнопки в редактор WordPress. Я имею в виду старый классический редактор для создания и редактирования записей, поскольку ранее я отключил работу редактора Gutenberg.

Рано или поздно, в процессе работы с сайтом на WordPress, у любого администратора может возникнуть такая необходимость, поскольку рабочий проект со временем начинает обрастать дополнительным функционалом.

При помощи дополнительных кнопок удобно включать в работу шорткоды, функции, рекламные коды для той или иной страницы сайта. Например, мне понадобилось добавить в некоторые статьи код микроразметки видео. Каждый раз копировать весь код и вставлять его в текст было бы не удобно. Но одна лишь кнопка в текстовом редакторе позволяет это сделать в один клик.

Проще всего добавить свои кнопки в текстовый редактор. Именно с него и начнём.

Текстовый редактор

Чтобы добавить в текстовый редактор WordPress дополнительные кнопки, достаточно внести в файл functions.php небольшой код. Приведу пример кода, которым пользуюсь сам. С его помощью текстовый редактор сейчас выглядит так, как на скриншоте ниже.

А вот и сам код.

Как работать теперь с кнопками? Например, для того чтобы поместить заголовок статьи второго уровня между тегами h2 и /h2 (строка 8 кода), необходимо выделить сам заголовок и кликнуть по кнопке H2.

Есть и такой вариант действия кнопки, когда при нажатии на неё, на странице отображаются открывающий и закрывающий теги, а между ними уже необходимо указать нужное значение. Например, так, как указано ниже.

QTags.addButton( ‘Название кнопки на латинице’, ‘Надпись на кнопке’, ‘[шорткод]ваш код[/шорткод]’ );

Визуальный редактор

Иногда удобнее работать в визуальном редакторе, поскольку такой вариант отображения контента при его редактировании максимально приближен к отображению контента во фронтэнде. Поэтому, для многих пользователей WordPress более предпочтителен именно визуальный редактор.

Отдельная кнопка

Добавить свои кнопки в визуальный редактор немного сложнее, чем в текстовый. Помимо редактирования файла functions.php придётся немного поработать с графикой, создать дополнительный каталог и js-файл. Однако, сделать это не представляет особой сложности. Выглядеть такая кнопка будет следующим образом, как на скриншоте.

Например, можно создать кнопку для выделения некоторого текста цветом. Включим в работу новую кнопку визуального редактора в 5 шагов.

Step 1. Нарисовать, например, в фотошопе, кнопку размером 20х20px. Файл сохранить с расширением png. У меня получилась такая кнопка.

Step 2. Создать каталог (папку) «js» в папке с файлами рабочей темы. И в этой новой папке «js» создать ещё одну папку «images».

Step 3. Файл кнопки залить в папку «images».

Step 4. Создать новый файл «mybuttons.js» в каталоге «…/ваша тема/js» с таким содержанием.

Файл сохранить в кодировке UTF-8 без BOM.

Step 5. Добавить в файл functions.php такой код.

Чтобы добавить в визуальный редактор вторую кнопку, третью и так далее, не надо повторять все вышеописанные действия. В файле «mybuttons.js» просто продублировать строки с 5 по 11. В файле functions.php продублировать строку 19, а также строки с 23 по 30. Конечно, параметры для другой кнопки надо указать новые.

Например, можно добавить в редактор кнопку для публикации адаптивного видео YouTube на сайте. Это позволит каждый раз не копировать и вставлять необходимые теги.

Кнопки в выпадающем меню

Помимо описанного выше способа, дополнительные кнопки можно добавить в виде выпадающего меню. Выглядеть это будет так.

В данном случае, в файл functions.php необходимо прописать такой код.

Вызов скрытых кнопок визуального редактора

Возможности визуального редактора возможно расширить. При помощи кода, который также необходимо внести в файл functions.php, происходит вызов целого ряда дополнительных кнопок. Выглядит это как на скриншоте ниже.

Как видите, скрытых кнопок в редакторе не так уж и много, однако компенсировать их ограниченное количество возможно при помощи указанных выше способов.

Источник