Редирект через определенное время

Редирект через определенное время | n-wp.ru

Я решил закрыть один свой сайт. А чтобы не ставить посетителей в недоумение пустым экраном и показать, куда нужно переходить, решил сделать автоматический редирект с закрытого сайта на другой. Причем редирект не моментальный, а через определенное время, в течение которого посетителям показывается информационное сообщение о том, что этот сайт закрыт и они будут перенаправлены на другой сайт. Посмотрев бесплатные плагины в репозитарии WordPress, я не нашел ни одного, который бы отвечал моим требованиям. Поэтому решил самостоятельно сделать код редиректа. И вот что у меня получилось:

Редирект через определенное время

Делюсь с вами кодом этого редиректа — вдруг он нужен будет еще кому-нибудь.

Я решил создать полупрозрачный слой, который бы отображался поверх основного содержимого любой страницы сайта, с которого осуществляется редирект. Этот слой будет препятствовать доступу к контенту, но в то же время посетитель увидит, что он правильно попал на сайт. Информационное сообщение должно все время располагаться по центру экрана, в каком бы разрешении вы его не открыли. Для этого я внедрил javascript:

//выравнивание блока с классом white по центру экрана

 $(document).ready(function(){ 
 $(window).resize(function(){
 $('.white').css({
 position:'absolute',
 left: ($(window).width() - $('.white').outerWidth())/2,
 top: ($(window).height() - $('.white').outerHeight())/2
 });
 });
 $(window).resize();
});

Этот скрипт располагает блок с классом white всегда по центру окна.

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

//показатель прогресса времени — 30 секунд

$(function() {
	$(".meter > span").each(function() {
		$(this)
			.data("origWidth", $(this).width())
			.width(0)
			.animate({
				width: $(this).data("origWidth")
			}, 30000);
		});
	});

30000 — это 30 секунд времени, в течение которых прогресс-бар двигается по отведенной ему длине. Если вы измените ширину окна браузера, то скрипт пересчитает скорость, замедлив или ускорив движение.

После этого был добавлен стиль для прогресс-бара. Стиль сложный, со всякими тенями-градиентами-анимациями, но вы можете его упростиль. Сразу скажу, что этот стиль работает только в браузерах, поддерживающих CSS3 и HTML5 (все современные браузеры).

//cтиль показателя времени
.meter { 
height: 4px;
position: relative;
margin: 100px 0 20px 0;
background: #202020;
padding: 0;
}
.meter > span {
display: block;
height: 100%;
background-color: rgb(229,20,0);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow: 
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: 
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: 
-webkit-gradient(linear, 0 0, 100% 100%, 
color-stop(.25, rgba(255, 255, 255, .2)), 
color-stop(.25, transparent), color-stop(.5, transparent), 
color-stop(.5, rgba(255, 255, 255, .2)), 
color-stop(.75, rgba(255, 255, 255, .2)), 
color-stop(.75, transparent), to(transparent)
);
background-image: 
-moz-linear-gradient(
-45deg, 
rgba(255, 255, 255, .2) 25%, 
transparent 25%, 
transparent 50%, 
rgba(255, 255, 255, .2) 50%, 
rgba(255, 255, 255, .2) 75%, 
transparent 75%, 
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}

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

//cтиль сообщения		
.redirect-info-div {
position:fixed;z-index:1000;width:100%;height:100%;top:0;left:0;text-align:center;vertical-align:middle;color:#aaaaaa;font-size:32px;background:rgba(16,16,16,0.90);font-family: 'Segoe UI Light', 'Segoe UI', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:100;line-height:1.2em;
}
.white {
display;block;width:62%;text-align:center;margin:auto 0;padding:0;text-align:center;
}
.white-p1 {
font-size:64px;
}
.white-p1-site {
color:rgb(229,20,0);
}
.white-p2 {
font-size:24px;
}
.meter-width-span {
width: 100%;
}			

Ну и, собственно, сам код информационного блока, отображаемого на сайте с редиректом:

//сообщение и ссылки на экране

Сайт tiaurus.ru закрыт

Через 30 секунд вы будете перенаправлены на сайт tiaurus.name.

Если этого не произошло, то нажмите сюда.

И код java-скрипта, создающего автоматический редирект через определенное время:

//редирект через 30 секунд
window.setTimeout("document.location.href='http://tiaurus.name'", 30000);

В этой части кода указан адрес, на которой осуществляется редирект, и время (30000 — это 30 секунд).

Для того, чтобы редирект осуществлялся с любой страницы сайта, я поместил все эти части кода последовательно в файл footer.php используемой темы оформления непосредственно перед закрытием тега [codei][].

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

1 Kомментарий

  1. А можно сделать редирект в определенное время? Есть сервер – в европе. С сайта блок А берется из России. Например, в 10-15 утра на час будет сбой электричества (радоты на подстанции) сколько продлятся не известно, сервер запрограммировать на то, чтобы с 10-00 до 12-00 перебрасывал блок А на запасную станицу (сервер дополнительный Австралия). А после 12-00, опять по старому адресу.

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

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


*