Вордпресс кнопка вверх. Кнопка Вверх для WordPress — быстрый переход в начало страницы. Плагин Dynamic “To Top” Plugin

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

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

Smooth Scroll Up

Лекий и настраиваемый плагин 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 и забыть. Желающим покопаться с настройками, подойдут два последних плагина. Первый — наиболее новый на данный момент. В общем, выбрать есть из чего.

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

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

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

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

Варианты установки кнопки Наверх для сайта на движке WordPress Установка кнопки Наверх с помощью кода.

Тут у меня имеется своё мнение, которым, с удовольствием поделюсь с вами.

Много разных вариантов для установки кнопки Наверх, да и много ещё чего, самостоятельно. В принципе, не сложно прописать несколько строчек кода в нужные файлы. Вопрос только – ЗАЧЕМ?

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

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

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

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

Плагин Scroll to Top Button

Это, наверное, самый популярный плагин для добавления кнопки Наверх на сайт на сегодняшний день. Своего рода классика жанра. Устанавливается и настраивается легко и просто.

Идем в Плагины – Добавить новый , в окошко поиска вставляем Scroll to Top Button . Находим, устанавливаем, активируем.

Во вкладке Внешний вид появляется пункт Scroll to Top Button , нажимаем и видим настройки этого плагина:

Их всего две. Цветовая схема – темная или светлая. Размер – большой или маленький.

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

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

Плагин JCWP Scroll To Top

Вот тут уже совсем другая картина наблюдается. Этот плагин даёт возможность изменить внешний вид нашей кнопки на свой вкус, цвет и размер. Ну, по порядку.

Идем в Плагины – Добавить новый , в поиск вставляем JCWP Scroll To Top , находим, устанавливаем, активируем.

Настройки плагина можно уже найти в другой вкладке – Параметры — JCWP Scroll To Top :

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

Настраивается практически всё.

Длительность анимации;
Через какое количество пикселей прокрутки появялется;
Можно сделать свой идентификатор для кнопки;
Эффект для появления кнопки;
Позиция кнопки;
Текст на кнопке;
Настройка цвета фона, шрифта, размера букв, цвет рамки, закругления углов;
Отключение для мобильных устройств;

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

Плагин WPFront Scroll Top

Установка стандартная Плагины – Добавить новый — WPFront Scroll Top . Скачиваем, устанавливаем, активируем.

Найти настройки плагина можно во вкладке WPFront – Scroll Top :

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

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

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

Вот такие плагины помогут вам легко и просто сделать на своём сайте нужную и полезную кнопочку Наверх. Всем удачи!

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

Добавить ее на сайт WordPress довольно просто без плагина с помощью специальной функции javascript. Для этого нужно выполнить 4 шага.

1. Поместите в каталог js вашей темы файл goTop.js со следующим содержанием. Если такого каталога нет вы можете его создать, либо использовать любой другой каталог, однако тогда нужно изменить путь к скрипту goTop.js во втором шаге.

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$ (function () { $ . fn . scrollToTop = function () { $ (this ) . hide () . removeAttr ("href" ) ; if ($ (window ) . scrollTop () != "0" ) { $ (this ) . fadeIn ("slow" ) } var scrollDiv = $ (this ) ; $ (window ) . scroll (function () { if ($ (window ) . scrollTop () == "0" ) { $ (scrollDiv ) . fadeOut ("slow" ) } else { $ (scrollDiv ) . fadeIn ("slow" ) } } ) ; $ (this ) . click (function () { $ ("html, body" ) . animate ({ scrollTop : 0 } , "slow" ) } ) } } ) ;

2. Поместите в файл footer.php вашей темы перед закрывающим тегом следующий код

/js/goTop.js" type="text/javascript"> $(function() { $("#goTop").scrollToTop(); });

< a href = "#" id = "goTop" alt = "Наверх" title = "Наверх" > < img src = " /images/goUp.png" border = "0" align = "absmiddle" / > < / a >

Тематические материалы: