Здравствуйте, дорогие читатели SeoKos.ru! Представляю Вам и Вашему вниманию новый пост, в котором я расскажу о том для чего нужна кнопка «Наверх» и как её установить на WordPress.
Ну в начале, как всегда, объясню для чего эта кнопка вообще нужна и стоит ли ее ставить. Приступаем!
Для чего нужна кнопка Наверх?
К примеру, Вы написали длинную статью, пользователь дочитал ее до конца и теперь хочет вернуться обратно в начало. Думаю знакомая ситуация. Не правда ли? А крутить колесиком мыши и «тянуть» за ползунок — не очень удобно и долго.
Именно поэтому и была создана данная функция — поднятие страницы наверх. А еще, если красиво оформить кнопку, то это плюс к дизайну! А если еще модифицировать, то можно будет при нажатие отпускать страницу вниз, т.е. наоборот. Вот так вот.
Поднятие страницы можно осуществить как с помощью плагина, так и без него. Я сейчас объясню, и тот, и другой. Так что будьте внимательны.
Установка кнопки с плагином
Первое что нужно сделать, это и активировать его. После чего кнопка начнет работать. Но, изображение кнопки будет стандартное. Советую Вам изменить ее, на свою. Для это:
- Перейдите во вкладку «Параметры»
- --> Scroll to Top
- И выберите облик кнопки из предложенных или загрузите свою
- Нажмите кнопку «Update Options»
- Готово! Кнопка наверх для 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» и установили ее себе. Какие впечатления? Пишите в комментариях! На этом у меня все, всем пока.
С уважением, Константин Белан.
Рубрика: Настройка блога
Сам не так давно к себе установил кнопку, очень удобно!
Кнопка это удобство придуманное нами для посетителей. Просто они не знают как можно просто прокрутить страничку в любую сторону. Windows обо всем позаботился: http://problogger2012.blogspot.ru/2014/02/knopka-naverh-2.html
А если сайт на другом шаблоне работает?
Конечно будет.
Пробовал сделать, но получилось так, что в конце когда вставлял код в файл 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', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); wp_enqueue_script('jquery'); }Вопрос а зачем? Все же работает без functions.php
Сравните кнопку на моем блоге и на своем, и увидите разницу. У Вас нет плавного эффекта, а с ним смотрится гораздо привлекательнее.
Согласен, убедили))) Все исправил. Эффект гораздо круче. И за книгу отдельное спасибо
Рад, что у Вас получилось! Эффект действительно намного лучше.
Согласен, бывает, несколько раз ловил себя на данной ошибки, когда сайт ломался, 2 раза переустанавливал тему сайта 😀 После, уже всю тему скачал с хоста через фтп, помогает.
Попробовал сделать на сайте кнопку наверх. Сайт лег и не поднимается. Может конечно, по другой причине, не из-за махинаций с кнопкой, но в любом случае он лег, когда я делал кнопку. Весело 🙂 Хорошо, что не решил как раньше, делать на рабочем. А положил тестовый. А то было бы горе.
Андрей, Кнопка рабочая. Значит, что-то неправильно сделали...
Вполне вероятно. А с другой стороны кто знает из-за чего сайт лег.
Я думаю без плагина все-таки лучше. Вечерком попробую поставить себе. У меня раньше была кнопка наверх с плагином, но я ее убрал пока. Надо поставить снова. Для удобства.
Иногда зайдешь на сайт — в глазах рябит от всевозможных кнопочек, окошечек, ленточек, летающих птичек и тому подобных. Сам раньше увлекался, все через это проходим.
Но для Вашего сайта это не очень полезно: снижение скорости загрузки сайта — приводит к уходу посетителей!
С уважением, Вадим.
Вадим Маслий, Все верно! Но хочу отметить, что такая кнопка сильно не грузит скорость сайта, а также смотрится очень даже ничего.
У Вас на сайте все в меру, и кнопки не портят вид!)) Вообще в WP гораздо больше возможностей для импровизации, чем у нас в Blogger.
C уважением, Вадим.
А перебазироваться не пробовали. 🙄
Надо бы и мне такой кнопочкой обзавестись 😉
О, давно хочу такую поставить! Кидаю в закладки. Чуть позже буду разбираться. ❗
Наконец-то руки дошли поставить и себе на блог такую кнопочку
Я предпочитаю не нагружать свой блог лишними плагинами поэтому использую код для таких целей. Конечно установка в этом случаи несколько усложняется, но зато знаешь, что в итоге не навредишь сайту.
Спасибо за кнопочку. Единственное, у меня не прошел код для футера.
Вот эта часть (« align=»absmiddle") кривовато как та написана. Поэтому избавился от нее и все заработало.
Какой тег в footer.php, вы о чем вообще?
Прочитайте статью. alt="« align=»absmiddle" border="0" /> Говорю — криво выводится. Т.е. видима. Поэтому тег alt убрал совсем, с содержимым. Мне сам вид строчки « align=»absmiddle" кажется каким то корявым.
Это я не вам замечание писал, а автору 😀 С вами я полностью согласен. Строчка, о которой вы говорите, вообще бессмысленна и ошибочна.
Полезная информация, спасибо. Пока на моем блоге короткие статьи, но в будущем наверняка эта кнопка пригодится.
Пока ещё не устанавливала подобную кнопку, но вижу, что она приносит сайту большую пользу — сокращает время возвращения вверх статьи.
Воспользуюсь рекомендациями. Спасибо!
Как я понял четвёртый пункт активирует поддержку jquery? Если да, то вставь в статье то, что если у вас уже в head есть скрипт подключения jquery, четвёртый пункт не нужен, также, хоть я и не проверял, из всего прочитанного кода можно сказать то, что он подойдёт для любых cms, но, естественно, кроме кода в пункте 4 — тут вам придётся подключать jquery средствами своего движка.
У меня в MaxSite CMS есть уже стандартно в специальной папке скрипт, вебмастеру достаточно разместить код в шаблоне и описать стили в css или less файле шаблона.
тоже себе не так давно сделал такую кнопку 😐
Уже просмотрела огромное количество блогов по этой теме. Заодно смотрю у всех код через firebug. У вас кнопка работает как обычная ссылка на якорь. Плавная прокрутка появляется, если подключить библиотеку jquery, у вас этого нет. Многие и вы предлагаете сделать это подключение через functions. У меня jquery так не подключается, у вас тоже. Не могу понять, почему. Посмотрите свой код, у вас точно не подключается. Можете убрать код из functions — ваша кнопка будет работать так же, как сейчас.
Спасибо огромное. У меня до этого не было такой кнопки, я и знать не знал как её поставить, к счастью нашёл и прочёл эту статью.
благодарен за хорошую статью, у меня никогда не было этой кнопки, думал она на других шаблонах, буду устанавливать себе такое чудо 😡
😆 помоги автор куда ставить код в functions.php
Я так понимаю, картинку можно любую ставить вместо той что у тебя?
Очень удобная функция. Не надо скролить мышкой. Обязательно применю к своему будущему блогу.
Всем привет! Необязательно делать кнопку на jquery, если можно установить простую кнопку при помощи стилей.