Домой / 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.37 ( 16 голосов )
100

41 комментарий

  1. Аватар

    Норм совет, взял на вооружение

  2. Аватар

    Спасибо за статью! только у меня не пойму почему не отображается картинка, но сама кнопка работает.
    Путь проверяла — правильный

  3. Аватар

    Видимо, нужно обязательно помещать картинку в папку uploads. А я помещала в другую (путь прописывала соответствующий), но нет…. А когда поместила в uploads и перепрописала путь, то всё ОК! Спасибо

  4. Аватар

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

    • Аватар

      причём, если вставлять точно весь текст, то сайт вообще перестаёт открываться, сообщает, что ошибка.

  5. Аватар

    Кнопка почему-то срабатывает только с подвала, если выше — не работает
    https://pokleyka.net/odessa/

  6. Аватар
    Ангелина

    После вставки кода вылезла ошибка при сохранении. Код удалила, обновила. И теперь под подвалом вылезло вот это существо.
    https://prnt.sc/qonamu
    Как его убрать?))

  7. Аватар

    Всё просто и легко, спасибо.

  8. Аватар
    Ядренбатон

    а как зафиксировать кнопку в конкретном месте сайта? очень надо поставить в текст….

  9. Аватар

    Я воспользовалась вашей статьёй года 2 назад, спасибо! Но недавно обратила внимание, что картинка кнопки Вверх не отображается, когда это произошло не знаю. Все остальные картинки — норм. Пробовала перемещать картинку в другие папки, меняла картинку, название…. ничего не помогло, но и без отсутствия картинки кнопка, если на неё нажать работает. Если меняю изображение на слово «ВВЕРХ», слово отображается. В чём может быть причина???

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

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

*