Кнопка наверх (Back to top) без плагина на WordPress

Автор: | Рубрика: Блог на Wordpress | Обновлено: 2019-05-04
Просмотров: 1414
Добавление кнопки «наверх» на WordPress блоге

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

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

Кнопка наверх с помощью плагина Scroll to Top - страница настроек

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

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

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

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

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

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

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

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

    Ответить
    • Анатолий 2017-07-26 в 23:43

      Удобная кнопка для пользователей, есть на всех крупных сайтах. На блогах не на всех есть.

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

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

    Ответить
    • Анатолий 2017-07-26 в 23:46

      Код на месте, должно работать. Надо посмотреть все файлы, связанные с кодом, может, там что-то поменялось.

      Ответить
  • Туйгунов Олег 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 секунды, а вот работая с планшетником она всегда под рукой, точнее всегда под пальцем 😉

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

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