Como mostrar preloader somente em páginas específicas do WordPress
Exibir preloader em todas as páginas pode ser contraproducente. Entenda como controlar exatamente onde ele aparece: por tipo de página, por slug, por ID ou por padrão de URL — e como isso muda a experiência de forma significativa.
Por que controlar onde o preloader aparece
Ativar o preloader em todo o site sem critério causa três problemas principais:
- Páginas rápidas ganham um preloader desnecessário — um artigo de blog que carrega em 800ms não precisa de loading screen. O preloader vai piscar por instantes e parecer um bug.
- Impacto nas métricas de SEO — nas páginas mais importantes para os buscadores, o preloader pode atrasar a visibilidade do conteúdo principal e prejudicar o LCP.
- Fricção em fluxos críticos — no WooCommerce, por exemplo, o preloader no checkout é uma barreira adicional num momento em que o usuário quer velocidade.
O controle granular de exibição é provavelmente o recurso mais importante em qualquer plugin de preloader — mais do que a variedade de animações.
Modos de exibição
Os modos básicos são três:
- Todas as páginas: o preloader aparece em qualquer URL do site.
- Somente páginas selecionadas: você define explicitamente onde o preloader deve aparecer. Tudo que não estiver na lista fica sem preloader.
- Excluir páginas: o preloader aparece em todo o site, exceto nas URLs ou tipos de página que você bloquear.
Cada abordagem tem um caso de uso diferente. A mais comum na prática: ativar em todas e excluir seletivamente as páginas críticas (checkout, artigos de blog, landing pages de SEO).
Por tipo de página no WordPress
O WordPress tem funções condicionais que identificam o tipo de página sendo carregada. Um plugin de preloader bem construído traduz essas condições em opções de configuração visual. Os tipos mais relevantes:
| Tipo de página | Função WordPress | Quando usar preloader |
|---|---|---|
| Página inicial (front page) | is_front_page() | Frequentemente sim — primeira impressão |
| Blog (lista de posts) | is_home() | Opcional — conteúdo geralmente rápido |
| Post individual | is_single() | Raramente — texto carrega rápido |
| Página estática | is_page() | Depende da página (heavy ou não) |
| Categoria | is_category() | Opcional |
| Tag | is_tag() | Raramente necessário |
| Arquivo | is_archive() | Depende do conteúdo |
| Busca | is_search() | Raramente — usuário quer resultado rápido |
| Página 404 | is_404() | Opcional — pode ser elegante |
Por ID, slug ou URL
Para controle individual de páginas específicas, a abordagem mais prática é usar o ID do post/página ou o slug (a parte da URL após o domínio).
Por ID
O ID de qualquer post ou página no WordPress aparece na URL do editor:
wp-admin/post.php?post=42&action=edit.
Inserir esse número na lista de exclusão (ou inclusão) é preciso e não muda com
alterações de slug ou permalink.
Por slug
O slug é a parte amigável da URL. Para a página
seusite.com.br/sobre-nos/, o slug é sobre-nos.
A vantagem: é legível e fácil de gerenciar. A desvantagem: se o slug mudar,
a regra deixa de funcionar.
Por padrão de URL completa
Para casos onde o ID ou slug não são suficientes — por exemplo, uma seção inteira do site — é possível usar a URL completa ou parte dela como critério de correspondência.
Padrões com wildcard
O wildcard * é um coringa que representa "qualquer coisa". Com ele,
você pode definir regras que cobrem seções inteiras do site sem listar cada URL
individualmente.
Exemplos práticos:
/blog/*→ aplica a regra a todas as URLs que começam com/blog//produto/*→ cobre todas as páginas de produto*checkout*→ qualquer URL que contenha a palavra "checkout"
/checkout/ e /blog/*.
Pronto — duas regras cobrem centenas de páginas.
Regras específicas para WooCommerce
Sites WooCommerce merecem atenção especial porque têm páginas com comportamentos muito diferentes:
- Shop (loja): carrega vários produtos — o preloader pode fazer sentido se a loja for visual e pesada
- Product (produto individual): depende de quantas imagens e variações tem
- Cart (carrinho): o usuário já decidiu comprar — não adicione fricção
- Checkout: evite o preloader aqui. Qualquer hesitação pode aumentar o abandono
- My Account: página logada — geralmente sem necessidade de preloader
Para um guia completo sobre preloader em lojas WooCommerce, veja: Preloader no WooCommerce sem atrapalhar a experiência de compra.
Ocultando para usuários logados
Administradores e editores do site não precisam ver o preloader toda vez que navegam pelas páginas para editar ou revisar conteúdo. Além de incomodar, o preloader pode dificultar a identificação de problemas de renderização durante o desenvolvimento.
A maioria dos plugins de preloader tem uma opção para ocultar o preloader para usuários autenticados. Ative sempre que possível.
Fazer via código (sem plugin)
Se você prefere controlar a exibição via código, o WordPress oferece as funções condicionais citadas acima. Um exemplo de exibição apenas na página inicial e em páginas:
// No functions.php do tema filho
add_action('wp_body_open', function() {
// Exibe apenas na front page e em páginas estáticas
if (!is_front_page() && !is_page()) {
return;
}
// Oculta para usuários logados
if (is_user_logged_in()) {
return;
}
echo '<div id="dl-preloader" aria-hidden="true">...</div>';
});Para controle por ID ou slug, adicione as condições correspondentes:
$excluded_ids = [42, 87, 120]; // IDs a excluir
$excluded_slugs = ['checkout', 'carrinho'];
$current_id = get_the_ID();
$current_slug = get_post_field('post_name', $current_id);
if (in_array($current_id, $excluded_ids)) return;
if (in_array($current_slug, $excluded_slugs)) return;Quer controlar exatamente onde o preloader aparece?
O Smart Preload DL tem controle por tipo de página, ID, slug, URL e wildcard — tudo configurável pelo painel do WordPress, sem editar código.
Perguntas frequentes
post=. Por exemplo: wp-admin/post.php?post=42&action=edit — nesse caso, o ID é 42.
/categoria/* ou *checkout*.