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

2 Комментария(ев)

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

Для чего нужна вообще эта кнопка наверх, для какого удобства?

Все очень просто. Представьте себе, что вы написали большой, объемный пост в блог. Ваши читатели оставили еще не один десяток комментариев да плюс еще ваши ответы к ним.

Понимаете сколько раз надо крутануть колёсико мышки, чтобы пролистать страницу вниз или наоборот вверх?

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

Ведь и колёсико не стальное, может сломаться. У меня на одной мышки он сломался, пришлось покупать новую. Теперь лишний раз стараюсь не крутить его.

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

Кнопка наверх – что надо сделать, что для этого потребуется.

Кнопку наверх можно установить двумя способами:

С помощью плагина
С помощью скрипта

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

С помощью второго способа я очень быстро и легко осуществил задуманное. Результат вы можете увидеть справа внизу. Все делается очень просто.

Итак, приступим.

В первую очередь скачайте вот этот архив. В нем находятся два файла:

Первый – картинка verh.gif.
Второй – файл js скрипт (verh.js)

Эти файлы надо закачать на ваш сервер, в корень вашего блога.

Для меня вначале, что такое корень блога (корневая папка), было вообще не понятно, поэтому для тех, кто не знает, растолкую.

Это основная (главная) папка, в которой располагаются остальные папки и файлы сайта (блога). Обычно это — public_html или httpdocs.

У меня выглядит это так: wptheme.us/public_html/.

То есть, если я подключаюсь к своему серверу через FTP клиент, то мне надо следовать по такому пути: wptheme.us => public_html. И когда я открою эту основную папку (public_html), щелкнув по ней два раза левой кнопкой мыши, то, как раз попаду в корень своего блога.

Сюда и будем заливать файлы из скаченного архива. Файл verh.gif можно положить в папку с картинками вашего блога (images), лично я так и сделал, а verh.js – в корневую папку.

Так первый шаг сделали.

Далее…

Копируем вот такой код:

<noindex><a href="#" id="toTop"><img src=http://Ваш_сайт.ru/images/verh.gif border="0" align="absmiddle" /></a>
<script src="http://Ваш_сайт.ru/verx.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script></noindex>

Скопировали? Теперь вставляем его в файл header.php, но лучше вставить в footer.php между тегами <body></body>. В коде вместо ваш_сайт.ru напишите адрес вашего блога.

Второй шаг тоже сделали.
Идем дальше…

Откройте через Админ панель => Внешний вид => Редактор, главный файл таблицы стилей style.css и в самом конце вставьте вот такой код:

#toTop {
position: fixed;
bottom: 20px;
right: 40px;
background: none;
cursor: pointer;}

Не забудьте обновить файл.

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

Прописывайте точное название картинки «Наверх». Если вставляете другую картинку то в коде вместо verh.gif пишите точное название и расширение новой картинки, например, strelka.png

Все готово!

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

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

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

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

Видео по установке кнопки

(Всего посетителей: 371, сегодня: 1)

Алексей Шевченко

Автор и редактор на wptheme.us

Опыт работы с WordPress более 10 лет. Создал более 1500 сайтов на Вордпресс. Перевел более 400 тем на русский и украинский язык. Сотни вылеченных сайтов от вирусов. Тысячи установленных и настроенных плагинов. Задать вопрос мне можно на https://profiles.wordpress.org/wpthemeus/

Заказать установку или сайт на этом шаблоне

Рубрики

Лучшие шаблоны для Wordpress

Смотрите также | Все темы

Бесплатные темы WordPress для художника: ТОП-10 шаблонов

Оставьте свой комментарий cancel

- Серж
- 2 ноября 2021
Ответить
Здравствуйте. При вставке данного кода разрушается поиск и результаты поиска.
- - Алексей Шевченко
  - 3 ноября 2021
  Ответить
  Что значит разрушается поиск?

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

Кнопка наверх – что надо сделать, что для этого потребуется.

Видео по установке кнопки

Фильтр по типу

Рубрики

Popular posts:

Лучшие комментарии

Последние темы и подборки

10 бесплатных шаблонов WordPress для художников

ТОП-15: антикварные и коллекционные темы WordPress для винтажных сайтов

Doctor Physician – бесплатный шаблон WordPress для врачей

Fitness Trainer – бесплатный фитнес шаблон WordPress

10+ лучших шаблонов WordPress для детского садика

Темы WordPress для сайтов клининговых сервисов и уборки

Лучшие темы WordPress для дайвинга и подводного плавания

Veterinary Clinic – бесплатный шаблон WordPress для ветеринарной клиники

Лучшие шаблоны WordPress с GDPR