🖼 Come aggiungere sfondi diversi per post e pagine WordPress
Il tema standard di WordPress ha un aspetto pulito, ma dopo un mese di utilizzo inizi a desiderare un po' più di personalità. Uno sfondo colorato per una pagina chiave o un'immagine di sfondo per post specifici è un modo semplice per far risaltare visivamente i contenuti senza riprogettare l'intero sito.
Puoi ottenere questo risultato in tre modi: un paio di righe di CSS, un piccolo snippet PHP o un plugin già pronto. Nessuno di questi metodi richiede una conoscenza approfondita dello sviluppo front-end; devi solo sapere dove inserire il codice.
Di seguito esaminiamo tutti e tre i metodi con frammenti di codice specifici, posizioni dei file e uno sguardo onesto alle potenziali insidie.
💡 Panoramica rapida:
- Apri header.php e trova la funzione
body_class(). Genera classi CSS univoche per ogni pagina e post, permettendoti di indirizzare gli sfondi fino al singolo post. - Aggiungi una regola CSS con la classe appropriata al file style.css. Lo sfondo si applicherà solo alla pagina o al post desiderato senza influenzare il resto del sito.
- Crea un campo personalizzato e aggiungi uno snippet PHP a functions.php. Lo sfondo verrà impostato tramite un URL immagine direttamente dall'amministrazione di WordPress, senza modificare manualmente i CSS.
Come aggiungere uno sfondo tramite CSS e body_class
WordPress assegna automaticamente un insieme di classi CSS al tag <body> attraverso la funzione body_class(). Tra queste ci sono identificatori univoci per post o pagine specifici, che ti permettono di indirizzare gli sfondi con precisione chirurgica.
Assicurati che il tuo tema chiami body_class(). Apri Aspetto → Editor file del tema e trova il file header.php:
All'interno di header.php, trova il tag di apertura <body>. Accanto ad esso dovrebbe esserci la funzione:
1 <body <?php body_class(); ?>>
Se vedi solo <body> senza la funzione, aggiungila. La maggior parte dei temi moderni include già questa chiamata, ma vale la pena controllare.
Ora apri una qualsiasi pagina del tuo sito e visualizza il suo codice sorgente (tasto destro → Visualizza sorgente pagina in Chrome). Per un singolo post vedrai qualcosa del genere:
1 <body class="single single-post postid-1 single-format-standard logged-in">
Per una pagina l'output sarà diverso:
1 <body class="page page-id-2 page-template-default logged-in">
Ecco le classi chiave che puoi indirizzare con i CSS:
.single, tutti i post singoli. Qualsiasi stile applicato a questa classe influenzerà ogni articolo del blog..postid-N, un post specifico con ID = N. Ideale per uno styling mirato..page, tutte le pagine del sito..page-id-N, una pagina specifica con ID = N..single-format-standard, post con il formato standard..logged-in, si applica solo agli utenti che hanno effettuato l'accesso (utile per il debug).
Ora aggiungi i CSS al file style.css del tuo tema. Ad esempio, per impostare uno sfondo nero per tutti i post:
1 .single { 2 background-color: #000; 3 }
E per impostare un'immagine di sfondo per una pagina specifica con 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 }
Puoi trovare l'ID della pagina o del post nell'amministrazione: apri l'elenco delle pagine, passa il mouse sul titolo e vedrai post=2 o un numero simile nella barra di stato del browser. Nell'editor Gutenberg l'ID appare nell'URL: post.php?post=2&action=edit.
Il vantaggio di questo metodo è la sua semplicità: non tocchi PHP, non installi plugin e sai esattamente quale classe fa cosa. Lo svantaggio è che quando cambi tema tutti gli stili di style.css andranno persi a meno che tu non stia usando un tema child.
Come impostare uno sfondo tramite un campo personalizzato e PHP
Se hai bisogno di cambiare l'immagine di sfondo direttamente dall'amministrazione senza immergerti nei CSS ogni volta, il metodo del campo personalizzato funziona bene. Crei un campo per l'URL dell'immagine e un piccolo snippet PHP in functions.php lo inserisce nell'attributo background-image.
Aggiungi il seguente codice al file functions.php del tuo tema attivo. Se stai usando un tema di terze parti, assicurati di usare un tema child; altrimenti le modifiche andranno perse con gli aggiornamenti:
1 <?php 2 /** 3 * Adds an inline style for body background via a custom field. 4 * Replace 'myprefix' with your own unique prefix. 5 */ 6 function 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 } 18 add_action( 'wp_head', 'myprefix_custom_field_background' );
La funzione si aggancia a wp_head e lo stile inline viene inserito nel <head> della pagina. esc_url() sanitizza l'URL per rimuovere caratteri potenzialmente pericolosi, mentre get_post_meta() recupera il valore del campo per il post corrente.
Ora apri un qualsiasi post o pagina nell'amministrazione, trova il blocco Campi personalizzati e crea un campo chiamato myprefix_background_image. Incolla l'URL completo dell'immagine di sfondo come valore. Salva e lo sfondo si applicherà solo a questo post.
Se il blocco dei campi personalizzati non è visibile: apri l'editor, clicca i tre puntini nell'angolo in alto a destra → Preferenze → Pannelli e abilita "Campi personalizzati".
Nota: l'immagine deve essere già stata caricata nella Libreria Media di WordPress; usa il link diretto al file, non la pagina dell'allegato.
Plugin per gli sfondi: quando il codice non fa per te
CSS e PHP coprono la maggior parte delle esigenze, ma se preferisci un approccio visivo, ecco cosa offre il mercato.
WP-Backgrounds Lite: storia e lezioni apprese
WP-Backgrounds Lite era una soluzione gratuita popolare per gli sfondi diversi anni fa. Il plugin permetteva di impostare sfondi diversi per post, pagine e tipi di post personalizzati e includeva il supporto per presentazioni e sfondi video. Tuttavia, da giugno 2021 è stato chiuso nella directory di WordPress.org con un avviso di "Problema di sicurezza" e diverse recensioni indipendenti hanno segnalato link nascosti iniettati nel codice del sito.
La lezione principale: per compiti che possono essere risolti con un paio di righe di CSS, non vale la pena installare un plugin non verificato. Ma se hai davvero bisogno di un plugin, controlla la data dell'ultimo aggiornamento e il numero di installazioni attive.
Custom Backgrounds: un approccio commerciale
Il plugin Custom Backgrounds di RightHere su CodeCanyon offre il pieno controllo: sfondi per post, pagine, tassonomie e archivi, effetti parallasse, timer e sfondi multipli per pagina. Il plugin è a pagamento, con la possibilità di anteprima prima dell'acquisto.
Lo svantaggio: l'autore non aggiorna il prodotto da diversi anni, quindi la compatibilità con le attuali versioni di WordPress è discutibile. Per un progetto una tantum è una soluzione funzionante; per un sito a lungo termine è meglio orientarsi su alternative mantenute attivamente.
Sfondi video e parallasse per WPBakery
Se usi WPBakery Page Builder (ex Visual Composer), l'addon Parallax & Video Background di MegaMain aggiunge sfondi video completi e scorrimento parallasse direttamente nell'interfaccia del builder. YouTube, Vimeo e MP4/WebM caricati sono supportati, insieme a quattro direzioni di parallasse e la possibilità di disabilitare l'effetto su mobile.
Lo scorrimento parallasse si ha quando l'immagine di sfondo si muove a una velocità diversa rispetto al primo piano. L'effetto è impressionante, ma sui dispositivi mobili spesso scatta, quindi la possibilità di disabilitare l'effetto per gli smartphone è fondamentale in questo caso.
L'addon funziona all'interno di WPBakery: aggiungi semplicemente uno sfondo a una riga o colonna attraverso l'interfaccia familiare, senza un menu separato. Il prezzo è un acquisto una tantum su CodeCanyon e gli aggiornamenti vengono rilasciati regolarmente.
Un breve video sull'argomento: aggiungere un'immagine di sfondo a singole pagine e blocchi in WordPress. Funziona come supplemento ai metodi descritti sopra, con l'intero processo mostrato su un sito reale.
⁉️🤔 Domande frequenti
Posso impostare sfondi diversi per diverse categorie di post?
Sì, se il tuo tema aggiunge una classe di categoria tramite
post_class()nel loop di output. Di solito appare come.category-newso.category-portfolio. Apri il codice sorgente della pagina archivio della categoria e trova la classe nel tag<article>. Poi è una regola CSS standard in style.css. In alternativa: il tag condizionalehas_category()in uno snippet PHP.
Cosa devo fare se la funzione body_class() manca da header.php?
Aggiungila manualmente al tag di apertura
<body>: sostituisci<body>con<body <?php body_class(); ?>>. Se header.php non è disponibile per la modifica (il tema è bloccato), crea un tema child, copia header.php del tema parent e fai la modifica nella copia.
Lo sfondo non viene visualizzato dopo aver aggiunto i CSS. Qual è il motivo?
Tre cause comuni: (1) cache del browser, apri la pagina in modalità incognito; (2) un altro selettore CSS sta sovrascrivendo il tuo sfondo, controlla negli Strumenti per sviluppatori (F12) se la tua regola è barrata; (3) il percorso dell'immagine non è corretto, usa un URL assoluto dalla root del sito con uno slash iniziale.
È obbligatorio usare un tema child per le modifiche a functions.php?
Altamente raccomandato. Le modifiche dirette al file
functions.phpdel tema parent andranno perse al primo aggiornamento del tema. Un tema child isola le tue modifiche: crea una cartella, aggiungi unstyle.csscon un'intestazione e unfunctions.phpcon il tuo codice. Richiede cinque minuti e fa risparmiare ore durante gli aggiornamenti.
Cosa può sostituire WP-Backgrounds Lite oggi?
Per sfondi semplici il metodo CSS di questo articolo copre completamente le funzionalità del plugin discontinuato. Se hai bisogno di un'interfaccia visiva, usa il blocco Copertina in Gutenberg: fornisce un'immagine di sfondo con sovrapposizione di testo per qualsiasi pagina o post. Per sfondi parallasse e video, usa l'addon WPBakery della recensione qui sopra.
Conclusioni: quale metodo scegliere per il tuo compito
La scelta del metodo si riduce a due domande: quanto spesso cambi gli sfondi e quanto ti senti a tuo agio a modificare il codice.
- Se devi impostarlo una volta e dimenticartene, usa i CSS tramite
body_class(). Due righe in style.css, zero plugin, funziona su qualsiasi tema. - Se lo sfondo cambia regolarmente per post diversi, usa uno snippet PHP con un campo personalizzato. Carica un'immagine nella Libreria Media, incolla l'URL nel campo, fatto.
- Se lavori in WPBakery e hai bisogno di sfondi video, usa l'addon Parallax & Video Background.
- Se non vuoi toccare affatto il codice, il blocco Copertina integrato in Gutenberg copre la maggior parte delle esigenze di immagini di sfondo senza un singolo plugin.
Inizia con i CSS (richiede cinque minuti e non comporta alcun rischio). E se usi una tecnica non standard per gli sfondi che non abbiamo trattato, condividila nei commenti.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.