🖼 Comment ajouter différents arrière-plans pour les articles et pages WordPress
Le thème WordPress standard est visuellement propre, mais après un mois d’utilisation, on commence à vouloir un peu plus de personnalité. Un fond coloré pour une page clé ou une image d’arrière-plan pour des articles spécifiques est un moyen simple de faire ressortir visuellement un contenu sans refondre l’intégralité du site.
Vous pouvez y parvenir de trois manières: quelques lignes de CSS, un court extrait PHP ou un plugin prêt à l’emploi. Aucune de ces méthodes ne nécessite de connaissances approfondies en développement front-end; il suffit de savoir où insérer le code.
Nous examinons ci-dessous les trois méthodes avec des fragments de code précis, les emplacements des fichiers et un regard honnête sur les écueils potentiels.
💡 Aperçu rapide:
- Ouvrez header.php et repérez la fonction
body_class(). Elle génère des classes CSS uniques pour chaque page et article, ce qui vous permet de cibler les arrière-plans jusqu’à un article individuel. - Ajoutez une règle CSS avec la classe appropriée dans style.css. L’arrière-plan s’appliquera uniquement à la page ou à l’article cible, sans affecter le reste du site.
- Créez un champ personnalisé et ajoutez un extrait PHP dans functions.php. L’arrière-plan sera défini via une URL d’image directement depuis l’administration WordPress, sans modifier manuellement le CSS.
Comment ajouter un arrière-plan via CSS et body_class
WordPress attribue automatiquement un ensemble de classes CSS à la balise <body> via la fonction body_class(). Parmi celles-ci figurent des identifiants uniques pour des articles ou des pages spécifiques, ce qui vous permet de cibler les arrière-plans avec une précision chirurgicale.
Assurez-vous que votre thème appelle body_class(). Ouvrez Apparence → Éditeur de fichiers du thème et trouvez le fichier header.php:
Dans header.php, trouvez la balise ouvrante <body>. À côté d’elle devrait se trouver la fonction:
1 <body <?php body_class(); ?>>
Si vous voyez simplement <body> sans la fonction, ajoutez-la. La plupart des thèmes modernes incluent déjà cet appel, mais il est utile de vérifier.
Ouvrez maintenant n’importe quelle page de votre site et affichez son code source (clic droit → Afficher le code source de la page dans Chrome). Pour un article unique, vous verrez quelque chose comme ceci:
1 <body class="single single-post postid-1 single-format-standard logged-in">
Pour une page, le résultat sera différent:
1 <body class="page page-id-2 page-template-default logged-in">
Voici les classes clés que vous pouvez cibler avec CSS:
.single, tous les articles uniques. Tout style appliqué à cette classe affectera chaque article de blog..postid-N, un article spécifique avec l’ID = N. Idéal pour un style ponctuel..page, toutes les pages du site..page-id-N, une page spécifique avec l’ID = N..single-format-standard, les articles au format standard..logged-in, s’applique uniquement aux utilisateurs connectés (utile pour le débogage).
Ajoutez maintenant du CSS dans le fichier style.css de votre thème. Par exemple, pour définir un fond noir pour tous les articles:
1 .single { 2 background-color: #000; 3 }
Et pour définir une image d’arrière-plan pour une page spécifique avec l’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 }
Vous pouvez trouver l’ID de la page ou de l’article dans l’administration: ouvrez la liste des pages, survolez le titre et vous verrez post=2 ou un numéro similaire dans la barre d’état du navigateur. Dans l’éditeur Gutenberg, l’ID apparaît dans l’URL: post.php?post=2&action=edit.
L’avantage de cette méthode est sa simplicité: vous ne touchez pas au PHP, vous n’installez pas de plugins et vous savez exactement à quoi correspond chaque classe. L’inconvénient est que si vous changez de thème, tous les styles de style.css seront perdus, sauf si vous utilisez un thème enfant.
Comment définir un arrière-plan via un champ personnalisé et PHP
Si vous avez besoin de modifier l’image d’arrière-plan directement depuis l’administration sans plonger dans le CSS à chaque fois, la méthode du champ personnalisé fonctionne bien. Vous créez un champ pour l’URL de l’image et un court extrait PHP dans functions.php l’insère dans l’attribut background-image.
Ajoutez le code suivant au fichier functions.php de votre thème actif. Si vous utilisez un thème tiers, veillez à utiliser un thème enfant, sinon les modifications seront perdues lors des mises à jour:
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 fonction s’accroche à wp_head et le style en ligne est inséré dans le <head> de la page. esc_url() assainit l’URL pour supprimer les caractères potentiellement dangereux, tandis que get_post_meta() récupère la valeur du champ pour l’article en cours.
Ouvrez maintenant n’importe quel article ou page dans l’administration, trouvez le bloc Champs personnalisés et créez un champ nommé myprefix_background_image. Collez l’URL complète de l’image d’arrière-plan comme valeur. Enregistrez et l’arrière-plan s’appliquera uniquement à cet article.
Si le bloc des champs personnalisés n’est pas visible: ouvrez l’éditeur, cliquez sur les trois points dans le coin supérieur droit → Préférences → Panneaux et activez «Champs personnalisés».
Remarque: l’image doit déjà être téléversée dans la bibliothèque de médias WordPress; utilisez le lien direct vers le fichier, pas la page de la pièce jointe.
Des plugins pour les arrière-plans: quand le code n’est pas votre truc
Le CSS et le PHP couvrent la plupart des besoins, mais si vous préférez une approche visuelle, voici ce qui est disponible sur le marché.
WP-Backgrounds Lite: historique et enseignements
WP-Backgrounds Lite était une solution gratuite populaire pour les arrière-plans il y a plusieurs années. Le plugin permettait de définir différents arrière-plans pour les articles, les pages et les types de contenu personnalisés, et incluait la prise en charge des diaporamas et des arrière-plans vidéo. Cependant, depuis juin 2021, il a été fermé dans le répertoire WordPress.org avec un avis de «Problème de sécurité» et plusieurs avis indépendants ont signalé des liens cachés injectés dans le code du site.
La principale leçon à retenir: pour des tâches qui peuvent être résolues avec quelques lignes de CSS, installer un plugin non vérifié n’en vaut pas la peine. Mais si vous avez vraiment besoin d’un plugin, vérifiez la date de la dernière mise à jour et le nombre d’installations actives.
Custom Backgrounds: une approche commerciale
Le plugin Custom Backgrounds de RightHere sur CodeCanyon offre un contrôle total: arrière-plans pour les articles, les pages, les taxonomies et les archives, effets de parallaxe, minuteurs et arrière-plans multiples par page. Le plugin est payant, avec une option de prévisualisation avant achat.
L’inconvénient: l’auteur n’a pas mis à jour le produit depuis plusieurs années, la compatibilité avec les versions actuelles de WordPress est donc incertaine. Pour un projet ponctuel, c’est une solution qui fonctionne; pour un site à long terme, il vaut mieux chercher des alternatives activement maintenues.
Arrière-plans vidéo et parallaxe pour WPBakery
Si vous utilisez WPBakery Page Builder (anciennement Visual Composer), l’extension Parallax & Video Background de MegaMain ajoute des arrière-plans vidéo complets et un défilement parallaxe directement dans l’interface du constructeur. YouTube, Vimeo et les fichiers MP4/WebM téléversés sont pris en charge, avec quatre directions de parallaxe et la possibilité de désactiver l’effet sur mobile.
Le défilement parallaxe, c’est lorsque l’image d’arrière-plan se déplace à une vitesse différente par rapport au premier plan. L’effet est impressionnant, mais sur les appareils mobiles, il provoque souvent des saccades, donc la possibilité de désactiver l’effet pour les smartphones est ici cruciale.
L’extension fonctionne à l’intérieur de WPBakery: vous ajoutez simplement un arrière-plan à une ligne ou une colonne via l’interface familière, sans menu séparé. Le prix correspond à un achat unique sur CodeCanyon et les mises à jour sont publiées régulièrement.
Une courte vidéo sur le sujet: ajouter une image d’arrière-plan à des pages et des blocs individuels dans WordPress. Elle sert de complément aux méthodes décrites ci-dessus, l’ensemble du processus étant montré sur un site réel.
⁉️🤔 Foire aux questions
Puis-je définir des arrière-plans différents pour différentes catégories d’articles?
Oui, si votre thème ajoute une classe de catégorie via
post_class()dans la boucle de sortie. Cela ressemble généralement à.category-newsou.category-portfolio. Ouvrez le code source de la page d’archive de la catégorie et trouvez la classe dans la balise<article>. Ensuite, c’est une règle CSS standard dans style.css. Alternative: la balise conditionnellehas_category()dans un extrait PHP.
Que dois-je faire si la fonction body_class() est absente de header.php?
Ajoutez-la manuellement à la balise ouvrante
<body>: remplacez<body>par<body <?php body_class(); ?>>. Si header.php n’est pas disponible pour modification (le thème est verrouillé), créez un thème enfant, copiez le header.php du thème parent et effectuez la modification dans la copie.
L’arrière-plan ne s’affiche pas après l’ajout du CSS. Quelle en est la raison?
Trois causes fréquentes: (1) le cache du navigateur, ouvrez la page en mode navigation privée; (2) un autre sélecteur CSS écrase votre arrière-plan, vérifiez dans les outils de développement (F12) si votre règle est barrée; (3) le chemin de l’image est incorrect, utilisez une URL absolue depuis la racine du site avec une barre oblique initiale.
Est-il obligatoire d’utiliser un thème enfant pour les modifications de functions.php?
Fortement recommandé. Les modifications directes du fichier
functions.phpdu thème parent seront perdues lors de la première mise à jour du thème. Un thème enfant isole vos modifications: créez un dossier, ajoutez unstyle.cssavec un en-tête et unfunctions.phpavec votre code. Cela prend cinq minutes et fait gagner des heures lors des mises à jour.
Par quoi remplacer WP-Backgrounds Lite aujourd’hui?
Pour des arrière-plans simples, la méthode CSS de cet article couvre entièrement les fonctionnalités du plugin abandonné. Si vous avez besoin d’une interface visuelle, utilisez le bloc Couverture dans Gutenberg: il fournit une image d’arrière-plan avec superposition de texte pour n’importe quelle page ou article. Pour les arrière-plans vidéo et parallaxe, utilisez l’extension WPBakery de la revue ci-dessus.
En résumé: quelle méthode choisir pour votre besoin
Le choix d’une méthode se résume à deux questions: à quelle fréquence changez-vous les arrière-plans et dans quelle mesure êtes-vous à l’aise avec la modification de code.
- Si vous devez le définir une fois et l’oublier, utilisez le CSS via
body_class(). Deux lignes dans style.css, zéro plugin, fonctionne sur n’importe quel thème. - Si l’arrière-plan change régulièrement pour différents articles, utilisez un extrait PHP avec un champ personnalisé. Téléversez une image dans la bibliothèque de médias, collez l’URL dans le champ, c’est fait.
- Si vous travaillez dans WPBakery et avez besoin d’arrière-plans vidéo, utilisez l’extension Parallax & Video Background.
- Si vous ne voulez pas du tout toucher au code, le bloc Couverture intégré à Gutenberg couvre la plupart des besoins d’image d’arrière-plan sans aucun plugin.
Commencez par le CSS (cela prend cinq minutes et n’implique aucun risque). Et si vous utilisez une technique non standard pour les arrière-plans que nous n’avons pas abordée, partagez-la dans les commentaires.
Une équipe professionnelle de rédacteurs et d'éditeurs spécialisés dans la création de contenu de qualité.