Как сделать Jquery плавающую кнопку наверх для Wordpress сайта без плагина?

17 февраля, 2015 Максим Метелев 5182 просмотров Комментариев нет

Всем привет дорогие друзья! Сегодня расскажу и покажу на примере как сделать кнопку наверх для сайта на WordPress, которую мы будем создавать с помощью библиотеки Jquery без использования сторонних плагинов, которые будут только утяжелять сайт, не давай ему быстро загружаться.

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

Мы, конечно, можем проскроллить мышью до самого верха, но ведь это реально неудобно. Сейчас мы создадим с вами такую кнопку наверх на Jquery с плавающим эффектом прокрутки, чтобы избежать резкого скачка и не травмировать глаз нашего пользователя.

Рекомендую также почитать еще один мануал — как добавить CSS эффект для кнопки, фона, текста

Создание ссылки в футере WordPress

Во-первых, мы должны создать ссылку в футере (подвале сайта). Мы можем добавить ее и в заголовок, но лучше будет, чтобы она была именно в нижней части сайта, чтобы не замедлять работу сайта, ведь самым первым грузится верхняя часть и будет лучше, если она будет легкой.

Есть специальный хук, который мы используем или wp_head или wp_footer . Добавьте код ниже в шаблон functions.php:

add_action( 'wp_footer', 'back_to_top' );
function back_to_top() {
   echo '<a id="totop" href="#">Back to Top</a>';
}

add_action( 'wp_footer', 'back_to_top' );

function back_to_top() {

echo '<a id="totop" href="#">Back to Top</a>';

}

Анкор Back to Top заменить на «Наверх» или «В начало»

Сейчас мы с вами добавили ссылку Наверх и нам нужно ее оформить стилем в CSS.

Добавление стиля для ссылки

По прежнему используем шаблон functions.php. Теперь нам нужно добавить нашу кнопку наверх в нижную правую часть футера. Мы поместим стиль в header WordPress, используя функцию wp_head :

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

add_action( 'wp_head', 'back_to_top_style' );

function back_to_top_style() {

echo '<style type="text/css">

#totop {

position: fixed;

right: 30px;

bottom: 30px;

display: none;

outline: none;

}

</style>';

}

Добавление плавающего эффекта прокрутки кнопки наверх

Завершающим этапом будет добавление плавной плавающей прокрутки в начало сайта и чтобы избежать резких прыжков мы будем использовать библиотеку Jquery, которую разместим в хедере.

Для этого нужно подключиться к библиотеке Jquery.

Как добавить библиотеку Jquery?

Для этого вам нужно открыть шаблон header.php и вставить вот этот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Вот в это место между тегами <head> :

Вставка библиотеки Jquery для кнопки наверх

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

	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>';
	}

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>';

}

Вот так все будет выглядеть в браузере:

Кнопка наверх jquery без плагина

Добавление картинки кнопки вместо текста

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

В качестве изображения я использовал вот такой вариант:

Теперь идем в медиафайлы и добавим нашу картинку в общую библиотеку изображений:

Теперь скопируем адрес ссылки, нажав на кнопку «Изменить»

Копируем адрес ссылки кнопки наверх

И снова идем в шаблон функции WordPress и вносим вот такие изменения в стиле:

insert-code-image

Переходим в браузер, обновляем страницу и смотрим, что же у нас получилось в итоге:

На этом урок завершен я думаю, что он оказался для вас интересным и полезным и вы чему-то научились. А сейчас ниже предлагаю посмотреть видео шпаргалку. Просто поделитесь ссылкой и смотрите.До новых встреч!
[sociallocker id=»3259″][/sociallocker]