Кнопка вверх и кнопка вниз. Скрипт для сайта на WordPress

Главная » Создание блога » Wordpress для новичков » Кнопка вверх и кнопка вниз. Скрипт для сайта на WordPress

Кнопка вверх и кнопка вниз. Скрипт для сайта на WordPress

2013-09-06 автор: Виталий Кириллов

Всем привет! Вы наверное заметили, что на seo-mayak.com появились кнопка верх и кнопка вниз для быстрой прокрутки страницы, а также кнопочка для чтения и пауза.

И сегодня я хочу Вам предложить установить скрипт с такими кнопками, который я написал специально для сайта на WordPress.

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

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

knopki vverh vniz

И вот наконец у меня дошли руки до установки кнопок вверх и вниз, но я бы наверное еще долго собирался, если бы не вебвизор (вебвизор — это инструмент Яндекс Метрики). Наблюдая за своими посетителями я заметил, что многие что-то ищут в нижнем углу экрана, где просто пустое место и не найдя закрывают страницу.

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

Кнопка наверх и кнопка вниз позволяют пользователю экономить время, повышая его желание дольше оставаться на сайте, что обязательно скажется на поведенческом факторе!

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

Скрипт блока кнопок вверх и вниз

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

Для веб-мастеров с базовым знанием HTML, и CSS не составит труда установить скрипт кнопок на свой сайт, а вот на счет новичков я не так уверен и ожидаю массу вопросов в комментариях.

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

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

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

Итак, для начала нам потребуется подключить к сайту библиотеку jQuery, как это делается читайте тут. Обязательно проверьте, файлы header.php и footer.php, возможно библиотека jQuery у Вас уже подключена, в таком случаи повторно подключать ее не надо.

Далее, ищем в шаблоне папку с названием «js». Если такой нет, то надо будет ее создать, но об этом немного позже. Если такая папка есть, то в ней должны находиться файлы с расширением «.js «.

Создаем новый файл с расширением .js и вставляем в него следующий код:

var mayak_arrows_my=100;
var mayak_tytime_arrows=5;
var post_mayak_go,stopwatch;
function mayak_lop_arrows(){
stopwatch=setInterval("mayak_scroll()",30);
}
function mayakhendr(){
clearInterval(stopwatch);
}
function mayak_scroll(){
post_mayak_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0,++post_mayak_go);
}
function mayak_the_highest_point(){
 try{
 if(window.pageYOffset!=undefined)
 return window.pageYOffset;
 return window.document.body.scrollTop;
 }catch(err)
 {
 try{
 return window.document.body.scrollTop;
 }catch(err2)
 {
 return 0;
 }
 }
}
function mayak_scroll_to_top(){
var mayak_copy_zoo =w indow.document.body;
var mayak_brake_by = mayak_the_highest_point();
window.scrollBy(0,-mayak_arrows_my);
var mayak_brake_stop = mayak_the_highest_point();
 if(mayak_brake_by>mayak_brake_stop)
 setTimeout("mayak_scroll_to_top()",mayak_tytime_arrows);
 else
 document.getElementById("mayak_down_img").style.display = "block";
 return false;
}
function mayak_down_arrow(){
var mayak_copy_zoo = window.document.body;
var mayak_brake_by = mayak_the_highest_point();
window.scrollBy(0,mayak_arrows_my);
var mayak_brake_stop = mayak_the_highest_point();
 if(mayak_brake_by<mayak_brake_stop)
 setTimeout("mayak_down_arrow()",mayak_tytime_arrows);
 else
 document.getElementById("mayak_down_img").style.display = "none";
 return false;
}
function slow_mayak_scroll(){
var seo_mayak_body = window.document.body;
var mayak_height = seo_mayak_body.scrollHeight;
var mayak_top = mayak_the_highest_point();
 if(mayak_top==0)
 document.getElementById("mayak_up_img").style.display = "none";
 else
 document.getElementById("mayak_up_img").style.display = "block";
 return false;
}
setInterval("slow_mayak_scroll()",100);
document.write('<div class="arrow"> <a href="#" onclick="return mayak_scroll_to_top()"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png" title="Наверх"></a><br /> <a href="#" onclick="mayakhendr();return false;"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png" title="Пауза"></a><br /><a href="#" onclick="clearInterval(stopwatch);mayak_lop_arrows();return false;"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png" title="Читать"></a><br /> <a href="#" onclick="return mayak_down_arrow()"><img border="0" width="40px" id="mayak_down_img" src="http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png" title="Вниз"></a></div>');

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

Свои картинки надо закачать на сервер в папку «images» (как закачивать файлы на сервер, читайте здесь), которая также расположена в папке с Вашей темой, а затем заменить URL картинок в коде.

Адреса картинок прописаны на самой последней строчке кода, вот URL картинки со стрелкой «Наверх»:

src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png"

Очередность картинок сверху вниз, т.е. первый адрес — стрелка наверх, второй — пауза и т.д.

Далее, открываем файл style.css и в самый конец вставляем стили для кнопок:

/*стили для кнопок вверх/вниз*/
.arrow {
position: fixed;
width: 64px;
right: -10px;
bottom: 115px;
z-index: 10;
}
.arrow img {
opacity: 0.3;
}
.arrow img:hover{
cursor: pointer;
opacity: 1;
filter: alpha(opacity=100);
}
/* Отключение отображение кнопок на мобильных устройствах */
@media screen and (max-width:760px){
.arrow{display:none;}
}

Вот в принципе и все, блок кнопок должен работать.

Как создать файл с расширением «.js»

Давайте прежде всего разберемся, почему у файла должно быть такое расширение. Дело в том, что в файлах с таким расширением, расположены коды, написанные на языке JavaScript. Отсюда и расширение файла «.js».

Создать такой файл можно в бесплатном текстовом редакторе Notepad++, просто сохранив вновь созданный файл в вышеупомянутом расширении:

knopka vverh vniz1

Название у файла может быть любым, главное чтобы оно состояло из английский символов.

Итак, мы создали папку с названием «js» и файл с расширением «.js», а также скопировали в него код кнопок, но этого недостаточно, надо еще подключить файл к шаблону.

Как подключить файл с расширением «.js» к шаблону WopdPress

На самом деле ничего сложного нет в подключении к шаблону файла «.js» и в принципе сие действие ничем не отличается от подключения библиотеки jQuery или любого другого скрипта. Например:

Вариант №1:

<script  type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/Название файла.js"></script>

Вариант №2:

<script  type="text/javascript" src="http://Ваш домен/wp-content/themes/Название темы/js/Название файла.js"></script>

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

</body>

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

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов