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

Здравствуйте, уважаемые посетители!

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

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

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

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

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

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

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

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

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

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

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

Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.

Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

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

JavaScript

$(document).ready(function() { $("body").append("^ Наверх"); $ (window).scroll (function () { if ($ (this).scrollTop () > 300) { $ (".button-up").fadeIn(); } else { $ (".button-up").fadeOut(); } }); $(".button-up").click(function(){ $("body,html").animate({ scrollTop: 0 }, 100); return false; }); $(".button-up").hover(function() { $(this).animate({ "opacity":"1", }).css({"background-color":"#E1E7ED","color":"#45688E"}); }, function(){ $(this).animate({ "opacity":"0.7" }).css({"background":"none","color":"#45688E"});; }); });

В данном коде можно изменить некоторые параметры под себя.

• Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
• В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
• В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

Еще более эффективным вариантом является загрузка этого скрипта из отдельного файла. Файл можете скачать по кнопке ниже. Находится он внутри архива.

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

JavaScript

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

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

Для редактирования параметров в данном файле, его потребуется открыть с помощью редактора Notepad.

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

По данному способу я записал подробный видео-урок.

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

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

Состоит из 3х этапов:

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

Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.

Файл скрипта скачайте по кнопке ниже.

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

⇓ Назад ⇑ Наверх

Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.

Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

/* описание контейнера */ .leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */ .left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */ #scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */ .active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */ .leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */ .leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */ .bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }

В зависимости от дизайна и структуры вашего ресурса, потребуется немного изменить некоторые параметры в данных стилях. Например, в строках 47 и 53 изменить параметр отступа слова "Назад" и "Наверх" от самого верха страницы соответственно

После редактирования всех файлов, можем смело загрузить их на хостинг и этот способ будет работать. Его реализацию можете посмотреть на моем блоге. Делайте на здоровье.

Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.

Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом /

JavaScript

Здравствуйте, уважаемые читатели.В этой статье я расскажу вам, как установить кнопку “вверх ” для блога WordPress. Сделать эту кнопочку можно двумя способами. Первый способ заключается в установке специального плагина. А второй, в изменении php кода в файлах вашей активной темы.

По большому счету, можно с легкостью обойтись и без этой кнопки. Эта кнопка уже у вас есть на клавиатуре, называется она “home ” . Нажав которую, вы быстро переместитесь на начало страницы.

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

1.Установка кнопки при помощи плагина.

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

Есть много плагинов которые позволяют добавить кнопку наверх, но я решил в качестве примера выбрать плагин Scroll Back To Top. Скачайте его , загрузите и активируйте.

Плагин имеет целый ряд настроек. Но всё трогать не обязательно. Достаточно настроить расположение и вид кнопки.

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

Здравствуйте, уважаемые читатели! Когда-нибудь задумывались над тем, как сделать кнопку Вверх для WordPress? Нет? Очень зря. Ведь это не только красивая, но и очень полезная вещь. Такая кнопка появляется в правом нижнем углу при прокрутке страницы вниз. Нажимаем на нее, и страница плавно возвращается к своему началу. Реализовать подобный эффектный переход наверх в WordPress можно с помощью плагина Dynamic To Top Options. О нем то я сегодня и расскажу.

В можно установить количество анонсов, выводимых на главной и в рубриках блога. На многих блогах, даже 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!», «Полетели!» и так далее;
• Font size — размер шрифта
• Text color — цвет теста. Нажмите select для наглядного выбора цвета;
• Bold Text — жирное начертание;
• Text shadow — тень от букв;
• Text shadow color — цвет тени.

Top/bottom padding — отступ сверху и снизу от текста или изображения внутри кнопки до ее границ.

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

Можно, в принципе, создать кнопку наверх с помощью определенных скриптов и правки WordPress шаблона, однако есть вариант проще — плагины. Он идеально подойдет для тех, кому лень разбираться кодом, или тем, кто плохо ориентируется в вопросах веб-разработки. Кроме того, у модулей есть разные настройки для реализации тех или иных интересные фишек. А это тоже, согласитесь, весьма полезно. Из 10-ти плагинов, найденных для функции Back to top, я рассмотрю лишь 4, которые имеют достаточное число скачиваний и отвечают актуальным версиям системы WordPress.

Лекий и настраиваемый плагин Smooth Scroll Up позволяет добавить кнопку вверх для любого поста/страницы в WordPress. Скачали модуль более 40 тысяч раз, поддерживаются версии WP от 3.2 до 4.1. Последнее обновление было буквально недавно. Имеются переводы на разные языки (русского, украинского пока что нету).

Основные возможности Smooth Scroll Up:

• Выбор разных элементов для кнопки вверх: текст, картинка, кнопка.
• Выбор позиции для элемента Back to top: слева, справа, по центру.
• Возможность указывать любой текст для кнопки наверх.
• Задание расстояния от верха страницы, после которого появляется кнопка.
• Анимация при скролинге (прокрутка, затемнение).
• Отображение/скрытие на главной странице и мобильных устройствах.
• Добавление события при клике.

Здесь и параметры для кнопки наверх (цвет, граница, фон, прозрачность), и задание расположения элемента Back To Top, и использование картинок или текста для него, плюс опции анимации при прокрутке и т.п. Поддерживаемые версии WordPress — от 3.0 до 3.9.2, скачан модуль более 18 тысяч раз.

Из этих четырех плагинов для кнопки наверх я бы и советовал вам выбирать. Очередность их в обзоре не является рейтингом, то есть не значит, что я рассматривал лучшие в начале или в конце статьи, они идут по мере ознакомления. Все, в принципе, зависит от ваших нужд. Если вы вообще далеки от разработки и WordPress, то проще всего установить Smooth Scroll Up и забыть. Желающим покопаться с настройками, подойдут два последних плагина. Первый — наиболее новый на данный момент. В общем, выбрать есть из чего.

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

К примеру, Вы написали длинную статью, пользователь дочитал ее до конца и теперь хочет вернуться обратно в начало. Думаю знакомая ситуация. Не правда ли? А крутить колесиком мыши и «тянуть» за ползунок — не очень удобно и долго.

Именно поэтому и была создана данная функция — поднятие страницы наверх. А еще, если красиво оформить кнопку, то это плюс к дизайну! А если еще модифицировать, то можно будет при нажатие отпускать страницу вниз, т.е. наоборот. Вот так вот.

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

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

Вот так. Так же можно настроить ее, а именно:

• Расположение
• Отступы
• Скорость
• и другое

Сейчас мы рассмотрим как сделать кнопку наверх для wordpress не используя посторонних плагинов. Почему без плагина? А потому, что плагины замедляют работу сайта. Я уже не один раз об сказал (В статье — Добавляем видео на WordPress) и буду говорить еще и еще.

Для того, чтобы сделать кнопку следуйте инструкции ниже:

1. Откройте файл footer.php , который находится в папке с шаблоном, и вставьте перед код:

Только внесите некоторые изменения, а именно:

• где написанно ваш_сайт.ru — напишите адрес вашего сайта

• где путь к картинке — введите путь до картинке, которая будет кнопкой

• где картинка — название картинке. Если не.jpg, то измените на тот формат, который установлен на картинке.

2. Откройте файл style.css , который так же находится в папке с шаблоном, и в самом конце вставьте следующий код:

#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 , находящийся в папке с шаблоном и вбейте туда код:

// 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» и установили ее себе. Какие впечатления? Пишите в комментариях! На этом у меня все, всем пока.

С уважением, Константин Белан.