Купить готовый сайт
Плагины и работа с WordPress

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

Здравствуйте дорогие читатели блога Интернет Бизнес

Как создается кнопка вверх для сайта wordpress своими руками

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

Для чего устанавливается кнопка вверх для сайта?

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

Сегодня мы создадим кнопку вверх и кнопку вниз, возможность авто-чтения и остановки. То есть наша кнопка будет содержать в себе 4 кнопки вверх в одной. Думаю вам это понравиться. к тому же делается это просто. При создании кнопки, я рекомендую сохранить копии оригинальных файлов, что бы вернуть все на место при ошибке. Я постараюсь рассказать пошагово, что бы избежать сбоев на вашем сайте. Но как говориться на Бога надейся, а сам не плошай!Поехали…

Для начала вам потребуется подключить библиотеку jQuery. Большинство современных шаблонов уже содержат данную библиотеку, по этому рекомендую это проверить на вашем сайте. Для этого вам нужно просто проверить файлы  header.php и footer.php. Если библиотека подключена идем дальше. Ну а если нет, то данную информацию можно найти в интернете или на youtube.

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

И так создаем кнопку вверх для сайта wordpress без плагина. Для этого в папке «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=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_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>');

Кнопка вверх для сайта wordpress вордпресс без плагина

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

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

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


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

Картинки размещаются поочередно сверху вниз.

Далее открываем файл 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);
}

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

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

Для подключения к шаблону файла «.js» вам потребуется просто прописать одну из строк:

Вариант №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>

Я устанавливал данные кнопки не имея опыта, но так как все показано и рассказано, то у меня проблем не возникло. Хотя нет возникли. Сейчас я о них расскажу: Первый раз  при создании кнопки вверх для сайта wordpress я столкнулся с тем, что они просто не появлялись! Вроде все было сделано как надо, но кнопок не было. Тогда я просто пошел в админку вордпресса , Настройки — Чтение и поставил большее число выводимых статей на главной.  Стояло 5 я поставил 8, затем почистил браузер от мусора и почистил куки. Обновил страницу и получил на сайт долгожданную кнопка вверх для сайта wordpress.

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

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

Если у вас возникнут вопросы или вы не смогли установить данные кнопки вверх для сайта wordpress, то ниже есть комментарии в которых вы можете задать свои вопросы.

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

Tags

Александр Гусельников

Приветствую вас на моей странице! Мне очень приятно, что вы посетили мой сайт. Я буду вам очень признателен, если вы поддержите развитие данного блога. От Вас потребуется сущая мелочь - это поделиться статьей в социальной сети или оставить свой комментарий, можно отзыв. Заранее, большое вам спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close