Кнопка Вверх для WordPress — быстрый переход в начало страницы. Wordpress кнопка вверх
как сделать кнопку "Наверх" на Вордпресс
Добрый вечер! Многие меня спрашивают как по почте, так и в комментариях, как сделать кнопку “Вверх” в WordPress. На всех моих блогах он был “вшит” в тему или в данном случае на этом новом шаблоне я попросил верстальщика “прикрепить" кнопку наверх рядом с счетчиком подписчиков.
Обычно такие кнопки вставляют через скрипты, но, скажу честно, я вообще в них не разбираюсь, поэтому я не могу вам рассказать, как сделать кнопку “Наверх” через них. Думаю, многие, как и я, не сильны в скриптах, ну сложно это, ничего с этим не поделаешь. Что же тогда делать? Я нашел выход, поставил кнопку “Вверх” на один из своих блогов на WordPress через плагин Scroll to Top.
Как выглядит эта кнопка “Наверх” Вы можете посмотреть на моем блоге про коктейли (просто прокрутите вниз и увидите кнопку в правой части). Вам понравилась эта кнопка? Хотите такую же? Нет проблем, читаем урок дальше, тратим свои 5 минут и все готово :).
Как сделать кнопку “Вверх” в WordPress
- Устанавливаем плагин Scroll to Top.
- Кнопка уже работает. Вы же можете покопаться в настройках плагина (изменить скорость прокрутки и т.п.): админка WordPress –> Параметры –> Scroll to Top.
- Вот и все :). Плагин настроен, работает отлично, если Вам вдруг не нравится кнопка, то можете скачать другую (их в интернете полно), залить ее к себе на блог и просто в настройках плагина прописать полный путь до картинки:
На сегодня все, а завтра же, в пятницу, вас, мои друзья, ждет классный сюрприз, я уверен, вам понравится :). Жду вас в гости, постараюсь о сюрпризе рассказать днем, может даже утром, а то мне как-то не терпится :).
До скорой встречи!
Подпишитесь на бесплатные уроки
Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.
wpnew.ru
Кнопка вверх для wordpress. Как сделать кнопку вверх быстро |
И снова здравствуйте дорогие читатели! Сегодняшняя тема — кнопка вверх для wordpress сайта/блога – быстренькая установка.
Установка кнопки займёт минуту времени, а может и меньше. В общем, читайте далее и всё поймёте.
В сети, я очень часто встречаю комментарии, в которых люди умоляют объяснить подробнее тот или иной материал, особенно когда дело доходит до установки/правки кода. Оно и понятно, что ничего не понятно начинающим, у которых боязнь сделать что-то не так – просто зашкаливает. Именно поэтому, мы сейчас рассмотрим способ — как сделать кнопку вверх на сайте при помощи простого плагина. Ковыряться в коде и где-то что-то править точно не придётся, как говорится – установил раз и забыл.
Давайте рассмотрим несколько вариантов того, как сделать кнопку наверх на сайте wordpress, а позже, в комментариях Вы поделитесь своими впечатлениями, ну что, поехали.
Как сделать кнопку вверх на сайте с помощью плагина
Вариант№1 – используем плагин Smooth Scroll Up
Довольно таки простенький и с минимумом настроек, в нём присутствует три варианта выводимых кнопок и 3 варианта их размещения на сайте…
Установка…
Быстро скачать и установить плагин можно через админку блога. Зайдите в меню плагины – добавить новый – в поисковое поле вставьте название плагина – нажать кнопку «найти»… Более подробно о поиске и установке написано здесь Установка плагинов WordPress
Настройка плагина.
Перейдите — админка – настройки – Scroll Up Option
- Название кнопки. Можете вписать любое название!
- Выбор кнопки. Три варианта кнопок – текстовая, овальная и в виде таба.
- Позиция кнопки. Размещение кнопки – справа, слева и по центру.
- Показывать кнопку на главной странице — (да-нет).
- Расстояние в пикселях от самого верха и до момента появления кнопки. Я поставил значение (1000), которое равно примерно трём вращениям колёсика мышки, после чего появляется кнопка вверх.
- Поведение кнопки на рубеже. Можно ничего не менять, так как практически ничего не заметно.
- Кнопка сохранить. Сохранение Ваших настроек.
Согласитесь, всё очень просто!
Вариант№2 — плагин Scroll Button
Тут совсем просто, он без настроек. Просто устанавливаем плагин, кнопка сразу же отображается в правом нижнем углу сайта. Всё!
Установка аналогична варианту№1.
Собственно это всё, а Вы ожидали большего!? Извините, что разочаровал. 
На этом я заканчиваю нашу тему — кнопка вверх для wordpress блога. Скоро напишу про одну интересненькую вещь — не пропустите…
До скорого!
Обратите внимание на следующие статьи...
inetmi.ru
Кнопка Вверх для WordPress - плагин Dynamic To Top Options.
Здравствуйте, уважаемые читатели! Когда-нибудь задумывались над тем, как сделать кнопку Вверх для WordPress? Нет? Очень зря. Ведь это не только красивая, но и очень полезная вещь. Такая кнопка появляется в правом нижнем углу при прокрутке страницы вниз. Нажимаем на нее, и страница плавно возвращается к своему началу. Реализовать подобный эффектный переход наверх в WordPress можно с помощью плагина Dynamic To Top Options. О нем то я сегодня и расскажу.
В настройках WordPress можно установить количество анонсов, выводимых на главной и в рубриках блога. На многих блогах, даже 5-7 анонсов хватает, чтобы страницу сделать весьма длинной. И чтобы не раздражать лишний раз читателей и не насиловать колесик мышки, придумана отличная функция — кнопка, после нажатия на которую, страница автоматически прокручивается наверх к своему началу. Просто, эффектно и удобно!
Конечно, кто-то может косо на это посмотреть и сказать, что это необязательно и только добавляет лишний код на страницу. Во многом это так, но не забывайте про юзабилити сайта, про поведенческий фактор и банальное удобство. Этот пустяк может зацепить читателя и оставить его в подписчиках. Но каждый решит для себя сам — устанавливать или нет.
Установка плагина Dynamic To Top Options стандартна. Скачайте последнюю версию, распакуйте и загрузите на сервер в директорию /wp-content/plugins. Активируйте и переходите к настройкам, которые в отличии от большинства других плагин, находятся в разделе «Внешний вид» — «To Top».
Все настройки на английском языке, но разобраться в них несложно. Сейчас я помогу вам в этом.
Первый раздел настроек называется Behavior, что означает свойства.
Scroll time — задает время прокрутки страницы к началу. Измеряется в миллисекундах.
Fade-in distance — расстояние от верхнего края страницы, начиная с которого появляется кнопка «вверх!».
Easing — задает плавность прокрутки. Если не приглядываться, то достаточно трудно почувствовать разницу, особенно если установлено малое значения для времени прокрутки.
Position — позиция кнопки на странице. На выбор 4 позиции:
- top left — левый верхний угол
- top right — правый верхний
- bottom left — нижний левый угол
- bottom right — соответственно нижний правый
Prevent on mobile — отображать или нет кнопку вверх в браузерах мобильный устройств.
Остается только отредактировать внешний вид кнопки в разделе Appearance настроек плагина Dynamic To Top Options. Очень удобно, что все внесенные изменения, можно посмотреть тут же на примере.
Text version — позволяет написать на кнопке текст. После установки галочки, появится следующие поля:
- Button text — текст, используйте простые и понятные слова — «Вверх!» «В начало страницы», «Наверх!», «К началу», «Up!», «Полетели!» и так далее; [ad]
- Font size — размер шрифта
- Text color — цвет теста. Нажмите select для наглядного выбора цвета;
- Bold Text — жирное начертание;
- Text shadow — тень от букв;
- Text shadow color — цвет тени.
Top/bottom padding — отступ сверху и снизу от текста или изображения внутри кнопки до ее границ.
Sides padding — аналогично предыдущему, только определяет отступ слева и справа.
Background color — задний цвет кнопки.
Border color — цвет границы.
Border width — ширина границы.
Border radius — определяет радиус скругления — от квадратной формы до круглой.
Inset highlighting — использование CSS3 для отображения цвета кнопки. Лично я не почувствовал разницы с использованием CSS3 и без.
Shadow — отображает тень, используя CSS3.
Не забудьте сохранить внесенные изменения. Если этот плагин чем-то не понравился и хочется нечто большего, то вы вполне можете добавить кнопку вверх на сайт самостоятельно. Это не так уж и сложно, как может показаться на первый взгляд. Главное — верить в свои силы! 
Спасибо за внимание! Подписывайтесь на ленту новостей блога FairHeart.ru. Берегите себя!
Лучший способ выразить благодарность автору - поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Следите за обновлениями в Twitter и RSS.
fairheart.ru
Кнопка вверх для блога на WordPress
Привет, почитателям WordPress! Кнопка вверх или по другому наверх, обязательно (моё мнение) устанавливается на любой сайт, блог. Особенно если на блоге очень длинные статьи. Это полезное дополнение служит в первую очередь для удобства посетителей веб-ресурса, чтобы они могли не прилагая никаких усилий, нажав на кнопочку прокрутить страницу к её началу. Хотя некоторые товарищи специально такие кнопки не ставят, утверждая, что читатели блога пусть лишний раз увидят рекламу или информацию в сайдбаре прокручивая страницу вручную. Мне кажется сначала надо создать все условия для своих читателей, чтобы они потом захотели вернуться к вам назад. Ладно, это их личное дело, а мы не такие.
Установить кнопку вверх нам поможет плагин Scroll to Top
Для начинающих осваивать движок WordPress, я советую пользоваться первое время плагинами. Пройдет некоторое время и наступит момент, когда можно будет обходиться без них, устанавливая код вручную. И так, чтобы установить волшебные кнопки на свой любимый блог, зайдите - Плагины - Добавить новый. В окно поиска введите Scroll to Top и нажмите поиск. На открывшейся странице с плагинами найдите искомый нами (должен быть первый в списке), кликнете "Установить".
Установка плагина Scroll to TopПосле успешной установки, незабываем нажать ссылку "Активировать плагин":
Активировать плагин Scroll to TopДалее, для настройки кнопки вверх переходим: Параметры - Scroll to Top и делаем ваши изменения (если потребуется). Показывать или запретить; напишите текст для кнопки; укажите ширину в px; цвет текста; цвет фона. Нажимаем "Сохранить изменения":
Настройки кнопки вверх для блогаГотово. Кнопка на вверх установлена. Зайдите в блог и попробуйте: при прокрутке страницы вниз кнопочка плавно появиться по середине блога. Вот так:
Кнопка вверх в действииПоменять дизайн и настройки кнопки можно в любое время, как и все установленные у вас плагины. Работать с вордпресс просто великолепно, почему я раньше не перешёл на него. На Blogger просидел больше двух лет. Лучше поздно, чем никогда. Теперь всех своих читателей блогов на блоггер переманиваю на популярную и любимую платформу WordPress. На этом у меня всё. Позвольте мне, не надолго попрощаться с вами. Удачи.
Понравилась статья? Поделись с друзьями!
wordpressmania.ru
Кнопка «Вверх» с помощью плагинов на Word Press
Установка кнопки для возврата в начало страницы улучшает навигацию по сайту. Особенно это необходимо, если на блоге содержатся записи, которые занимают много места. Здесь, если с самого низа возвращаться на начало страницы вручную, можно уже забыть, для чего шли наверх.
На клавиатуре есть кнопки «Page UP» и «Page Down», которые могут быстро прокрутить страницу от начала в конец и обратно. Этим вы можете воспользоваться на сайте, где администратор не удосужился разместить кнопку возврата наверх. А посетители вашего сайта могут и не знать о таких функциях клавиатуры, и будут негодовать, прокручивая мышкой страницу до верха.
Этого нельзя допустить. Поэтому посмотрим, как можно разместить на сайте кнопку для возврата на вверх станицы.
Scroll to Top
Scroll to Top – это, наверное, самый известный плагин для того, чтобы сделать кнопку «Наверх». Чтобы им воспользоваться, необходимо установить его и активировать. И всё. Можете идти на сайт и смотреть на свою кнопку для возврата наверх.
Есть, конечно, немного настроек. Опции Scroll to Top зависят от версии плагина, и даже источника скачивания, так как он в виду своей простоты подвергался множеству изменений. Если вы разбираетесь в php, то сами тоже можете поучаствовать.
В основном настройки определяют текст на кнопке, её положение на странице, размер, цвет. Также можно скачать и установить дополнительные иконки для этой кнопки, которые позволяют менять саму кнопку. Это следует делать либо в настройках, либо, если у вас нет такой опии, в *.php плагина.
Smooth Scroll Up
Этот плагин также используется для возврата на начало страницы, но в отличие от предыдущего в нём есть более широкие функции.
Иконки кнопки не нужно скачивать отдельно, они поставляются вместе с плагином, что очень удобно. Иконки представляют собой большой набор стилей, и можно подобрать что-то соответственное оформлению сайта.
Так же, как и в предыдущем плагине, здесь можно настраивать положение кнопки на сайте, текст кнопки.
В отличие от Scroll to Top в Smooth Scroll Up можно настаивать то, когда появится кнопка для возврат на вверх. То есть, вы указываете расстояние от верха страницы, после прокрутки которого должна появиться эта кнопка.
Также этот плагин может наделять процесс возврата различными анимационными эффектами, например, затемнение или плавный переход.
В Smooth Scroll Up есть опция, которая позволяет скрыть эту кнопку при показе на мобильных устройствах.
Также можно назначить команду, которая будет выполняться при клике на кнопку. Поэтому можно добиться не только возвращения на вверх страницы, но и других событий от этого плагина.
jQuery Smooth Scroll
Если вы хотите потратить минимум ресурсов для миниатюрной, но очень полезной функции, то вам нужен плагин jQuery Smooth Scroll. По заявлению производителей вы активируете его, и забудете о нём навсегда.
На практике так и получается. После активации на сайте появляется кнопка, и плагин не создаёт никаких дополнительных пунктов в административной панели, и не имеет никаких настроек. Если хотите произвести настройку модуля, то придётся идти в *.php.
Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.
Также по этой теме:
wpuroki.ru
добавляем кнопку подняться вверх в Wordpress
Здравствуйте дорогие читатели блога Pro-Wordpress.ru. Сегодня хотелось бы рассказать вам ка же добавить ту самую кнопку подняться "НАВЕРХ" которая позволит читателю вашего блога с легкостью подняться к началу статьи. Такую кнопку вы можете увидит у меня на блоге в правом нижнем углу. Для добавления кнопки я использовал плагин Dynamic To Top.
В чем плюсы этого плагина:
Первый плюс: минимум настроек.
Второй плюс: интегрируется в wordpress без вмешательства кода.
Третий плюс: возможность менять внешний вид кнопки в настройках плагина.
Минусы плагина:
Первый минус: плагин на Английском языке.
И так как же добавить кнопку вверх в wordpress.
Установка плагина
1 Качаем плагин Dynamic To Top здесь.
2 Распаковываем архив с плагином и кидаем папку dynamic-to-top в (wp-content/plugins/).
3 Активируем плагин.
После активации плагина. Переходим в Внешний вид —>To top. И настраиваем внешний вид кнопки.
1. Время прокрутки страницы вверх.
2. Отступ кнопки от начала страницы.
3. Я не совсем понял для чего это. Пускай будет in
4. Расположение кнопки (Справа вверху справа внизу, слева вверху слева внизу).
5. Можем отключить кнопку на мобильных браузерах.
6. Внешний вид вашей будущей кнопки.
7. Если поставить галочку то кнопка будет текстовая то есть можно будет написать текст "НАВЕРХ". Или не ставить галочку тогда ваша кнопка будет в виде стрелочки.
8. Текст кнопки.
9. Высота кнопки.
10. Ширина кнопки.
11. Размер шрифта
12. Цвет текста
13. Если поставить галочку то текст будет жирным.
14. Добавить тень в текст.
15. Цвет текста тени.
16. Цвет фона.
17. Цвет обводки кнопки.
18. Ширина обводки.
19. Радиус закругления кнопки.
20. Добавить подсветку в css.
21. Добавить тень в css.
22. Сохранить изменения.
Ну вроде бы все рассказал если вам понравился пост сделайте Retweet.
pro-wordpress.ru
Кнопка "вверх" для прокрутки с помощью плагина WordPress
Всем привет! Когда этот блог только начинал существование, я даже не задумывался о такой удобной функции, как прокрутка страницы вверх одной кнопкой. Но, когда появились объёмные статьи, я понял, что такой кнопки очень не хватает. Кому понравится скроллить обратно вверх всю статью? Сделать кнопку «вверх» оказалось совсем несложно. Тут есть два варианта: первый — использовать готовые скрипты, второй — скачать плагин. Но, обо всем по порядку.Сначала я сделал статичную кнопку в подвале сайта. Это было простое изображение стрелки со ссылкой. То есть получалось так, что при нажатии, страница моментально прыгала вверх, а к адресу сайта добавлялась решётка. Это, конечно, далеко не самый лучший способ, но выглядела кнопочка приятно, вверх поднимала, значит и функцию свою выполняла. Девиз программиста: «Работает — не трогай!» 
Однако, спустя некоторое время, я пришёл к выводу, что без плавающей кнопки всё же не обойтись. Тем более я видел такие кнопки «вверх» на многих авторитетных (и не очень) сайтах. Так просматривать материал гораздо удобнее, один клик по кнопке — и страница моментально поднимается обратно вверх. А юзабили — важный фактор в дизайне любых сайтов.
Плагин Scroll To Up: кнопка «вверх» для удобной навигации. Кнопка «вверх» на WordPress
Как я уже говорил, кнопку «вверх» на сайт можно добавить с помощью скриптов, с использованием CSS и jQuery. На многих сайтах именно так она и реализована. Но для WordPress есть более простой способ — плагин Scroll To Up. В нём есть различные кнопки «вверх» в уже готовых вариациях. Обожаю удобство сайта на WordPress — можно найти плагины для чего угодно!
Скачиваем Scroll To Up, с помощью которого мы и добавим эту самую кнопку «вверх», через консоль WordPress, затем заходим в настройки. Видим несколько вкладок.
Настройки Scroll To UpЗдесь можно задать скорость прокрутки вверх страницы при нажатии на кнопку, анимацию появления на сайте, её положение на странице. А самое главное — тип кнопки. Это может быть простой текст, иконка, либо изображение кнопки «вверх», которое можно выбрать из готовых или загрузить собственное. В плагине имеется достаточное количество встроенных вариантов кнопок.
Если ни одна из предложенных кнопок вам не нравится, можно указать путь на любую картинку во вкладке Your Own Image.
Загрузить изображение кнопки
В других вкладках задаётся цвет фона, размер и цвет шрифта, стиль. Каждая вкладка соответствует определённому типу кнопки. Как видите, настроить кнопку так, чтобы она идеально подходила вашему сайту легко. Всё довольно просто и понятно.
Я даже залез в код самого плагина и закруглил края кнопки, чтобы она гармонично смотрелась с моим дизайном, да и сайт стал красивее. Покопавшись в коде, над кнопками можно издеваться как угодно. Конечно, никто не запрещает использовать скрипты и для WordPress, но плагин гораздо легче в освоении.
Как жаль, что нет такой функции управления своим сайтом: ткнул, и страницы сами полезли вверх в топ поисковой выдачи
dmivk.ru
