Как сделать плавающую кнопку WordPress

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

Плавающая кнопка на WordPress

В WordPress в редакторе Gutteberg есть возможность сделать кнопку. Это обычная, не плавающая кнопка, которая появляется в контенте, и ей можно задать какую-либо ссылку, на которую она будет переводить при клике. Также есть элементарные инструменты для того чтобы настроить дизайн: цвет кнопки, цвет текста, форма.

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

Как сделать плавающую кнопку WordPress

Floating Button – это плагин плавающей кнопки на WordPress. Он условно бесплатный, с рядом платных функций. Но все основные возможности доступны в бесплатной версии. Также в его настройках отсутствует русский язык. Однако интерфейс плагина достаточно простой и разобраться в нём не сложно. Но на данный момент это единственный плагин, с помощью которого можно сделать плавающую кнопку WordPress.

Плагин работает так: он создаёт главную плавающую кнопку (вид и позицию которой можно регулировать), и клик по ней вызывает появление других субкнопок, на которые устанавливаются какие-либо ссылки. Это плавающая кнопка, и она всегда остаётся на виду.

Установите Floating Button на свой сайт и активируйте. Затем перейдите в раздел “Wow Plugins”, в подраздел “Floating Button Lite”. Здесь находится список уже созданных кнопок. Пока там пусто. Чтобы сделать плавающую кнопку на сайте WordPress, перейдите во вкладку “Add new”.

Вы окажетесь в конструкторе плавающих кнопок. Слева есть четыре вкладки. Начните со вкладки “Main” – здесь создаётся главная плавающая кнопка, клик по которой будет открывать субкнопки. В поле “Label Text” задайте название кнопки, установите галочку на “Enable Tooltip”, чтобы при наведении мышки на кнопку появлялась подсказка с названием. Во вкладке “Type” ничего менять не надо.

Затем переключитесь во вкладку “Icons” и задайте иконку, которая будет изображена на кнопке. Выберите из предложенного списка.

Во вкладке “Style” задайте внешний вид плавающей кнопки и её положение на экране:

• Position – позиция.
• Button shape – форма кнопки.
• Size – размер.
• Button animation – тип анимации кнопки.
• Sub-buttons Animation – тип анимации субкнопок, которые появляются при клике по главной кнопке.
• Button color – цвет кнопки.
• Button hover color – цвет кнопки при наведении мышки.
• Icon color – цвет иконки.
• Tooltip background – цвет фона подсказки.
• Tooltip color – цвет текста подсказки.

Эти опции менять не обязательно, их можно оставить по умолчанию.

Во вкладке “Attributes” можно присвоить плавающей кнопке собственный CSS класс, если в этом есть необходимость.

Теперь плавающая кнопка на WordPress создана. Следующий шаг – сделать субкнопки, которые появляются при клике по главной кнопке. Для этого переключитесь слева во вкладку “Sub button 1” и нажмите на “Add item”.

Появится новый раздел, разверните его и вы увидите те же опции, что были у главной кнопки: “Labble text” – название кнопки, “Enable tooltip” – включение подсказки при наведении. А также вкладки “Icon”, “Style” и “Atributes”, в которых настраивается иконка, стиль и атрибут, соответственно, для субкнопки.

Но здесь во вкладке “Type” следует задать функции кнопки – что она будет выполнять при клике. В списке “Item type” по умолчанию установлен вариант “Link” – это значит, что кнопка будет переводить по указанной ссылке (ниже есть поле для ввода ссылки). Также в “Item type” можно выбрать готовые ссылки – на авторизацию, выход, регистрацию или восстановление пароля. Выберите нужный вариант, если выбран “Link”, то укажите ссылку для кнопки.

Также здесь можно добавить ещё несколько субкнопок. Для этого нажмите снова на “Add item” и также создайте ещё одну субкнопку. Слева есть вкладка “Sub button 2” – это аналогичный инструмент, но отличие от “Sub button 1” только в положении субкнопок – первые сверху от основной, вторые – сбоку.

Во вкладке “Display” есть всего три опции:

• Don’t show on screens more – не показывать плавающую кнопку на экранах, которые больше указанного разрешения.
• Don’t show on screens less – не показывать плавающую кнопку на экранах, меньше указанного разрешения.
• Disable – отключить плавающую кнопку.

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

После этого вы увидите на своём сайте кнопку.

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