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

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

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

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

To Top

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

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

CG Scroll To Top

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

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

CRUDLab Scroll to Top

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

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

Dynamic «To Top» Plugin

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

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

Smooth Scroll Page Up/Down Buttons

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

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

Источник

Как добавить кнопку «Вверх» на сайт WordPress

Время на чтение: 6 минут

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

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

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

jQuery Smooth Scroll

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 — плагин, который абсолютно не похож на своих конкурентов. Вы не просто добавите при помощи него кнопку «Наверх», но и сможете воспользоваться этим инструментом для создания целого бара виджетов. К примеру, можно добавить плавающий блок с голосованиями, кнопками социальных сетей и элементом прокрутки страницы. А чтобы плагин не тормозил работу сайта, он работает с кэшем браузеров. Возможности данного модуля практически не ограничены — вы даже сможете добавить ссылки в бар с кнопкой прокрутки.

Вывод

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

Источник

3+ Плагины кнопки наверх WordPress

Вступление

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

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

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

Настройки плагина 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 плагинов для реализации на сайте кнопки “Наверх”. Поддержка и обновление плагинов постоянно меняется, поэтому говорить о них можно только, на момент использования.

Источник