Вставка кнопки «Наверх» на блоге WordPress

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

Вставка кнопки "Наверх" с помощью плагинов

Плагинов несколько. Какой установить это уже дело вкуса.

Scroll to Top Plugin

Scrolltotop

WP To Top 

Cudazi Scroll to Top 

Вставка простого кода

Данный код необходимо вставлять в файлы single.php и page.php Вашей темы. Таким образом кнопка будет отображаться как в отдельных постах, так и на страницах. Код вставляется обычно в конце файлов, непосредственно перед кодом

 <!--?php get_footer(); ?-->

Есть два варианта. Можно просто вставить слово "Наверх"

	<a style="position: fixed; left: 93%; top: 95%;" href="#"><span style="font-size: medium;">Наверх</span></a>

Здесь тегами  font size задаётся размер шрифта надписи. Параметры  left: 93%; top: 95% задают отступ от края экрана.

А можно нарисовать (или найти соответствующую картинку) стрелочку, загрузить её на сервер и использовать как изображение кнопки.

<a style="position: fixed; left: 93%; top: 95%;" href="#"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ СТРЕЛКИ" alt="Вверх" width="" height="" align="" /></a>

С помощью скриптов

Один из удобных сервисов создания кнопки наверх + возможность добавления кнопок социальных сетей предоставляет сайт share42.com. Там есть настоящий конструктор, который позволяет подобрать необходимые кнопочки. Среди прочих там есть и кнопка "Наверх". Подробные инструкции по установке на самом сайте.

2 комментария к “Вставка кнопки «Наверх» на блоге WordPress”

    1. Administrator Автор сообщения

      Играя с параметрами, можно эту кнопку расположить где угодно. Можно сделать кнопку «вниз», «добавить в закладки», «распечатать». Хочу дополнить статью примерами, но пока нет времени.

Оставьте ответ

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