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

Что это за кнопка и для чего она нужна? На некоторых сайтах вы возможно обращали внимание, что после прокрутки странице вниз до некоторой степени, появляется (как правило в правлом нижнем углу) вот такая кнопка:

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

Такую кнопку можно установить самостоятельно, либо она может быть предустановлена в шаблоне. Если в вашем шаблоне предустановленной кнопки не оказалось, то далее вы узнаете, как сделать эту кнопку на своем сайте.

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

Далее переходим на вкладку Плагины — Добавить новый:

Далее в поисковом поле указываем название нужного нам плагина WPFront Scroll Top:

Для того, чтобы установить этот плагин, нажимаем кнопку «Установить»:

После того, как плагин будет установлен (обычно это занимает не более нескольких секунд), нажимаем кнопку «Активировать»:

После этого появится уведомление, что плагин успешно активирован.

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

Нажимаем на эту ссылку и переходим на страницу настроек плагина, на которой необходимо выпонить первоначальный настройки плагина WPScroll Front Top:

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

Следующий пункт (JavaScript Async) с одной стороны позволяет ускорить работу плагина, т. е. снизить нагрузку на сайт. Но с другой стороны тут идет предупреждение о том, что могут возникнуть какие-то конфликты с другими плагинами, либо с другими какими-то скриптами, установленными на вашем сайте.

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

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

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

Совет: По-умолчанию установлено 100 пикселей, но лучше все-таки сделать побольше, например, 200, иначе кнопка будет появляться слишком рано, особенно если на сайте уже много статей. Тогда кнопка будет возникать, когда посетитель уже успеет прочитать какое-то количество символов.

Размер кнопки можно оставить как есть (нули), тогда размеры кнопки будут определяться автоматически:

Прозрачность можно оставить без изменений 80%.

Исчезновение скролла регулирует, как быстро (в миллисекундах) кнопка будет пропадать после того, как вы нажмете на нее и страница прокрутится к началу.

Скорость скролла отвечает за скорость прокрутки страницы к самому верху. Т. е. когда вы нажмете на кнопку — именно с такой скоростью будет произведена прокрутка страницы до ее начала. В принципе можно оставить как есть 400 мс.

Если поставить галку в поле «Скрывать», то кнопка будет исчезать через время, указанное в следующем поле «Скрывать после». Т. е. после прокрутки страницы вниз кнопка будет появляться на заданное время, а затем пропадать.

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

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

Ширину маленьких устройств можно оставить по-умолчанию 640 пикселей.

«Скрывать при маленьком окне браузера» — тут по аналогии, чтобы кнопка не загораживала часть текста, рекомендуется эту галку установить. А пороговую ширину окна браузера лучше также оставить 640 пикселей.

Следующий пункт «Скрывать в админки» регулирует, будет ли отображаться кнопка внутри админ-панели (wp-admin). Тут кому как удобно.

«Скрывать во фреймах» имеет смысл активировать.

«Move Admin Menu» перемещает меню WPFront из левого меню в админке в меню «Настройки». Если активировать, то соответствующий пункт меню будет появляться в этом списке:

Стиль кнопки можно выбрать один из трех вариантов:

  • картинка (будет в виде кнопочки со стрелкой)
  • текст (будет в виде надписи)
  • Font Awersome

Расположение регулирует, где будет появляться кнопка:

Я обычно оставляю по-умолчанию «Снизу справа».

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

Далее идет «Фильтр»:

Я обычно оставляю по-умолчанию «Все страницы» и никакие страницы не исключаю.

Далее предлагается выбрать вид кнопки:

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

Если никакая из предложенных картинок не подходит, то Вы можете воспользоваться своей картинкой, указав ссылку на нее в поле «URL своей картинки»:

Для этого предварительно нужно будет загрузить картинку со стрелкой на свой хостинг, для чего можно воспользоваться разделом «Медиафайлы»:

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

Поле «Атрибут Alt у картинки» можно оставить пустым.

В конце не забываем нажать на кнопку «Сохранить изменения».

При этом, если устанавливали галку «Move Admin Menu», то пункт Scroll Top переместится в «Настройки»:

Т. е. если мы захотим внести какие-то изменения, то необходимо будет перейти именно на данную вкладку: Настройки — Scroll Top.

После выполнения настроек переходим на сайт и проверяем результат. После прокрутки окна на некоторое расстояние, должна возникать кнопка прокрутки Наверх:

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

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

Добавить комментарий

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