Всем привет. Я хотел бы поделиться с вами одной темой, это кнопка наверх для сайта wordpress в виде картинки. Мы будем реализовывать данный способ при помощи кода html и css.
Почему я опять пишу на эту тему?
Поисковые роботы хорошо относятся к тем проектам, которые быстрее загружаются. А лишние плагины, которые мы устанавливаем на свои проекты, очень сильно тормозят сайт. Я уже не однократно писал об этом в своих статьях. В данной статье мы установим кнопку наверх при помощи скриптов. Сейчас роботы больше внимания уделяют сайтам:
1. У которых полезный контент
2. Скорость загрузки намного меньше, чем у других блогов.
Прошли те времена, когда за счет ссылок и ключевых слов можно было попасть в топ. Сейчас у поисковых роботов другие ориентиры. Но об этом вы узнаете чуть позже.
Как сделать кнопку наверх
В этой же статье я расскажу как установить кнопку наверх для wordpress при помощи скрипта. Сейчас в некоторых темах разработчики уже предусматривают такую функцию. Но многих не устраивает цвет, форма. Кто-то хочет установить свою картинку, но не знает как это сделать. Я вам расскажу как вы можете реализовать свою задумку и установить кнопку наверх на свой сайт.
Кнопка наверх для сайта wordpress
Чтобы кнопка появилась у вас на блоге, мы установим специальный код в файлы шаблона вашей темы. Для этого нам нужно сделать простых четыре шага.
1. Выбрать картинку и поместить ее в каталог.
2. Установить скрипт.
3. Вставить код в футер шаблона.
4. Задать стили.
Ну а теперь давайте разбирать все это более подробно.Мы разберем несколько способов.
Изображение для кнопки
1. Находим подходящее изображение в интернете.
2. Загружаем через админ панель в библиотеку.
3. Копируем адрес изображения. Он нам понадобится для вставки в код.
Как вы уже догадались, эта функция у нас будет работать при помощи скрипта. Принцип работы я описывать не буду. Я вам скажу только одно. Многие кнопки при нажатии, медленно скролят страницу вверх. Я считаю, что это не правильно.
Посетители, если нужно вернуться в начало страницы нажимают на кнопку. Все это должно происходить быстро, моментально. Посетитель не должен терять свое время. Это мое мнение. Мы немного отвлеклись.
Идем дальше.
Создаем скрипт кнопки наверх для сайта wordpress
Вставляем код стилей перед закрывающимся тегом </head>, или в ваш файл CSS.
background: url(«images/up.png») no-repeat top left; (адрес картинки)
height: 60px;
width: 60px;
bottom: 30px;
right: 30px; (место расположения влево — право)
cursor: pointer;
display: none;
position: fixed;
z-index: 999;
}
Теперь рассмотрим более подробно наш код. В зависимости от ваших желаний, вы можете разместить кнопку наверх слева или справа. Для этого нужно заменить
left — влево
right -право
Установить следующий код перед закрывающимся тегом </body> в файле footer.php.
var JumpUp = function() {
if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
window.scrollBy(0,-50);
setTimeout(JumpUp, 50); (скорость прокрутки)
}
}
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
if (scrolled > 100) {
document.getElementById(‘upbutton’).style.display = ‘block’;
} else {
document.getElementById(‘upbutton’).style.display = ‘none’;
}
}
</script>
<a id=»upbutton» href=»#» onclick=»JumpUp(); return false;»>
<img src=»images/up.png» alt=»Top» border=»none» title=»Наверх»>
</a>
Обязательно проверяем в двух местах, верно ли мы указали путь к изображению нашей кнопки.
В коде стилей: background: url(«images/up.png») no-repeat top left;
И в самом скрипте: <img src=«images/up.png» alt=»Top» border=»none» title=»Наверх»>
Скорость прокрутки страницы мы будем регулировать в данной записи: setTimeout(JumpUp, 50);
Чем большее число мы установим, тем медленнее будет прокручиваться страница.
Также, вы можете менять изображение кнопки, только не забудьте поменять имя файла изображения в коде.
Желаю Вам удачи. Пока,пока. Если что-то будет не понятно, пишите в комментариях.
