Получайте секретные материалы проекта на свой E-Mail:

Кнопка Наверх для WordPress: для чего и как установить?

Здравствуйте, дорогие читатели SeoKos.ru! Представляю Вам и Вашему вниманию новый пост, в котором я расскажу о том для чего нужна кнопка «Наверх» и как её установить на WordPress.Как установить кнопку Наверх для WordPress  Ну в начале, как всегда, объясню для чего эта кнопка вообще нужна и стоит ли ее ставить. Приступаем!

Для чего нужна кнопка Наверх?

К примеру, Вы написали длинную статью, пользователь дочитал ее до конца и теперь хочет вернуться обратно в начало. Думаю знакомая ситуация. Не правда ли? А крутить колесиком мыши и «тянуть» за ползунок — не очень удобно и долго.

Именно поэтому и была создана данная функция — поднятие страницы наверх. А еще, если красиво оформить кнопку, то это плюс к дизайну! А если еще модифицировать, то можно будет при нажатие отпускать страницу вниз, т.е. наоборот. Вот так вот.

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

Установка кнопки с плагином

Первое что нужно сделать, это скачать плагин и активировать его. После чего кнопка начнет работать. Но, изображение кнопки будет стандартное. Советую Вам изменить ее, на свою. Для это:

  1. Перейдите во вкладку «Параметры»
  2. --> Scroll to Top
  3. И выберите облик кнопки из предложенных или загрузите свою
  4. Нажмите кнопку «Update Options»
  5. Готово! Кнопка наверх для WordPress приняла новый облик

Вот так. Так же можно настроить ее, а именно:

  • Расположение
  • Отступы
  • Скорость
  • и другое

Кнопка «Наверх» без плагина

Сейчас мы рассмотрим как сделать кнопку наверх для wordpress не используя посторонних плагинов. Почему без плагина? А потому, что плагины замедляют работу сайта. Я уже не один раз об сказал ( В статье — Добавляем видео на WordPress) и буду говорить еще и еще.

Для того, чтобы сделать кнопку следуйте инструкции ниже:

1. Откройте файл footer.php, который находится в папке с шаблоном, и вставьте перед </head> код:

1
2
<a id="toTop" href="#"><img src="ваш_сайт.ru/путь к картинке/картинка.jpg" align="absmiddle" border="0" /></a>
<script type="text/javascript" src="ваш_сайт.ru/verx.js"></script><script type="text/javascript">// <![CDATA[ $(function() { $("#toTop").scrollToTop(); }); // ]]></script>

Только внесите некоторые изменения, а именно:

  • где написанно ваш_сайт.ru — напишите адрес вашего сайта
  • где путь к картинке — введите путь до картинке, которая будет кнопкой
  • где картинка — название картинке. Если не .jpg, то измените на тот формат, который установлен на картинке.

2. Откройте файл style.css, который так же находится в папке с шаблоном, и в самом конце вставьте следующий код:

1
2
3
4
5
6
7
8
9
10
#toTop {
width: 100px;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}

3. Скачайте архив и распакуйте его. В нем лежит файл verx.js, который нужно закинуть в корень Вашего сайта.

4. Откройте файл functions.php, находящийся в папке с шаблоном и вбейте туда код:

1
2
3
4
5
6
// smart jquery inclusion
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}

5. Ну вот и все! Я могу Вас поздравить, теперь на Вашем сайте есть кнопка наверх для wordpress.

Вы только что прочли статью «Кнопка Наверх для WordPress» и установили ее себе. Какие впечатления? Пишите в комментариях! На этом у меня все, всем пока.

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Добавить пост в избранныеПерейти к списку →
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на обновления блога и будьте в курсе всех новых статей
Подписаться в один клик
Количество комментариев к данной статье: 41
  1. Сам не так давно к себе установил кнопку, очень удобно!

    • Ответить

      Кнопка это удобство придуманное нами для посетителей. Просто они не знают как можно просто прокрутить страничку в любую сторону. Windows обо всем позаботился: http://problogger2012.blogspot.ru/2014/02/knopka-naverh-2.html

  2. Ответить

    А если сайт на другом шаблоне работает?

    • Конечно будет.

  3. Пробовал сделать, но получилось так, что в конце когда вставлял код в файл functions.php вставил не туда, и он сломался : 😥

    • Степан, Бывает. Именно поэтому необходимо делать резервные копии

      • Ответить

        Здравствуйте. Блог реально ложится — # в адресе и сайт умирает. Это происходит именно из-за кода для functions.php Куда его размещать не имеет значение (пробовал и в начале и в конце), есть подозрение, что в этом отрывке кода либо ошибка, либо природная несовместимость, не суть. Однако стоит отметить, что есть разместить предложенные вами коды только в footer.php и style.css — все работает (и без изменения functions.php и добавления verx.js в корень). Я уж не знаю почему, но работает. В общем, спасибо за статью, хоть и пришлось вас поругать (когда блог лег))))), но польза есть.

        • Добрый день, Андрей. Рад, что статья оказалась полезной. А по поводу functions.php: в новых версиях, если я не ошибаюсь, этот код можно не ставить, функция уже встроена в новый WordPress. В ближайшее время отредактирую статью!

        • Я нашел ошибку! Ошибка в скобках, WordPress сам переделал скобки.

          Попробуйте вот этот код вставить:

          // smart jquery inclusion
          if (!is_admin()) {
          wp_deregister_script('jquery');
          wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
          wp_enqueue_script('jquery');
          }

        • Ответить

          Вопрос а зачем? Все же работает без functions.php

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

        • Ответить

          Согласен, убедили))) Все исправил. Эффект гораздо круче. И за книгу отдельное спасибо

        • Рад, что у Вас получилось! Эффект действительно намного лучше.

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

  4. Ответить

    Попробовал сделать на сайте кнопку наверх. Сайт лег и не поднимается. Может конечно, по другой причине, не из-за махинаций с кнопкой, но в любом случае он лег, когда я делал кнопку. Весело 🙂 Хорошо, что не решил как раньше, делать на рабочем. А положил тестовый. А то было бы горе.

  5. Андрей, Кнопка рабочая. Значит, что-то неправильно сделали...

  6. Ответить

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

  7. Я думаю без плагина все-таки лучше. Вечерком попробую поставить себе. У меня раньше была кнопка наверх с плагином, но я ее убрал пока. Надо поставить снова. Для удобства.

  8. Ответить

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

    Но для Вашего сайта это не очень полезно: снижение скорости загрузки сайта — приводит к уходу посетителей!

    С уважением, Вадим.

    • Вадим Маслий, Все верно! Но хочу отметить, что такая кнопка сильно не грузит скорость сайта, а также смотрится очень даже ничего.

  9. Ответить

    У Вас на сайте все в меру, и кнопки не портят вид!)) Вообще в WP гораздо больше возможностей для импровизации, чем у нас в Blogger.

    C уважением, Вадим.

  10. Вадим Маслий:

    У Вас на сайте все в меру, и кнопки не портят вид!)) Вообще в WP гораздо больше возможностей для импровизации, чем у нас в Blogger.

    C уважением, Вадим.

    А перебазироваться не пробовали. 🙄

  11. Надо бы и мне такой кнопочкой обзавестись 😉

  12. Ответить

    О, давно хочу такую поставить! Кидаю в закладки. Чуть позже буду разбираться. ❗

  13. Ответить

    Наконец-то руки дошли поставить и себе на блог такую кнопочку

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

  15. Ответить

    Спасибо за кнопочку. Единственное, у меня не прошел код для футера.

    Вот эта часть (« align=»absmiddle") кривовато как та написана. Поэтому избавился от нее и все заработало.

  16. Какой тег в footer.php, вы о чем вообще?

    • Ответить

      Прочитайте статью. alt="« align=»absmiddle" border="0" /> Говорю — криво выводится. Т.е. видима. Поэтому тег alt убрал совсем, с содержимым. Мне сам вид строчки « align=»absmiddle" кажется каким то корявым.

      • Это я не вам замечание писал, а автору 😀 С вами я полностью согласен. Строчка, о которой вы говорите, вообще бессмысленна и ошибочна.

  17. Ответить

    Полезная информация, спасибо. Пока на моем блоге короткие статьи, но в будущем наверняка эта кнопка пригодится.

  18. Ответить

    Пока ещё не устанавливала подобную кнопку, но вижу, что она приносит сайту большую пользу — сокращает время возвращения вверх статьи.

    Воспользуюсь рекомендациями. Спасибо!

  19. Ответить

    Как я понял четвёртый пункт активирует поддержку jquery? Если да, то вставь в статье то, что если у вас уже в head есть скрипт подключения jquery, четвёртый пункт не нужен, также, хоть я и не проверял, из всего прочитанного кода можно сказать то, что он подойдёт для любых cms, но, естественно, кроме кода в пункте 4 — тут вам придётся подключать jquery средствами своего движка.

    У меня в MaxSite CMS есть уже стандартно в специальной папке скрипт, вебмастеру достаточно разместить код в шаблоне и описать стили в css или less файле шаблона.

  20. тоже себе не так давно сделал такую кнопку 😐

  21. Уже просмотрела огромное количество блогов по этой теме. Заодно смотрю у всех код через firebug. У вас кнопка работает как обычная ссылка на якорь. Плавная прокрутка появляется, если подключить библиотеку jquery, у вас этого нет. Многие и вы предлагаете сделать это подключение через functions. У меня jquery так не подключается, у вас тоже. Не могу понять, почему. Посмотрите свой код, у вас точно не подключается. Можете убрать код из functions — ваша кнопка будет работать так же, как сейчас.

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

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

  24. 😆 помоги автор куда ставить код в functions.php

  25. Ответить

    Я так понимаю, картинку можно любую ставить вместо той что у тебя?

  26. Очень удобная функция. Не надо скролить мышкой. Обязательно применю к своему будущему блогу.

  27. Всем привет! Необязательно делать кнопку на jquery, если можно установить простую кнопку при помощи стилей.