Майские праздники закончились, и снова на связи блог Good SEO. Сегодня я решил рассказать вам, как сделать кнопку «Наверх» для сайта, которая появляется при прокрутке страницы вниз, ставшую популярной в последнее время.
Мне кажется, что нет необходимости рассказывать, для чего нужна кнопка «Наверх» для WordPress-сайта и любого другого. Ее предназначение заложено в самом ее названии — она переносит нас к началу страницы при нажатии на нее, что особенно удобно, когда читаешь большой пост либо у статьи много комментариев.
В ином случае приходится довольно долго скроллить колесико мышки или вручную перемещать вверх полосу прокрутки браузера, что доставляет читателю некие неудобства. Наша же кнопка позволяет нам мгновенно вернуться к началу страницы.
Сделать кнопку «Наверх» мы можем как с помощью простого плагина, так и добавлением небольшого скрипта. Первый способ слишком прост для нас, поэтому я подробно расскажу о втором.
Начинающие пользователи не всегда рискуют лезть в код, чтобы добавить или изменить что-то. Им подойдет небольшой WordPress-плагин кнопки "Наверх", который называется Scroll to Top. Его вы можете установить через встроенный в панель администратора поиск плагинов. Для более опытных блоггеров внедрение кнопки возвращения наверх будет осуществляться с помощью скрипта.
Кнопка «Наверх» для сайта мне была очень необходима, но сам я не силен в jquery и других библиотеках. Не смотря на это, мне не составит труда взять уже написанный кем-то код и вставить его в нужный файл шаблона. Почему многие выбирают этот вариант? Потому что бытует мнение, что чем больше активных плагинов находится на вашем блоге, чем больше нагрузка на хостинг, увеличивается время загрузки сайта, то есть вы сами понимаете, что это не очень хорошо, так как пользователи не всегда любят ждать, пока загрузится страница.
Итак, приступим. В первую очередь необходимо скачать архив со следующими файлами: сам скрипт кнопки наверх verx.js и собственно сама картинка кнопки verx.gif. После этого распаковываем этот архив, файл verx.js копируем в корень вашего сайта — папку /public_html/, а файл verx.gif — в папку /public_html/wp-content/uploads/ или любую другую по вашему желанию.
Следующий шаг. Чтобы на сайте появилась возможность вернуться наверх при нажатии кнопки «Наверх», нам следует подключить к нашему сайту библиотеку jquery. Для этого мы открываем файл functions.php вашей темы либо в стандартном редакторе WordPress, либо в редакторе Notepad++ и вставляем этот код в начало этого файла сразу же после открывающего тега <?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');
}
Если вы не станете подключать jquery, то при нажатии на кнопку «Наверх» сразу окажетесь в самом верху страницы. При подключенном 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>
в котором:
- http://site.ru/ — вместо этого вы вводите адрес вашего сайта;
- /путь к картинке/ — точный путь к картинке.
Итак, последний шаг нашего урока. Открываем файл style.css, пролистываем его до конца и в самом низу вставляем этот код:
#toTop {
width: 100px;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
left: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}
Теперь у вас есть возможность что-то изменить и настроить внешний вид и отступы так, как посчитаете нужным.
То, как будет выглядеть ваша кнопка, тоже достаточно легко можно изменить. Вы можете закачать новую картинку кнопки, только не забудьте поменять путь к ней в файле footer.php. Очень много разнообразных картинок для кнопки «Наверх» можно подыскать в Интернете. Также вы можете скачать 14 уже готовых вариантов в zip-архиве по этой ссылке.
Если вы умеете работать с графическими редакторами, такими как PhotoShop, вам не составит труда нарисовать кнопку самому.
Собственно, на этом и всё. Надеюсь, что я достаточно понятно рассказал вам, как сделать кнопку «Наверх» для вашего сайта, и вы без труда сможете воспроизвести все операции.
Анатолий спасибо за информацию. Интересно было почитать.
Раньше я пользовался плагином чтобы кнопка была.
А сейчас уже без плагина. Ведь плагин это лишняя нагрузка.
А как здесь скорость подьема регулировать?
Я не силен в JS, но в том файлике есть параметр «slow». Я думаю, что если заменить его другим значением, то возможно что-то получится.
Анатолий, спасибо за информацию. Скажите, а как вы настроили пагинацию на сайте (страницы), сколько информации не находил — ничего не помогло.
У меня есть статья об этом, писал давно еще good-seo.ru/postranichnay...gin-wp-pagenavi/
Надеюсь, поможет.
Да, круто, спасибо. Код был немного не такой, но въехал, в этом шаблоне, как у вас есть строка . Спасибо за статью)
+ Статья помогла избавиться от ссылок в footer`е. Спасибо X2)
Это замечательно! Двойной эффект 😀
Не за что! Рад, что статья оказалась полезной 🙂
Давненько уже себе сделал такую кнопку, правда с кодом пришлось по париться не как не хотел работать…
У меня вообще встроена тему была эта кнопка 😀
Анатолий, приятный дизайн, кстати. Я все больше с телефона по чужим блогам, а тут зашла и оценила. Это качественный премиум или уникальный на заказ, если не секрет?
Спасибо! Это просто бесплатная WordPress-тема 🙂
НУ ВО-ПЕРВЫХ, МАЙСКИЕ ЕЩЕ НЕ ЗАКОНЧИЛИСЬ, ВООБЩЕ-ТО ГЛАВНЫЙ МАЙСКИЙ ЗАВТРА-ДЕНЬ ПОБЕДЫ 9 МАЯ, ИЛИ ТЫ С ПРОТИВОПОЛОЖНОЙ ВЛАСТИ???
Что, простите?
А у меня кнопка наверх уже была внедрена в шаблон блога изначально. Единственное, подумываю изменить её внешний вид
Вот и у меня точно так же.
Анатолий, а я по старинке пользуюсь плагином. Просто внесла туда нужную мне картинку и всё. Думаю, что лишней нагрузки на блог нет. То, что плагины сильно грузят блог — это правда отчасти. Всегда нужно учитывать, что лучше качественный плагин, чем не правильно написанный код. Так что лучше 50/50 соблюдать. Хотя кнопку можно бы и мне кодом заменить уже=)))
Я никогда не пренебрегал плагинами, потому что сомневаюсь, что мой основной список плагинов, которые я использую на всех сайтах, может неимоверно грузить систему.
Лара, а каким плагином пользуетесь? У меня любое вмешательство в фанкшенс вызывает катаклизмы с блогом...
Надежда, я тоже встречался с такими темами, правка кода которых могла положить всё начиная от лица блога, заканчивая админкой.
Как раз хотел написать статью на эту же тему 🙂
Но моя статья выйдет после того как напишу о том как за 10$ можно привлечь «лишние» 100 подписчиков в свою базу, а потом напишу про кнопку «вверх». У меня скрипт похожий, но добавлю эффект «hover» что бы кнопка выглядела еще круче 🙂
Жду с нетерпением статьи про подписчиков! Может даже воспользуюсь советами. У меня до сих пор подписчиков нет практически.
«Your comment is awaiting moderation.»
Почему бы Вам не перевести этот текст в шаблоне? 🙂
Спасибо, сейчас переведем 🙂
Не перевели)))
Блин, вроде заменял же на русские слова :)))
Я пока использую плагин, но конечно лучше всего делать без плагина, чтобы нагрузок было меньше.
Анатолий, спасибо за статью, ох бы она мне раньше попалась бы, а то уже сам сделал эту кнопку.
Привет Толик!
Немного не в тему поста, но все же как там продвижения клиентского сайта в seohammer.ru есть результаты ?
Привет! Да как-то не очень пошло, я и прикрыл. Зато SeoWizard в Google поднял один классный запрос в ТОП-3 (ну это я так думаю, что SeoWizard, а там хрен его, может и сам вышел).
А понятно, а сам не пытался закупать ссылки без всяких агрегаторов?
Неа. Сейчас по продвижению не особо работы, почти всё разработка.
Но это эффективней))
Ну клиентские я особо не двигал никогда еще, а свои у меня сами в ТОП по НЧ лезут, так что пока без надобности вообще что-то покупать. А вообще раньше закупал вечные в Ротапосте.
Благодаря Вконтакте, на всех сайтах машинально тыкаю в левый край. Поэтому логично реализовать точно так, как реализовано Вконтакте.
А у меня нет такого. Привык, что у меня курсор находится справа, когда листаю.
Почти любому человеку удобно тыкать в верхний левый угол, поэтому я бы если и делал, то делал именно в левой части сайта. На моем бложике в самом шблане реализовано как у тебя. Мне честно говоря лень ковырять, так как страница у меня не такая большая, соответственно и нужда в такой кнопке не возникает почти никогда.
Если бы ты знал, насколько мне лень менять 🙂
Надо будет и себе сделать кнопку вверх, и без плагина на denver установил плагин, а на хостинге попробую воспользоваться вашим способом))
Анатолий, смущает только то, что файл verx.js надо кидать в папку /public_html/. Не люблю делать привязки к хостингу. Ведь у вас кнопка уже была встроена в шаблон? Значит именно в нем автор разместил все скрипты и картинку с кнопкой? Сам пока что пользуюсь плагином, но нашел еще один способ... Если получится сделать кнопку, то поделюсь информацией...
Ну вообще у меня в папке с темой есть папка js, это всё, что я могу точно сказать, т.к. как я уже говорил, не особо разбираюсь в JavaScript.
Отпишитесь тогда о другом способе 🙂
Прописывать коды для меня непосильная задача, поэтому я предпочту наверно плагин. По поводу того, что большое количество плагинов замедляет загрузку страниц, пока не замечала, но у меня плагинов установлено немного, может поэтому пока с такой проблемой не сталкивалась. А сам кнопка очень удобна, когда статья большая.
Бурул, я тоже еще ни разу не замечал на своих сайтах тормозов от плагинов. Сам тоже не особо часто изменяю код, больше доверяю плагинам, чем себе.
Спасибо за информацию!
Сделала кнопочку.
Но у меня она получаеться в самом низу сайта, а как сделать что бы она появлялась сбоку уже после 2-3 публикации.?.то как публикаций получаеться очень много
Юля, а можно сайт посмотреть?