Как самому сделать кнопку наверх?



С сегодняшнем wordpress уроке я расскажу вам о том, как можно легко и быстро сделать кнопку » Наверх » у себя на сайте.

вверх

Все делается довольно примитивно! И так, начинаем..

Хочу сразу сказать, что для оптимизации и ускорения работы сайта мы обойдемся без использования плагинов!

Первым делом скачиваем Этот архив — в нем находятся три файла:

Первый файл — это картинка наверх (top.gif);

Второй и третий файл — это два бонуса (зеленая и синяя кнопка).

Разархивируем Zip архив и зальем один из файлов (картинку) в корень сайта. (хотя можно и в любое другое место)
У меня она располагаются по следующему адресу:

https://sergey-oganesyan.ru/top.gif

Теперь заходим в админку блога :: Дизайн :: Редактор , выбираем footer.php (нижняя часть сайта) и помещаем вот этот код между тегами <body> </body> (для поиска по странице нажмите Ctrl + F);

<noindex><a href="#" id="toTop"><img src="http://ваш сайт.ru/top.gif" />

Внимание: http://ваш сайт.ru/ — замените на адрес вашего сайта;



После этого обновляем шаблон и переходим к файлу шаблона под названием style.css (Список стилей) и в самый низ добавляем этот код:

#toTop {     
      width: 100px;     
      background: #ededed;     
      border: 0px solid #cccccc;     
      text-align: center;     
      padding: 5px;     
      position: fixed;     
      bottom: 10px;     
      right: 10px;     
 }

Обновляем шаблон.

При желании, вы можете изменит стиль вашей кнопки:

width: — ширина кнопка в пикселях;
background: — цвет фона;
border: толщина и цвет рамки;
text-align: выравнивание текста (стандартно — по центру);
padding: отступ (в пикселях)
position: — позиция (стандартно — фиксированная);
bottom: 10px;
right: — отступ от правого края;

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

На этом все, подписывайтесь на обновления, с вами был Сергей Оганесян. До новых встреч!

Комментарий (14)

  • Oleg| 13 ноября 2011

    Все можно сделать гораздо проще. Просто вставляем в нужное место такую хеш-ссылку, где прописываем путь к нашей картинке:

    <a href=»#»><img  width=»XX» height=»XX»  src=»http://путь к картинке.jpg» alt=»Наверх» title=»Наверх»/></a>

  • Анни| 15 января 2012

    Добрый день! спасибо за полезную инструкцию, сделала кнопочку, только не могу разобраться в коде — что изменить, чтобы она была не справа, как у вас и как у меня сейчас, а слева? Заранее спасибо за ответ!

    • Сергей Оганесян| 15 января 2012

      Здравствуйте! Для этого просто замените это:

      #toTop {     
            width: 100px;     
            background: #ededed;     
            border: 0px solid #cccccc;     
            text-align: center;     
            padding: 5px;     
            position: fixed;     
            bottom: 10px;     
            right: 10px;     
            cursor: pointer;     
            color: #666666;     
            text-decoration: none;}

      На это:

      #toTop {     
            width: 100px;     
            background: #ededed;     
            border: 0px solid #cccccc;     
            text-align: center;     
            padding: 5px;     
            position: fixed;     
            bottom: 10px;     
            left: 10px;     
            cursor: pointer;     
            color: #666666;     
            text-decoration: none;}

      Это ток кусочек кода, который ранее вы вставляли в файл style.css (Список стилей).

      Если есть вопросы на счет позиции кнопки вверх, например, как её сделать чуть левее или выше, пишите.

  • Олег| 30 января 2012

    Поставил себе всетаки с плагином. Быстро и удобно. Только поиенял картинку. Не нравилось, что кнопка не исчезает в верхнем положении страницы.

  • Димитрий| 24 января 2013

    проблема в том, что если нахожусь не на главной странице, не только вверх поднимает, но и возвращает на главную, что не есть хорошо:-(

  • Димитрий| 24 января 2013

    Всё..уже разобрался, просто id=»toTop»> стояло в конце

  • Anna| 29 июня 2015

    Сергей, вот вы всё описываете, а где у вас на сайте это можно посмотреть? Ведь кнопочки у вас я не вижу?

  • Anna| 29 июня 2015

    Сергей, извините, не досмотрела до самого конца страницу. Кнопочка есть, только она сливается с фоном.

  • Оставить ответ

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