Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Кнопки вверх и вниз для WordPress

Здравствуйте уважаемые друзья, я думаю вы уже успели заметить, что в правом нижнем углу на «Progress-project» abrek-ad-abra.ru, помимо привычной кнопки вверх добавилось ещё три кнопочки. Немного подкорректировав уже имеющийся скрипт я добавил в него несколько дополнительных функций чем сделал блог еще на чуточку уникальней, а так же это позволит посетителям чувствовать себя на блоге более комфорт-ней и самое главное сэкономить своё время.

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

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

Установка кнопок «вверх» и «вниз»

Итак, как установить данный вариант скрипта кнопок «вверх» — «вниз». Так, как мы с вами будем использовать специальный скрипт для его нормальной работоспособности нам необходимо подключить к сайту или блогу библиотеку jQuery.

Как вы наверное помните мы уже проводили данную процедуру при скрытии ссылок, если вы не читали эту статью можете это сделать здесь. Но прежде чем подключать к своему ресурсу библиотеку jQuery, проверьте файлы «header.php» и «footer.php» действующей темы вашего блога, вполне возможно, что данная библиотека на вашем ресурсе уже подключена.

После подключения библиотеки jQuery там-же среди файлов темы открываем папку под названием «js». В случае если данной папки в вашей теме нет следует её создать.

Просто создаём на рабочем столе ПК пустую папку под названием: «js», после чего загружаем её на хостинг в папку с темой вашего сайта.

Скрипт новых кнопок «вверх» и «вниз»

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

var progress_arrows_my=100;
var progress_tytime_arrows=5;
var post_progress_go,stopwatch;

function progress_lop_arrows()
{
stopwatch=setInterval("progress_scroll()",30);
}
function progresshendr()
{
clearInterval(stopwatch);
}
function progress_scroll()
{
post_progress_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0,++post_progress_go);
}

function progress_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 progress_scroll_to_top()
{

var progress_copy_zoo=window.document.body;
var progress_brake_by=progress_the_highest_point();
window.scrollBy (0,-progress_arrows_my);
var progress_brake_stop=progress_the_highest_point();
if(progress_brake_by>progress_brake_stop)
setTimeout("progress_scroll_to_top()",progress_tytime_arrows);
else
document.getElementById("progress_down_img").style.display="block";
return false;
}

function progress_down_arrow()
{
var progress_copy_zoo=window.document.body;
var progress_brake_by=progress_the_highest_point();
window.scrollBy (0,progress_arrows_my);
var progress_brake_stop=progress_the_highest_point();
if(progress_brake_by<progress_brake_stop)
setTimeout("progress_down_arrow()",progress_tytime_arrows);
else
document.getElementById("progress_down_img").style.display="none";
return false;
}

function slow_progress_scroll()
{
var seo_progress_body=window.document.body;
var progress_height=seo_progress_body.scrollHeight;
var progress_top=progress_the_highest_point();

if(progress_top==0)
document.getElementById("progress_up_img").style.display="none";
else
document.getElementById("progress_up_img").style.display="block";
return false;
}
setInterval("slow_progress_scroll()",100);
document.write('<div class="arrow"> <a href="#" onclick="return progress_scroll_to_top()"><img border="0" id="progress_up_img" width="40px" src="https://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png" title="Наверх"></a><br /> <a href="#" onclick="progresshendr();return false;"><img border="0" id="progress_up_img" width="40px" src="https://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png" title="Пауза"></a><br /><a href="#" onclick="clearInterval(stopwatch);progress_lop_arrows();return false;"><img border="0" id="progress_up_img" width="40px" src="https://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png" title="Читать"></a><br /> <a href="#" onclick="return progress_down_arrow()"><img border="0" width="40px" id="progress_down_img" src="https://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png" title="Вниз"></a></div>');

В последней строке данного кода у нас прописаны иконки кнопок. Если вам необходимо для своего сайта использовать свои кнопки, необходимо их загрузить в папку вашей темы под названием: «images» и соответственно изменить URL адресов в коде.

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

Подключение файла «.js» к теме WopdPress

Для того, чтобы не терять скорость загрузки сайта я рекомендую подключить файл со скриптом кнопок «вверх» — «вниз» в файле темы: «footer.php» сразу после: «</body>» на выбор одним из предложенных ниже способов.

Способ — 1:

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

Способ — 2:

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

Настройка внешнего вида кнопок «вверх» и «вниз»

Итак открываем для редактирования файл со стилями темы: «style.css», опускаемся в самый его низ где вставляем следующие 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);
}

Вот собственно и всё, конечно новичкам может быть немного и сложновато, но думаю, что справятся все. Желаю удачи, до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-24

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог