Доброго времени суток, уважаемые читатели ИнетСоветы.ру! Из этого поста вы узнаете, как добавить кнопку "наверх" без плагина.
Для установки кнопки наверх без плагина необходимо загрузить на хостинг 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, то сейчас появилась в этой панели и кнопка "наверх".
Успехов Вам в улучшении блога. И до скорых встреч!
При обновлении темы, все что без плагинов заново нужно ставить? У меня тема по умолчанию смещена влево (TwentyFourteen). Поставила код центровки, после обновления все слетает, заново ставлю. Можно конечно не обновлять.
Кнопка «наверх» очень нужный элемент на любом сайте, очень удобно подыматься наверх страницы одним щелчком, а без плагина сайту будет легче дышать.
Удобная кнопка для пользователей, есть на всех крупных сайтах. На блогах не на всех есть.
Я раньше делал с помощь. кода, обновил движок и исчезла кнопка, код вроде на месте не пойму ничего
Код на месте, должно работать. Надо посмотреть все файлы, связанные с кодом, может, там что-то поменялось.
Спасибо Виктория,.Очень полезная функция обязательно поставлю себе на блог. Удачи вам
Устанавливал кнопку без плагина, блог перестал работать…может от шаблоны зависеть в какое место вставлять код?
может тег absmiddle в коде, который ставишь в футер, поменять на right?
Плагином оно то конечно проще кнопку «наверх» установить. Но этот способ и нагрузку уменьшает и позволяет проще подобрать свой дизайн кнопки и место ее расположения.
Спасибо за код и объяснения.
Тоже возьму на заметку, применять пока не буду. Пока плагин стоит. Тему буду менять, потом вставлю, иначе не поймешь потом, как и что навставлял в код в старой теме)))
Уверен что получится и мне установить эту кнопку,но сейчас есть другие задачи.более важные.Всё равно спасибо,я к этой кнопке обизательно вернусь…
Сейчас вплотную занялся оформлением блога и эту запись возьму на заметку и сверку своих действий.
А теперь замечания.
Кнопка «Вверх» при таком шаблоне не должна находиться в правом нижнем углу шаблона, т. к. визуально она не выделяется. Сливается с сайдбаром (где и так множество разных иконок и значков) и приходится искать ее, что не особенно удобно.
Лучший вариант, если бы она находилась в правом углу основного блока, и была полу — прозрачной, но это мое мнение.
В работе на ПК , может данная кнопочка не очень удобна, кстати такой же эффект можно получить нажимая на колесико мышки 1-2 секунды, а вот работая с планшетником она всегда под рукой, точнее всегда под пальцем