В этой статье я расскажу как сделать кнопку вверх для сайта на WordPress.
Данная кнопка нужна для удобства перемещения в самый верх сайта из любой (кроме верхней, разумеется) точки, и если статья объемная и к ней написано множество комментариев, то после прочтения всего этого для перехода наверх будет достаточно всего лишь нажать на данную кнопку.
На самом деле, как и в случае с созданием карты сайта WordPress, существует два способа создания кнопки вверх для сайта, а именно легкий — с использованием плагина, и более сложный — без использования такового.
В данной статье мы рассмотрим оба способа.
И так, начнем с первого.
Создание кнопки вверх для сайта WordPress плагином
Для этого воспользуемся плагином Scroll to Top. Скачиваем его, устанавливаем:
Активируем:
Далее идем в админ-панели в раздел Параметры → Scroll to Top:
Доступны следующие настройки плагина:
- Enable — разрешить/запретить показ кнопки;
- Text — текст, указанный в кнопке;
- Width — ширина кнопки;
- Text Color — цвет текста внутри кнопки;
- BackGround Color — цвет фона кнопки.
Привожу в пример свои рабочие настройки:
Теперь на своем сайте вы можете наблюдать в нижней центральной части окна кнопку с вашей надписью:
Данная кнопка появляется при прокрутке страницы вниз, и при нажатии на нее происходит плавное перемещение в самый верх сайта к его шапке.
На этом создание кнопки вверх для сайта плагином успешно завершено.
Но опять же, вспоминая про недостатки плагинов, которые замедляют работу движка WordPress, следует сказать, что можно реализовать кнопку вверх для сайта без плагина.
Кнопка вверх для сайта WordPress без плагина
Для создания кнопки вверх для сайта WordPress с плавной прокруткой без использования плагина нам понадобится файл с изображением кнопки (стрелки), файл jquery.js со скриптом плавной прокрутки, код для вставки в файл header.php и настройки CSS стилей.
Теперь разберем подробнее. Картинку стрелки можно найти в интернете либо нарисовать самому. Я предлагаю вам скачать архив, в котором находится файл с изображением стрелки, используемый на моем сайте, а также файл jquery.js.
После скачивания данного архива создайте в корне сайта с помощью FTP-клиента (как настроить FTP-клиент читайте здесь) каталог scroll и распакуйте в него содержимое скаченного архива.
Теперь нужно подключить скрипт Jquery, для чего добавим перед закрывающим тегом </head> файла header.php из вашего шаблона WordPress следующий код (сделать это можно с помощью текстового редактора, рекомендую использовать notepad++):
1 | <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: с использование плагина и без.
Обязательно сделайте себе данную кнопку в своем сайте, посетители будут вам благодарны!