Современные пользователи весьма инертны и в массе своей любят, чтобы все было под рукой. При прочих равных они выберут для периодического посещения именно тот сайт, где условия пользования ресурсом максимально приближены к идеалу, и это вполне естественно. Там, где просто и комфортно, с минимумом потраченного времени можно ознакомиться с необходимой информацией, не утомляя себя лишними телодвижениями.
Вот такие web-ресурсы и получают весомое преимущество не только в виде растущей целевой аудитории, но и в виде увеличивающегося трафика с поисковых систем, так как поисковики уделяют огромное внимание поведению пользователей ( о влиянии поведенческих факторов). К чему это я все говорю? А все к тому, что мелочей в продвижении сайта нет, как бы банально это ни звучало.
К примеру, та же кнопка наверх (вверх) для сайта . Казалось бы, мелочь, недостойная внимания, но она вносит свою лепту в повышение юзабилити сайта. Если еще не догадались, о чем речь, обратите внимание, как на моем блоге при прокрутке страницы вниз появляется с правой стороны кнопка в виде стрелки, направленной вверх, при нажатии на которую можно вернуться назад в верхнее положение.
Как создать кнопку наверх с помощью скриптаТеперь разберем подробнее, как можно реализовать нашу задумку, причем предложу несколько вариантов, каждый из которых имеет свои плюсы. Для начала хотелось бы отметить, что для пользователей уже давно существует возможность быстро прокручивать любую страницу, причем практически в любом браузере. Для этого достаточно воспользоваться кнопками «Page Up» и «Page Down» на клавиатуре компьютера.
Но вы же понимаете, что читатели на наших сайтах и блогах с различным уровнем знаний и подготовки. Возможно, что некоторые из них даже не подозревают о такой комфортной опции в силу вышеупомянутой инерционности. Поэтому в обстановке сильнейшей конкурентной борьбы за привлечение лишнего посетителя, а, значит, и потенциального подписчика на сайт нужно предусмотреть все возможности, которые пусть даже ненамного, но поднимут вас в их глазах. Ну, а теперь переходим к практике.
Простая кнопка вверх для блога или сайтаВначале хочу предложить иконку наверх простую и без изысков, установить которую можно просто без проблем. Для этого необходимо открыть на редактирование файл footer.php темы WordPress, который, как известно, отвечает за отображение в браузере нижней части web-страницы, называемой футером (или подвалом). Перед закрывающим тегом body надо вставить вот такой код:
Напомню, что редактировать файлы удобнее всего с помощью notepad plus plus ( об этом замечательном HTML, PHP и CSS редакторе подробнее). Для того, чтобы определить местоположение и вид значка «Наверх», зададим свойства CSS для соответствующего идентификатора (id) gotop:
#gotop { position: fixed; bottom: 60px; margin-left: 1170px; border: 2px solid #BBB9C0; text-align: center; color: #4F487E; text-decoration: none; font-size: 24px; }
Копируем и заносим эти свойства в файл style.css темы WordPress (). В результате в правом нижнем углу должно появиться изображение кнопки «Наверх», которое будет иметь такой вид:
Можно применять для этих целей уже встроенные аналогичные инструменты во всех других популярных браузерах: Opera ( об этом браузере подробнее), Internet Explorer ( об обозревателе IE), Google Chrome ( о Хроме статья). Чтобы поднять саму картинку, скажем, вверх, нужно увеличить значение свойства bottom, чтобы сместить влево, необходимо уменьшить параметр CSS свойства margin-left. Ну, и так далее.
Кнопка вверх на сайте с плавной прокруткойТеперь усложним задачу. В представленном выше варианте простой кнопки наверх она будет видна все время и при нажатии на нее web-страница сайта мгновенно возвращается в верхнее положение. Но можно сделать так, что в верхнем положении страницы сайта изображение «кнопки наверх» будет невидимым и появится лишь при прокрутке вебстраницы вниз на определенное расстояние. Кроме всего прочего, можно обеспечить плавную прокрутку . Ярко и со вкусом.
Причем, для реализации этого варианта создания кнопки наверх все предложенные способы, которые мне удалось обнаружить в интернете, предполагают использование библиотеки jQuery, к которой необходимо подключиться. По некоторым причинам мне хотелось этого избежать и в конце концов я нашел желаемый способ решения этой проблемы. Небезызвестный админ WP-Kama предложил свой код на JavaScript, который дает возможность осуществить плавную прокрутку вэб-страницы сайта вверх и появление-исчезновение самой «кнопки наверх» без использования jQuery. Предварительно необходимо создать на сервере файл с расширением.js (например, totop.js) и вставить в него следующий кусок:
(function() { function $(id){ return document.getElementById(id); } function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 12; var dx = 0; var dy = 0; var bx = 0; var by = 0; var wx = 0; var wy = 0; if (document.documentElement) { dx = document.documentElement.scrollLeft || 0; dy = document.documentElement.scrollTop || 0; } if (document.body) { bx = document.body.scrollLeft || 0; by = document.body.scrollTop || 0; } var wx = window.scrollX || 0; var wy = window.scrollY || 0; var x = Math.max(wx, Math.max(bx, dx)); var y = Math.max(wy, Math.max(by, dy)); var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) { var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } //* function scrollTop(){ var el = $("gotop"); var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop>400){ if(el.style.display!="block"){ el.style.display="block"; smoothopaque(el, 0, 100, 1); } } else el.style.display="none"; return false; } // Плавная смена прозрачности function smoothopaque(el, startop, endop, inc){ op = startop; // Устанавливаем прозрачность setopacity(el, op); // Начинаем изменение прозрачности setTimeout(slowopacity, 1); function slowopacity(){ if(startop endop){ setTimeout(slowopacity, 1); } } setopacity(el, op); }; }; // установка opacity function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + opacity + ")"; }; if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window["top"] = {}; window["top"]["goTop"] = goTop; })();
Скорее всего, в корневой папке вашего блога или web-сайта на хостинге (чаще всего это public_html) имеется директория js с файлами JavaScript. Там и создаете файл totop.js с помощью уже упомянутой мной программы notepad++, вставив в него этот код. Таким образом, полный путь до свежеиспеченного файла у меня получился таким:
/themes/cloudy/js/totop.js">
Теперь нужно создать изображение для “кнопки вверх”. Для этого можно использовать любой графический редактор, включая просмотрщик фотографий FastStone Image Viewer ( об этой интересной программе детальный мануал). Также можно использовать для этих целей, например, Fotoshop, в том числе версию онлайн приложений, коих в интернете немало.
Понимаю, что у некоторых неискушенных читателей могут возникнуть некоторые сложности при желании заполучить красивую кнопку наверх, которая к тому же еще бы и вписалась в дизайн. Поэтому в одной из ближайших публикаций уделю на это время и подробно объясню, как я создал подобную иконку в виде стрелки вверх для своего блога в онлайн Фотошопе . Пока же представляю готовый результат в виде спрайта, включающего два рисунка:
Объясню вкратце, что объединение фоновых картинок сайта в спрайты (по англ. sprite - фея, призрак) дает возможность сократить число http запросов, тем самым внести определенную лепту в благородное дело уменьшения нагрузки на сервер. В данном случае создание спрайта из двух стрелок обеспечивает изменение вида изображения при подведении к нему курсора мышки, то есть возникает анимационный эффект.
Безусловно, можно спокойно обойтись без создания спрайта, сделав один рисунок, но мы рассматриваем более сложный вариант для тех, кто этого желает. Поэтому сторонники более простого варианта могут спокойно заменить спрайт на одиночную картинку. Весь предоставленный алгоритм будет абсолютно тождественным.
Итак, будем считать, что рисунок стрелки «наверх» готов (кстати, стрелку можно заменить на другую картинку, например, в виде красивой кнопки). Далее загружаем изображение на сервер опять же в корень сайта (обычно там уже имеется папка IMAGES). Для этих целей советую использовать программу FileZilla ( пост об этом ФТП клиенте), который очень удобен при перемещении и работе с изображениями, или другой подобный софт. У меня абсолютный путь до изображения с двумя стрелками получился следующим:
/images/totop.png
Однако, для url картинки, которая выводится с помощью средств CSS, можно использовать и относительный путь:
/images/totop.png
Применяйте как абсолютный, так и относительный адрес, разницы нет. Имейте ввиду, что у вас полный URL может быть другим. Внимательно исследуйте вложенность папок, которые и определяют содержание пути. Следующим шагом открываем файл footer.php и вставляем в него в самый конец перед закрывающим тегом body такую конструкцию:
Не забудьте вместо «путь_до_файла» вставить последовательность всех папок, определяющих URL именно для вашего проекта. И последний шаг. Нужно определить стили CSS, которые следует внести в файл style.css темы Вордпресс. Предлагаю свой вариант:
#gotop { position: fixed; bottom: 60px; width: 56px; height: 96px; margin-left: 1170px; background: url(путь_до_файла/totop.png) no-repeat 0 0; }
И здесь при описании свойства background не забудьте в качестве значения url указать путь до файла totop.png (абсолютный или относительный). Имейте ввиду, что абсолютный путь должен начинаться с «http://». Для того, чтобы обеспечить смену вида кнопки при подведении к ней курсора, пропишем еще одно условие в тот же файл style.css:
#gotop:hover { background: url(/путь_до_файла/totop.png) no-repeat -56px 0; }
Но последнее правило CSS нужно вносить только в случае, если вы решили использовать спрайт. В случае одинарного изображения его прописывать не надо. Теперь при прокрутке страницы вниз кнопка наверх будет постепенно появляться, при наведении на нее курсора будет менять свой вид (кроме случая, когда загружена одиночная картинка) и после нажатия на нее вэб-страница будет возвращаться в верхнее положение, причем прокрутка будет плавная. В заключение немного музыкальной ностальгии:
Кнопку “Вверх” сейчас можно увидеть на многих сайтах. В основном это связано с увеличением количество мобильных пользователей интернета, для которых такая кнопка дает заметное удобство в навигации. Как она работает можно посмотреть на этом сайте – при начале скроллинга страницы вниз внизу справа появляется стрелка прокрутки наверх.
Добавить ее на сайт WordPress довольно просто без плагина с помощью специальной функции javascript. Для этого нужно выполнить 4 шага.
1. Поместите в каталог js вашей темы файл goTop.js со следующим содержанием. Если такого каталога нет вы можете его создать, либо использовать любой другой каталог, однако тогда нужно изменить путь к скрипту goTop.js во втором шаге.
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$ (function () { $ . fn . scrollToTop = function () { $ (this ) . hide () . removeAttr ("href" ) ; if ($ (window ) . scrollTop () != "0" ) { $ (this ) . fadeIn ("slow" ) } var scrollDiv = $ (this ) ; $ (window ) . scroll (function () { if ($ (window ) . scrollTop () == "0" ) { $ (scrollDiv ) . fadeOut ("slow" ) } else { $ (scrollDiv ) . fadeIn ("slow" ) } } ) ; $ (this ) . click (function () { $ ("html, body" ) . animate ({ scrollTop : 0 } , "slow" ) } ) } } ) ; |
2. Поместите в файл footer.php вашей темы перед закрывающим тегом следующий код
/js/goTop.js" type="text/javascript"> $(function() { $("#goTop").scrollToTop(); });
< a href = "#" id = "goTop" alt = "Наверх" title = "Наверх" > < img src = " /images/goUp.png" border = "0" align = "absmiddle" / > < / a >
Новая модная песочница в космическом духе сейчас на пике популярности. Дата выхода игры для Playstation – 9...
Не могу открыть спор на Алиэкспресс, подробная инструкция.
Хотите узнать как стабильно зарабатывать в...
|