Главная / Плагины / Лучшие кнопки для WordPress без использования шорткодов
Forget About Shortcode Buttons
Плагин кнопок для WordPress - Forget About Shortcode Buttons

Лучшие кнопки для WordPress без использования шорткодов

Один из самых распространенных элементов на любом сайте (в том числе WordPress) – это, конечно же, кнопки. Любая кнопка (кнопка меню, кнопка странички в социальной сети, кнопка для скачивания файла, кнопка призыва к действию: «купить», «позвонить», «подписаться») – это довольно сложный объект. Кнопки в WordPress имеют немало специфических атрибутов и свойств: размер, выравнивание (положение на странице), цвет, стиль, ссылка, наличие тени и надписи, наличие иконки, реакция на наведение курсора.

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

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

  • увеличить отклик и число последователей в социальных сетях и поднять трафик на сайт (кнопки на Ваши представительства в социальных сетях);
  • увеличить количество подписчиков и потенциальных клиентов (кнопка «Подписаться на новости сайта»);
  • поднять продажи (кнопка «Корзина» или кнопка «Заказать»);
  • «помочь» читателю перейти по партнерской или любой другой ссылке;
  • «заставить» посетителя Вашего сайта выполнить любое другое целевое действие, которое Вам необходимо (переход на определенную страницу, загрузка файла, совершение звонка, обращение к онлайн-консультанту и прочее).

Кнопки в WordPress без использования шорткодов

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

Практически все плагины решают проблему добавления кнопок через шорткоды. Однако при наличии большого количества кнопок различного назначения эти «короткие аббревиатуры» трудно запомнить и настроить. Единственный выход работать эффективно с подобными плагинами – это запомнить, какому виду (стилю) кнопки отвечает каждый конкретный шорткод. Но это не вариант…

В сегодняшней статье речь пойдет о легком добавлении кнопок в WordPress без использования шорткодов. В поиске лучшего решения проблемы для своих клиентов я совсем недавно набрел на замечательный (официальный и непрожорливый) плагин кнопок WordPress под названием «Forget About Shortcode Buttons» (Забудьте о шорткодах кнопок).

Плагин FASC — это визуальный метод добавления кнопок без всяких лишних движений. Ничего запоминать не придется, после активации плагин автоматически встраивается в меню визуального редактора ВордПресс. Поэтому при создании новой страницы или записи – мы всегда можем за пару секунд в специальном диалоговом окне очень естественно и просто «смастерить» кнопку любой сложности, а с оформлением HTML и CSS плагин «разберется» сам.

Плагин кнопок для WordPress — Forget About Shortcode Buttons

На своей официальной страничке разработчики плагина FASC отмечают, что код программы максимально чистый с точки зрения стандартов HTML. При этом кнопки, которые Вы будете создавать в редакторе WordPress, используют стандартные общепринятые классы без внедрения какой-нибудь дополнительной или скрытой разметки.

Возможности настроек кнопок для WordPress в FASC

  • 6 основных типов дизайна кнопки, включая последний мировой тренд – плоский Flat-дизайн;
  • 5 предустановленных размеров кнопки;
  • подбор любого цвета для кнопки;
  • возможность добавление любой надписи для кнопки (шрифт, размер, стандартное форматирование);
  • подбор любого цвета для текста надписи кнопки;
  • присоединение к кнопке любой внешней или внутренней ссылки (можно открывать в текущем или новом окне);
  • возможность добавить любую иконку из стандартной библиотеки сервиса бесплатного набора шрифтов Font-Awesome (на данный момент там доступно 439 иконок на любой вкус);
  • кнопка ведет себя как стандартные объект в визуальном редакторе и подчиняется всем правилам форматирования текста: выравнивание, добавление жирного или курсива и прочее;
  • кнопки используют новейшие веяния в CSS для эффектной стилизации.

Выдержка с официальной страницы плагина в репозитории WordPress.org

Официальное название плагина: «ForgetAboutShortcodeButtons»;

Адрес для скачивания плагина: http://wordpress.org/plugins/forget-about-shortcode-buttons/

Официальный сайт: http://www.designsandcode.com/

Авторы плагина: лондонская студия Designsandcode;

Работает с версией WordPress: от 3.9 и выше;

Последнее обновление (на момент обзора): 28.04.2014;

Плагин был скачан (на момент обзора): 2 368 раз;

Текущий рейтинг качества: 5 из 5 звезд.

Установка и работа плагина кнопок для WordPress

Если все упомянутые мной достоинства плагина кнопок Forget About Shortcode Buttons убедили вас в его полезности – предлагаю без отлагательств заняться его простой установкой и затем проверить в деле.

Обратите внимание, что для корректной работы этому плагину требуется самая свежая версия WordPress (от 3.9 и выше). Если Вы используете старую версию «движка», придется обновить WordPress.

Устанавливается плагин стандартно — из окна поиска плагинов в административной консоли WordPress, либо при помощи загрузки плагина на Ваш веб-сервер по FTP.

Плагин Forget About Shortcode Buttons

После установки и активации плагина можно сразу же проверить его «в бою». Для этого при помощи пункта главного меню нашей панели управления «Записи» нужно создать новый пост или отредактировать уже существующий. Если все при установке плагина прошло успешно в меню визуального редактора – Вас уже ждет дополнительная кнопка (изображена на скриншоте выше) со всплывающей надписью «Insert Button» (Вставить кнопку) при наведении курсора мыши.

Чтобы вставить новую кнопку в нашем посте, нам нужно кликнуть по вышеупомянутому пункту «Insert Button». После этого действия появится диалоговое окно плагина, в котором можно за пару секунд создать кнопку любой сложности.

Давайте подробнее рассмотрим этот процесс…

Добавление и настройка кнопки в WordPress

Создание кнопки в ВордПресс с плагином FASC

Как видно из скриншота выше диалоговое окно создания кнопки имеет две вкладки: основную «Properties» (Свойства) и дополнительную «Icon» (Иконки). В разделе свойства нашей будущей кнопки можно насчитать шесть основных полей для творчества:

  1. Поле для ввода надписи на кнопке;
  2. Поле для ввода URLа – конечного пункта назначения, куда попадет наш пользователь при нажатии на кнопку. Обратите внимание здесь же можно поставить флажок — открывать ссылку в новом окне. Если оставить поле пустым ссылка откроется в текущем окне браузера;
  3. Здесь задается цвет для нашего текста на кнопке;
  4. Выпадающий список для выбора главного стиля кнопки: (всего на данный момент предусмотрено 6 стилей);
  5. Здесь задается основной цвет кнопки;
  6. Пункт для определения желаемого размера кнопки (всего имеется 5 предустановленных размеров).

Вот собственно и все нехитрые настройки для нашей кнопки. Осталась еще вторая вкладка «Icon», где мы можем по желанию встроить в кнопку иконку с бесплатного сервиса Font-Awesome (на выбор предлагается 439 иконок). В помощь скриншот ниже.

Добавление и настройка кнопки в ВордПресс - иконки

Во время всего процесса Вы можете наблюдать за Вашей будущей кнопкой в окне предварительного просмотра. Если результат Вам подходит – не забудьте нажать пункт «Insert» (Добавить) в нижнем правом углу окна настроек плагина.

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

Теперь Ваша кнопка «живет» в визуальном редакторе записей и готова в любой момент оказаться на сайте при публикации (обновлении) данной записи. Кнопка ведет себя как стандартный объект визуального редактора и подчиняется всем его командам. Например, можно выровнять кнопку посередине или по краям, добавить отступов, изменить шрифт или размер шрифта подписи и т.д. и т.п. Экспериментируйте и будет Вам счастье!

Добавленная кнопка появилась в визуальном редакторе ВордПресс

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

Я надеюсь, эта небольшая обучающая статья помогла Вам легко добавить кнопки в WordPress без использования шорткодов. Надеюсь на Ваш бодрящий автора лайк, плюс или ретвит.

Автор текста: Сергей ГеркХард

О GerkHard

Хотите быть в курсе последних событий в мире WordPress. Хотите создать сайт бесплатно? Интресесует заработок в интернете? Все это Вы найдете на сайте GerkHard.com, подписывайтесь на канал РСС, а также на наши официальные странички в популярных социальных сетях!

18 комментариев

  1. Спасибо за статью! Очень содержательно и познавательно!) Сейчас как раз занимаюсь версткой нового сайта на вордпресс. Старый просто ужас!) Был сделан конструкторм сайтов (платное приложение к платному же хостингу). Сейчас осваиваю WP, благодаря таким блогам как Ваши, и подобным.

    • Спасибо за отзыв, рад, что Вы решили остановиться именно на CMS WordPress. С данной системой управления содержимым сайта Вы развяжите себе руки и сможете делать очень достойные проекты любой направленности: блоги, корпоративные и интернет-магазины.

  2. Thanks for featuring our plugin 🙂

  3. Рафаэль

    Было бы еще интересно узнать Ваше мнение по поводу вот этого плагина, он очень похож, тоже удобен, наткнулся одновременно с вашей статьёй. По моему, тоже весьма удобно, в нём можно не только кнопки создавать: https://wordpress.org/plugins/shortcodes-ultimate/

    • Добрый день, лично я им не пользовался, но судя по количеству скачиваний и средней оценке 4.8 от пользователей — плагин качественный. Однако его нельзя сравнивать с описываемым мною плагином «Forget About Shortcode Buttons». Все дело в том, что плагинов которые используют шорткоды пруд пруди и можно найти по любому из них русскоязычные туториалы.

      Описанный же мною — уникальный в своем роде, так как он обходит необходимость запоминать и вставлять по тексту шорткоды. Именно поэтому я и взялся за его рассмотрение, многие клинты меня просили упростить им задачу по созданию кнопок и я нашел ее решение… Здесь все максимально визуализировано, нет необходимости лезть в код — что мы видим, то и получаем (what you see is what you get).

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

  4. Спасибо! Быстро и без заморочек могу делать кнопки, где захочу=)

  5. Николай

    Добрый день!
    подскажите: в данном плагине все ок, кнопку удалось поставить, все красиво и просто, спасибо за совет! но возникла задачка — как можно реализовать, чтобы кнопка оставалась нажатой при переходе на страницу куда ведет эта кнопка? и как сделать так, чтобы при наведении на кнопку стрелки в надписи кнопки появлялось подчеркивание?

    Большое спасибо за ответ!

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

      Например появление подчеркивания при наведении делается совсем просто:

      .you-class:hover{
      text-decoration: underline !important;
      }

      Здесь, вместо «.you-class» — нужно прописать твой класс кнопки!

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

    • Привет, проверил вот только что лично! Ссылка на официальный репозиторий WordPress работает отлично. Кстати недавно (6 дней назад) плагин претерпел существенный апдейт, нужно будет поглядеть изменения по логам и добавить новинки в обзорную статью! Попробуй перейти еще раз: https://wordpress.org/plugins/forget-about-shortcode-buttons/

      В данный момент доступна к скачиванию версия плагина: 1.1.2

  7. Здравствуйте. А как добавить кнопку под миниатюрой. Веду блог. На главной странице выведены все записи с миниатюрами. Слева миниатюра, справа текст. Как кнопку расположить под миниатюрой?

    • Привет, для этого понадобиться зайти в код страницы, которая отвечает за вывод записей. Скорей всего это будет файл с шаблоном по умолчанию! И кнопку вставлять непосредственно в самом коде (обычно в этом месте будет стоят ссылка «Читать далее»)… Только учти, что здесь все делать нужно аккуратно и потом потестить, чтобы на твоем сайте не нарушилась адаптивность… Хотя честно говоря, лучше воздержаться от этой идеи и кнопки ставить непосредственно в самих записях либо же в сайдбаре или где то еще… ИМХО

  8. Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.
    Подскажите теперь как часто можно или нужно использовать кнопки побуждающие читателя к действию например «купить», «подписаться»?

    • Спасибо вам за комментарий! Важно, чтобы ваши блоки (кнопки) побуждающие посетителя сделать любое целевое действие (купить, подписаться) соответствовали таким главным критериям:
      1. Находились исключительно на всех важных страницах сайта;
      2. Были всегда на видном месте для посетителя (в том числе и при прокрутке экрана). В то же время их расположение не должно быть чрезмерно навязчивым для посетителя и такой блок не должен мешать ему изучать контент — ведь посетитель пришел в первую очередь именно за полезной информацией, которая поможет решить его задачу;
      3. На мой взгляд достаточно сделать один блок с целевым призывом к действию, но чтобы он был постоянно на виду — идеальный вариант «плавающий» блок в сайдбаре. Для этой цели отлично подойдет данный плагин WordPress:
      http://gerkhard.com/kak-zafiksirovat-vidzhet-v-bokovoy-kolonke-sayta-wordpress/

  9. Александр

    Здравствуйте. Подскажите как сделать кнопку определенного размера, чтобы она не менялась от текста. Стоит пробовать ставить ее путем «Сами с усами» или лучше обратиться к специалисту?

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*