Устанавливаем кнопки быстрого перемещения «Вверх-Вниз» в тему WordPress без установки плагина

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

Делаем популярные и необходимые кнопки «Вверх-Вниз» в своей теме WordPress без установки плагинов. Кнопки особенно полезны для мобильных пользователей интернета, для которых такая примочка даёт заметное удобство в навигации по сайтам.

Итак, делаем всё за 4 простых шага.
Важно! Для нормальной работы скрипта требуется подключенная библиотека jQuery!

1. Помещаем в каталог /js/ своей темы файл скрипта (scroll-top.js) со следующим содержанием:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

(function(){
	var special = jQuery.event.special,
		uid1 = 'D' + (+new Date()),
		uid2 = 'D' + (+new Date() + 1);
	special.scrollstart = {
		setup: function() {
			var timer,
				handler =  function(evt) {
					var _self = this,
						_args = arguments;
					if (timer) {
						clearTimeout(timer);
					} else {
						evt.type = 'scrollstart';
						jQuery.event.handle.apply(_self, _args);
					}
					timer = setTimeout( function(){
						timer = null;
					}, special.scrollstop.latency);
				};
			jQuery(this).bind('scroll', handler).data(uid1, handler);
		},
		teardown: function(){
			jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
		}
	};
	special.scrollstop = {
		latency: 300,
		setup: function() {
			var timer,
					handler = function(evt) {
					var _self = this,
						_args = arguments;
					if (timer) {
						clearTimeout(timer);
					}
					timer = setTimeout( function(){
						timer = null;
						evt.type = 'scrollstop';
						jQuery.event.handle.apply(_self, _args);
					}, special.scrollstop.latency);
				};
			jQuery(this).bind('scroll', handler).data(uid2, handler);
		},
		teardown: function() {
			jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
		}
	};
})();
$(function(){
	var $elem = $('#skeleton');
		$('#navupbt').fadeIn('slow');
		$('#navdnbt').fadeIn('slow');
		$(window).bind('scrollstart', function(){
			$('#navupbt,#navdnbt').stop().animate({'opacity':'0.1'});
		});
		$(window).bind('scrollstop', function(){
			$('#navupbt,#navdnbt').stop().animate({'opacity':'0.5'});
		});
		$('#navdnbt').click(
			function (e) {
				$('html, body').animate({scrollTop: $elem.height()}, 600);
			}
		);
		$('#navupbt').click(
			function (e) {
				$('html, body').animate({scrollTop: '0px'}, 600);
		}
		);
});

Полный путь должен выглядеть примерно так:
http://www.ДОМЕН.ru/wp-content/themes/ИМЯ_ТЕКУЩЕЙ_ТЕМЫ/js/scroll-top.js

2. Закидываем в каталог /img/ текущей темы две картинки (nav-dnbt.png) и (nav-upbt.png).
Полный путь к закинутым картинкам должен выглядеть примерно так:
http://www.ДОМЕН.ru/wp-content/themes/ИМЯ_ТЕКУЩЕЙ_ТЕМЫ/img/картинки.png.
Картинки с текущими настройками должны иметь разрешение 40х40px в формате png.

3. Вставляем в файл (footer.php) текущей темы непосредственно перед закрывающим тегом BODY следующие строки кода:

1
2
3
4
5

<!-----------SCROLLTOP----------->
<div style="display:none;" class="nav-upbt" id="navupbt"></div>
<div style="display:none;" class="nav-dnbt" id="navdnbt"></div>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/scroll-top.js"></script>
<!---e-n-d---SCROLLTOP---e-n-d--->

Сохраняем и обновляем (footer.php).
Первые две строки кода выводят картинки кнопок «Вверх-Вниз», которые уже загрузили в директорию /img/.
Далее подключается скрипт (scroll-top.js), который уже был загружен в директорию /js/.

4. Задаём стили отображения для картинок кнопок.
Открываем в корне текущей темы файл (style.css) и вставляем в него в любом месте следующие строки кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/* ----- SCROLLTOP ----- */
.nav-upbt {
	position: fixed;
	width: 40px;
	height: 40px;
	bottom: 96px;
	right: 10%;
	padding: 0;
	background: transparent url(img/nav-upbt.png) no-repeat;
	opacity: 0.5;
	white-space: nowrap;
	border: 0 none;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	cursor: pointer;
	transition: all 200ms;
}
.nav-upbt:hover {
	bottom: 98px;
	opacity: 1 !important;
}
.nav-dnbt {
	position: fixed;
	width: 40px;
	height: 40px;
	bottom: 52px;
	right: 10%;
	padding: 0;
	background: transparent url(img/nav-dnbt.png) no-repeat;
	opacity: 0.5;
	white-space: nowrap;
	border: 0 none;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	cursor: pointer;
	transition: all 200ms;
}
.nav-dnbt:hover {
	bottom: 50px;
	opacity: 1 !important;
}

Сохраняем и обновляем (style.css).

На этом всё! Эти кнопки благополучно работают на этом сайте!
Для подгонки визуального вывода кнопок под любую другую тему необходимо править-подгонять стили (style.css).

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

Ваш электронный адрес не будет опубликован.

Вы можете использовать эти HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>