Preload de site WordPress

Adicionar um preloader ao seu site WordPress pode melhorar a experiência do usuário, especialmente em páginas que demoram mais para carregar. Aqui, vou explicar um script simples que exibe um spinner animado enquanto o conteúdo da página é carregado. Cada parte do código é comentada para ajudar você a entender como ele funciona.

O Código Completo

// Adiciona o CSS e HTML do preloader apenas em páginas específicas
function add_preloader_assets() {
    // Verifica se a página atual é uma página específica
    if (is_page() || is_category() || is_tax() || is_search() || is_archive() || is_single()) {
        // Adiciona o CSS para o preloader
        echo '<style>
            #preloader {
                position: fixed; /* Garante que o preloader cubra toda a tela */
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 9999; /* Prioriza o preloader sobre outros elementos */
                background-color: #fff; /* Fundo branco enquanto a página carrega */
                display: flex; /* Centraliza o spinner */
                justify-content: center;
                align-items: center;
                opacity: 1; /* Visibilidade total inicialmente */
                transition: opacity 0.5s ease-out; /* Animação suave ao desaparecer */
            }
            .spinner {
                border: 6px solid #f3f3f3; /* Cor de fundo do spinner */
                border-radius: 50%; /* Torna o elemento circular */
                border-top: 6px solid #3bc1c5; /* Cor de destaque no spinner */
                width: 50px; /* Tamanho do spinner */
                height: 50px;
                animation: spin 1s linear infinite; /* Gira continuamente */
            }
            @keyframes spin {
                0% { transform: rotate(0deg); } /* Posição inicial */
                100% { transform: rotate(360deg); } /* Rotação completa */
            }
        </style>';
        
        // Adiciona o HTML do preloader
        echo '<div id="preloader"><div class="spinner"></div></div>';
        
        // Adiciona o JavaScript para controlar o comportamento do preloader
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                var preloader = document.getElementById("preloader");
                function hidePreloader() {
                    if (preloader) {
                        preloader.style.opacity = "0"; /* Faz o preloader desaparecer suavemente */
                        setTimeout(function() {
                            preloader.style.display = "none"; /* Remove o elemento após a animação */
                        }, 500); /* Tempo de transição (0.5s) */
                    }
                }
                window.addEventListener("load", hidePreloader); /* Remove o preloader ao concluir o carregamento */
                setTimeout(hidePreloader, 5000); /* Fallback: remove o preloader após 5 segundos */
            });
        </script>';
    }
}
add_action('wp_head', 'add_preloader_assets');

Explicação do Código

Função Principal

function add_preloader_assets() {

Esta função é responsável por adicionar os estilos, HTML e scripts necessários para o preloader.

Condição para Exibir o Preloader

if (is_page() || is_category() || is_tax() || is_search() || is_archive() || is_single()) {

O preloader será exibido apenas em páginas específicas, como:

• is_page(): Páginas estáticas.
• is_category(): Páginas de categorias.
• is_tax(): Páginas de taxonomias.
• is_search(): Páginas de resultados de busca.
• is_archive(): Páginas de arquivos (datas, autores, etc.).
• is_single(): Posts únicos.

Isso evita que o preloader seja carregado em páginas como a home ou o painel de administração, otimizando o desempenho.

CSS para o Preloader

echo '<style> ... </style>';

O bloco de estilo define a aparência do preloader:

• #preloader: Um elemento fixo que cobre a tela inteira.
• .spinner: O círculo animado que gira no centro.
• @keyframes spin: Define a animação de rotação.

HTML do Preloader

echo '<div id="preloader"><div class="spinner"></div></div>';

Adiciona o preloader ao início do conteúdo da página, garantindo que ele seja visível enquanto a página é carregada.

JavaScript para Controlar o Preloader

echo '<script> ... </script>';

O script adiciona duas funcionalidades:

1. Esconde o Preloader Após o CarregamentojavascriptCopiar códigowindow.addEventListener("load", hidePreloader); Assim que todos os recursos da página são carregados, o preloader desaparece.
2. Fallback Após 5 SegundosjavascriptCopiar códigosetTimeout(hidePreloader, 5000); Caso algo impeça o carregamento completo (como um erro em scripts), o preloader desaparece automaticamente após 5 segundos.

Hook para Adicionar ao Cabeçalho

add_action('wp_head', 'add_preloader_assets');

Este hook injeta o código diretamente na seção <head> do tema ativo, garantindo que ele seja executado antes da página ser exibida.

Impacto no SEO

• Positivo: Um preloader bem implementado pode melhorar a experiência do usuário, reduzindo a percepção de tempo de carregamento.
• Cuidados: Evite tempos de carregamento excessivos ou designs invasivos, que podem frustrar os visitantes.

Este código é um exemplo simples e eficaz para adicionar um preloader ao seu site WordPress. Ele é projetado para ser leve e não interferir no SEO ou no desempenho. Sinta-se à vontade para adaptá-lo ao estilo do seu site!