Доброго времени суток, уважаемые читатели ИнетСоветы.ру! Из этого поста вы узнаете, как добавить кнопку «наверх» без плагина.

Для установки кнопки наверх без плагина необходимо загрузить на хостинг 2 файла и добавить несколько кодов в файлы темы.

Первым делом скачайте следующий архив по ссылке. В архиве находится файл “verx.js” и папка с картинками иконок наверх, которые мне  удалось найти в интернете. Подберите себе подходящую картинку из архива или создайте свою. После этого необходимо загрузить файл с названием “verx.js” и картинку на хостинг. Рекомендую Вам создать для них отдельную папку и загрузить ее в корневую папку блога public_html.

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

Первый код мы будем добавлять в файл functions.php. Этот код подключает библиотеку jquery, которая делает прокрутку страницы вверх плавной. Чтобы не запутаться вставьте код сразу после тега <?php:

// smart jquery inclusion

if (!is_admin()) {

 wp_deregister_script('jquery');

 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);

 wp_enqueue_script('jquery');

}

Второй код нужно вставить в файл footer.php. Данный подключает непосредственно саму кнопку. Он вставляется перед тегом </body>:

<a id="toTop" href="#"><img src="http://site.ru/путь к картинке/verx.gif" alt="" align="absmiddle" border="0" /></a><script type="text/javascript" src="http://site.ru/verx.js"></script><script type="text/javascript">// <![CDATA[

$(function() {

$("#toTop").scrollToTop();

});

// ]]></script>

Обратите внимание на правильность прописывания пути к файлам verx.js и картинке. Если путь будет указан неверно, то кнопка работать не будет.

Третий код добавляется в файл style.css. В этом коде задается положение кнопки.

#toTop {

width: 100px;

text-align: center;

padding: 5px;

position: fixed;

bottom: 10px;

right: 10px;

cursor: pointer;

color: #666666;

text-decoration: none;}

Плагин Scroll to Top

Устанавливать этот плагин будем не с официального сайта wordpress.org, так как плагин Scroll to Top, находящийся там, немного отличается от того, о котором сейчас пойдет речь.

Вот ссылка для скачивания плагина — перейти.

Далее устанавливайте и активируйте плагин. Если возникают сложности с установкой плагина, то посмотрите эту инструкцию.

После активации плагина, кнопка будет появляться слева, как только Вы прокрутите страницу вниз.

Если имеющая картинка не подходит под дизайн Вашего сайта, ее можно изменить в настройках. Для этого выберите в админке в меню Параметры плагин Scroll to Top. Откроется следующая страница с настройками:

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

Хочу заметить, если Вы устанавливали себе панель кнопок соцсетей от share42.com, то сейчас появилась в этой панели и кнопка «наверх».

Успехов Вам в улучшении блога. И до скорых встреч!