Como adicionar uma tela de carregamento no WordPress
Existem várias formas de colocar uma loading screen no WordPress — via plugin, via código no tema ou via functions.php. Veja as diferenças, quando usar cada uma e como fazer corretamente.
Antes de começar
Se você ainda não está familiarizado com o conceito de preloader, vale ler primeiro o guia completo sobre preloaders no WordPress para entender como ele funciona e quando realmente faz sentido usar.
Resumindo: um preloader é uma sobreposição visual que aparece enquanto a página carrega e desaparece automaticamente quando o conteúdo está pronto. Ele não acelera o carregamento — gerencia a percepção visual durante esse período.
Método 1: Via plugin (recomendado para a maioria dos casos)
Usar um plugin é a abordagem mais prática e mais segura. Você não precisa editar arquivos do tema, não há risco de quebrar o site em uma atualização e geralmente tem acesso a opções de configuração sem escrever uma linha de código.
O que procurar em um plugin de preloader
Antes de instalar qualquer plugin, avalie os seguintes critérios:
- JavaScript vanilla: sem dependência de jQuery. Plugins que exigem jQuery adicionam um recurso extra ao carregamento.
- Sem requisições externas: o plugin não deve fazer chamadas para CDNs ou APIs de terceiros para carregar a animação.
- CSS e JS condicionais: os assets devem ser carregados apenas onde o preloader está ativo.
- Controle de páginas: possibilidade de ativar o preloader apenas em páginas específicas ou desativá-lo em páginas de checkout, por exemplo.
- Safety timeout: um tempo máximo de exibição para evitar que o preloader fique travado.
Instalando um plugin de preloader
O processo é o mesmo de qualquer plugin WordPress. No painel administrativo:
- Acesse Plugins → Adicionar novo
- Pesquise pelo plugin desejado ou clique em Enviar plugin se tiver um arquivo ZIP
- Clique em Instalar agora e depois em Ativar
- Acesse as configurações do plugin e ajuste a animação, cores e regras de exibição
Quer configurar uma loading screen sem editar código?
O Smart Preload DL é um plugin gratuito com controle por página, 4 animações e suporte a WooCommerce. Disponível como ZIP para instalar diretamente.
Método 2: Via código no functions.php
Essa abordagem é para quem prefere ter o código diretamente no tema filho, sem depender de um plugin adicional. Requer conhecimento básico de PHP e WordPress.
functions.php do tema filho, nunca
do tema pai. Uma atualização do tema pai apaga as alterações feitas diretamente nele.
1. Criar o HTML do preloader
O hook wp_body_open (disponível desde o WordPress 5.2) injeta HTML logo
após a abertura da tag <body>:
// No functions.php do tema filho
add_action('wp_body_open', function() {
echo '<div id="dl-preloader" aria-hidden="true">
<div class="dl-spinner"></div>
</div>';
});2. Adicionar o CSS
add_action('wp_enqueue_scripts', function() {
wp_add_inline_style('seu-tema-style', '
#dl-preloader {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: #0a0a0f;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
transition: opacity .4s ease;
}
#dl-preloader.dl-fade {
opacity: 0;
pointer-events: none;
}
.dl-spinner {
width: 40px; height: 40px;
border: 3px solid rgba(255,255,255,.15);
border-top-color: #39ff14;
border-radius: 50%;
animation: dlSpin .8s linear infinite;
}
@keyframes dlSpin {
to { transform: rotate(360deg); }
}
');
});3. Adicionar o JavaScript
add_action('wp_footer', function() { ?>
<script>
(function() {
var timeout = 5000; // safety timeout: 5 segundos
var el = document.getElementById('dl-preloader');
if (!el) return;
function hide() {
el.classList.add('dl-fade');
setTimeout(function() {
el.style.display = 'none';
}, 450);
}
window.addEventListener('load', hide);
setTimeout(hide, timeout); // garante que some em até 5s
})();
</script>
<?php }, 99); // prioridade 99 para ficar no final do footerEsse código cobre o básico. Para controle por página, exclusão de páginas específicas e suporte a WooCommerce, a lógica cresce consideravelmente — nesse ponto, um plugin dedicado poupa muito trabalho.
Comparativo dos métodos
| Critério | Plugin | Código no tema |
|---|---|---|
| Facilidade de configuração | ✅ Interface visual | ⚠️ Exige código |
| Resistência a atualizações | ✅ Independente do tema | ⚠️ Depende do tema filho |
| Controle por página | ✅ (depende do plugin) | ⚠️ Lógica manual |
| Suporte a WooCommerce | ✅ (depende do plugin) | ❌ Exige condicionais extras |
| Manutenção | ✅ Simples | ⚠️ Responsabilidade sua |
| Controle total | ⚠️ Limitado ao plugin | ✅ Total |
Ajustes importantes após instalar
Independentemente do método escolhido, há configurações que impactam diretamente a qualidade da experiência:
Safety timeout
Defina um tempo máximo de exibição (entre 3 e 8 segundos, dependendo do site). Isso evita que o preloader trave a página em caso de recursos lentos ou falhas de rede.
Tempo mínimo de exibição
Em páginas muito rápidas, o preloader pode piscar por menos de 100ms — o que parece um bug. Defina um tempo mínimo de 300 a 500ms para garantir uma transição perceptível.
Páginas de exclusão
Se o seu site tem WooCommerce, pense bem antes de exibir o preloader no checkout. Qualquer fricção extra nessa etapa pode aumentar o abandono de carrinho. Veja mais em Preloader no WooCommerce.
Personalização
O preloader deve ser coerente com a identidade visual do site. Veja as boas práticas em Como personalizar um preloader com logo e cores da marca.
Perguntas frequentes
wp_body_open geralmente são compatíveis, mas é necessário testar no seu ambiente específico, especialmente se estiver usando cache.