Домой / WordPress / Как сделать кнопку «Вверх» в WordPress
Как сделать кнопку «Вверх» в WordPress

Как сделать кнопку «Вверх» в WordPress

Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку «Вверх» на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку «Вверх» — страница возвратится вверх, к главному меню (шапке сайта).

Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов.

Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top 😉

Вспомнить как можно найти и установить плагин Вы можете в одном из прошлых уроков.

Создание кнопки «Вверх» без плагинов

Установить кнопку можно очень просто, всего за несколько простых шагов.

1. Откройте файл function.php.

Открыть  function.php можно двумя способами:

  • Открыть с помощью текстового редактора в корневой папке вашей темы
  • Перейти в Внешний вид -> Редактор и выбрать для редакции Функции темы (functions.php)

2. Скопируйте и вставьте код ниже в самом низу, перед закрывающим тегом ?>.

add_action( 'wp_footer', 'back_to_top' );
function back_to_top() {
echo '<img id="totop" src="https://wp-lessons.com/wp-content/uploads/2015/04/scroll-to-img.gif" />';
}

add_action( 'wp_head', 'back_to_top_style' );
function back_to_top_style() {
echo '<style type="text/css">
#totop {
cursor:pointer;
position: fixed;
right: 30px;
bottom: 30px;
display: none;
outline: none;
}
</style>';
}

add_action( 'wp_footer', 'back_to_top_script' );
function back_to_top_script() {
echo '<script type="text/javascript">
jQuery(document).ready(function($){
$(window).scroll(function () {
if ( $(this).scrollTop() > 400 )
$("#totop").fadeIn();
else
$("#totop").fadeOut();
});

$("#totop").click(function () {
$("body,html").animate({ scrollTop: 0 }, 800 );
return false;
});
});
</script>';
}

3. Сохраните изменения и любуйтесь созданной вами кнопкой «Вверх».

А сейчас, предугадывая Ваши вопросы, постараюсь заранее на них ответить!

И так, в данном примере мы поставили изображение на кнопку. Для того чтобы убрать изображение и поставить текст — замените в коде нашего примера строчку 3 на:

echo '<a id="totop" href="#">Вверх</a>';

Для того чтобы заменить изображение кнопки — замените ссылку на нужное вам изображение в строчке 3.

Кнопка будет отображаться тогда, когда на странице мы опустимся более 400 пикселей вниз от шапки сайта, и будет прятаться если мы поднимемся выше. Изменить высоту при которой кнопка будет появляться достаточно легко, для этого нужно заменить значение 400 на нужную вам высоту в этой строчке кода:

if ( $(this).scrollTop() > 400 )

Если у вас что-то не получилось, смело пишите в комментариях! А если получилось — делитесь впечатлениями 🙂


Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку "Вверх" на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку "Вверх" - страница возвратится вверх, к главному меню (шапке сайта). Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов. Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top ;) Вспомнить&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.87 ( 6 голосов )
100

14 комментариев

  1. Все норм, спасибо! Вот только когда хочу просто текст сделать ошибку выявляет

    • Пожалуйста, рад что пригодилось 😉
      Для текста попробуйте вот так:

      add_action( 'wp_footer', 'back_to_top' );
      function back_to_top() {
      echo '<a id="totop" href="#">Вверх</a>';
      }
       
      add_action( 'wp_head', 'back_to_top_style' );
      function back_to_top_style() {
      echo '<style type="text/css">
      #totop {
      cursor:pointer;
      position: fixed;
      right: 30px;
      bottom: 30px;
      display: none;
      outline: none;
      }
      </style>';
      }
       
      add_action( 'wp_footer', 'back_to_top_script' );
      function back_to_top_script() {
      echo '<script type="text/javascript">
      jQuery(document).ready(function($){
      $(window).scroll(function () {
      if ( $(this).scrollTop() > 100 )
      $("#totop").fadeIn();
      else
      $("#totop").fadeOut();
      });
       
      $("#totop").click(function () {
      $("body,html").animate({ scrollTop: 0 }, 400 );
      return false;
      });
      });
      </script>';
      }
      

      Данный пример только что проверил и он работал.

  2. Отлично! Спасибо еще раз!

  3. Александр Алексеевич

    Вроде бы все работает, но кнопка вверх активна только в самом низу страницы, появляется она как и положенно по параметрам, но кликабельна только внизу страницы, а именно в подвале! В моей теме была стандартная кнопка такая, но она работал только когда опускаешься до подвала, я удалил код старой кнопки вверх из footer.php! Надеюсь Вы меня поняли и сможете мне помочь, чуть не забыл моя тема называется fruitful

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

    • Нужно просто заменить right на left, а bottom на top в CSS стилях. На всякий случай бросаю полный код:

      add_action( 'wp_head', 'back_to_top_style' );
      function back_to_top_style() {
      echo '<style type="text/css">
      #totop {
      cursor:pointer;
      position: fixed;
      left: 30px;
      top: 30px;
      display: none;
      outline: none;
      }
      </style>';
      }
       
      add_action( 'wp_footer', 'back_to_top_script' );
      function back_to_top_script() {
      echo '<script type="text/javascript">
      jQuery(document).ready(function($){
      $(window).scroll(function () {
      if ( $(this).scrollTop() > 400 )
      $("#totop").fadeIn();
      else
      $("#totop").fadeOut();
      });
       
      $("#totop").click(function () {
      $("body,html").animate({ scrollTop: 0 }, 800 );
      return false;
      });
      });
      </script>';
      }
      
  5. Александр спасибо! Все гениальное просто!

  6. Все получилось! Спасибо!!!

  7. Спасибо! Очень круто и легко!

Оставить комментарий

Ваш email не будет опубликован.

*