Как сделать кнопку «наверх» на WordPress блоге

Привет, Друзья! По просьбам читателей сегодня я расскажу как сделать кнопку “наверх” на WordPress блоге. Я думаю, нет необходимости объяснять для чего нужда такая кнопка? Все итак понимают, что при нажатии на кнопку “наверх”, функция, заложенная в данной кнопке, переносит читателя к началу страницы. Это особенно полезно когда пост объемный и много комментариев к статье, и для того, чтобы вернуться к началу статьи, приходится довольно продолжительно скролить колесико мышки (а большинством из нас правит лень), поэтому кнопка “наверх” сохраняет наше “душевное равновесие” Широкая улыбка и моментально возвращает к началу статьи.

Как сделать кнопку "наверх" на WordPress блоге

Сделать кнопку “наверх” можно как при помощи плагина, так и по средствам небольшого скрипта. В этом уроке я расскажу про оба способа.

Т.к. новички не очень любят лезть в файлы сайта и что-то в них менять/добавлять, то тогда подойдет небольшой и легкий плагин Scroll to Top.

Для более опытных пользователей WordPress, функцию возвращения “наверх” осуществим с помощью скрипта. Хотя скрипт и для новичка поставить не составит труда.

Лично я очень далек от различных jquery и других библиотек, но это не мешает мне просто взять готовый код и вставить в нужный файл блога. (Просто нужно знать в какой файл вставить, поэтому прочтите статью о структуре шаблона WordPress). Почему многие предпочитают скриптами пользоваться? Да все просто — чем больше плагинов активировано на блоге, тем дольше блог загружается, нагрузка на хостинг больше ну и все вытекающие из этого…

Как сделать кнопку “наверх” с помощью плагина Scroll to Top

Итак, скачиваем плагин Scroll to Top – скачать

Дальше устанавливаем и активируем плагин на своем WP блоге. (Как установить плагины на WordPress)

После того, как активировали плагин Scroll to Top, при обновлении страницы на блоге, начните спускаться по странице вниз), и чуть ниже от верха, слева внизу появится кнопка “наверх”

кнопка "наверх"

В принципе можно ничего не менять, все работает и так нормально, но для тех, кто хочет изменить скорость пролистывания страницы наверх (при нажатии на кнопку), или хочет, чтобы кнопка появлялась ниже или выше (кнопка по умолчанию появляется после 350 строки(строки, наверное, считаются по исходному коду)), то зайдите в настройки плагина: “АдминкаПараметры — Scroll to Top

настройки плагина Scroll to Top

В настройках плагина Scroll to Top все на русском языке и все понятно: о ссылках на изображение поговорим ниже, со скоростью и после какой строки будет появляться кнопка “наверх” можете поэкспериментировать сами и настроить как вашей душе угодно!

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

плагин Scroll to Top

Скачать кнопки для плагина Scroll to Top

После того, как скачали архив с кнопками, его нужно разархивировать и полученную папку “icons” с помощью FileZilla или Total Commander по FTP закачать на сервер в корневую папку блога /public_html/ , или в любую другую с изображениями.

Хотя можно выбрать нужную кнопку на компьютере, а затем закачать только одну картинку в папку /public_html/images

Я Вам советую в корне блога (/public_html/) создать папку “images” и закачивать в нее изображения для таких вот случаев. Вам еще не раз придется закачивать картинки от различных плагинов, скриптов — и чтобы быстренько закачать и прописать путь до нужного изображения, папка “images” в корне блога – это самый оптимальный вариант. Вот такой путь будет в итоге: /public_html/images.(иногда вместо /public_html/ нужно вписать адрес своего сайта!)

Затем идем в настройки плагина Scroll to Top: “Админка – Параметры — Scroll to Top” и прописываем полный путь до картинки:

настройки плагина Scroll to Top

Т.к. папку “icons” я закачал в корень блога (в /public_html/), то после того, как я определился с картинкой, в поле ввода ссылки на картинку, я прописал путь до той кнопки, которую хочу видеть у себя на блоге (http://aimblog.ru/icons/UP1.png) Прописывайте путь до вашей картинки внимательно!!!

Вот что получилось:

кнопка "наверх"

Это я показал просто пример, Вы можете поставить любую кнопку “наверх”. Также кнопки можете найти в интернете или нарисовать в фотошопе.

Небольшое дополнение:

Если Вы решите скачать плагин через поиск в админке блога, то в директории WordPress, плагин Scroll to Top 1.2 не такой как я описывал выше, там другой плагин.

При скачивание и активации плагина из админки блога, кнопка «наверх» будет внизу и в середине статьи, примерно так:

Scroll to Top

Изменить цвет, ширину и текст в кнопке можете в «Админка — Параметры — Scroll to Top»

Scroll to Top настройки

Так что имейте это ввиду!!! И если не хотите скачивать версию плагина из директории WordPress, тогда скачивайте Scroll to Top по моей ссылки.

С плагином Scroll to Top разобрались. У кого остались вопросы, задавайте в комментариях, отвечу с удовольствием. Теперь давайте сделаем кнопку «наверх» без плагина.

Как сделать кнопку “наверх” без плагина

Итак, для начала скачаем архив с файлами “verx.js” и “verx.gif” –скачать

Затем распаковываем скачанный архив и по FTP файл “verx.js”  загружаем в корень блога (/public_html/);

Файл “verx.gif” закачиваем в папку /public_html/images.

Теперь, для того чтобы при нажатии на кнопку “наверх”, страница пролистывалась к началу плавно, необходимо подключить библиотеку jquery. Для этого блокнотом notepad++ открываем файл вашего шаблона “functions.php” и в самом начале, сразу после открывающего тега <?php вставляем этот код:

// smart jquery inclusion
if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
 wp_enqueue_script('jquery');
}

Например у меня:

как подключить jquery

Если не подключите jquery, то при нажатии на кнопку “наверх” вас просто резко перекинет к началу и все, при подключенной jquery – с плавной прокруткой.

Теперь подключаем непосредственно кнопку. Для этого открываем на редактирование файл footer.php и в самом конце, перед закрывающим тегом </body> вставляем этот код:

<a id="toTop" href="#"><img src="http://site.ru/путь к картинке/verx.gif" alt="" align="absmiddle" border="0" /></a><script type="text/javascript" src="http://site.ru/verx.js"></script><script type="text/javascript">// <![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
// ]]></script>
  • Где http://site.ru/адрес вашего сайта;
  • /путь до картинки/ – точный путь где лежит картинка

Например у меня:

кнопка "наверх" без плагина

Еще раз повторюсь – внимательно прописывайте пути до файлов!!!

Очень часто что-то не работает или не отображается, только потому, что не правильно указан путь!!!

Ну и наконец, в завершающем шаге, открываем файл style.css и в самом конце вставляем этот код:

#toTop {
width: 100px;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}

Здесь вы уже можете поиграться и подобрать внешний вид и отступы по вашему желанию.

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

наверх

Ну вот и все, сегодня мы узнали как на WordPress блоге сделать кнопку “наверх” с помощью плагина Scroll to Top и без плагина.

P.s. Последнее время меня часто спрашивают как сделать страницу «вопросов-ответов» на блоге, я не пишу об этом статью только потому, что сам пока такой страницы не делал, да и делать сильной необходимости пока нету, не так много похожих вопросов приходит, ну а для тех, кому такая страница на блоге необходима и если хотите добавить себе на блог WordPress страницу FAQ,  тогда вам сюда.

Кому лень возиться с установками плагинов или скриптов, за очень умеренное вознаграждение я готов эту работу взять на свои плечи! Моя почта – aimblogru@gmail.com

Удачи вам!

Все возникшие вопросы задавайте в комментариях ниже…

Не хочу обидеть женский пол, это просто смешное видео

Все, пока!!!

    ADD YOUR COMMENT