Home -> Уроки WordPress -> Как в WordPress создать кнопку «Вверх»

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

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

Здравствуйте! Эта статья научит вас создавать на сайте кнопку «Вверх». Такая кнопка помогает быстро вернуться с конца или середины страницы к началу. Если на вебресурсе преобладают длинные статьи, добавление кнопки «Вверх» показывает пользователям заботу о них и положительно сказывается на поведенческих факторах.

Многие вебмастера для создания кнопки «Вверх» устанавливают плагины (например, WP Scroll To Top или Scroll to Top). Это просто и быстро, но… Задача легко решается без дополнительных расширений, отправляющих лишние запросы к базе данных и замедляющих загрузку страницы. Я считаю, что, по возможности, нужно инсталлировать минимумом плагинов. Если можно решить проблему без использования плагинов, так и нужно делать. Давайте начнем!

Алгоритм создания кнопки «Вверх» без установки плагинов

  1. Откройте для редактирования файл function.php (расположен в корневом каталоге темы). Это можно сделать в текстовом редакторе через FTP-доступ, либо через редактор файлов шаблона (Админпанель –> Внешний вид –> Редактор –> Функции темы)Как в WordPress создать кнопку «Вверх»
  2. Скопируйте следующий код:
  3. Вставьте код в самый низ редактируемого файла function.php, перед закрывающим тегом ?>. Исправьте ссылку в строке 3 (вставьте ссылку на картинку с вашего сайта).
  4. Нажмите Обновить файл.Как в WordPress создать кнопку «Вверх»
  5. Откройте любую страницу сайта и любуйтесь появившейся кнопкой «Вверх»).

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

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

Чтобы поставить свое изображение кнопки, замените в 3 строке кода ссылку на нужную (для этого предварительно загрузите картинку кнопки на сайт).

В рассматриваемом примере кнопка «проявляется» на сайте после того, как пользователь прокрутит страницу на 400 пикселей вниз. Это расстояние легко настраивается. Смените цифру 400 на нужную в этой строке кода:

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

Пользуйтесь! Если что-то не получилось, обязательно напишите в комментариях – сделаем вместе. Получилось? Поделитесь впечатлениями и тонкостями настройки!

About WordPressMan

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

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