La fonctionnalité d’arrière-plan personnalisé de WordPress (introduite avec la version 3) applique par défaut l’image choisie au body avec la classe custom-background. Pour les besoins du thème sur lequel je travaille actuellement, j’ai souhaité pouvoir appliquer l’arrière-plan sur une div qui ne représente qu’une partie du contenu. Le codex WordPress n’étant pas très explicite pour effectuer cette modification, je vous propose ici la méthode à employer pour y parvenir.
Activation du custom background
Tout d’abord un petit rappel, notamment après les changements apportés par la mise à jour 3.4 pour l’activation de l’arrière-plan personnalisé. Pour faire apparaitre son sous-menu dans le menu Apparence de WordPress, il faut ajouter dans le fichier functions.php de votre thème :
if ( function_exists( 'add_theme_support' ) ) {
$defaults = array(
'default-color' => '000000',
'default-image' => get_template_directory_uri() . '/img/background.png',
'wp-head-callback' => 'my_theme_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );
}
Deux nouveautés ici :
- l’activation du custom background ne se fait plus avec la fonction add_custom_background mais avec add_theme_support
- 2 paramètres par défaut ont été ajoutés “default-color” et “default-image”
On active donc l’arrière-plan personnalisé en lui passant les valeurs par défaut “000000” (noir) pour la couleur de fond, et l’url vers le fichier “background.png” dans le thème, et la fonction de callback “my_theme_background_cb” qui est celle qui va nous servir à changer l’élément sur lequel on applique l’image/la couleur de fond. De la même façon, il est possible de faire des modifications dans l’admin avec les deux autres paramètres “admin-head-callback” et “admin-preview-callback”.
La fonction de callback pour le custom background
On rentre ici dans le vif du sujet de cet article. Je reprend ici en grande partie la fonction de callback par défaut “_custom_background_cb()” qui se trouve dans le fichier theme.php du core de WordPress.
La fonction récupère les valeurs pour l’image, les couleurs et les différentes valeurs de positionnement définies dans l’admin. La fonction get_theme_mod permet de récupérer des réglages de modification du thème en cours. Ici ce qui nous intéresse le plus, c’est bien sûr à la fin, entre les 2 balises <style> : par défaut, le style cible “body.custom-background”, je l’ai donc modifié pour cibler l’élément avec la classe “.main” sur lequel je veux appliquer mon arrière-plan personnalisé.
Une modification très simple à réaliser au final, et qui permet aux développeurs de thèmes comme moi d’utiliser cette fonctionnalité intégrée à WordPress tout en ciblant avec précision l’élément à styliser.