Кнопка Вверх на сайте – это функциональный элемент интерфейса, который позволяет быстро по одному клику вернуться в начало страницы. Чаще всего она отображается в правом нижнем углу экрана и появляется после прокрутки страницы вниз. В WordPress кнопку Вверх можно реализовать с помощью плагинов или добавлением кода в файлы шаблона. Рассмотрим оба варианта в этой статье.
Плагины WordPress для добавления кнопки Вверх
Плагины позволяют быстро и с минимальными усилиями добавить кнопку наверх. Некоторые имеют расширенные настройки дизайна, анимации, расположения и т.д. Другие, в свою очередь, настолько простые, что после установки сразу же добавляют кнопку без каких-либо дополнительных опций.
Плагин Simple Back To Top
Очень простой плагин, который обладает только одной опцией – загрузка иконки кнопки. Установите плагин и активируйте его. В разделе Настройки появится новый раздел Back To Top — SBTT. В этом разделе можно изменить иконку кнопки Вверх.
Загружать можно только jpg и png файлы.
По умолчанию, кнопка приклеена к правому нижнему углу экрана с отступами 10px справа и снизу. Если нужно поправить расположение кнопки, то придется перезаписать стили.
Кнопка имеет css класс .sbttBacktotop. В style.css вашей темы добавьте код
.sbttBacktotop{
bottom: 25px !important;
right: 25px !important;
}Теперь кнопка будет иметь отступы в 25 пикселей от краев экрана.
Плагин WPFront Scroll Top
Мощный плагин с огромным количеством настроек кнопки вверх. После установки и активации откройте настройки плагина в разделе Настройки > Scroll Top.
Возможности плагина:
- Показывает кнопку после прокрутки установленного количества пикселей.
- Прокручивает страницу вверх с анимацией.
- Умеет скроллить до элемента, указанного в настройках.
- Можно выбрать кнопки из набора иконок, задать иконку из FontAwesome или сделать кнопку текстовой.
- Можно загрузить свою иконку.
- Позволяет указать ширину окна, при которой необходимо скрыть кнопку.
- Можно скрывать/показывать кнопку на конкретных страницах сайта.
- Асинхронная загрузка скриптов плагина.
- и многое другое
Все настройки разбиты на разделы:
- Отображение – все опции отображения кнопки на сайте.
- Расположение – здесь можно настроить местоположение кнопки.
- Фильтр – позволяет указать страницы, на которых показывать или скрывать кнопку.
- Кнопка с изображением – в этом разделе можно выбрать картинку кнопки из набора.
- Текстовая кнопка – раздел появится, когда опция Стиль кнопки будет иметь значение «Текстовая кнопка».
- Кнопка Font Awesome – опции для задания кнопки иконки из коллекции FontAwesome.
Поэкспериментируйте с настройками и создайте кнопку, которая вам нужна!
Кнопка Вверх без плагина
Без плагина кнопка добавляется достаточно легко и имеет некоторые преимущества перед плагинами. Вы можете оформить кнопку как угодно, разместить где угодно, а так же добавить любую анимацию. В общем, полная кастомизация 🙂.
Шаг 1
Добавление HTML-кода кнопки
Для начала нужно добавить код кнопки в структуру страницы. Мы это сделаем с помощью хука wp_footer.
add_action('wp_footer', 'add_scroll_to_top');
function add_scroll_to_top()
{ ?>
<div class="scroll-to-top">
<div class="scroll-to-top__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,112H56l72-72Z" opacity="0.2"></path>
<path d="M205.66,106.34l-72-72a8,8,0,0,0-11.32,0l-72,72A8,8,0,0,0,56,120h64v96a8,8,0,0,0,16,0V120h64a8,8,0,0,0,5.66-13.66ZM75.31,104,128,51.31,180.69,104Z"></path>
</svg>
</div>
</div>
<?php }Кнопка содержит svg иконку стрелки вверх. Вы можете добавить свою иконку html-тегом img или так же добавить inline svg.
Этот код нужно добавить в файл functions.php вашей темы.
Если ваша тема регулярно обновляется, то все действия по изменению файлов нужно производить в дочерней теме.
Шаг 2
Добавление css стилей
Сейчас кнопка добавлена в конце страницы под подвалом. Чтобы прикрепить ее к правому краю, добавим стили. Откройте файл style.css вашей темы и в конце добавьте код
.scroll-to-top{
position: fixed;
background-color: rgba(13,13,13,0.4);
color: #fff;
height: 52px;
width: 52px;
right: 30px;
bottom: 30px;
border-radius: 50%;
cursor: pointer;
display: none;
}
.scroll-to-top__icon{
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.scroll-to-top:hover{
background-color: rgba(13,13,13,0.7);
}Теперь кнопка прикрепится к правому краю экрана, но пока ее не видно, так как наш код будет показывать ее только после прокрутки на определенное расстояние.
Шаг 3
JavaScript код
В js файле шаблона, где содержатся ваши скрипты добавьте код
(function ($) {
const $scrollToTop = $('.scroll-to-top'),
offsetTop = 100;
$(window).on('scroll', function () {
if ($(this).scrollTop() > offsetTop) {
$scrollToTop.fadeIn();
} else {
$scrollToTop.fadeOut();
}
});
$scrollToTop.on('click', function () {
$('html, body').animate({
scrollTop: 0
}, 600);
return false;
})
})(jQuery);Для работы скрипта нужна библиотека
jquery.
Вы можете изменить значение константы offsetTop на строке 3. В ней указано количество пикселей, после прокрутки которых будет показана кнопка вверх.
В результате мы получим вот такую кнопку вверх.
После проверки работоспособности кнопки вы можете заняться ее оформлением. Изменить цвет, иконку, размер, расположение. Все это делается в css-стилях, которые вы добавляли в шаге 2.
Кнопка Вверх в настройках темы
В качестве дополнения к основным методам стоит рассмотреть еще один способ реализации кнопки вверх WordPress.
Часто разработчики тем встраивают в свои шаблоны дополнительные модули, которые позволяют расширять функционал без использования плагинов. В качестве такого модуля может быть добавлен функционал активации кнопки Вверх.
Например, на моем тестовом сайте установлен шаблон Blogus. Если зайти в раздел Внешний вид > Настроить открыть секцию Настройка темы, то можно увидеть настройки Прокрутка.
Это и есть дополнительный модуль кнопки вверх. Внутри него можно включить/выключить кнопку и изменить иконку.
Проверьте настройки вашей темы, может быть в них встроен дополнительный модуль кнопки вверх.
