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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Перейдите во вкладку «Параметры»
  2. —> Scroll to Top
  3. И выберите облик кнопки из предложенных или загрузите свою
  4. Нажмите кнопку «Update Options»
  5. Готово! Кнопка наверх для 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» и установили ее себе. Какие впечатления? Пишите в комментариях! На этом у меня все, всем пока.

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

Всем привет! Когда этот блог только начинал существование, я даже не задумывался о такой удобной функции, как прокрутка страницы вверх одной кнопкой. Но, когда появились объёмные статьи, я понял, что такой кнопки очень не хватает. Кому понравится скроллить обратно вверх всю статью? Сделать кнопку «вверх» оказалось совсем несложно. Тут есть два варианта: первый — использовать готовые скрипты, второй — скачать плагин. Но, обо всем по порядку.

Сначала я сделал статичную кнопку в подвале сайта. Это было простое изображение стрелки со ссылкой. То есть получалось так, что при нажатии, страница моментально прыгала вверх, а к адресу сайта добавлялась решётка. Это, конечно, далеко не самый лучший способ, но выглядела кнопочка приятно, вверх поднимала, значит и функцию свою выполняла. Девиз программиста: «Работает — не трогай!»

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

Плавающая кнопка «вверх»: как добавить её с помощью плагина

Плагин Scroll To Up: кнопка «вверх» для удобной навигации. Кнопка «вверх» на WordPress

Как я уже говорил, кнопку «вверх» на сайт можно добавить с помощью скриптов, с использованием CSS и jQuery. На многих сайтах именно так она и реализована. Но для WordPress есть более простой способ — плагин Scroll To Up. В нём есть различные кнопки «вверх» в уже готовых вариациях. Обожаю удобство сайта на WordPress — можно найти плагины для чего угодно!

Скачиваем Scroll To Up, с помощью которого мы и добавим эту самую кнопку «вверх», через консоль WordPress, затем заходим в настройки. Видим несколько вкладок.


Здесь можно задать скорость прокрутки вверх страницы при нажатии на кнопку, анимацию появления на сайте , её положение на странице. А самое главное — тип кнопки. Это может быть простой текст, иконка, либо изображение кнопки «вверх», которое можно выбрать из готовых или загрузить собственное. В плагине имеется достаточное количество встроенных вариантов кнопок.

Если ни одна из предложенных кнопок вам не нравится, можно указать путь на любую картинку во вкладке Your Own Image.

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

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

Как жаль, что нет такой функции управления своим сайтом: ткнул, и страницы сами полезли вверх в топ поисковой выдачи

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

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

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

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

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

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

  1. Возможность добавлять свое изображение на место стандартной стрелки «Вверх»;
  2. Регулировка скорости скроллинга;
  3. Более 4 положений стрелки на экране;
  4. Возможность добавлять текст;
  5. Ограничение показа стрелки «Вверх» для маленьких экранов.

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

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

Вот такие web-ресурсы и получают весомое преимущество не только в виде растущей целевой аудитории, но и в виде увеличивающегося трафика с поисковых систем, так как поисковики уделяют огромное внимание поведению пользователей ( о влиянии поведенческих факторов). К чему это я все говорю? А все к тому, что мелочей в продвижении сайта нет, как бы банально это ни звучало.

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

Как создать кнопку наверх с помощью скрипта

Теперь разберем подробнее, как можно реализовать нашу задумку, причем предложу несколько вариантов, каждый из которых имеет свои плюсы. Для начала хотелось бы отметить, что для пользователей уже давно существует возможность быстро прокручивать любую страницу, причем практически в любом браузере. Для этого достаточно воспользоваться кнопками «Page Up» и «Page Down» на клавиатуре компьютера.

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

Простая кнопка вверх для блога или сайта

Вначале хочу предложить иконку наверх простую и без изысков, установить которую можно просто без проблем. Для этого необходимо открыть на редактирование файл footer.php темы WordPress, который, как известно, отвечает за отображение в браузере нижней части web-страницы, называемой футером (или подвалом). Перед закрывающим тегом body надо вставить вот такой код:

Напомню, что редактировать файлы удобнее всего с помощью notepad plus plus ( об этом замечательном HTML, PHP и CSS редакторе подробнее). Для того, чтобы определить местоположение и вид значка «Наверх», зададим свойства CSS для соответствующего идентификатора (id) gotop:

#gotop { position: fixed; bottom: 60px; margin-left: 1170px; border: 2px solid #BBB9C0; text-align: center; color: #4F487E; text-decoration: none; font-size: 24px; }

Копируем и заносим эти свойства в файл style.css темы WordPress (). В результате в правом нижнем углу должно появиться изображение кнопки «Наверх», которое будет иметь такой вид:


Можно применять для этих целей уже встроенные аналогичные инструменты во всех других популярных браузерах: Opera ( об этом браузере подробнее), Internet Explorer ( об обозревателе IE), Google Chrome ( о Хроме статья). Чтобы поднять саму картинку, скажем, вверх, нужно увеличить значение свойства bottom, чтобы сместить влево, необходимо уменьшить параметр CSS свойства margin-left. Ну, и так далее.

Кнопка вверх на сайте с плавной прокруткой

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

Причем, для реализации этого варианта создания кнопки наверх все предложенные способы, которые мне удалось обнаружить в интернете, предполагают использование библиотеки jQuery, к которой необходимо подключиться. По некоторым причинам мне хотелось этого избежать и в конце концов я нашел желаемый способ решения этой проблемы. Небезызвестный админ WP-Kama предложил свой код на JavaScript, который дает возможность осуществить плавную прокрутку вэб-страницы сайта вверх и появление-исчезновение самой «кнопки наверх» без использования jQuery. Предварительно необходимо создать на сервере файл с расширением.js (например, totop.js) и вставить в него следующий кусок:

(function() { function $(id){ return document.getElementById(id); } function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 12; var dx = 0; var dy = 0; var bx = 0; var by = 0; var wx = 0; var wy = 0; if (document.documentElement) { dx = document.documentElement.scrollLeft || 0; dy = document.documentElement.scrollTop || 0; } if (document.body) { bx = document.body.scrollLeft || 0; by = document.body.scrollTop || 0; } var wx = window.scrollX || 0; var wy = window.scrollY || 0; var x = Math.max(wx, Math.max(bx, dx)); var y = Math.max(wy, Math.max(by, dy)); var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) { var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } //* function scrollTop(){ var el = $("gotop"); var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop>400){ if(el.style.display!="block"){ el.style.display="block"; smoothopaque(el, 0, 100, 1); } } else el.style.display="none"; return false; } // Плавная смена прозрачности function smoothopaque(el, startop, endop, inc){ op = startop; // Устанавливаем прозрачность setopacity(el, op); // Начинаем изменение прозрачности setTimeout(slowopacity, 1); function slowopacity(){ if(startop endop){ setTimeout(slowopacity, 1); } } setopacity(el, op); }; }; // установка opacity function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + opacity + ")"; }; if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window["top"] = {}; window["top"]["goTop"] = goTop; })();

Скорее всего, в корневой папке вашего блога или web-сайта на хостинге (чаще всего это public_html) имеется директория js с файлами JavaScript. Там и создаете файл totop.js с помощью уже упомянутой мной программы notepad++, вставив в него этот код. Таким образом, полный путь до свежеиспеченного файла у меня получился таким:

/themes/cloudy/js/totop.js">

Теперь нужно создать изображение для “кнопки вверх”. Для этого можно использовать любой графический редактор, включая просмотрщик фотографий FastStone Image Viewer ( об этой интересной программе детальный мануал). Также можно использовать для этих целей, например, Fotoshop, в том числе версию онлайн приложений, коих в интернете немало.

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

Объясню вкратце, что объединение фоновых картинок сайта в спрайты (по англ. sprite - фея, призрак) дает возможность сократить число http запросов, тем самым внести определенную лепту в благородное дело уменьшения нагрузки на сервер. В данном случае создание спрайта из двух стрелок обеспечивает изменение вида изображения при подведении к нему курсора мышки, то есть возникает анимационный эффект.

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

Итак, будем считать, что рисунок стрелки «наверх» готов (кстати, стрелку можно заменить на другую картинку, например, в виде красивой кнопки). Далее загружаем изображение на сервер опять же в корень сайта (обычно там уже имеется папка IMAGES). Для этих целей советую использовать программу FileZilla ( пост об этом ФТП клиенте), который очень удобен при перемещении и работе с изображениями, или другой подобный софт. У меня абсолютный путь до изображения с двумя стрелками получился следующим:

/images/totop.png

Однако, для url картинки, которая выводится с помощью средств CSS, можно использовать и относительный путь:

/images/totop.png

Применяйте как абсолютный, так и относительный адрес, разницы нет. Имейте ввиду, что у вас полный URL может быть другим. Внимательно исследуйте вложенность папок, которые и определяют содержание пути. Следующим шагом открываем файл footer.php и вставляем в него в самый конец перед закрывающим тегом body такую конструкцию:

Не забудьте вместо «путь_до_файла» вставить последовательность всех папок, определяющих URL именно для вашего проекта. И последний шаг. Нужно определить стили CSS, которые следует внести в файл style.css темы Вордпресс. Предлагаю свой вариант:

#gotop { position: fixed; bottom: 60px; width: 56px; height: 96px; margin-left: 1170px; background: url(путь_до_файла/totop.png) no-repeat 0 0; }

И здесь при описании свойства background не забудьте в качестве значения url указать путь до файла totop.png (абсолютный или относительный). Имейте ввиду, что абсолютный путь должен начинаться с «http://». Для того, чтобы обеспечить смену вида кнопки при подведении к ней курсора, пропишем еще одно условие в тот же файл style.css:

#gotop:hover { background: url(/путь_до_файла/totop.png) no-repeat -56px 0; }

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