Кнопка вверх для сайта wordpress с плагином и без него. Кнопка для сайта вверх wordpress


Кнопка вверх для сайта на wordpress

19 02 2018      Дмитрий Воробьев       23 комментария

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

Кнопка вверх для сайта на wordpress

Для чего нужно такая кнопка и как она выглядит? Если Вы прямо сейчас прокрутите страницу моего сайта, то увидите, что в правом нижнем углу появляется маленькая иконка со стрелкой. При нажатии на нее Вы автоматически переместитесь к началу статьи.

Кнопка вверх для сайта на wordpress пример на моем блоге

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

К тому же это экономит время. Длинный пост может занимать 5-6 экранов прокрутки (а иногда и больше), но одно нажатие на кнопку вверх мгновенно перемещает Вас к началу страницы.

Ну что ж, о преимуществах кратко рассказал, теперь к делу.

Как установить плагин «Кнопка вверх для сайта»?

Сам плагин, конечно же, звучит не так, полное название — WPFront Scroll Top, и найти его можно на официальном сайте WordPress, а еще проще прямо в админ-панели Вашего блога.

Важно! В видеоуроке показано, как установить кнопку вверх для сайта, работающего под управлением движка wordpress! Для других сайтов необходимо использовать альтернативные варианты.

Вот так выглядит плагин в панели управления (скриншот на момент публикации статьи, возможно изменение интерфейса или данных о плагине):

Кнопка вверх для сайта или блога

Устанавливается и активируется он стандартно, а далее необходимо выполнить простые настройки. Весь процесс установки и настройки, а также демонстрацию работы показал в видеоуроке.

Название плагина: WPFront Scroll Top

Теперь и Вы знаете, как добавить кнопку вверх для сайта, используя простой и доступный плагин. Кстати, видеоуроки можно просматривать быстрее, используя встроенную функцию Youtube, об этом я рассказал в статье «Как быстро обучаться в Интернете»

Понравились ли Вам статья и видеоурок? Какие еще уроки Вы хотели бы видеть на моем блоге? Пишите Ваши вопросы, предложения и пожелания в комментариях!

С уважением, Дмитрий Воробьев

Спасибо, что поделились статьей в социальных сетях!

blog-webmastera.ru

Добавляем кнопку «вверх» на сайт WordPress

Вернемся в прошлое, к статье «Кнопка «вверх» для WordPress» в ней говорилось об установки этой возможности без использования плагинов. Весьма правильное решение в плане оптимизации сайта, лишний модуль, лишнее подключение все это влияет на скорость ресурса. Но если по каким-то причинам этот вариант вас не устраивает, то всегда можно обратиться к плагинам.

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

1-й. Scroll Back to Top

Простенький плагин с мельчайшими настройками внешнего вида, расположения, скорости (scroll). Позволяет редактировать фон кнопки, hover, размер и отступы от края браузера, а также выбрать из нескольких вариантов вид стрелки или просто использовать желаемую надпись.

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

2-й. WP Smooth Scroll

Данный плагин немного ограничен в настройках имеется лишь выбор расположения кнопки «вверх». В остальном отлично справляется со своей работой по умолчанию кнопка выглядит следующим образом:

Если хотите ее заменить на свою, то следуйте по пути …/plugins/wp-smooth-scroll/images/… и произведите обмен картинки с таким же названием и в том же формате.

3-й. WPFront Scroll Top

Тритий плагин из нашего списка мало чем отличается от остальных, но преимущество все же имеет, а именно:

  • Загрузка своей кнопки «вверх»
  • Большой выбор уже готовых кнопок.
  • Ряд необходимых настроек.
  • Выбор показа на определенных страницах.
  • Плагин русифицирован.

После установки и активации плагина обратите внимания на первый пункт параметров «Включить» отметьте его иначе кнопка не будет отображаться.

Выбор по умолчанию кнопок «вверх».

Вот и все.

wordsmall.ru

Кнопка прокрутки вверх: 5 плагинов для WordPress

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

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

Кнопка прокрутки вверх: 5 плагинов для WordPress

To Top

Очень простой, и при этом широконастраиваемый плагин для созданий кнопки возврата на начало страницы. Среди его возможностей выделю такие:

  • Установка в качестве изображения кнопки готовых вариантов или собственной картинки.
  • Настройки дизайна кнопки – цвета, размеры, отступы.
  • Настройка позиции кнопки.
  • Кнопка прокрутки вверх может быть включена в консоли администратора.
  • Можно выбрать самое маленькое разрешение экрана, при котором эта кнопка будет отображаться.

CG Scroll To Top

Плагин создаёт симпатичную настраиваемую кнопку для возврата к началу страницы.  Функции такие:

  • Есть анимированная кнопка, которая включает в себя две функции – кнопка прокрутки вверх и отображение степени прокрутки страницы. Очень удобно.
  • Можно выбрать кнопку из готовых вариантов
  • Настройки размера и цветов.
  • Можно выбрать на каких типах записей будет или не будет отображаться кнопка вверх.
  • Настройка положения.

CRUDLab Scroll to Top

Самый легко настраиваемый плагин среди всех подобных. Содержит в себе минимум опций и возможностей, но работает также хорошо.

  • Выбор отображения кнопкой на тех или иных типах записей.
  • Несколько готовых вариантов иконок для кнопки.
  • Настройка позиции.

Dynamic «To Top» Plugin

Качественный плагин, которые создаёт быструю прокрутку к началу страницы. Дополнение имеет следующие возможности:

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

Smooth Scroll Page Up/Down Buttons

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

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

wp-system.ru

Кнопка «Вверх» для сайта Wordpress

Многие хотят иметь на своем сайте кнопку «Вверх». Это такая стрелка, которая позволяет пользователю подняться в самое начало wordpress сайта одним кликом.

Нужна эта функция или нет – решать автору блога, но на сегодняшний день это очень популярная фишка.

Лично я считаю, что подобные вещи необходимы только в том случае, если посты на сайте очень длинные. Ведь посетителю будет неудобно постоянно пользоваться ползунком или мышкой! При таком раскладе дел кнопка «Вверх» для сайта WordPress просто необходима!

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

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

Речь идет о плагине для кнопки Вверх — ToTop Link. Скачать его можно через официальную поисковую строку плагинов в вашей WordPress-админке. (Если не знаете, как это сделать – пишите в комментариях, помогу).

Кнопка «Вверх» для сайта WordPress

Основные достоинства ToTop Link

  1. Возможность добавлять свое изображение на место стандартной стрелки «Вверх»;
  2. Регулировка скорости скроллинга;
  3. Более 4 положений стрелки на экране;
  4. Возможность добавлять текст;
  5. Ограничение показа стрелки «Вверх» для маленьких экранов.

Странно, что этот набор характеристик не присутствует во многих разработках. Тем не менее, хорошо, что хоть один человек сделал плагин кнопки «Вверх» для сайта WordPress с гибкими настройками.

Да, изображение, которое вы хотите видеть вместо стандартной стрелки, можете скачать где угодно и залить в корень сайта. Путь прописывается в строке «Custom Image URL» — вверху, на рисунке, этот момент указан.

Если вам помогла данная статья – жду положительных комментариев!

teweb.ru-v-socialnyh-setjahПонравился пост? Нажми любую кнопку:

Интересные статьи:

teweb.ru

Кнопка вверх для сайта wordpress без плагина и с ним

Кнопка вверх для wordpress сайтаВ прошлой статье мы с вами уже поговорили, о том, как установить wordpress на локальный диск denwer, теперь хотелось бы перейти к более интересным постам по юзабилити вашего сайта. Не забывайте мы делаем сайты для людей, а не для поисковых роботов.

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

WordPress позволяет создать кнопку для прокрутки страницы вверх. Рассмотрим, как установить это действие на своей странице. Существует два варианта создание этой кнопки на своей странице: с плагином и без него, мы рассмотрим первый вариант.

Кнопка вверх для wordpress с помощью плагина

Если вы не используете плагин для создания кнопки, тогда можно использовать в таком случае скрипты. Есть вариант использования сторонних плагинов, например, можно использовать плагин Scroll to Top, создающий такие кнопки. Вы можете создать любой дизайн вашей кнопке, посредством выбора любого изображения или бага, которые можно взять из интернета – предложений достаточно много.

Смысл такого плагина в том, что при прокрутке страницы вниз, появляется эта кнопка, нажав которую выполняется скачок вверх в начало страницы. Кнопка «вверх» создаётся следующим образом.

1. Производится загрузка и установка плагина Scroll to Top.2. Нужно активировать этот плагин, тогда кнопка заработает. Остаётся только поменять настройки функции с регулированием скорости прокручивания, изменением изображения на кнопке. Для изменения настройки кнопки нужно перейти из администраторского пространства сайта по такому пути: параметры -> Scroll to Top.

Для изменения изображения нкнопка прокрутки вверха прокручивающей кнопке, сначала загрузите картинку на сервер (так поступать более практично), нежели ставить ссылки на фото в интернете, которые могут исчезнуть в любой момент, поскольку вам не принадлежат, и вы не имеете на них прав. Следующим действием указываете путь к этому файлу, тот куда вы произвели загрузку изображения. Если вы загрузили файл, например, в папку «izоbrajenia/ uploads», то путь к этому файлу, следующий: //ваш сайт.ru/ izоbrajenia /uploads/название файла изображения.jpeg. Если, вы решите загрузить изображение туда, где плагин находится, то путь будет таким: //ваш сайт.ru/wp-content/plugins/scrolltotop/image

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

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

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

seovpmr.ru

Кнопка "вверх" для прокрутки с помощью плагина WordPress

Кнопка вверх для сайта на WordPressВсем привет! Когда этот блог только начинал существование, я даже не задумывался о такой удобной функции, как прокрутка страницы вверх одной кнопкой. Но, когда появились объёмные статьи, я понял, что такой кнопки очень не хватает. Кому понравится скроллить обратно вверх всю статью? Сделать кнопку «вверх» оказалось совсем несложно. Тут есть два варианта: первый — использовать готовые скрипты, второй — скачать плагин. Но, обо всем по порядку.Сначала я сделал статичную кнопку в подвале сайта. Это было простое изображение стрелки со ссылкой. То есть получалось так, что при нажатии, страница моментально прыгала вверх, а к адресу сайта добавлялась решётка. Это, конечно, далеко не самый лучший способ, но выглядела кнопочка приятно, вверх поднимала, значит и функцию свою выполняла. Девиз программиста: «Работает — не трогай!» :)

Однако, спустя некоторое время, я пришёл к выводу, что без плавающей кнопки всё же не обойтись. Тем более я видел такие кнопки «вверх» на многих авторитетных (и не очень) сайтах. Так просматривать материал гораздо удобнее, один клик по кнопке — и страница моментально поднимается обратно вверх. А юзабили — важный фактор в дизайне любых сайтов.

Плагин Scroll To Up: кнопка «вверх» для удобной навигации. Кнопка «вверх» на WordPress

Как я уже говорил, кнопку «вверх» на сайт можно добавить с помощью скриптов, с использованием CSS и jQuery. На многих сайтах именно так она и реализована. Но для WordPress есть более простой способ — плагин Scroll To Up. В нём есть различные кнопки «вверх» в уже готовых вариациях. Обожаю удобство сайта на WordPress — можно найти плагины для чего угодно!

Скачиваем Scroll To Up, с помощью которого мы и добавим эту самую кнопку «вверх», через консоль WordPress, затем заходим в настройки. Видим несколько вкладок.Настройки Scroll To UpНастройки Scroll To UpЗдесь можно задать скорость прокрутки вверх страницы при нажатии на кнопку, анимацию появления на сайте, её положение на странице. А самое главное — тип кнопки. Это может быть простой текст, иконка, либо изображение кнопки «вверх», которое можно выбрать из готовых или загрузить собственное. В плагине имеется достаточное количество встроенных вариантов кнопок.

Если ни одна из предложенных кнопок вам не нравится, можно указать путь на любую картинку во вкладке Your Own Image.Загрузить изображение кнопкиЗагрузить изображение кнопки

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

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

Как жаль, что нет такой функции управления своим сайтом: ткнул, и страницы сами полезли вверх в топ поисковой выдачи :)

dmivk.ru

Кнопка вверх для wordpress. Как сделать кнопку вверх быстро |

кнопка вверх для wordpress

 

И снова здравствуйте дорогие читатели! Сегодняшняя тема — кнопка вверх для wordpress сайта/блога – быстренькая установка.

Установка кнопки займёт минуту времени, а может и меньше. В общем, читайте далее и всё поймёте.

В сети, я очень часто встречаю комментарии, в которых люди умоляют объяснить подробнее тот или иной материал, особенно когда дело доходит до установки/правки кода. Оно и понятно, что ничего не понятно начинающим, у которых боязнь сделать что-то не так – просто зашкаливает.  Именно поэтому, мы сейчас рассмотрим способ — как сделать кнопку вверх на сайте при помощи простого плагина. Ковыряться в коде и где-то что-то править точно не придётся, как говорится – установил раз и забыл.

Давайте рассмотрим несколько вариантов того, как сделать кнопку наверх на сайте wordpress, а позже, в комментариях  Вы поделитесь своими впечатлениями, ну что, поехали.

Как сделать кнопку вверх на сайте с помощью плагина

Вариант№1 – используем плагин Smooth Scroll Up

кнопка вверх для wordpress три варианта

Довольно таки простенький и с минимумом настроек, в нём присутствует три варианта выводимых кнопок и 3 варианта их размещения на сайте…

Установка…

Быстро скачать и установить плагин можно через админку блога. Зайдите в меню плагины – добавить новый – в поисковое поле вставьте название плагина – нажать кнопку «найти»… Более подробно о поиске и установке написано здесь Установка плагинов WordPress

Настройка плагина.

Перейдите — админка – настройки – Scroll Up Option

кнопка вверх для wordpress-плагины

  1. Название кнопки. Можете вписать любое название!
  2. Выбор кнопки. Три варианта кнопок – текстовая, овальная и в виде таба.
  3. Позиция кнопки. Размещение кнопки – справа, слева и по центру.
  4. Показывать кнопку на главной странице — (да-нет).
  5. Расстояние в пикселях от самого верха и до момента появления кнопки. Я поставил значение (1000), которое равно примерно трём вращениям колёсика мышки, после чего появляется кнопка вверх.
  6. Поведение кнопки на рубеже. Можно ничего не менять, так как практически ничего не заметно.
  7. Кнопка сохранить.  Сохранение Ваших настроек.

Согласитесь, всё очень просто!

Вариант№2 — плагин Scroll Button

кнопка вверх для wordpress сайта

Тут совсем просто, он без настроек. Просто устанавливаем плагин, кнопка сразу же отображается в правом нижнем углу сайта. Всё!

Установка аналогична варианту№1.

Собственно это всё, а Вы ожидали большего!? Извините, что разочаровал. :) Надеюсь это простенькое решение вывода кнопки принесёт кому-то радость и Вы вдруг запрыгаете от счастья, крича – да, да, да, у меня получилось – Yes!!!

На этом я заканчиваю нашу тему — кнопка вверх для wordpress блога.  Скоро напишу про одну интересненькую вещь — не пропустите…

До скорого!

Обратите внимание на следующие статьи...

inetmi.ru