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

Приветствую читателей моего блога!

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

На самом деле, как и в случае с созданием карты сайта WordPress, существует два способа создания кнопки вверх для сайта, а именно легкий, с использованием плагина, и более сложный — без использования такового. Мы в данной статье рассмотрим оба.

Итак, начнем с первого способа.

Создание кнопки вверх для сайта WordPress плагином

Для этого воспользуемся плагином Scroll to Top. Скачиваем его, устанавливаем:

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

Активируем:

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

Далее идем в админ-панели в раздел ПараметрыScroll to Top:

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

Доступны следующие настройки плагина:

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

  • Enable — разрешить/запретить показ кнопки;
  • Text — текст, указанный в кнопке;
  • Width — ширина кнопки;
  • Text Color — цвет текста внутри кнопки;
  • BackGround Color — цвет фона кнопки.

Привожу в пример свои рабочие настройки:

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

Теперь на своем сайте или в своем блоге вы можете наблюдать в нижней центральной части окна кнопку с вашей надписью:

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

Данная кнопка появляется при прокрутке страницы вниз, и при нажатии на нее происходит плавное перемещение в самый верх сайта к его шапке.

На этом создание кнопки вверх для сайта плагином успешно завершено.

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

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

Кнопка вверх для сайта WordPress без плагина

Для создания кнопки вверх для сайта WordPress с плавной прокруткой без использования плагина нам понадобится файл с изображением кнопки (стрелки), файл jquery.js со скриптом плавной прокрутки, код для вставки в файл header.php и настройки стилей CSS.

Теперь разберем подробнее. Картинку стрелки можно найти в интернете либо нарисовать самому. Я предлагаю вам скачать архив, в котором находится файл с изображением стрелки, используемый в моем блоге, а также файл jquery.js.

После скачивания данного архива создайте в корне сайта с помощью FTP-клиента (как настроить FTP-клиент читайте здесь) каталог scroll и распакуйте в него содержимое скаченного архива.

Теперь нужно подключить скрипт Jquery, для чего добавим перед закрывающим тегом </head> файла header.php из вашего шаблона WordPress следующий код (сделать это можно с помощью текстового редактора, рекомендую использовать notepad++):

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://ваш сайт/scroll/jquery.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){   $.autoScroll({   scrollDuration: 600,   showDuration: 400,   hideDuration: 300   });   });
// ]]></script>

Осталось настроить стили CSS отображения нашей кнопки, для чего с помощью того же notepad++ добавляем в самый конец файла style.css вашего шаблона данный код:

1
2
3
4
5
6
7
8
9
10
.scroll-to-top-button {
background: url(http://ваш сайт/scroll/strelka.png) center center no-repeat;
width: 80px;
height: 80px;
color: #fff;
cursor: pointer;
position: fixed;
bottom: auto; 
right: 50px;
}

Не забудьте везде (в обоих кодах) заменить фразу ваш сайт на имя вашего сайта/блога (в моем случае expromtom.ru). Если положение стрелки на экране вас не устроит, то можете поэкспериментировать со стилями CSS.

На этом создание кнопки вверх для сайта WordPress без плагина завершено!

Таким образом, в данной статье мы рассмотрели два способа реализации кнопки вверх для WordPress: с использование плагина и без. Обязательно сделайте себе данную кнопку в своем сайте/блоге, посетители будут вам благодарны!

Надеюсь информация была для вас полезной, подписывайтесь на обновления моего блога, чтобы не пропустить появление новых статей!

До скорых встреч. С уважением, Владимир Денисов!

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

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