Кнопка наверх в виде картинки

Опубликовано: 01.09.2018

Вступление

Для начала отмечу, что есть плагины которые создают на сайте 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

Статьи связанные по теме:

rss