<
  • Главная
Статьи

Главная Новости

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


Опубликовано: 01.03.2018

видео Как сделать кнопку

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

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



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

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


Как поставить кнопки социальных сетей на WordPress с помощью плагина UpToLike

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

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


Эффектные переходы страниц на сайте Wordpress !

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

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

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

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

В принципе можно ничего не менять, все работает и так нормально, но для тех, кто хочет изменить скорость пролистывания страницы наверх (при нажатии на кнопку), или хочет, чтобы кнопка появлялась ниже или выше (кнопка по умолчанию появляется после 350 строки(строки, наверное, считаются по исходному коду)), то зайдите в настройки плагина: “АдминкаПараметры — 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” и прописываем полный путь до картинки:

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

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

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

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

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

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

Изменить цвет, ширину и текст в кнопке можете в «Админка — Параметры — 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 – с плавной прокруткой.

Теперь подключаем непосредственно кнопку. Для этого открываем на редактирование файл 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,  тогда вам сюда .

Кому лень возиться с установками плагинов или скриптов, за очень умеренное вознаграждение я готов эту работу взять на свои плечи! Моя почта – [email protected]

Удачи вам!

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

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

Все, пока!!!



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

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

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью

rss