Я решил закрыть один свой сайт. А чтобы не ставить посетителей в недоумение пустым экраном и показать, куда нужно переходить, решил сделать автоматический редирект с закрытого сайта на другой. Причем редирект не моментальный, а через определенное время, в течение которого посетителям показывается информационное сообщение о том, что этот сайт закрыт и они будут перенаправлены на другой сайт. Посмотрев бесплатные плагины в репозитарии 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][].
А можно сделать редирект в определенное время? Есть сервер – в европе. С сайта блок А берется из России. Например, в 10-15 утра на час будет сбой электричества (радоты на подстанции) сколько продлятся не известно, сервер запрограммировать на то, чтобы с 10-00 до 12-00 перебрасывал блок А на запасную станицу (сервер дополнительный Австралия). А после 12-00, опять по старому адресу.