Adicionou um slider pesado em todo o site apenas para uma animação na página inicial? Dezenas de kilobytes desnecessários são carregados em cada página: artigos internos, contactos, o mapa do site. Os visitantes esperam e o Google reduz as pontuações do seu Core Web Vitals.

O problema não são os plugins ou o tema. O problema é que o WordPress não distingue entre páginas ao registar scripts por defeito. Uma única linha wp_enqueue_script no functions.php e o ficheiro carrega em todo o lado: a página inicial, o painel de administração e a página de login.

Abaixo estão três métodos funcionais para enfileirar scripts e estilos estritamente para a página inicial. Sem plugins de otimização. Apenas PHP e tags condicionais do WordPress.

💡 Visão geral rápida:

• Identifique o tipo da sua página inicial: página estática ou últimos artigos, porque a tag condicional depende disso
• Use is_front_page() para uma página inicial estática e is_home() para a página do blogue
• Coloque o código no functions.php do seu tema filho ou através do plugin Code Snippets
• Verifique através de DevTools → Rede que os scripts não carregam nas páginas internas

Passo 1. Identifique o tipo da sua página inicial

O WordPress distingue dois conceitos: Página Inicial, o que o visitante vê no URL raiz do site, e Página de Artigos, a página que exibe os artigos do blogue. Podem ser a mesma (página inicial = feed de artigos) ou diferentes (página inicial = página estática, enquanto o blogue reside num URL separado).

Abra o painel de administração: Configurações → Leitura. Na secção "A página inicial mostra":

• "Os meus últimos artigos": a página inicial e a página do blogue são a mesma. No código, use is_home() ou is_front_page(); ambos devolverão true.
• "Uma página estática" com uma página inicial selecionada: use is_front_page(). Aqui is_home() devolverá true apenas na página do blogue (se uma estiver atribuída separadamente).

Se não tiver a certeza, opte por is_front_page(). É mais fiável porque é acionado na página inicial independentemente da configuração.

Passo 2. Enfileirar o script apenas para a página inicial

O código vai no ficheiro functions.php do seu tema filho. Se não tiver um tema filho, use o plugin Code Snippets (passo 5): editar o functions.php do tema principal será sobrescrito na próxima atualização.

O exemplo abaixo enfileira um ficheiro JavaScript no rodapé apenas quando o visitante está na página inicial:

1
/**
2
 * Enqueues a custom script only on the front page.
3
 * Hook location: child theme's functions.php or Code Snippets.
4
 */
5
add_action('wp_enqueue_scripts', function () {
6
    if (! is_front_page()) {
7
        return;
8
    }
9
 
10
    wp_enqueue_script(
11
        'my-frontpage-script',                         // handle — unique name
12
        get_template_directory_uri() . '/js/frontpage.js', // path to file
13
        array(),                                       // dependencies (jquery, etc.)
14
        '1.0.0',                                       // version for cache busting
15
        true                                           // true = in footer, false = in head
16
    );
17
});

Eis o que acontece. O hook wp_enqueue_scripts é o local correto para registar scripts de front-end (não init, não wp_head). is_front_page() verifica que estamos na página inicial. A função wp_enqueue_script adiciona o ficheiro à fila e o próprio WordPress insere a tag <script> no rodapé, antes do fecho de </body>.

Nota: get_template_directory_uri() devolve o URL da pasta do tema principal. Se o ficheiro estiver no tema filho, substitua por get_stylesheet_directory_uri().

Passo 3. Enfileirar estilos da mesma forma

Para um ficheiro CSS a lógica é idêntica: tag condicional + wp_enqueue_style. O código vai para a mesma função que os scripts; não é necessário um hook separado.

1
if (is_front_page()) {
2
    wp_enqueue_style(
3
        'my-frontpage-styles',
4
        get_template_directory_uri() . '/css/frontpage.css',
5
        array(),
6
        '1.0.0'
7
    );
8
}

O quinto parâmetro de wp_enqueue_style é o tipo de media. O padrão é 'all'. Se os estilos forem apenas para ecrãs com mais de 768px, especifique 'screen and (min-width: 768px)'.

Combine scripts e estilos numa única função. Desta forma evita verificações redundantes:

1
add_action('wp_enqueue_scripts', function () {
2
    if (! is_front_page()) {
3
        return;
4
    }
5
 
6
    wp_enqueue_script(
7
        'my-frontpage-script',
8
        get_template_directory_uri() . '/js/frontpage.js',
9
        array(),
10
        '1.0.0',
11
        true
12
    );
13
 
14
    wp_enqueue_style(
15
        'my-frontpage-styles',
16
        get_template_directory_uri() . '/css/frontpage.css',
17
        array(),
18
        '1.0.0'
19
    );
20
});

Um return antecipado no topo da função é mais limpo do que blocos if aninhados. O código é mais longo, mas lê-se mais rapidamente.

Passo 4. Caso especial: página inicial e página do blogue

Se Configurações → Leitura estiver definido como "Os meus últimos artigos", is_front_page() e is_home() funcionam de forma idêntica. Mas se a página inicial for uma página estática e o blogue residir em /blog/, precisa de uma verificação dupla.

Para enfileirar um script APENAS na página do blogue (não na página inicial estática), use is_home():

1
if (is_home()) {
2
    // Code will only run on the posts page
3
}

Para enfileirar em AMBAS a página inicial E a página do blogue, combine-as:

1
if (is_front_page() || is_home()) {
2
    // Code will run on both "home" pages
3
}

Para a lista completa de tags condicionais, consulte a documentação oficial do WordPress. Aí encontrará também is_page (página por slug), is_single (artigo único), is_category (arquivo de categoria) e dezenas de outras verificações para um controlo granular do carregamento.

Passo 5. Sem editar o functions.php: o plugin Code Snippets

Se preferir não mexer nos ficheiros do tema, instale o plugin gratuito Code Snippets do diretório WordPress.org. Ele adiciona uma secção Snippets → Adicionar Novo no painel de administração: cole o seu código, escolha executá-lo "no front-end" e guarde. O efeito é o mesmo que o functions.php, mas o código sobrevive a uma mudança de tema.

Outra vantagem do Code Snippets: se cometer um erro de sintaxe, o plugin captura o erro fatal e permite reverter a alteração. Ao editar o functions.php através do painel de administração, um único parêntese em falta derruba o site inteiro. Faça sempre uma cópia de segurança completa antes de editar ficheiros do tema.

Verificar o resultado

Abra o seu site, pressione F12 → separador Rede e atualize a página. Na lista de pedidos, encontre o seu script (frontpage.js ou o nome que lhe deu). Agora navegue para qualquer página interna e atualize; o script não deve aparecer na lista.

Se o script ainda carregar em todo o lado, verifique o seguinte:

• O hook é definitivamente wp_enqueue_scripts e não init? O init é acionado antes de o contexto da página ser determinado, pelo que as tags condicionais podem devolver resultados incorretos.
• O ficheiro está no functions.php do tema filho? O tema principal pode ter substituído o hook.
• Há um plugin de otimização a fazer cache? Limpe-a.

⁉️🤔 Perguntas frequentes

*Qual é a diferença entre is_front_page() e is_home()?*

is_front_page() devolve true na página inicial do site em QUALQUER configuração, quer exiba os últimos artigos ou uma página estática. is_home() devolve true apenas na página de artigos do blogue. Se Configurações → Leitura estiver definido como "Os meus últimos artigos", ambas as tags devolvem true. Se a página inicial for uma página estática, is_home() é acionado apenas em /blog/ (se uma estiver atribuída).

Porque é que o meu código no functions.php não funciona?

Três razões mais comuns. Primeira: usar o hook init em vez de wp_enqueue_scripts, porque as tags condicionais ainda não estão definidas no init. Segunda: o functions.php do tema principal foi sobrescrito por uma atualização; use sempre um tema filho ou o Code Snippets. Terceira: o caminho do ficheiro está errado. get_template_directory_uri() aponta para a pasta do tema principal, enquanto get_stylesheet_directory_uri() aponta para a pasta do tema filho. Verifique fazendo echo do valor e abrindo o URL num navegador.

Posso enfileirar um script em várias páginas específicas?

Sim. Substitua is_front_page() por is_page(array('about', 'contact')) e o script carregará nas páginas com os slugs about e contact. Ou use is_single('post-slug') para um artigo específico. A lista completa de tags condicionais está em developer.wordpress.org.

*Qual é a diferença entre get_template_directory_uri() e get_stylesheet_directory_uri()?*

O primeiro devolve o URL da pasta do tema principal; o segundo devolve o URL da pasta do tema filho. Se estiver a trabalhar num tema filho e o ficheiro estiver armazenado lá, use get_stylesheet_directory_uri(). Se o ficheiro estiver no tema principal (ou tiver apenas um tema, sem filho), use get_template_directory_uri(). Um caminho errado é a razão número um para um script não carregar.

Devo usar $_SERVER['REQUEST_URI'] para a verificação?

Não. $_SERVER['REQUEST_URI'] quebra com parâmetros de consulta: /?utm_source=twitter já não é igual a /. Além disso, alguns alojamentos incluem o caminho completo com o subdiretório em REQUEST_URI. As tags condicionais do WordPress são mais fiáveis e funcionam de raiz.

Conclusões: três linhas que melhoram a velocidade de carregamento

Na prática, a maioria dos sites precisa apenas de um único is_front_page() e de um par de chamadas wp_enqueue_script/wp_enqueue_style.

O carregamento condicional de scripts não é uma micro-otimização. Um único plugin de slider "pesado" com 300 KB, enfileirado em todo o site para uma animação na página inicial, adiciona meio segundo ao tempo de carregamento de cada página interna. Multiplique isso pelo número de visitantes e obtém classificações de pesquisa perdidas.

A regra é simples: um ficheiro carrega onde é usado. Para a página inicial, is_front_page(). Para o blogue, is_home(). Para uma página específica, is_page('slug').

• Se tem uma página inicial estática, use is_front_page() e mantenha a simplicidade.
• Se a página inicial é o feed de últimos artigos, qualquer uma das tags funcionará.
• Se scripts e estilos se repetem em várias páginas, extraia as condições para um array e verifique com in_array().

Comece com uma auditoria: abra DevTools → Cobertura (três pontos em Rede → Mais ferramentas → Cobertura), atualize a página e veja quantos kilobytes de JS e CSS não são utilizados. O número vai surpreendê-lo. Que técnica de carregamento condicional utiliza? Partilhe nos comentários.