Il tema di WordPress può consentire agli utenti di personalizzare lo sfondo della pagina scegliendo un colore o un’immagine attraverso la dashboard del programma, ma deve essere abilitata modificando il file functions.php del proprio tema.

Salvare una copia del file functions.php prima di modificarlo perché in caso di errore WordPress potrebbe non funzionare più correttamente e sarà necessario ripristinarlo prima di poter accedere nuovamente alla dashboard.

Abilitare la personalizzazione dello sfondo nel tema

Per abilitare la personalizzazione dello sfondo, aprire il file functions.php del proprio tema e aggiungere lo script seguente.

$args = array(
       'default-color' => '000000',
       'default-image' => '%1$s/background.jpg',
);
add_theme_support( 'custom-background', $args );

Modificare il colore di sfondo e il nome dell’immagine come si desidera. L’immagine predefinita deve trovarsi all’interno della cartella del tema nel percorso indicato in default-image.

Dopo aver salvato il file functions.php sarà possibile modificare l’immagine di sfondo dalla dashboard di WordPress (Aspetto > Personalizza > Immagine di sfondo).

Abilitare la personalizzazione dello sfondo

Abilitare la personalizzazione dello sfondo

La funzione add_theme_support() accetta due argomenti:

  1. La caratteristica che si vuole rendere modificabile, nell’esempio ‘custom-background’
  2. I valori predefiniti per le proprietà modificabili strutturati in un array associativo

Nell’array è possibile specificare, se è necessario, i valori predefiniti per le seguenti proprietà:

'default-color'          => '',
'default-image'          => '',
'default-repeat'         => '',
'default-position-x'     => '',
'default-attachment'     => '',
'wp-head-callback'       => '_custom_background_cb',
'admin-head-callback'    => '',
'admin-preview-callback' => ''

Quando si utilizza la funzione add_theme_support() nel modo indicato, WordPress inserisce, nell’intestazione del documento, un foglio di stile incorporato con cui definisce la classe custom-background.

<style>
  body.custom-background { 
  background-image: url('http://sintesi-design.it/wp-content/themes/wpt/background.jpg'); 
  background-repeat: repeat; 
  background-position: top left; 
  background-attachment: scroll; 
}
</style>

Per consentire a WordPress di inserire l’elemento style è necessario che nel tema utilizzato sia presente la funzione wp_head() subito prima del tag di chiusura dell’elemento head.

Inoltre, la classe custom-background viene applicata al body dalla funzione body_class() che, perciò deve essere presente nel tema utilizzato all’interno dell’elemento body.

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

Per altre informazioni rivolgersi alla documentazione ufficiale di WordPress.