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

Я решил закрыть один свой сайт. А чтобы не ставить посетителей в недоумение пустым экраном и показать, куда нужно переходить, решил сделать автоматический редирект с закрытого сайта на другой. Причем редирект не моментальный, а через определенное время, в течение которого посетителям показывается информационное сообщение о том, что этот сайт закрыт и они будут перенаправлены на другой сайт. Посмотрев бесплатные плагины в репозитарии 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%;
        }			

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

//сообщение и ссылки на экране
 <div class="redirect-info-div">
    <div class="white">
        <p class="white-p1">Сайт <span class="white-p1-site">tiaurus.ru</span> закрыт</p>
	    <p class="white-p2">Через 30 секунд вы будете перенаправлены на сайт tiaurus.name.</p>
	    <p class="white-p2">Если этого не произошло, то нажмите сюда.</p>
		<p>
		    <div class="meter">
                <span class="meter-width-span"></span>
            </div>
		</p>
	</div>	
</div>

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

//редирект через 30 секунд

       window.setTimeout("document.location.href='http://tiaurus.name'", 30000);

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

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