Как добавить кнопку «Наверх» на WordPress

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

Пример кнопки Наверх на блоге Евгения Попова

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

Отличным вариантом такого плагина есть WPFront Scroll Top

Плагин WPFront Scroll Top для WordPress

Установите его на свой WordPress и у ваc появится така крутая фича, которой будут пользоваться все ваши посетители.

Для урока и примера я буду добавлять кнопку на этот же сайт «WordPress в квадрате». Чтобы вы могли сразу, читая эту заметку, увидеть готовый результат в работе 😀

И так, захожу на сайт, устанавливаю плагин, активирую его и автоматически попадаю на страницу настроек (если вы не попали, найти ее можно в пункте «Настройки»«Scroll top»).

Теперь давайте вместе пройдемся по настройкам кнопки:

1. Включаем вывод самой кнопки.

Включаем вывод кнопки в плагине WPFront Scroll Top

2. Настройку «JavaScript Async» активируем. Но, возможно, ее нужно будет потом выключить, если возникнут какие-то проблемы с совместимостью с другими плагинами.

Включаем JavaScript Async в плагине WPFront Scroll Top

3. Выставляем значение пикселей после пролистывание которых кнопка будет появляться. Я выставлю тут 900. Не люблю когда кнопка появляется почти сразу при минимальном «погружении» в статью.

Настройка значение пикселей после которых будет появляться кнопка в плагине WPFront Scroll Top

4. Размер кнопки я оставляю по умолчанию нули. Это автоматическое определение размера в зависимости от самой картинки кнопки.

Настройка размера кнопки в плагине WPFront Scroll Top

5. Прозрачность, пусть будет 80%.

Настройка прозрачности кнопки в плагине WPFront Scroll Top

6. Исчезновение кнопки и скорость скрола я оставляю по умолчанию.

Настройка исчезновения кнопки и скорость скрола в плагине WPFront Scroll Top

7. Настройки скрытий вы настраивайте под себя. Потому что, тут важно тестировать, как это работает именно у вас. Например, на мобильных устройствах данная кнопка может только мешать, ее лучше будет отключить и тд. У меня настройки получились вот такие.

Настройки скрытий кнопки в плагине WPFront Scroll Top

8. Дальше выбор стиля кнопки. Это либо картинка, либо текст, либо иконка специального векторного шрифта Font Awesome. У меня будет картинка.

Выбор стиля кнопки в плагине WPFront Scroll Top

9. Дальше идет выбор варианта действия кнопки. Это «Scroll to Top» — скроллинг наверх, «Scroll to Element» — можно задать скроллинг к определенному элементу, «Link to Page» — сделать ссылку на какую-то страницу. Я оставляю Scroll to Top.

Выбор варианта действия кнопки плагина WPFront Scroll Top

10. Теперь у нас идет настройка расположения. Тут также тестируйте параметры подходящие под ваш сайт, ведь у всех дизайны разные и элементы дизайна тоже разные. У меня настройки вот такие.

Настройка расположения кнопки в плагине WPFront Scroll Top

11. Настраиваем фильтр вывода кнопки на страницах сайта. У меня параметр по умолчанию — Выводить на всех страницах.

Фильтр вывода кнопки плагином WPFront Scroll Top

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

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

Добавленная кнопка Наверх на сайт WordPress в квадрате

Никаких ошибок совместимости плагин не выдает, поэтому пункт «JavaScript Async» оставляю активным. Если у вас появилась ошибка — выключайте.

После первой проверки часто нужно что-то подправить в настройках — тут уже делайте под себя, все пункты настроек вам доступны. Лично я перед уроком уже тестировал свою кнопку, поэтому все свои настройки знал изначально, теперь дело за вами. Удачи!

P.S. Любые плагины в какой-то момент могут кардинально обновить свой дизайн и свои настройки. Хоть этот плагин давно уже не изменялся, но может быть такое, что и он с каким-то обновлением станет другим. Урок максимально подробный и для обновленного плагина может быть не актуален. Поэтому, если такое вы заметите — пишите в комментариях, чтобы я мог обновить его.

Главный редактор
Опубликовал статей: 86
Просмотров: 19 0