Jak dostosować treści na stronie internetowej do aktualnej godziny

Cześć! Czy zastanawiałeś się kiedyś, jak fajnie byłoby, gdyby Twoja strona internetowa dynamicznie dostosowywała wyświetlane informacje w zależności od pory dnia? Na przykład, gdy prowadzisz lokalny biznes, możesz pokazywać komunikat „Jesteśmy otwarci, zapraszamy!” w godzinach pracy, a wieczorem zmieniać go na „Już zamknięte, wróć do nas jutro”. Brzmi super, prawda? W tym artykule pokażę Ci, jak zrobić to w prosty sposób, nawet jeśli dopiero zaczynasz swoją przygodę z kodowaniem.

Dlaczego warto dostosować treści do godziny?

Wprowadzenie takiej funkcji na stronę może znacząco poprawić doświadczenie użytkowników. Wyobraź sobie klienta, który o 22:30 próbuje sprawdzić, czy Twój sklep jeszcze działa. Zamiast szukać godzin otwarcia w zakładce „Kontakt”, widzi od razu jasny komunikat. To oszczędza jego czas i pokazuje, że dbasz o wygodę użytkowników.

Dynamiczne treści mogą mieć wiele zastosowań:

Pokazywanie godzin otwarcia/zamknięcia.
Promocje zależne od pory dnia (np. happy hours w restauracji).
Wyświetlanie powitań dopasowanych do pory dnia („Dzień dobry” rano, „Dobry wieczór” wieczorem).

Dobra, dość gadania. Przejdźmy do konkretów!

Jak to zrobić?

Najprostszym sposobem na wprowadzenie dynamicznych treści zależnych od godziny jest użycie języka JavaScript. Kod ten działa po stronie przeglądarki, co oznacza, że zmiany w treści będą widoczne natychmiast – bez potrzeby odświeżania strony przez użytkownika.

Przykład: Zmieniamy komunikat w zależności od godziny

Oto prosty kod, który możesz dodać na swoją stronę:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamiczna informacja</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        .status {
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Witamy na naszej stronie!</h1>
    <p class="status"></p>

    <script>
        function updateStatus() {
            const statusElement = document.querySelector('.status');
            const now = new Date();
            const hour = now.getHours();

            if (hour >= 9 && hour < 17) {
                statusElement.textContent = "Jesteśmy otwarci, zapraszamy!";
                statusElement.style.color = "green";
            } else {
                statusElement.textContent = "Już zamknięte, wróć do nas jutro.";
                statusElement.style.color = "red";
            }
        }

        // Wywołanie funkcji po załadowaniu strony
        updateStatus();
    </script>
</body>
</html>

Jak działa ten kod?

Obiekt Date: Wykorzystujemy wbudowany obiekt JavaScript, aby pobrać aktualną godzinę. Funkcja new Date() zwraca pełną datę i czas, a metoda .getHours() wyciąga godzinę (liczba od 0 do 23).
Logika warunkowa (if...else): Sprawdzamy, czy bieżąca godzina mieści się w przedziale godzin otwarcia (9:00–17:00). Na tej podstawie zmieniamy treść w elemencie HTML.
Dynamiczna aktualizacja treści: Wybieramy element .status za pomocą document.querySelector i zmieniamy jego tekst oraz kolor.

Dodaj więcej funkcji!

Znasz już podstawy, ale możesz iść o krok dalej. Oto kilka pomysłów:

1. Powiadomienia o zbliżającym się zamknięciu

Jeśli jest 16:45, możesz dodać komunikat typu: „Zamykamy za 15 minut!”.

if (hour >= 16 && hour < 17) {
    statusElement.textContent = "Zamykamy za chwilę – zapraszamy szybko!";
    statusElement.style.color = "orange";
}

2. Dopasowanie komunikatu do dni tygodnia

Może Twój biznes działa tylko od poniedziałku do piątku? Możesz to łatwo uwzględnić:

const day = now.getDay(); // 0 = niedziela, 6 = sobota
if (day === 0 || day === 6) {
    statusElement.textContent = "Dziś mamy zamknięte – zapraszamy w dni robocze!";
    statusElement.style.color = "gray";
} else if (hour >= 9 && hour < 17) {
    statusElement.textContent = "Jesteśmy otwarci, zapraszamy!";
    statusElement.style.color = "green";
} else {
    statusElement.textContent = "Już zamknięte, wróć do nas jutro.";
    statusElement.style.color = "red";
}

3. Zmiana tła strony w zależności od pory dnia

Chcesz, żeby Twoja strona zmieniała kolor w zależności od godziny? Nic prostszego!

const body = document.body;
if (hour >= 6 && hour < 18) {
    body.style.backgroundColor = "#FFFAE6"; // Jasne tło na dzień
} else {
    body.style.backgroundColor = "#2C3E50"; // Ciemne tło na wieczór
    body.style.color = "#FFF"; // Jasny tekst
}

Czy to działa na każdej stronie?

Tak, kod JavaScript możesz dodać praktycznie do każdej strony – niezależnie od tego, czy korzystasz z WordPressa, czy tworzysz stronę od zera. W przypadku systemów CMS możesz umieścić kod w sekcji „Nagłówek” (Header) lub dodać go za pomocą specjalnych wtyczek.

Jeśli masz większe potrzeby, możesz połączyć JavaScript z backendem (np. PHP lub Pythonem), aby dynamicznie generować treści już na serwerze.

SEO i dostępność

Chociaż dynamiczne treści mogą poprawić wrażenia użytkowników, musisz pamiętać o kilku kwestiach:

SEO: Boty wyszukiwarek mogą nie zawsze widzieć dynamiczne zmiany wykonywane po stronie przeglądarki. Dla ważnych informacji, takich jak godziny otwarcia, warto dodać także statyczne dane w strukturze schema.org.
Dostępność: Upewnij się, że komunikaty są czytelne dla osób korzystających z czytników ekranowych.

Dostosowanie informacji na stronie do godziny to prosty, ale skuteczny sposób na poprawę doświadczenia użytkowników. Dzięki kilku linijkom kodu możesz uczynić swoją stronę bardziej interaktywną i przyjazną. Zacznij od podstawowego skryptu, a potem baw się możliwościami, dopasowując treści do potrzeb Twoich użytkowników.