Кнопка наверх в виде картинки
Вступление
Для начала отмечу, что есть плагины которые создают на сайте WordPress, кнопку «Наверх». Но в этой статье мы обойдемся без них. Также, стоит заметить, что некоторые шаблоны, сверстаны уже с установленной кнопкой «Наверх» или надписью «Наверх», «Top». Понятно, что две кнопки «наверх» ставить незачем, хотя и возможно.
Чтобы кнопка наверх в виде картинки появилась на сайте без плагина, нужно поместить специальный код в одном из файлов вашего шаблона WordPress. А теперь подробно.
Пример кнопок можно забрать
Кнопка наверх в виде картинки, без плагина
Для установки кнопки «Наверх» нужно сделать четыре несложных шага.
- Поместить нужную картинку для кнопки, скорее всего стрелка, в каталог сайта;
- Создать скрипт для работы кнопки;
- Вставить нужный код в файл footer.php вашего шаблона;
- Задать стиль CSS, своей созданной, кнопки.
Разберем каждый шаг подробно.
Поместить нужную картинку для кнопки на сайт
- Подберите на просторах Интернет картинку, которая подойдет для кнопки «Наверх». (ТУТ и ТУТ два сайта с большим количеством бесплатных иконок png);
- Загрузите картинку к себе на сайт и сразу скопируйте URL размещенной картинки.
Создать скрипт для работы кнопки
Работает кнопка наверх в виде картинки при помощи скрипта. Скрипт скрывает кнопку, если посетитель находится вверху окна, и плавно показывает картинку при начале прокрутки страницы вниз и опять скрывает кнопку при возвращении наверх.
Для создания скрипта «мудрить» ничего не нужно. Просто в любом текстовом редакторе создайте следующий файл. Это сжатый скрипт:
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="300"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="350"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}}); $(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#go_up").scrollToTop(); });- Далее. Сохраните его под именем, например, (toTop.js);
- Загрузите этот файл (toTop.js) в каталог сайта, например, в каталог [wp-include] в папку [js] ;
- Запомните полный путь до размещенного файла js. Например: /ваш_сайт.ru/wp-includes/js/toTop/js.
- Каталог размещения скрипта может быть любым. Важно правильно указывать
pathдо файла скрипта.
Как работает скрипт можно прочитать в статье ТУТ.
Вставить код кнопки «Наверх» в файл footer.php вашего шаблона
Важно! Соблюдайте безопасность при редактировании шаблона.
В коде, ниже, замените адрес картинки и адрес скрипта на ваши адреса, зафиксированные в пунктах 1 и 2.
<a href="#" id="toTop"> <img src="<span style="color: #ff6600;">Адрес/вашей/картинки с http</span>" title="Наверх" border="0" align="absmiddle" /> </a> <script src="<span style="color: #ff6600;">http://скрипта</span><span style="color: #ff6600;"> Ваш сайт/wp-includes/js/toTop.js</span>" type="text/javascript"></script> <script type="text/javascript"> $(function() {$("#toTop").scrollToTop(); }); </script>- Войдите в редактор вашего сайта;
- Откройте файл footer.php для редактирования;
- Вставьте код с вашими данными между тегами <body></body>, лучше сразу перед закрывающим тегом </body>, в файл footer.php;
- Не забываем сохраниться.
Задать стиль CSS своей созданной кнопки
Предлагаю следующий стиль для кнопки «Наверх» :
#toTop { width: 60px; background: none; border: none; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #ffffff; text-decoration: none;}- Этот код нужно вставить в файл style.css в редакторе. (Внешний вид → Редактор). Вставьте в раздел –Footer– файла style.css или в конец этого файла.
- При помощи кода CSS можно переместить кнопку «Наверх» в любое место на странице сайта. Меняйте значения атрибутов, вставляйте новые атрибуты и перемещайте кнопку по странице сайта.
Примечание: Если не размещать скрипт (toTop.js) в каталоге сайта, то кнопка все равно появится. Только она будет постоянно видна ,и при нажатии на нее будет перескакивать наверх, а не скользить.
Возможные ошибки: наиболее распространенная ошибка это неправильно указанные пути в коде до скрипта и до картинки.
На этом все, Кнопка наверх в виде картинки установлена.
Источник: www.wordpress-abc.ru
