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

Добавление кнопки «наверх» на 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, то сейчас появилась в этой панели и кнопка "наверх".

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

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 13
  1. Елена

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

  2. Константин Кислов

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

    1. Анатолий

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

  3. Александр

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

    1. Анатолий

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

  4. Туйгунов Олег

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

  5. Фидан

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

    1. seomodern

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

  6. alf2012

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

  7. Юрий

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

  8. Иван

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

  9. sander

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

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

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

    1. Алексей

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.