Skip to content

Tudo para WordPress, desenvolvimento web — e não só

🖼 Como adicionar fundos diferentes para publicações e páginas do WordPress
WordPressTemas WordPress
8 min1,670 palavras

🖼 Como adicionar fundos diferentes para publicações e páginas do WordPress

O tema padrão do WordPress tem um aspeto limpo, mas após um mês de utilização começa a desejar um pouco mais de individualidade. Um fundo colorido para uma página importante ou uma imagem de fundo para artigos específicos é uma forma simples de fazer o conteúdo sobressair visualmente sem redesenhar o site por completo.

Pode conseguir isto de três maneiras: um par de linhas de CSS, um pequeno trecho de PHP ou um plugin já pronto. Nenhum destes métodos exige conhecimentos profundos de desenvolvimento front-end; só precisa de saber onde inserir o código.

Abaixo analisamos os três métodos com fragmentos de código específicos, localizações de ficheiros e uma análise honesta das potenciais armadilhas.

💡 Visão geral rápida:

  • Abra o header.php e encontre a função body_class(). Ela gera classes CSS únicas para cada página e artigo, permitindo-lhe direcionar fundos até ao nível de um único artigo.
  • Adicione uma regra CSS com a classe apropriada ao style.css. O fundo aplicar-se-á apenas à página ou artigo alvo, sem afetar o resto do site.
  • Crie um campo personalizado e adicione um trecho de PHP ao functions.php. O fundo será definido através de um URL de imagem diretamente a partir da administração do WordPress, sem editar manualmente o CSS.

Como adicionar um fundo via CSS e body_class

O WordPress atribui automaticamente um conjunto de classes CSS à tag <body> através da função body_class(). Entre estas estão identificadores únicos para artigos ou páginas específicos, permitindo-lhe direcionar fundos com precisão cirúrgica.

Certifique-se de que o seu tema chama o body_class(). Abra Aparência → Editor de Ficheiros do Tema e encontre o ficheiro header.php:

Editor de temas do WordPress: a selecionar o ficheiro header.php

Dentro do header.php, encontre a tag de abertura <body>. Ao lado dela deve estar a função:

1<body <?php body_class(); ?>>

Se vir apenas <body> sem a função, adicione-a. A maioria dos temas modernos já inclui esta chamada, mas vale a pena verificar.

Agora abra qualquer página no seu site e veja o código fonte (clique com o botão direito → Ver código fonte da página no Chrome). Para um artigo individual verá algo como:

1<body class="single single-post postid-1 single-format-standard logged-in">

Para uma página, o resultado será diferente:

1<body class="page page-id-2 page-template-default logged-in">

Aqui estão as classes chave que pode direcionar com CSS:

  • .single, todos os artigos individuais. Qualquer estilo aplicado a esta classe afetará todos os artigos do blogue.
  • .postid-N, um artigo específico com ID = N. Ideal para estilização precisa.
  • .page, todas as páginas do site.
  • .page-id-N, uma página específica com ID = N.
  • .single-format-standard, artigos com o formato padrão.
  • .logged-in, aplica-se apenas a utilizadores com sessão iniciada (útil para depuração).

Agora adicione CSS ao ficheiro style.css do seu tema. Por exemplo, para definir um fundo preto para todos os artigos:

1.single {
2    background-color: #000;
3}

E para definir uma imagem de fundo para uma página específica com ID 2:

1.page-id-2 {
2    background-image: url('/wp-content/uploads/2026/01/my-background.jpg');
3    background-size: cover;
4    background-position: center;
5}

Pode encontrar o ID da página ou artigo na administração: abra a lista de páginas, passe o cursor sobre o título e verá post=2 ou um número semelhante na barra de estado do navegador. No editor Gutenberg, o ID aparece no URL: post.php?post=2&action=edit.

A vantagem deste método é a sua simplicidade: não mexe em PHP, não instala plugins e sabe exatamente o que cada classe faz. A desvantagem é que, quando mudar de tema, todos os estilos do style.css serão perdidos, a menos que esteja a usar um tema filho.

Como definir um fundo através de um campo personalizado e PHP

Se precisar de alterar a imagem de fundo diretamente da administração sem ter de mergulhar no CSS de cada vez, o método do campo personalizado funciona bem. Cria um campo para o URL da imagem e um pequeno trecho de PHP no functions.php insere-o no atributo background-image.

Adicione o seguinte código ao functions.php do seu tema ativo. Se estiver a usar um tema de terceiros, certifique-se de que usa um tema filho; caso contrário, as alterações serão perdidas nas atualizações:

1<?php
2/**
3 * Adds an inline style for body background via a custom field.
4 * Replace 'myprefix' with your own unique prefix.
5 */
6function myprefix_custom_field_background() {
7    $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true );
8    if ( $background ) {
9        ?>
10        <style type="text/css">
11            body {
12                background-image: url( "<?php echo esc_url( $background ); ?>" );
13            }
14        </style>
15        <?php
16    }
17}
18add_action( 'wp_head', 'myprefix_custom_field_background' );

A função liga-se ao wp_head e o estilo inline é inserido no <head> da página. O esc_url() higieniza o URL para remover caracteres potencialmente perigosos, enquanto o get_post_meta() recupera o valor do campo para o artigo atual.

Agora abra qualquer artigo ou página na administração, encontre o bloco Campos Personalizados e crie um campo com o nome myprefix_background_image. Cole o URL completo da imagem de fundo como valor. Guarde e o fundo aplicar-se-á apenas a este artigo.

Se o bloco de campos personalizados não estiver visível: abra o editor, clique nos três pontos no canto superior direito → Preferências → Painéis e ative "Campos personalizados".

Nota: a imagem já deve estar carregada na Biblioteca de Multimédia do WordPress; use o link direto para o ficheiro, não a página de anexo.

Plugins para fundos: quando o código não é a sua praia

CSS e PHP cobrem a maioria das tarefas, mas se preferir uma abordagem visual, eis o que está disponível no mercado.

WP-Backgrounds Lite: história e conclusões

Interface do plugin WP-Backgrounds Lite no admin

O WP-Backgrounds Lite foi uma solução gratuita popular para fundos há vários anos. O plugin permitia definir fundos diferentes para artigos, páginas e tipos de conteúdo personalizados, e incluía suporte para apresentações de slides e fundos de vídeo. No entanto, desde junho de 2021 que está fechado no diretório WordPress.org com um aviso de "Problema de Segurança", e várias análises independentes apontaram para a injeção de links ocultos no código do site.

A principal lição: para tarefas que podem ser resolvidas com um par de linhas de CSS, não vale a pena instalar um plugin não verificado. Mas se precisar mesmo de um plugin, verifique a data da última atualização e o número de instalações ativas.

Custom Backgrounds: uma abordagem comercial

Página do plugin Custom Backgrounds no CodeCanyon

O plugin Custom Backgrounds da RightHere no CodeCanyon oferece controlo total: fundos para artigos, páginas, taxonomias e arquivos, efeitos parallax, temporizadores e múltiplos fundos por página. O plugin é pago, com a opção de pré-visualizar antes de comprar.

A desvantagem: o autor não atualiza o produto há vários anos, pelo que a compatibilidade com as versões atuais do WordPress é questionável. Para um projeto pontual, é uma solução funcional; para um site de longo prazo, é melhor procurar alternativas mantidas ativamente.

Fundos de vídeo e parallax para o WPBakery

Configurações de fundo com efeito parallax no WPBakery

Se usa o Page Builder do WPBakery (anteriormente Visual Composer), o addon Parallax & Video Background da MegaMain adiciona fundos de vídeo completos e rolagem parallax diretamente na interface do construtor. YouTube, Vimeo e MP4/WebM carregados são suportados, juntamente com quatro direções de parallax e a capacidade de desativar o efeito em dispositivos móveis.

A rolagem parallax ocorre quando a imagem de fundo se move a uma velocidade diferente em relação ao primeiro plano. Tem um aspeto impressionante, mas em dispositivos móveis frequentemente engasga, pelo que a capacidade de desativar o efeito para smartphones é crítica aqui.

O addon funciona dentro do WPBakery: basta adicionar um fundo a uma linha ou coluna através da interface familiar, sem um menu separado. O preço é uma compra única no CodeCanyon e as atualizações são lançadas regularmente.

Um pequeno vídeo sobre o tópico: adicionar uma imagem de fundo a páginas e blocos individuais no WordPress. Funciona como um complemento aos métodos descritos acima, com todo o processo mostrado num site real.

⁉️🤔 Perguntas frequentes

Posso definir fundos diferentes para categorias de artigos diferentes?

Sim, se o seu tema adicionar uma classe de categoria via post_class() no loop de saída. Isto geralmente aparece como .category-news ou .category-portfolio. Abra o código fonte da página de arquivo da categoria e encontre a classe na tag <article>. Depois é uma regra CSS padrão no style.css. Alternativa: a tag condicional has_category() num trecho de PHP.

O que devo fazer se a função body_class() estiver em falta no header.php?

Adicione-a manualmente à tag de abertura <body>: substitua <body> por <body <?php body_class(); ?>>. Se o header.php não estiver disponível para edição (o tema está bloqueado), crie um tema filho, copie o header.php do tema pai e faça a edição na cópia.

O fundo não aparece depois de adicionar o CSS. Qual é a razão?

Três causas comuns: (1) cache do navegador, abra a página em modo anónimo; (2) outro seletor CSS está a sobrepor o seu fundo, verifique nas Ferramentas de Programador (F12) se a sua regra está riscada; (3) o caminho da imagem está incorreto, use um URL absoluto a partir da raiz do site com uma barra inicial.

É obrigatório usar um tema filho para edições no functions.php?

Altamente recomendado. Edições diretas no functions.php do tema pai serão perdidas na primeira atualização do tema. Um tema filho isola as suas alterações: crie uma pasta, adicione um style.css com um cabeçalho e um functions.php com o seu código. Demora cinco minutos e poupa horas durante as atualizações.

O que pode substituir o WP-Backgrounds Lite hoje?

Para fundos simples, o método CSS deste artigo cobre totalmente a funcionalidade do plugin descontinuado. Se precisar de uma interface visual, use o bloco de Capa no Gutenberg: fornece uma imagem de fundo com sobreposição de texto para qualquer página ou artigo. Para fundos parallax e de vídeo, use o addon do WPBakery da análise acima.

Conclusões: qual o método a escolher para a sua tarefa

A escolha de um método resume-se a duas perguntas: com que frequência muda os fundos e quão confortável se sente a editar código.

  • Se precisa de definir uma vez e esquecer, use CSS via body_class(). Duas linhas no style.css, zero plugins, funciona em qualquer tema.
  • Se o fundo muda regularmente para artigos diferentes, use um trecho de PHP com um campo personalizado. Carregue uma imagem para a Biblioteca de Multimédia, cole o URL no campo, está feito.
  • Se trabalha no WPBakery e precisa de fundos de vídeo, use o addon Parallax & Video Background.
  • Se não quer mexer em código de todo, o bloco de Capa integrado no Gutenberg cobre a maioria das tarefas de imagem de fundo sem um único plugin.

Comece com CSS (demora cinco minutos e não envolve risco). E se usar uma técnica não convencional com fundos que não tenhamos abordado, partilhe-a nos comentários.

Redação
RedaçãoEquipa editorial→ All publications

Uma equipa profissional de escritores e editores especializados na criação de conteúdo de qualidade.