Każda strona internetowa, również ta oparta o WordPress od czasu do czasu wymaga drobnych prac — aktualizacji, wprowadzenia poprawek czy synchronizacji stagingu. W trakcie prowadzonych prac serwis może nie wyświetlać się poprawnie i wówczas odwiedzający ją użytkownicy mogą napotkać problemy. Jak tego uniknąć? Rozwiązaniem jest zaślepka “Strona w budowie”!

Z pewnością nie raz po wejściu na jakąś stronę internetową, spotkaliście się z komunikatem informującym o prowadzonych pracach technicznych. Co on oznacza? Jest to informacja, że na stronie aktualnie trwają prace konserwacyjne i serwis nie jest tymczasowo dostępny dla odwiedzających. Tego typu rozwiązanie jest bardzo przydatne i warto korzystać z niego w przypadku zarówno wprowadzania zmian, jak i podczas budowania nowej strony internetowej. Jak? O tym niżej 🙂

Zaślepka na stronie w WordPress

Strony oparte o skrypt WordPress posiadają wbudowany moduł zaślepki dla prac konserwacyjnych. Zaślepka ta uruchamiana jest automatycznie w przypadku instalacji aktualizacji na stronie. Niestety wizualnie pozostawia ona wiele do życzenia.

Na szczęście istnieje możliwość dostosowania zaślepki informującej o pracach na stronie według własnych potrzeb. W tym celu wystarczy skorzystać z jednej z wielu dostępnych w repozytorium WordPressa wtyczek. Moją ulubioną tego typu wtyczką jest Konserwacja, na której przykładzie pokażę Ci jak włączyć „stronę w budowie”. To bardzo proste!

1. Zaloguj się do swojego WordPressa, a następnie przejdź do zakładki Wtyczki -> Dodaj nową. Za pomocą dostępnej wyszukiwarki odszukaj dodatku Konserwacja — tak jak ja na poniższym zrzucie ekranu.

Podpowiadamy: W naszej bazie wiedzy przygotowaliśmy poradnik, w którym opisujemy proces instalacji wtyczek bezpośrednio w Kokpicie WordPress krok po kroku. Zapraszamy do lektury artykułu  jak zainstalować wtyczkę na WordPress.

2. Następnie kliknij przycisk Zainstaluj, aby rozpocząć proces jej instalacji. Kiedy dobiegnie końca włącz wtyczkę klikając na przycisk Aktywuj.

Uwaga: Zaraz po aktywacji wtyczki Twoja strona internetowa zostanie uruchomiona w trybie konserwacji. Aby wyłączyć ten tryb na czas konfiguracji wtyczki, postępuj zgodnie z dalszą częścią artykułu.

3. W kolejnym kroku przejdź do ustawień wtyczki, klikając na jej nazwę w panelu bocznym.

4. Następnie tymczasowo wyłącz tryb konserwacji. W tym celu ustaw dostępny w prawej górnej części ekranu przełącznik na pozycję Off i zachowaj tę zmianę klikając na przycisk Save changes.

5. Teraz możesz przystąpić do ustawień wtyczki. W oknie jej ustawień zobaczysz możliwe pola do uzupełnienia. W zakładce Content ustawisz treść widoczną na stronie zaślepki.

Dostępne pola to:

• Page Title — odpowiedzialny jest za tytuł strony na karcie przeglądarki internetowej
• Nagłówek — wyświetlany jest w treści zaślepki, jaki jej główny tytuł
• Opis — w opisie umieszczone powinny być wszystkie informacje wyświetlane pod nagłówkiem
• Tekst stopki — wyświetla się w stopce strony zaślepki

6. W znajdującej się niżej zakładce Design możesz dodatkowo przesłać logo Twojej strony oraz nową grafikę dla tła wyświetlanego na stronie zaślepki.

7. Po uzupełnieniu wszystkich pól aktywuj ponownie tryb konserwacji oraz zapisz zmiany. Po wylogowaniu ze strony możesz podejrzeć, jak wygląda strona oczami odwiedzających 🙂

Ważne: Zaślepka jest wyświetlana dla wszystkich niezalogowanych użytkowników oraz zalogowanych użytkowników niemających praw administratora.

Zaślepka HTML jako alternatywa dla wtyczki WordPress

Jeżeli nie chcesz lub nie możesz skorzystać z wtyczki (bo nie korzystasz z WordPress), wykorzystaj kod HTML do stworzenia zaślepki. To rozwiązanie będzie nieco trudniejsze do wykonania dla początkujących użytkowników, ale warto je rozważyć — w przypadku WordPress im mniej wtyczek tym lepiej 🙂 

Przygotowaliśmy gotowy kod HTML, który należy wkleić do pliku index.html. Plik index.html należy utworzyć samodzielnie na komputerze, a następnie przesłać go do katalogu strony za pomocą klienta FTP. Po dodaniu kodu użytkownik odwiedzający stronę zobaczy poniższy widok:

Możesz oczywiście dowolnie modyfikować stworzony przez nas kod zaślepki według własnych potrzeb 🙂

Kod zaślepki HTML

<!doctype html>
<title>Przerwa Techniczna</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<style>
  html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
  * {box-sizing: border-box;}
  body { text-align: center; padding: 0; background: linear-gradient(90deg, rgba(80,0,115,1) 0%, rgba(130,10,207,1) 52%, rgba(0,213,255,1) 100%); color: #fff; font-family: Open Sans; }
  h1 { font-size: 50px; font-weight: 100; text-align: center;}
  body { font-family: Open Sans; font-weight: 100; font-size: 20px; color: #fff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
  article { display: block; width: 800px; padding: 50px; margin: 0 auto; }
  a { color: #fff; font-weight: bold;}
  a:hover { text-decoration: none; }
  svg { width: 75px; margin-top: 1em; }
</style>

<article>
    <img src="https://i.postimg.cc/DZF5vXjX/Kremowe-R-g-Obramowanie-Fotografia-Logo.png" alt="Logo MojaStrona.pl">
    <h1>Przerwa techniczna!</h1>
    <div>
        <p>Przepraszam za niedogodności. W tej chwili przeprowadzamy konserwację naszej strony internetowej.</p>
		<p>Przedwidywana godzina zakończenia prac to 25/10/2022, godz. 18:30</p>
		<p>W między czasie zapraszamy Cię na nasz profil <a href="#">Facebook</a>, aby być zawsze na bierząco z nowościami w naszej ofercie!</p>
    </div>
</article>

Jakie informacje umieścić na “stronie w budowie”? 

Niezależnie od tego, ją metodą posłużysz się do poinformowania odwiedzających o trwających na stronie zmianach, warto pamiętać o tym, aby umieścić na “stronie w budowie” możliwie szczegółowe informacje o niedostępności strony. 

Powód niedostępności — nie musisz wdawać się w szczegóły, ale dobrze, gdy odwiedzający dowie się, że strona jest w trakcie przebudowy, niezbędnych aktualizacji czy zmian. Możesz użyć takich sformułowań jak: 

• “Zmieniamy się dla Ciebie”
• “Strona w przebudowie”
• “Strona w trakcie aktualizacji”

Czas niedostępności — jeżeli masz stałych Klientów czy odwiedzających, miło z Twojej strony będzie poinformować ich, jaki będzie przewidywany czas niedostępności strony. Wiadomość ta będzie również informacją dla nowych klientów, którzy widząc niedziałającą stronę mogą porzucić ją na zawsze szukając produktów u konkurencji.

Link do mediów społecznościowych — prowadzisz fanpage na Facebooku lub stronę na Instagramie? Podaj odwiedzającym link z informacją, że tam znajdą aktualne wiadomości.

Logo — możesz również dodać swoje logo lub adres strony wraz z nazwą, aby odwiedzający dokładnie wiedział, na jakiej stronie się znalazł.

Czy tryb konserwacji wpływa na SEO?

Tryb konserwacji informuje wyszukiwarki, że Twoja witryna jest obecnie niedostępna. Robi to, zwracając kod nagłówka 503. Dzięki temu trwające przestoje w działaniu strony nie będą miały wpływu na SEO Twojej witryny.

Podsumowanie

Wykorzystanie zaślepki informującej o aktualnie prowadzonych pracach na stronie internetowej jest bardzo przydatną funkcją. Z jednej strony dzięki niej poinformujesz użytkowników odwiedzających stronę o zaplanowanych pracach. Z drugiej strony unikniesz sytuacji, kiedy nowo odwiedzający użytkownik natrafi na stronę, która nie działa lub generuje błędy.

Funkcja tryby konserwacji sprawdzi się równie w przypadku chęci instalacji nowych aktualizacji, wtyczek, zmian w motywie strony, ale również podczas jej synchronizacji ze stagingiem. Świetnie sprawdzi się również w przypadku konieczności podjęcia szybkiej reakcji, kiedy na stronie zaczniesz notować problemy z jej działaniem.

Jeżeli korzystasz z innych rozwiązań, niż te zaproponowane w dzisiejszym wpisie zachęcamy, abyś podzielił się swoimi doświadczeniami w komentarzach.