Плагин наверх для wordpress. Кнопка Наверх для WordPress. Варианты установки. Плагин WPFront Scroll 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 — отступ сверху и снизу от текста или изображения внутри кнопки до ее границ.

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

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

Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top 😉

Вспомнить как можно найти и установить плагин Вы можете в одном из .

Создание кнопки «Вверх» без плагинов

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

1. Откройте файл function.php .

Открыть function.php можно двумя способами:

Открыть с помощью текстового редактора в корневой папке вашей темы
Перейти в Внешний вид -> Редактор и выбрать для редакции Функции темы (functions.php)

2. Скопируйте и вставьте код ниже в самом низу, перед закрывающим тегом ?> .

Gif" />"; } add_action("wp_head", "back_to_top_style"); function back_to_top_style() { echo " #totop { cursor:pointer; position: fixed; right: 30px; bottom: 30px; display: none; outline: none; } "; } add_action("wp_footer", "back_to_top_script"); function back_to_top_script() { echo " jQuery(document).ready(function($){ $(window).scroll(function () { if ($(this).scrollTop() > 400) $("#totop").fadeIn(); else $("#totop").fadeOut(); }); $("#totop").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); "; }

3. Сохраните изменения и любуйтесь созданной вами кнопкой «Вверх» .

А сейчас, предугадывая Ваши вопросы, постараюсь заранее на них ответить!

И так, в данном примере мы поставили изображение на кнопку. Для того чтобы убрать изображение и поставить текст — замените в коде нашего примера строчку 3 на:

Echo "Вверх";

Для того чтобы заменить изображение кнопки — замените ссылку на нужное вам изображение в строчке 3.

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

If ($(this).scrollTop() > 400)

Если у вас что-то не получилось, смело пишите в комментариях! А если получилось — делитесь впечатлениями 🙂

Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку "Вверх" на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку "Вверх" - страница возвратится вверх, к главному меню (шапке сайта). Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов. Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top ;) Вспомнить…

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

Для чего нужна кнопка Наверх?

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

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

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

Установка кнопки с плагином

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

Перейдите во вкладку «Параметры»

—> Scroll to Top

И выберите облик кнопки из предложенных или загрузите свою

Нажмите кнопку «Update Options»

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

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

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

Добавить ее на сайт 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 >