Начало > Помощен център > Апликации > WordPress > WordPress - Създаване на страници 'Coming soon' и 'Maintenance'

WordPress - Създаване на страници 'Coming soon' и 'Maintenance'

Помощен център

WordPress - Създаване на страници 'Coming soon' и 'Maintenance'

Всеки интернет потребител е срещал уеб страници с подобно съдържание: Coming Soon (Очаквайте скоро), Under Construction (Обновяване) или Maintenance Mode (Профилактика). Накратко, това са служебни страници, които информират посетителя, че сайта временно е недостъпен и дават допълнителна информация относно времето за възстановяване на нормалната работа на сайта.

Обикновено тези страници не зареждат секциите за навигиране (меню с линкове и footer). Тяхната цел е да покаже причината, поради която потребителя не открива сайта. За този тип страници много разпространени дизайн елементи са таймери с обратно броене до пускането на сайта и имейл формуляри за събиране на имейл адреси, на които ще се изпрати съобщение при пускането на сайта.

Има ли разлика между режимите Coming Soon и Maintenance?

Обикновено страницата Coming Soon се програмира да връща HTTP статус 200, което позволява сайта да бъде индексиран от търсещите машини. Всъщност, ползата от индексиране на Coming Soon страница не е голяма и по-скоро инвестирането в плъгин за създаването на този тип страница е неоправдано. Естествено след активиране на сайта, индексираната Coming Soon страница ще връща грешка 404 Not Found защото вече не е активна. Тези страници не са предназначени да бъдат онлайн продължително време.

В режим Maintenance страницата връща статус код 503 Service Unavailable, който информира търсещите машини да направят ново индексиране по-късно.

Служебните страници от типа Coming Soon и Maintenance Mode имат място в екосистемата на всеки сайт, за да предоставят кратка, ясна информация за текущото състояние на сайта и да отговорят на въпроса: "Кога сайта ще бъде достъпен за посетители?".

В статията ще ви покажем няколко начина, по които може да създадем собствена страница Coming Soon:

  • създаване на страница Coming Soon с WordPress плъгин;
  • създаване на страница Coming Soon с Elementor;
  • активиране на страница Coming Soon с добавяне на код в functions.php;
  • активиране на страница Coming Soon с добавяне на код в .htaccess;

Създаване на страница Coming Soon с WordPress плъгин

В официалното хранилище на WordPress за плъгини може да се открият стотици предложения за създаване на страници Coming Soon и Maintenance.

Един от най-използваните плъгини е WP Maintenance Mode. Той е безплатен, лесен за настройване и се ползва с доверието на над 700 000 активни потребители.

Как да настроим плъгина? От администрацията на WordPress се инсталира плъгина по стандартния за WordPress начин ( Разширения > Добавяне на още, в полето за търсене се въвежда WP Maintenance Mode, проверява се разработчиците да се на Designmodo и с бутона Инсталиране сега стартираме инсталацията. Като последна стъпка натискам бутона Активиране):

Инсталиране на плъгин WP Maintenance Mode

След като плъгинът се регистрира в панела с разширения, получавате и достъп до настройките през линка Settings:

Достъп до настройките Settings на плъгина

Главното меню също ни предоставя достъп до управлението на плъгина ( Настройки > WP Maintenance Mode):

Достъп от главното меню

Управлението на плъгина е разделено между няколко раздела като в следващите редове ще разгледаме всеки един от тях:

Раздели за управление на плъгина

General

В разделът General ще откриете достъп до следните настройки:

  • Status - активирано / деактивирано;
  • Bypass for Search Bots - да се разреши ли на Search Bots да заобиколи режима на профилактика?
  • Backend Role - коя потребителска роля е разрешена за достъп до администрацията на сайта? (Администраторите винаги имат достъп)
  • Frontend Role - коя потребителска роля е разрешена за достъп до публичната част на сайта? (Администраторите винаги имат достъп)
  • Robots Meta Tag - менюто предоставя опция за индексиране (index, follow) или да не се индексира (noindex, nofollow) страницата от роботите на търсещите машини.
  • Redirection - опция за пренасочване на потребители при логване;
  • Exclude - изключване на емисии, страници, архиви или IP адреси от режим на профилактика като добавяме по един slug/IP адрес на ред.
  • Notice - избираме дали да виждаме съобщение когато е активиран режимът на профилактика?
  • Dashboard link - от тук може да се добави линк към администрацията на сайта на страницата за профилактика?

Важно е да активира плъгина и да запази настройката чрез бутона Save changes. Ако бъде променена настройката без запазване на настройката чрез бутона Save changes и се премине към друг раздел, плъгина ще си остане в неактивен статус.

Design

  • Title (HTML tag) - въвеждане на заглавие на HTML страницата, което ще се визуализира в раздела на браузъра;
  • Heading - въвеждане заглавие, което ще се визуализира в уеб страницата;
  • Text - въвеждане текста на съобщението;
  • Background - избиране в менюто тип на фона между опциите цвят (Custom color), изображение от Media library (Uploaded background) и избиране на изображение от плъгина (Predefined background).
  • Upload background - избиране изображение от Media library с препоръчителни размери 1920x1280 пиксела.

Modules

Раздел Modules дава възможност за управление на различни секции, които може да се добавят на страницата.

Countdown - приложение за обратно броене.

  • Show countdown? - активиране / деактивиране брояча;
  • Start date - въвеждане текущите дата и час;
  • Countdown (remaining time) - посочване времето, което остава до възстановяване на страницата;
  • Color - избор на цвят на цифрите;

Настройки в секция Countdown

Subscribe - формуляр за регистриране.

  • Show subscribe? - активиране / деактивиране на формулярa;
  • Text - въвеждане етикет, който се зарежда над формуляра;
  • Stat - плъгинът създава списък с абонатите, който може да изтеглим като файл в CSV формат. Изтриване съдържанието на списъка като кликнем бутона Empty subscribers list.

Настройки в секция Subscribe

Social Networks - връзки към социални медии.

  • Show social networks? - активиране / деактивиране връзките към акаунти в социалните медии;
  • Links target? - определяне дали страниците да се отварят в текущия (Same page) или в нов прозорец (New page);
  • в полетата се въвеждат URL адресите на акаунтите, към които да има връзка - Github, Dribbble, Twitter, Facebook, Instagram, Pinterest, Google+, Linkedin;

Настройки в секция Social Networks

Contact - показва бутон за отваряне на формуляр за контакт.

  • Show contact? - активиране / деактивиране формулярa за контакт;
  • Email address - въвеждане имейл адрес, на който се получават изпратените съобщения;
  • Effects - дизайн ефекти на бутона;

Настройки в секция Contact

При кликане на бутона се зарежда формуляр, в който посетителите въвеждат име, имейл адрес и съобщение:

Формуляр за контакт

При изпращане на съобщение, в контактната поща получавате писмо с тема Message via contact и изпратеното съдържание:

Съдържание на изпратеното имейл съобщение

Google Analytics - настройки за проследяване на трафика към страницата:

Настройки в секция Google Analytics

Manage Bot

WP Maintenance Mode ни дава възможност да се ползва рядко срещана оригинална възможност за кратка интерактивна комуникация с посетителите, при която те може да оставят свой имейл адрес за бъдещ контакт.

  • Status - активиране / деактивиране приложението Manage Bot;
  • Bot Name - избираме име на нашия робот;
  • Upload avatar - избираме аватар за нашия робот;

Настройки в раздел Manage Bot

Следващите полета съдържат разговора между робота и посетителя. Ако желаете разговора да бъде по-кратък може да пропуснете дадено поле.

На страницата, интерактивната чат сесия се зарежда вместо информацията, която въвеждате в раздел Design:

Изглед на чат сесия

Ето и превод на оригиналния текст, който можете да промените според нуждите на сайта:

Хей! Моето име е {bot_name}, собственик съм на този уебсайт и бих искал да бъда ваш помощник.

Имам само няколко въпроса.

Как се казваш?

Въведете името си тук ...

Приятно ми е да се запознаем тук, {visitor_name}!

Както виждаш, нашият уебсайт ще бъде стартиран много скоро.

Знам, развълнуван си да го видиш, но имаме нужда от още няколко дни, за да го завършим.

Желаеш ли да си от първите посетители?

Кажи ми още | Достатъчно

Добре! Остави ми имейла си и аз ще ти изпратя съобщение, когато сме готови.

Въведете имейла си тук ...

Съжалявам да чуя това, {visitor_name} :( Ще се видим следващия път ...

Разбрах! Благодаря и скоро ще се видим тук!

Приятен ден!

За да запазите съдържанието на чат сесията кликнете бутона Save settings. При желание да възстановите оригиналното съдържание (на английски език) кликнете на бутона Reset settings.

GDPR

GDPR - настройки за обработване на лични данни и връзка към страницата с политика за поверителност.

  • Status - активиране / деактивиране политика на поверителност (препоръчаме да се активира, тъй като на страницата обработваме лични данни на посетители);
  • Link name - етикет на връзката към страницата с политиката за поверителност;
  • P. Policy page link - slug (подходящо име за URL адрес на страница) на страницата с политиката за поверителнос (обикновено privacy-policy). Важно: slug името на страницата трябва да бъде въведено в полето Exclude на раздел General.
  • Contact form 'tail' - съдържание на съобщението, което се зарежда под формуляра за контакт, когато същият е активиран.
  • Subscribe form 'tail' - съдържание на съобщението, което се зарежда под формуляра за регистрация, когато същият е активиран.

Така изглежда страницата за профилактика с всички активирани модули (без чат сесията):

Изглед на страница с всички модули

Изглед на страницата с активирана чат сесия:

Изглед на страница с чат сесия

С малки промени в съдържанието на полетата и изображението, страницата за Профилактика може да се превърне в атрактивна страница Очаквайте скоро:

Изглед на модифицирана страница Очаквайте скоро

При активиране на WP Maintenance Mode и маркиране на настройката General > Notice, съобщението подсеща, че плъгинът е активен:

Предупреждение за активиране на WP Maintenance Mode

Създаване на страница Coming Soon с Elementor

Разработчиците на Elementor са се погрижили да добавят в безплатната версия на плъгина функционалностите Coming Soon и Maintenance.

За създаването и ползването на този тип служебни страници трябва да инсталирате безплатната версия на Elementor ( Разширения > Добавяне на още, в полето за търсене се въвежда elementor, а с бутона Инсталиране сега инсталирате в панела на плъгина.В края процедурата активирате с бутона Активиране):

Инсталиране на плъгин Elementor

Достъпа до панела за управление на страници е нужно да изберете Elementor > Инструменти от главното меню:

Достъп до панел Инструменти

Режим на поддръжка дава достъп до следните настройки:

Изберете режим - от менюто може да изберете между опциите Очаквайте скоро и Поддръжка:

Опции в меню Изберете режим

Кой има достъп - определете потребителите с какви роли може да достъпват сайта, когато някой от служебните режими е активиран:

Полета за избиране на роля в секция Кой има достъп

Изберете шаблон - с натискане на линка създайте шаблон, се създава страница, която ще се зарежда при активиране на служебен режим:

Линк 'създайте шаблон' в секция 'Изберете шаблон'

В панела Шаблони > Добавяне на нов въвеждате име на шаблона и се натиска бутона Публикувай. Създават се два шаблона Очаквайте скоро и Профилактика, които могат да се използват за двата различни режима на работа на сайта. Шаблоните са достъпни в панела Шаблони > Запазени шаблони:

Панел 'Запазени шаблони'

Отварете шаблона Очаквайте скоро и натиснете бутона Редактиране в Elementor:

Отваряне на шаблон в Elementor

За премахване на header и footer секциите на сайта намерете иконата със символ "зъбно колело" и етикет Настройки в долния ляв ъгъл на екрана, и избирете опцията Шаблон на Elementor - празен. Запазете промяната в настройката като кликаме бутона Обновяване:

Избиране на 'Шаблон на Elementor - празен'

Иконата със символ папка и етикет Добавяне на шаблон ще ви отвори библиотеката на Elementor. Нужно е в полето за търсене да въведете coming и ще се заредат всички налични шаблони от типа Coming Soon. Шаблоните с етикет PRO са достъпни само в платената версия на Elementor, затова импортираме шаблона, маркиран в изображението:

Импортиране на шаблон от библиотеката

Логване в нашия безплатен акаунт в Elementor:

Логване в акаунта в Elementor

и се свързваме с библиотеката за шаблони:

Свързване на сайта и библиотеката за шаблони

Шаблонът се импортира успешно след, което е нужно запазване на страницата.

В раздела Инструменти > Режим на поддръжка и в менюто Изберете режим се посочва Очаквайте скоро, а в менюто Изберете шаблон е нужно да избирате Очаквайте скоро:

Избор на настройки в панел 'Режим на поддръжка'

Всички направени настройки е нужно отново да бъдат запазени от бутон Запазване. В лентата за управление ще се появи надпис на червен фон, който ни информира, че режимът на поддръжка е включен:

Предупреждение за включен режим на поддръжка

От този момент зареждането на сайта ще показва служебната страница Очаквайте скоро (Coming Soon):

Зареждане на страница 'Очаквайте скоро'

Всеки елемент от страницата може да бъде персонализиран в Elementor, но тъй като това е извън целта на статията, ви препоръчаме да разгледате статиите Elementor.

Създаването на страница Профилактика се извършва по аналогичен начин.

Запазени шаблони--> Профилактика --> Редактиране в Elementor.

В библиотеката за шаблони се въвежда в полето за търсене maintenance и от резултатите се избира и импортира маркирания безплатен шаблон:

Импортиране на безплатен шаблон от библиотеката

Запазвате новата страница и се връщате в администрацията на WordPress.

От панела Elementor > Инструменти > Режим на поддръжка и в секция Изберете шаблон се избира Профилактика:

Настройка 'Профилактика' в секция 'Изберете шаблон'

Запазете настройката като натисните на бутона Запазване и зареждате сайта в нов браузър, в който не сте логнати:

Зареждане на страница 'Профилактика' в браузър

Активиране режим на профилактика през functions.php файл

Ако спешно се налага да спрем достъпа на посетители до сайта, но нямаме подготвена страница за профилактика, един лесен начин за зареждане на съобщение с кратка информация е да въведем следния код във файла functions.php:

// Activate WordPress Maintenance Mode
function wp_maintenance_mode() {
    if (!current_user_can('edit_themes') || !is_user_logged_in()) {
        wp_die('

Under Maintenance


Something ain\'t right, but we\'re working on it! Check back later.'); } } add_action('get_header', 'wp_maintenance_mode');

Запазването на кода форсира публичната част от сайта в режим на профилактика:

Съобщение за режим на профилактика 'Under Maintenance'

В същото време логнат администратор може да отстрани проблемите в работата на сайта. Изтриването на кода от functions.php възстановява нормалната функционалност на сайта.

Активиране режим на профилактика през .htaccess файл

Може да използвате код в .htaccess файл, за да пренасочите заявките към сайта към предварително приготвен файл с произволно име (в примера maintenance.html)

RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^11\.22\.33\.44
RewriteCond %{REQUEST_URI} !^/maintenance\.html$
RewriteRule ^(.*)$ https://example.com/maintenance.html [R=307,L]

В този случай на всички HTTP заявки от браузър (които не са изпратени от посочения IP адрес и не са насочени към файла maintenance.html) сървъра ще отговаря със съдържанието на файла maintenance.html, който зарежда нашата Очаквайте скоро / Профилактика страница:

Зареждане на страница Очаквайте скоро с htaccess пренасочване

Вместо example.com трябва да въведете домейн името на нашия сайт.

На мястото на IP адреса се въвежда IP адреса на нашия компютър, за да сме сигурни, че винаги ще имаме достъп до сайта.

За да проверите дали Coming Soon страницата се зарежда коректно, коментирайте реда с IP адреса в кода:

#RewriteCond %{REMOTE_ADDR} !^11\.22\.33\.44

или да заредите сайта през Google Translate:

Зареждане на URL в Google Translate

Зареждане на сайт през Google Translate

Вместо нашият електронен магазин се зарежда страница Очаквайте скоро докато актуализирате съдържанието на магазина.