Как сделать кнопку “наверх” без плагина

Автор: | Рубрика: Блог на Wordpress | Обновлено: 2015-03-14 | Создано:
Просмотров: 905
Как сделать кнопку “наверх” без плагина

Доброго времени суток!

Как и обещала пишу пост о том, как добавить кнопку "наверх" без плагина.

Для установки кнопки наверх без плагина необходимо загрузить на хостинг 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.

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

 

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 11 к статье "Как сделать кнопку “наверх” без плагина"
  • Елена 2016-09-13 в 06:39

    При обновлении темы, все что без плагинов заново нужно ставить? У меня тема по умолчанию смещена влево (TwentyFourteen). Поставила код центровки, после обновления все слетает, заново ставлю. Можно конечно не обновлять.

    Ответить
  • Константин Кислов 2015-03-30 в 23:00

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

    Ответить
  • Александр 2014-06-30 в 18:05

    Я раньше делал с помощь. кода, обновил движок и исчезла кнопка, код вроде на месте не пойму ничего

    Ответить
  • Туйгунов Олег 2014-03-19 в 20:27

    Спасибо Виктория,.Очень полезная функция обязательно поставлю себе на блог. Удачи вам

    Ответить
  • Фидан 2013-11-30 в 13:45

    Устанавливал кнопку без плагина, блог перестал работать…может от шаблоны зависеть в какое место вставлять код?

    Ответить
    • seomodern 2013-12-10 в 19:22

      может тег absmiddle в коде, который ставишь в футер, поменять на right?

      Ответить
  • alf2012 2013-06-11 в 17:05

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

    Ответить
  • Юрий 2013-02-06 в 17:16

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

    Ответить
  • Иван 2013-02-04 в 00:14

    Уверен что получится и мне установить эту кнопку,но сейчас есть другие задачи.более важные.Всё равно спасибо,я к этой кнопке обизательно вернусь…

    Ответить
  • sander 2013-02-02 в 14:40

    Сейчас вплотную занялся оформлением блога и эту запись возьму на заметку и сверку своих действий.

    А теперь замечания.
    Кнопка «Вверх» при таком шаблоне не должна находиться в правом нижнем углу шаблона, т. к. визуально она не выделяется. Сливается с сайдбаром (где и так множество разных иконок и значков) и приходится искать ее, что не особенно удобно.

    Лучший вариант, если бы она находилась в правом углу основного блока, и была полу — прозрачной, но это мое мнение.

    Ответить
    • Алексей 2013-05-18 в 19:42

      В работе на ПК , может данная кнопочка не очень удобна, кстати такой же эффект можно получить нажимая на колесико мышки 1-2 секунды, а вот работая с планшетником она всегда под рукой, точнее всегда под пальцем 😉

      Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!