Как сделать заглушку на домен
Что такое страница-заглушка для сайта и как ее сделать?
Заглушка для сайта – это отдельная страница, которая остается в рабочем состоянии единственной, когда ведутся технические работы, возникают разного рода сбои сети, модернизация проекта, а также его перемещение на сторонний сервер. Эти страницы предоставляют пользователям сведения о том, что проект недоступен временно и по уважительной причине.
Что такое заглушка для сайта и зачем ее создавать?
Если вам когда-то приходилось переходить по ссылкам и попадать на страницы с надписью по типу «Сайт временно недоступен. Приносим свои извинения за неудобства, в скором времени проблема будет устранена», то это и есть та самая страница-заглушка.
На практике существует как минимум две отдельные причины, из-за которых уважающие себя сайты должны обзавестись страницей-заглушкой, которая будет работать бесперебойно:
Основные компоненты страницы-заглушки для сайта
Всегда можно сделать страницу заглушку более интересной, например, трансформировать ее в продающий одностраничный сайт, где будет размещена не только информация, но и инструменты создания клиентской базы. На этом этапе можно пользоваться всеми ключевыми особенностями разработки лендингов.
Рекомендуется прибегнуть к реализации следующих методов:
10 шаблонов адаптивных заглушек для сайта
Один из самых простых способов обзавестись хорошей заглушкой для сайта – воспользоваться готовым решением, то есть шаблоном. Они могут быть реализованы в разных стилях, каждый вебмастер выберет оптимальный для себя вариант. Ниже мы рассмотрим 10 актуальных шаблонов страниц-заглушек:
Coming Soon
Этот вариант придется по нраву всем ценителям современного дизайна и анимированных элементов. Произведена качественная SEO-оптимизация.
AfterWork
Шаблон, который будет уместно использовать для проектов, посвященных тематике программного обеспечения. Имеется хороший таймер, два отдельных стиля оформления. Интегрирована форма подписки. Дизайн яркий и привлекательный.
Heartbeat
Этот вариант подкупает не только своей адаптивностью, но и бесплатностью. Это относительно простой шаблон с броским фоновым изображением. Имеется таймер обратного отсчета. Шаблон будет отличным решением для использования перед запуском проекта.
Адаптивный, относительно простой и чистый шаблон страницы заглушки, который отличается поддержкой мобильных устройств. Тут можно разместить данные о компании, таймер и другие полезные элементы. С настройкой не возникнет никаких проблем. Хорошая совместимость с современными браузерами.
Moon Free
Еще один бесплатный шаблон страницы заглушки для сайта, где были применены HTML5 и CSS3. Имеет адаптивный слайдер и качественный таймер. Присутствует форма обратной связи.
New Year
Это качественный новогодний шаблон страницы-заглушки с хорошей музыкой. Имеется таймер обратного отсчета. Есть возможность указать сведения о компании. Присутствует форма обратной связи.
Layla
Этот шаблон станет отличным решением для всех ценителей элегантного внешнего вида. Есть форма для размещения видеоролика.
Sunrise
Стильное решение, проверенное тысячами вебмастеров. Дизайн выполнен в классическом стиле.
Incidentally
Адаптивный шаблон с таймером обратного отсчета и формой подписки.
Launch Soon
Стильный шаблон с изображением большого города ночью и анимированным эффектом Canvas.
Создание заглушки для сайта с помощью кода HTML
Заглушку для сайта можно сделать и самому. Никаких специальных инструментов для этого не потребуется — достаточно простого текстового редактора.
На большинстве хостингов есть свой онлайн-редактор для создания html-файлов, но чтобы не разбираться с его настройками и функциями, мы воспользуемся обычным «Блокнотом» из стандартного набора программ Windows.
По умолчанию пользователю при обращении к сайту показывается страница index.html, если иное не прописано в настройках хостинга. Эту страницу нам и нужно создать.
Запускаем программу «Блокнот» на компьютере и вставляем в неё следующий код:
Устанавливаем «заглушку на сайт» / регистрируем домен и хостинг
Тема статьи: Как установить заглушку на сайт, зарегистрировать домен и хостинг.
В предыдущей статье разобрались «с чего начать создание». Настало время действовать. Но прежде чем приступить, немного информации для общего понимания, что и для чего делается.
Интернет — это большая локальная сеть, с множеством подключенных к ней устройств (машин). У каждой машины есть свой IP адрес, на некоторых из них расположены сайты (хостинги / VPN сервера). Да вот только использовать его в качестве домена — это «вырвиглаз». На этот случай придумали DNS сервера. Схема получается следующая: 
При переходе на сайт, браузер делает обращение к ближайшему DNS серверу. Тот возвращает ему данные по какому IP адресу расположен этот домен. После чего браузер делает обращение к этому IP адресу и получает ответ в виде сайта. Разобрались.
Теперь регистрируем домен и хостинг.
В качестве регистратора доменов я использую 2domains.ru наверное потому, что первый год у них стоит 99 р. Для начинающего проекта это отлично.
Обновлено 20.07.2017: 2домаинс поднял цену до 149 р за регистрацию и 549 р за продление — зажрались. Перешел на sprinthost, регистрация и продление 178 р + 2 месяца бесплатного хостинга.
Обновлено 20.07.2017: хостинджер «задушил» бесплатный хостинг, ни тех поддержки, ни тикетов, ни FTP, одним словом — НИ-ЧЕ-ГО там не осталось. Перешел так же на бесплатный от спринтхост (внизу сайта строка Бесплатный хостинг), единственный минус там нужно раз в 30 дней заходить в CPanel или удалят.
Пока там все это дело «делегируется» занимаемся самой заглушкой. Шаблонов в интернете много. Я же буду разбирать на примере который мне нравится больше всего. Скачать можно тут: Заглушка
Для адаптации под свой сайт (домен). Вам нужно подкорректировать данные в файле index.html
Лучше всего это делать в Sublime Text 3 или Notepad++
Править необходимо содержание тега Тут
Дату запуска проекта, стандартный текст страницы (при желании). Разберетесь, ничего сложного. Собственно и все. Далее запаковываем все обратно в архив и заливаем на хостинг (обратите внимание на тип архива). 
После того, как обновятся DNS записи, ваш сайт станет доступен, и заглушка будет отображаться. Если этого не происходит пишите в комментариях. Будем разбираться.
Спасибо за внимание (=
Не забудьте добавить сайт в закладки ( Ctrl+D )
23 HTML шаблона адаптивных страниц-заглушек
Рано или поздно все сталкиваются с необходимостью переделывать свои сайты или создавать новые. В начале разработки многие игнорирую создание страниц-заглушек и оставляют просто пустую страницу, в лучшем случае. Конечно же так делать нельзя, пользователь зайдя на ваш сайт не может знать, что вы делаете для него новые плюшки или супер модный дизайн и нужно вернуться немного позже. Это влечет за собой потерю постоянных посетителей и негативно сказывается на репутации компании. Поэтому отличным способом рассказать вашим посетителям, что сайт не умер, а находится в процессе реконструкции или разработки, будет создание заглушки. На такой странице вы можете рассказать, что в данный момент делаете с сайтом, когда он будет готов и предложить пользователям оставить свой Email, чтобы оповестить их об открытии сайта. Все это хорошо, но как всегда на разработку дизайна, верстку еще одной дополнительной страницы нет ни средств, ни времени. В такой ситуации можно воспользоваться уже готовыми решениями — шаблонами страниц-заглушек. В данной статье мы подготовили для вас подборку шаблонов которые могут быть использованы как в период технического обслуживания, так и перед запуском вашего сайта. И так, к вашему внимаю шаблоны для заглушек сделанные по последним тенденциям в веб-дизайне.
1. Coming Soon
Прекрасная анимированная страница-заглушка с броским дизайном. SEO оптимизированна и интегрирована с MailChimp.
2. Heartbeat
Бесплатный, адаптивный и простой шаблон с полноэкранным фоновым изображением и jQuery таймером обратного отсчета.
3. Moon Free HTML5 Coming Soon Website Template
Чистый, адаптивный, бесплатный шаблон построенный на bootstrap, HTML5 и CSS3. Содержит адаптивный фоновый слайдер, jQuery таймером обратного отсчета, навигацию и форму обратной связи.
4. Layla
Адаптивный шаблон с элегантным внешним видом и полноэкранным фоновым видео. Создан на основе Bootstrap 3 с использованием HTML5, CSS3 и JQuery
5. New Year – Responsive Melody HTML Template
Новый год — адаптивный HTML шаблон с фоновой музыкой. Присутствует таймер обратного отсчета и модальное окно в котором представлена информация о компании и форма обратной связи.
6. Sunrise
7. Kite
Полнофункциональный шаблон с множеством функций и вариантов реализации. Подойдет как для творческого коллектива так и для компании. Имеет 4 варианта фона, 8 цветовых схем и параллакс эффект.
8. Zoon
Полностью адаптивный, простой и чистый шаблон страницы-заглушки с поддержкой мобильных устройств. В шаблоне есть таймер обратного отсчета, Google карта и раздел о компании. Легко настраиваемый и совместим с большинством современных браузеров.
9. UX – Free Responsive Template
Очень похож на шаблон “New Year”. Отличается стилевым оформлением и отсутствием фоновой музыки, интегрирован с Mailchimp.
10. AfterWork
Одностраничный HTML Bootstrap шаблон, идеально подходит для заглушки сайтов программного обеспечения. Из особенностей: таймер обратного отсчета, адаптивный, два стиля оформления (параллакс и слайдер), Google Maps, интегрирован с Twitter, форма подписки.
11. Magnitude
Контент равняется по центру как по горизонтали так и по вертикали.
Cтраница-заглушка на сайт WordPress
Всем привет!
В WordPress закрыть сайт на обслуживание просто, делается это с помощью одного из специализированных плагинов или вручную. В таком случае единственной доступной для посетителей страницей остается заглушка на сайт с информацией о ведущихся технических работах и о том, когда проект будет вновь открыт для посещения.
Зачем нужна заглушка на сайт
Применение в сайтостроении «заглушек» с важной для посетителей информацией – явление распространенное. Страница-заглушка необходима web-ресурсу по следующим причинам:
Какой должна быть заглушка для сайта
Распространенный вариант заглушки для сайта – картинки и текст, сообщающие посетителю о старте нового проекта или содержащие извинения за неудобства и сообщение об устранении проблем в работе действующего сайта в самое ближайшее время.
Как и в случае со страницей 404, которая важна для любого проекта и к созданию которой многие вебмастера подходят с юмором и фантазией, сделать более привлекательной для посетителя можно и обычную страницу-заглушку.
Проявив немного креативности и уделив внимание деталям, нетрудно создать страницу, помогающую удерживать посетителя и собирать клиентскую базу. Простой сайт-заглушка с элементами лендннг пейдж в коммерческих нишах предпочтительнее незатейливой картинки со стандартным текстом.
При создании страниц, которые посетитель видит в процессе разработки, реконструкции сайта и во время технических работ, рекомендуется использовать определенный набор компонентов, уместных в каждом конкретном случае: логотип сайта (организации), информационный блок с таймером обратного отсчета, контактные данные, предложение подписаться на рассылку. При этом весь содержащийся на такой странице контент должен ограничиваться одним экраном, не быть слишком скудным и не содержать излишеств.
Установить заглушку на сайт и реализовать перечисленные выше компоненты можно при помощи специально предназначенных для этой цели бесплатных плагинов из репозитория WordPress, найти которые можно из интерфейса админки сайта по ключевому слову Maintenance. Об одном из таких плагинов и пойдет речь ниже.
WordPress-плагин WP Maintenance Mode
Аккуратное и красивое решение можно получить с помощью бесплатного мощного плагина, который позволяет быстро создать шаблон заглушки для сайта на русском языке, оформить его в соответствии с задачей и собственными предпочтениями, наполнить требуемой информацией, добавить необходимые компоненты.
После стандартного процесса установки в меню Настройки административной консоли сайта появляется пункт с названием плагина. Интерфейс страницы настроек содержит несколько разделов, три основных из которых полностью русифицированы.
Вкладка Общие содержит пункт включения/отключения показа заглушки на сайте. Здесь же можно прописать, каким категориям пользователей панель управления сайта и сам сайт должны быть доступны в любое время. Можно, при желании, оставить посетителям доступ к выбранным страницам (новостным лентам, архивам и т.д.), список которых указывается в специальном поле, или же настроить доступ по IP. Есть опции для включения/запрета индексации контента в то время, когда сайт WordPress находится на техническом обслуживании (Индексация роботами и Метатэг для роботов).
Во вкладке Дизайн прописывается тайтл заглушки и ее содержимое. Можно выбрать цвет фона страницы, цвета заголовка и текста в информационном блоке. Также в качестве фона разрешается использовать загруженное фоновое изображение.
Форматирование текста производится в окне редактора со стандартным набором инструментов (толщина и наклон шрифта, маркированный и нумерованный списки, выравнивание относительно страницы, ссылки). Для продвинутых пользователей предусмотрен html-режим редактирования, дающий больше возможностей в плане визуального оформления текста.
Вкладка Модули отвечает за включение и настройку блоков (компонентов), о которых шла речь выше: таймера отсчета, формы подписки, кнопок социальных сетей. Для таймера обратного отсчета задается дата начала события и цвет цифр. Настройки всех компонентов интуитивно понятны. Есть возможность подключения к странице кода отслеживания Google Analytics.
Во вкладках Manage Bot и GDPR, пока не переведенных на русский язык, при необходимости, можно включить простой чат с ботом (содержимое полей с репликами бота редактируется) и настройки приватности (установка ссылки на страницу политики конфиденциальности и чекбокса для ее принятия пользователем). Оба блока по умолчанию отключены.
Создание заглушки без использования плагинов
Заглушка на сайт в html делается достаточно просто, для этого необходимо иметь текстовый редактор с подсветкой кода и базовое понимание языка гипертекстовой разметки.
На первом этапе в корневой директории сайта на хостинге создается файл .maintenance со следующим кодом:
Затем в папку wp-content сайта добавляется, собственно, сама страница-заглушка, которой присваивается имя maintenance.php. Внутри этого текстового файла могут находиться PHP инструкции, например:
Также в файле может содержаться html-разметка с любыми необходимыми элементами. Для администратора сайта, разбирающегося в html-коде — это прекрасная возможность сделать страницу уникальной.
Существенно упростить работу по созданию страницы заглушки можно, задав в поисковой системе запрос скачать заглушку для сайта html, результаты выдачи по которому предоставят доступ к десяткам красивых адаптивных шаблонов под разные ниши. Останется лишь отредактировать их, заменив информацию для посетителей на собственную.
Заключение
Использование заглушки для сайта целесообразно и оправдано не только при старте нового проекта или реконструкции действующего. Подобный функционал на сайте WordPress будет полезен при проведении любых технических работ, связанных с изменениями в дизайне проекта или его коде – не важно, производятся они рано утром или глубокой ночью. Посетитель должен быть защищен от лицезрения ошибок и возможных сбоев в работе. WordPress предоставляет для этого бесплатные мощные инструменты – специальные плагины из собственного репозитория. При желании эту задачу можно решить путем создания собственной html-страницы заглушки или с помощью готовых, имеющихся в изобилии, шаблонов.
Надеюсь, данная статья была полезной для вас. Делитесь своим опытом по созданию страниц/сайтов заглушек в комментариях.
Создаём заглушку «технические работы» на сайте
Для популярных движков существуют расширения, которые помогают решить эту проблему. Например, у WordPress есть популярный плагин WP-Secure, который помимо кучи функций по защите и архивированию позволяет и выставить заглушку «технические работы».
Однако я хочу поделиться с вами простым и гибким способом, как можно сделать то же самое без всяких дополнительных плагинов и настроек. Этот метод неоднократно применялся на практике и подходит для сайтов на любых CMS и любых языках программирования. Ничего авторского в нём нет, технология изначально была нагуглена и модернизирована в процессе работы. А именно – по просьбе одного из моих постоянных клиентов, который хотел закрыть интернет-магазин на время внесения изменений и в то же время иметь возможность самому смотреть, что же там происходит.
Итак, всё делается в два этапа.
Этап 1. Создаём файл-заглушку
Назовём его, например, reconstruction.html. Выглядеть он может примерно так.
Картинку я добавил вот эту, никакой смысловой нагрузки она не несёт и вставлена просто для красоты.
Просьба не придираться к дизайну, чукча не дизайнер… он здесь не главное. Конечно, если вы хотите закрыть сайт на долгое время, то можно придумать что-нибудь посимпатичнее. Пятая строчка вписана для того, чтобы заглушку не индексировали поисковики.
Небольшой лайфхак для информационных ресурсов – стоит указать ссылки на свои соцсети, где вы будете публиковать новости, пока сайт остановлен на реконструкцию. Для этого допишите одну строку.
Этап 2. Вносим изменения в htaccess
Давайте разбираться, что делает этот код. Первая строка подключает модуль переадресации на сервере, последняя завершает список инструкций для модуля. Внутри мы видим правила преобразования. Они записываются в следующем виде:
RewriteCond [СТРОКА ДЛЯ СРАВНЕНИЯ] [УСЛОВИЕ] [ФЛАГИ]
RewriteCond [СТРОКА ДЛЯ СРАВНЕНИЯ] [УСЛОВИЕ] [ФЛАГИ]
RewriteRule [ШАБЛОН] [СТРОКА ПОДСТАНОВКИ] [ФЛАГИ]
Строки RewriteCond — задают условия для срабатывания следующего за ними правила RewriteRule.
Во второй и пятой строках мы прописали адрес, на который переадресуем пользователя. Помимо внутренней страницы это может быть и совершенно другой ресурс, хотя, конечно, делать так не вполне корректно.
В третьей и четвёртой строках – указываем IP-адреса, для которых будут исключения. Вписывайте столько строчек, сколько адресов вам требуется. В данном случае сайт будет виден с адресов 176.113.11.22 и 176.113.11.23. Можно указать только одну строку или столько, сколько вам потребуется. Проверить, что ваш сайт не виден со сторонних IP-адресов можно, например, с помощью анонимайзера. Пожалуй, единственный минус этого способа – если у вас или у вашего заказчика установлен динамический IP, список исключений может стать слишком длинным.