Jak dodać preloader do strony głównej WordPress – pełny poradnik z kodem

W tym artykule pokażemy, jak dodać preloader do strony głównej WordPress za pomocą prostego kodu PHP, CSS i JavaScript. Preloader to animacja, która wyświetla się przed załadowaniem treści witryny. Dzięki temu można stworzyć atrakcyjne pierwsze wrażenie dla użytkownika. Przeczytaj dokładnie nasz poradnik, aby dowiedzieć się, jak krok po kroku dodać preloader z własnym logo oraz jak dostosować czas wyświetlania animacji.

Dlaczego warto dodać preloader do strony głównej WordPress?

Preloader pomaga utrzymać uwagę użytkownika w momencie ładowania strony. Może to być szczególnie ważne, jeśli Twoja witryna zawiera duże grafiki lub wiele wtyczek spowalniających jej działanie. Dzięki preloaderowi użytkownicy widzą animację lub logo przed pełnym załadowaniem strony, co sprawia, że doświadczenie użytkownika jest bardziej płynne.

Jeśli zastanawiasz się, jak dodać preloader do strony głównej WordPress, dokładnie prześledź poniższe kroki. Omówimy szczegółowo nie tylko kod PHP, ale także CSS oraz JavaScript, które pozwolą na stworzenie preloadera dostosowanego do Twoich potrzeb.

Kod PHP do wyświetlania preloadera

Pierwszym krokiem jest dodanie kodu PHP, który będzie wyświetlał preloader tylko na stronie głównej witryny. Poniższy kod należy umieścić w pliku header.php:

<?php if (is_front_page()) : ?>
<div id="preloader" class="fade-in">
    <div id="loader-content">
        <img src="//* LINK DO TWOJEGO LOGO *//" alt="Logo Preloader">
    </div>
</div>
<?php endif; ?>

Ten kod sprawia, że preloader pojawia się tylko na stronie głównej, co jest istotne dla optymalizacji witryny. Dzięki temu użytkownicy odwiedzający inne podstrony nie będą widzieć preloadera.

Stylizacja preloadera za pomocą CSS

Kolejnym krokiem jest dodanie stylów CSS, które definiują wygląd preloadera. W pliku style.css dodaj następujący kod:

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
}

#loader-content img {
    max-width: 300px;
    height: auto;
}

#preloader.fade-in {
    opacity: 1;
    visibility: visible;
}

body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
}

Stylizacja ta zapewnia, że logo będzie wyświetlane na środku ekranu, a tło preloadera będzie białe. Dodatkowo zastosowaliśmy płynne efekty pojawiania się i znikania animacji, co sprawia, że strona wygląda bardziej profesjonalnie.

Dodanie JavaScript do ukrywania preloadera po załadowaniu strony

Ostatnim elementem jest dodanie kodu JavaScript, który ukryje preloader po określonym czasie lub po załadowaniu całej witryny. Poniższy kod dodaj do pliku functions.php (lub wtyczki Code Snippets – którą osobiście bardziej polecam):

function add_preloader_script() {
    if (is_front_page()) {
        echo "
        <script>
        window.addEventListener('load', function () {
            setTimeout(function() {
                document.body.classList.add('loaded');
            }, 3000);
        });
        </script>
        ";
    }
}
add_action('wp_footer', 'add_preloader_script');

Ten skrypt sprawia, że preloader znika automatycznie po 3 sekundach. Możesz dostosować czas wyświetlania, zmieniając wartość 3000 na inną liczbę, wyrażoną w milisekundach.

Podsumowanie – jak dodać preloader do strony głównej WordPress?

Teraz wiesz dokładnie, jak dodać preloader do strony głównej WordPress. Wystarczy dodać kod PHP, CSS i JavaScript, aby stworzyć atrakcyjną animację przed załadowaniem witryny. Dzięki temu Twoja strona będzie wyglądała bardziej profesjonalnie, a użytkownicy będą mieli lepsze pierwsze wrażenie.

Dodanie preloadera to nie tylko kwestia estetyki, ale także praktycznego rozwiązania poprawiającego doświadczenie użytkownika. Jeśli chcesz, aby Twoja strona główna prezentowała się lepiej, wdrożenie preloadera jest jednym z najprostszych sposobów, by to osiągnąć.