Урок 225 Кнопка «Вверх» в WordPress: как сделать кнопку «Наверх» на Вордпресс

naverh

Добрый вечер! Многие меня спрашивают как по почте, так и в комментариях, как сделать кнопку “Вверх” в WordPress. На всех моих блогах он был “вшит” в тему или в данном случае на этом новом шаблоне я попросил верстальщика “прикрепить" кнопку наверх рядом с счетчиком подписчиков.

Кнопка "Вверх" WordPress Обычно такие кнопки вставляют через скрипты, но, скажу честно, я вообще в них не разбираюсь, поэтому я не могу вам рассказать, как сделать кнопку “Наверх” через них. Думаю, многие, как и я, не сильны в скриптах, ну сложно это, ничего с этим не поделаешь. Что же тогда делать? Я нашел выход, поставил кнопку “Вверх” на один из своих блогов на WordPress через плагин Scroll to Top.

Как выглядит эта кнопка “Наверх” Вы можете посмотреть на моем блоге про коктейли (просто прокрутите вниз и увидите кнопку в правой части). Вам понравилась эта кнопка? Хотите такую же? Нет проблем, читаем урок дальше, тратим свои 5 минут и все готово :).

Как сделать кнопку “Вверх” в WordPress

  1. Устанавливаем плагин Scroll to Top.
  2. Кнопка уже работает. Вы же можете покопаться в настройках плагина (изменить скорость прокрутки и т.п.): админка WordPress –> Параметры –> Scroll to Top.
  3. Вот и все :). Плагин настроен, работает отлично, если Вам вдруг не нравится кнопка, то можете скачать другую (их в интернете полно), залить ее к себе на блог и просто в настройках плагина прописать полный путь до картинки: Плагин WordPress "Вверх"

На сегодня все, а завтра же, в пятницу, вас, мои друзья, ждет классный сюрприз, я уверен, вам понравится :). Жду вас в гости, постараюсь о сюрпризе рассказать днем, может даже утром, а то мне как-то не терпится :).

До скорой встречи!

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

70 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Denys http://deynekin.pp.ua

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

Автор
Пётр Александров

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

Denys http://deynekin.pp.ua

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

Владислав http://avabody.ru/

Странно, но на твоем сайте я ее не нашел. Надо тоже сделать. Ждем сюрприз.

Автор
Пётр Александров

В правый нижний угол посмотри 🙂 Чуть пониже счетчика подписчиков.

Andrey http://lifeneverwaits.ru/

Петр, можете дать ссылку на вашу картинку этой кнопки, найти её не могу. Заранее спасибо.

Автор
Пётр Александров

На мою, которая на wpnew.ru? Там текст, не картинка. Или которая на fanbar.ru?

Andrey http://lifeneverwaits.ru/

Да, да я про wpnew.ru имел ввиду.

Andrey http://lifeneverwaits.ru/

Воот, давно хотел спросить как сделать эту кнопочку, с ней очень удобно. Спасибо!

Илья http://directsalez.ru

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

Лысенко Евгений http://webpathblog.ru

Если имеются ввиду скриншоты с разных сайтов, то для пользователей Хрома есть хорошее расширение "Awesome Screenshot: Capture & Annotate" Сам им пользуюсь. Там и стрелки, и рамки, и обрезать картинку можно, можно снять скрин со всей страницы, и даже не видимой ее части. Мне очень нарвиться

Виталий http://mojwp.ru/

скорее всего подразумевается "стрелка" в скриншоте.

Анатолий http://blog-parkovka.ru/

А я думаю подразумевается миниатюра...

Автор
Пётр Александров

Что именно Вас интересует? 🙂

levon http://ayasam.ru/

На сайте fanbar.ru нету кнопки на верх.

Автор
Пётр Александров

Прошу прощения, вернул. Теперь есть.

Марина Лазарева http://frilka.com

Хм. А, я не заметила кнопку "наверх" на твоем блоге 🙂 Кстати, на блоге о коктейлях вообще ее не нашла 🙂

Автор
Пётр Александров

Неужели в правом нижнем углу на fanbar.ru нету? 🙂 Неужели я один ее вижу?..

Сергей http://sovetsadovoda.ru

нету там кнопки!

Вадим http://dogblogger.ru/

Есть! Только надо немного в низ прокрутить...

darwin http://ifseo.ru

кнопочка почти не замета( с помощью плагина это что-то

Юлия Штрелер http://www.net4lady.ru/

Хорошо, конечно, подумать об удобстве для посетителя на блоге.

Только вот мое личное мнение - такая кнопка не есть хорошо для заработка на контекстной рекламе (если конечно блог именно на это сориентирован).

Ведь когда страничку вверх прокручивают, могут и по рекламе лишний раз кликнуть)))

Но если вся реклама вверху страницы, а не расположена вдоль текстового поля поста - почему нет?

Дмитрий http://karelshungit.com

Есть прикольное расширение для Хрома: Один клик вверх. Без кнопки вверх можно подниматься на любом сайте. https://chrome.google.com/webstore/detail/pdlafijedddmcijlebhjbajifgcajfjp?utm_source=chrome-ntp-icon

Николай http://ivanishinnikolay.com/

Дмитрий, зачем ставить расширения. На любом сайте элементарно подняться наверх. Это делает кнопка на клавиатуре - Home. Вниз, кнопка - End . А еще можно делать прокрутку страниц с помощью кнопок - PageUp («страница вверх») и PageDown («страница вниз»).

Автор
Пётр Александров

Не все пользуются Хромом, но все же, спасибо за это расширение 🙂

Михаил http://mountain.crimea.ua/

Спасибо, поставил себе стрелочку, оформил в виде ледоруба 🙂

webmozg http://webmozg.ru

" на этом новом шаблоне я попросил верстальщика “прикрепить" кнопку наверх рядом с счетчиком подписчиков."

на этом сайте она была в шаблонах изначально там где сейчас =)

Автор
Пётр Александров

Ну этими словами я имел в виду, что понятия не имею, как в коде вставить эту кнопку туда, где она сейчас расположена 🙂

Рустам

Отличное решение! А про плагин для Google Chrome Вы что-нибудь слышали? Я с не давних пор пользуюсь им на всех сайтах!

https://chrome.google.com/webstore/detail/pdlafijedddmcijlebhjbajifgcajfjp?hl=ru

Пётр, а как его сделать на правом углу, как у тебя у меня выводится на середине страницы

Автор
Пётр Александров

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

Татьяна http://kukli37.ru

Спасибо, Петр. Я тоже скачала с админки и там нет никаких настроек. Сейчас все переделаю.

Delpix http://delpix.ru

Встречный вопрос, как сделать ссылку слева?

Олег http://blogibiznes.ru/

Тоже сначала хотел скрипт установить, но что-то у меня не получилось. Поставил плагин и все нормально.

А вообще, самое простое это поставить в футер ссылку вида (a href="#">Вверх</a). Или вставить ее в картинку. Только плавности не будет и кнопка не исчезает вверху страницы.

Бейбут Керим

Добрый день! Подскажите пожалуйста, в браузере Firefox версия 4-я не реагирует

на закладки которых я поставил заранее. К примеру нажали на ссылку открылся

страница в том же окне и поднялся вверх к титулку (ссылка#up)

Андрей http://games-box.tw1.ru

Спасибо за плагин, обязательно поставлю

Лысенко Евгений http://webpathblog.ru

Полезный плагин, но если есть возможность использовать код, лучше поставить код. Буду искать где-нибудь хороший код на вставку этой кнопки, хотя если не попадется ничего стоящего, то вернусь к плагину. 🙂

Андрей http://chevoyka.ru

Оределенно на своем сайте буду его использовать

Mafkey http://mafkey.com

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

Андрей http://chevoyka.ru

У мена такая кнопка стоит через дркгой плагин.

Андрей http://chevoyka.ru

А, нет черех этот, тока он почему-то у меня по русски выводится!

может вы поставили руссифицированый плагин? //

yulyaxa http://mamulkikrasotulki.ru

Раньше я не придавала значения кнопке, а сейчас работаю на нетбуке. Клавиатура маленькая, Кнопка HOME есть на стрелочке влево, но я не знаю как ее нажать. Читаю твой сайт, огромное количество комментариев. Чтобы не прокручивать страницу вверх - нажала на кнопочку и аля.. я уже в начале страницы!

Думаю статья многим пригодиться!!!!!!!!

Юля, прочла ваше сообщение и проверила на своем ноутбуке, т.к этот же вопрос и меня мучал. А сейчас дошло. Если кнопка Home белого цвета, то нажимаете ее совместно с кнопкой Shift. Если кнопка синего цвета, то с Fn синего цвета.

Михаил http://rabotaiyou.ru/

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

Сергей http://consei.ru

А как сделать кнопку Подпишить на блог? У вас справа она.

Виталий http://tutyt.ru

Спасибо за кнопку я не знал ) теперь у меня такая появиться ))

Сергей http://www.buildbody.org.ua/

А как сделать, чтоб кнопка была справа как и у вас.

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

Олег Астанин http://free-html.ru/

Я сам попытался сделать через JQuery. Кнопка лошадинная получилась правда, но работает)) И еще плавную анимацию добавил!

Алексей http://mapsport.ru

Не работает этот плагин на моей теме.

joni http://m-ibs.ru

Петр, а как сделать вот это счетчик подписчиков,который выше кнопки вверх??))

Екатерина http://misslucky.ru/

спасибо большое, очень полезный урок!

Сергей http://egofilin.ru

Кнопку поставить можно, НО нужна ли она? Кто ей пользуется если честно? Для того, чтобы прокручивать вверх или вниз, имеются кнопочки на клавиатуре page Up page Down. Про кнопку Home здесь уже писали. Если хотите медленно прокручивать, то нажимаете на колесико мыши, появляется кружочек со стрелочками и двигая мышью вверх или вниз, вы прокручиваете страницу с определенной скоростью. Это так, информация к размышлению, стоит ли нагружать сайт дополнительными плагинами или скриптами. 🙂

Евгений http://psyhobooks.ru/

Конечно кнопка нужна! Люди по своей природе ленивы. Например я когда просматриваю блоги, сайты, я пользуюсь в основном мышью и мне банально лень тянуться до клавиатуры, а сделать одно движение мышью и кликнуть по кнопке вверх никому не в напряг. Некоторые посетители возможно и остались бы на сайте подольше, да им проще нажать мышкой на крестик, чем искать кнопки page Up page Down. Многие вообще не знают что с помощью клавиатуры можно листать страницу

Алексей Туманов

Ну, думаю, некоторая часть пользователей (как я раньше) вообще и не догадывалась что это за кнопка и какая её функция. Возможно всё из-за банальной лени 🙂

Роман http://toursector.org.ua/

Еще парочку плагинов вместо скриптов и сайт будет просто гепард 🙂

Денис http://laimweb.ru

А как сделать что б кнопка была не внизу а сбоку?

Тимур http://timur-m.com

Добрый день, Петр!

Скажите, а как вы сделали в хедере кнопку (стрелку), при нажатии которой появляется/скрывается информация? при помощи плагина или slideToggle?

Николай http://nashipchelu.ru

Это верстальщик сделал ему!!!

Сергей http://sovetyinterneta.ru

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

Юрий http://online-game-5.ru/

Автору респект!

реально перепробывал кучу кнопок.

и кодами пытался ставить и плагинами... везде косяки - то картинка не работает, то кнопка не появляется. с первого раза встало все как надо, единственная правка была, заменил стандартную надпись в title на "Наверх".

стандартная стрелочка даже изумительно вписалась в дизайн.

Автор
Пётр Александров http://wpnew.ru

Рад был помочь 🙂

Роман http://kurtkin.ru/

Спасибо за иныу! Получилось только с третьего раза!)

Автор
Пётр Александров http://wpnew.ru

А в чем проблема была изначально?

Алексей Туманов

Хм.. А нужна ли вообще эта кнопка? Думаю, намного удобнее нажать на колёсико мыши и поднятся до нужной строчки. Хотя, это только моё скромрное мнение 🙂

IvYur http://kuponam.ru

Я как бы не согласен. Многие авторы авторитетных блогов советуют эту кнопку. Я например поставил на своих блогах.

alright http://intmoney.com.ua

Я собственно так и делаю 🙂 Хотя, есть же те, у кого ноутбук, может им так удобней. Но как по мне - она лишняя )

IvYur http://kuponam.ru

Тут как сказать. Я тоже как бы привык вверх колесиком прокрутил и все нормально. А вот те кто привык нажимать на ее мягко говоря расстраиваются если не находят ее. Я думаю если она будет - то лишнем это не будет.

Alex http://kitaiphones.ru/

А я установил плагин и быстро и сайт совсем не грузит

IvYur http://kuponam.ru

Плагин - плагину рознь. Но если есть возможность обойтись без плагина, то код добавляйте. Так вообще нагрузки на сайт ощутимой не будет. А если плагин жизненно необходим и без него ни как - то тогда ставьте.

Наверх Рейтинг@Mail.ru