Кнопка Наверх для WordPress. Варианты установки. Кнопка вверх WordPress — лучшие плагины Плагин прокрутки страницы вверх wordpress

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

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

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

jQuery Smooth Scroll – это удобный и быстрый модуль для активации кнопки “Вверх” на сайте. Чтобы добавить на ресурсе такую кнопку, достаточно скачать и установить плагин. Сразу после активации сбоку страниц появляется небольшая плавающая кнопка. С ней читать длинные статьи и листать страницу будет куда проще. Кнопка имеет стильный дизайн, и не потеряется на фоне шаблона Вордпресс.

А если вы знаете особенности CSS языка программирования, то сможете самостоятельно настроить кнопку “Вверх” по собственному усмотрению. В целом, плагина jQuery Smooth Scroll достаточно, чтобы удовлетворить потребности большинства вебмастеров, но далее будут рассмотрены еще несколько популярных инструментов на случай, если этот модуль у вас не сработает.

Smooth Scroll Up

Далее следует не менее популярный плагин Smooth Scroll Up – это предельно простой и понятный инструмент, что в считанные минуты позволит создать иконку “Наверх” в боковой части сайта. Хотя в модуле и нет множества настроек, он весьма функционален. Далее указаны основные особенности плагина Smooth Scroll Up:

можно выбирать между разными типами элемента “Вверх” (текст с ссылкой, значок, изображение и так далее);
элемент прокрутки вверх можно выбирать самостоятельно из собственной коллекции;
можно добавлять собственный комментарий около кнопки прокрутки наверх;
расположение элемента на сайте регулируется (если она нужна, только чтобы удобно читать страницу, то лучше размещать в правой части, но плагин позволяет расположить ее в левой стороне, и по центру);
можно добавлять исключения для отображения в разных частях сайта (отключить отображение кнопки “Наверх” на главной, либо дезактивировать на любой другой странице);
модуль работает и на мобильных версиях сайта (по надобности, для телефона кнопку “Вверх” можно убрать);
есть анимации для прокруток (slide и fade, либо без анимационного эффекта);
можно указать расстояние, после которого кнопка “Вверх” появится (так удобнее читать, ведь элемент не будет бестолку появляться сразу после захода на сайт, а отобразиться только в нужный момент);
в кнопку “Наверх” можно заложить ссылку для открытия страницы в новой вкладке;
есть возможность добавить собственные параметры CSS для элемента.

WPFront Scroll Top

Этот плагин отлично подойдет для тех, кто не желает самостоятельно думать над тем, какой будет кнопка. Если вы просто хотите, что пользователям было проще читать и просматривать материалы, и при этом иметь интересную кнопку прокрутки, то WPFront Scroll Top – как раз то, что вам нужно. Модуль содержит крупную коллекцию готовых иконок. А если не хотите разбавлять внимание пользователя иконкой “Далее”, то можете просто добавить текст для прокрутки без изображения.

Плагин WPFront Scroll Top легко устанавливается на движок Вордпресс. Он содержит массу настроек, таких как:

активация/дезактивация кнопки;
размер иконки;
степень прозрачности;
скорость прокрутки;
добавление автоматического скрытия кнопки через заданное количество секунд;
пропись тега Alt для элемента;
цвет и фоновое оформление текста кнопки (главное – чтобы читать надпись было удобно, она должна быть выразительной).

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

Scroll Back To Top

Далее еще один плагин, который улучшит “юзабилити” вашего ресурса – инструмент Scroll Back To Top. Он также содержит множество параметров настройки. Вы сможете в любой момент деактивировать элемент, сделать его непрозрачным или создать превью иконки. Размер и цвет элемента легко регулируются. Можно настраивать расстояние от “топа” сайта, после прохождения которого появляется кнопка. Расположение элемента в левой, правой части и по средине страницы.

Плагин Scroll Back To Top не содержит большого количество типов икон. Всего их около 10. По надобности можно отключить иконку и оставить один только текст (“Далее”, “Вверх” и т. п.). Размер иконок регулируется по специальной шкале от одного до шести. Для активации индивидуального стиля в параметрах элемента есть пункт “Extra CSS” для добавления собственного дизайна.

Dynamic “To Top” Plugin

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

Что интересно, плагин Dynamic “To Top” Plugin работает с кэшированием, потому постоянные пользователи смогут читать ваши посты и прокручивать страницы без промедлений работы браузера. Модуль прекрасно отображается на компьютерах и нового, и старого поколения.

Skysa Scroll-to-Top App

Далее следует Skysa Scroll-to-Top App – плагин, который абсолютно не похож на своих конкурентов. Вы не просто добавите при помощи него кнопку “Наверх”, но и сможете воспользоваться этим инструментом для создания целого бара виджетов. К примеру, можно добавить плавающий блок с голосованиями, кнопками социальных сетей и элементом прокрутки страницы. А чтобы плагин не тормозил работу сайта, он работает с кэшем браузеров. Возможности данного модуля практически не ограничены – вы даже сможете добавить ссылки в бар с кнопкой прокрутки.

Вывод

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

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

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

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

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

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

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

Возможность добавлять свое изображение на место стандартной стрелки «Вверх»;

Регулировка скорости скроллинга;

Более 4 положений стрелки на экране;

Возможность добавлять текст;

Ограничение показа стрелки «Вверх» для маленьких экранов.

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

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

Плагин Dynamic “To Top” Plugin

Официальная страница плагина Dynamic “To Top” Plugin (https://wordpress.org/extend/plugins/dynamic-to-top/ ). Плагин размещает кнопку «Наверх» на сайте. Устанавливается плагин . Язык плагина английский.

Настройки плагина Dynamic “To Top” включают:

4 положения кнопки «Наверх» на сайте;
Настройка внешнего вида (цвет, тень, граница);
Выбор скорости движения вверх;
Есть возможность отключения мобильной версии;
Возможность добавить текс на кнопку.

Скриншоты плагина Dynamic “To Top” Plugin

Плагин Scroll To Top

Официальная страница плагина Scroll To Top (https://wordpress.org/extend/plugins/scrollto-top/ ). Плагин для размещения кнопки «Наверх» на сайте. стандартная. Язык английский.

Из настроек

9 Положений кнопки «Наверх» на сайте;
4 Стиля кнопки;
Возможность установить свое изображение для кнопки;
Замена кнопки текстовой ссылкой с настройкой цвета.

Примечание: Сестра плагина Scroll To Top, плагин кнопка «Вниз» под названием ScrollTo Bottom . Официальная страница плагина: https://wordpress.org/extend/plugins/scrollto-bottom .

Плагин Skysa Scroll-to-Top App

Официальная страница плагина Skysa Scroll-to-Top Add (https://wordpress.org/extend/plugins/skysa-scroll-to-top-app/). Плагин для установки панели Skysa внизу страниц сайта. В бесплатной версии в панели устанавливается только стрелка «Наверх» с пользовательской надписью.

В бесплатной версии плагина практически нет настроек. Только бар со стрелкой и пользовательской надписью. Перед покупкой pro версии дают 15-дневный срок для тестирования.

Скриншоты плагина Skysa Scroll-to-Top App

Дополнение Самое простое решение для кнопки наверх, проще не существует

Если вам НЕ нужны красивые и «навороченные» кнопки «Наверх», а достаточно простой надписи, то достаточно вставить нижеследующий код в любое место шаблона своего сайта (например, footer.php), где хотите показать надпись «Наверх» или любую запись понятную пользователю:

Наверх или любой другой Текст

Все! Больше делать ничего не нужно.

Такая надпись «Наверх» не конфликтует с плагинами, ее можно использовать, как дополнительную кнопку «Наверх».

Другие плагины кнопки наверх wordpress

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

Scroll to Top Button (https://ru.wordpress.org/plugins/scroll-to-top-button/ )
Smooth scroll Up (https://ru.wordpress.org/plugins/smooth-scroll-up/ )
LB Back To Top (https://ru.wordpress.org/plugins/backtop/ )
WPFront Scroll Top (https://ru.wordpress.org/plugins/wpfront-scroll-top/ )
M7 Go Top (https://wordpress.org/plugins/m7-go-top/ )

Здравствуйте, уважаемые читатели! Когда-нибудь задумывались над тем, как сделать кнопку Вверх для 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 довольно просто без плагина с помощью специальной функции 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 >