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

Вступление

кнопка наверх в виде картинкиДля начала отмечу, что есть плагины которые создают на сайте WordPress, кнопку «Наверх». Но в этой статье мы обойдемся без них. Также, стоит заметить, что некоторые шаблоны, сверстаны уже с установленной кнопкой «Наверх» или надписью «Наверх», «Top». Понятно, что две кнопки «наверх» ставить незачем, хотя и возможно.

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

Пример кнопок можно забрать
Пример кнопок можно забрать

Кнопка наверх в виде картинки, без плагина

Для установки кнопки «Наверх» нужно сделать четыре несложных шага.

  1. Поместить нужную картинку для кнопки, скорее всего стрелка, в каталог сайта;
  2. Создать скрипт для работы кнопки;
  3. Вставить нужный код в файл footer.php вашего шаблона;
  4. Задать стиль CSS, своей созданной, кнопки.

Разберем каждый шаг подробно.

Поместить нужную картинку для кнопки на сайт

  • Подберите на просторах Интернет картинку, которая подойдет для кнопки «Наверх». (ТУТ и ТУТ два сайта с большим количеством бесплатных иконок png);
  • Загрузите картинку к себе на сайт и сразу скопируйте URL размещенной картинки.

Создать скрипт для работы кнопки

Работает кнопка наверх в виде картинки при помощи скрипта. Скрипт скрывает кнопку, если посетитель находится вверху окна, и плавно показывает картинку при начале прокрутки страницы вниз и опять скрывает кнопку при возвращении наверх.

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

$(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")})}});
  • Далее. Сохраните его под именем, например, (toTop.js);
  • Загрузите этот файл (toTop.js) в каталог сайта, в каталог [wp-include] в папку [js] ;
  • Запомните полный путь до размещенного файла js. Например: /wordpress-abc.ru/wp-includes/js/toTop/js.
Читайте так же:  Плагин Quick Adsense

Как работает скрипт можно прочитать ТУТ.

Вставить код кнопки «Наверх» в файл footer.php вашего шаблона

Важно! Соблюдайте безопасность при редактировании шаблона.

В коде, ниже, замените адрес картинки и адрес скрипта на ваши адреса, зафиксированные в пунктах 1 и 2.

<a href="#" id="toTop">
&lt;img src="<span style="color: #ff6600;">Адрес/вашей/картинки с http</span>" title="Наверх" border="0" align="absmiddle" /&gt;
&lt;/a&gt;
&lt;script src="<span style="color: #ff6600;">http://</span><span style="color: #ff6600;">Ваш сайт/wp-includes/js/toTop.js</span>" type="text/javascript"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 $(function() {$("#toTop").scrollToTop(); });
 &lt;/script&gt;
  • Войдите в редактор вашего сайта;
  • Откройте файл 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) в каталоге сайта, то кнопка все равно появится. Только она будет постоянно видна ,и при нажатии на нее будет перескакивать наверх, а не скользить.

Возможные ошибки: наиболее распространенная ошибка это неправильно указанные пути в коде до скрипта и до картинки.

На этом все, Кнопка наверх в виде картинки установлена.

Специально для WordPress-abc.ru

Читайте другие статьи по теме кнопка «Наверх» на сайте WordPress


Кнопка наверх в виде картинки
Тэги:                                         

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