WordPress est le chouchou de beaucoup à la fois en tant que plateforme de blogs et système de gestion de contenu (CMS). C'est principalement parce que la plate-forme est facile à apprendre, à utiliser et à personnaliser. Je veux dire, vous pouvez transformer votre site Web comme vous le souhaitez sans trop d'efforts. Vous pouvez même ajouter différents arrière-plans à vos articles et pages WordPress, ce qui se trouve être le sujet de ce guide.

Si vous cherchez à ajouter de la couleur et du style à vos publications et pages WordPress, ce guide approfondit le sujet en utilisant une approche à deux volets. Tout d'abord, nous ajouterons différents arrière-plans aux articles ou pages WordPress en utilisant CSS et une simple fonction PHP, mais si ce n'est pas votre tasse de thé (disons que vous êtes le parfait débutant et que le code vous fait peur), nous allons proposer quelques plugins d'arrière-plan WordPress pour vous aider dans le processus.

Quoi qu'il en soit, vous devriez passer un bon moment car il s'agit d'un projet relativement facile. De plus, c'est toujours amusant d'apprendre quelque chose de nouveau. Profitez jusqu'au bout, et partagez vos suggestions, remarques ou questions dans l'espace commentaire. Prêt? Faisons le grand saut en 3, 2, 1…

Comment ajouter des arrière-plans à WordPress avec du code

Cette section sera d'une grande utilité si vous maîtrisez PHP, HTML et CSS. Ne vous inquiétez pas, vous pouvez toujours copier et coller les extraits de code fournis ici. Vous avez juste besoin de savoir où se trouvent les différents fichiers dans votre installation WordPress. Avec ce préambule, passons à l'édition.

Ajouter différents arrière-plans aux articles et pages WordPress à l'aide de CSS

Une grande partie du style qui va dans les publications et les pages WordPress (et l'ensemble de votre site) est contrôlée par un fichier appelé feuille de style. Le fichier de feuille de style dans WordPress est généralement étiqueté style.css. Vous pouvez accéder à style.css en accédant à Apparence > Éditeur dans votre administrateur WordPress :

ajouter des arrière-plans différents aux messages wordpress et au style des pages

Nous ajoutons des arrière-plans (et d'autres styles) à vos publications/pages WordPress dans style.css, il est donc important de les charger dans un onglet séparé.

Lorsque vous accédez à Apparence -> Éditeur, vous verrez également une liste de tous les modèles de thème à droite de l'écran. Si vous utilisez un thème enfant – vous devriez en utiliser un – vous devrez charger les fichiers de modèle de votre thème parent.

Vous devez vous concentrer sur le fichier header.php. Pourquoi header.php ? Parce que ce fichier est ajouté à tous les autres modèles, c'est-à-dire aux pages et aux publications, lorsque WordPress rassemble les fichiers qui composent votre site Web. En d'autres termes, le code à l'intérieur de header.php apparaît sur chaque page ou message que vous créez.

Recherchez cet extrait de code :

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

Cette fonction a un but. Il divise les classes CSS que vous pouvez utiliser pour modifier le style de vos publications et de vos pages. Tout ce que vous avez à faire est de cibler une classe CSS spécifique à la page ou à la publication que vous souhaitez personnaliser, d'ajouter votre arrière-plan et vos styles, d'enregistrer vos modifications et de vous réjouir.

Si, par exemple, vous avez consulté le code source de votre page d'accueil, la fonction ci-dessus affichera quelque chose comme :

<body class="home blog logged-in admin-bar no-customize-support hfeed">

Et c'est parce que le de l'extrait de code fournit toutes les classes, par exemple .home, .blog, .logged-in, etc., que vous pouvez utiliser dans votre CSS pour styliser divers éléments de votre page d'accueil.

De côté: Afficher le code source de n'importe quel article ou page est une chose facile. Si vous utilisez Chrome, faites simplement un clic droit sur une page/publication et sélectionnez “Afficher la source de la page”. Dans Mozilla, cliquez avec le bouton droit sur la publication/la page et sélectionnez “Afficher la source de la page”. Si vous utilisez Microsoft Edge (Internet Explorer), faites un clic droit sur votre page/publication et sélectionnez « Afficher la source ».

Si vous affichez le code source d'une page WordPress, cette même fonction affichera :

<body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support">

Si vous avez consulté le code source d'un seul article, notre fonction body_class produit quelque chose de proche de :

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">

Comme vous pouvez le voir, vous obtenez quelques classes CSS que vous pouvez facilement cibler :

  • .page pour toutes les pages
  • .page-id-2 qui vous permet de cibler une page spécifique, c'est-à-dire une page avec un numéro d'identification. 2
  • .single pour tous les messages uniques, ce qui signifie que tous les styles CSS que vous appliquez à cette classe s'appliqueront à tous les messages
  • .postid-1 pour la publication avec id=1, ce qui signifie que tous les styles CSS que vous appliquez n'affecteront que cette publication
  • .single-format-standard – Cela vous permet d'appliquer des styles CSS à tous les messages avec le format de publication standard
  • .logged-in – Les styles que vous appliquez à l'aide de cette classe CSS ne s'appliqueront qu'aux utilisateurs connectés

Tous les éléments contenus dans class=”” vous offrent des crochets CSS que vous pouvez utiliser pour cibler n'importe quel article ou page. Mais pourquoi ajoutons-nous le point (.) avant chaque classe ? C'est la syntaxe CSS classique, qui indique dicte que vous devez appeler toutes les classes en utilisant un point (.) et toutes les divs en utilisant le hachage (#). Histoire pour un autre jour.

Par exemple, pour appliquer un arrière-plan noir à tous les articles, ajoutez l'extrait de code suivant à style.css :

.single { background-color: #000; }

Ajouter un arrière-plan aux articles et pages WordPress en utilisant PHP (via un champ personnalisé)

Si vous souhaitez ajouter une méthode manuelle intégrée pour modifier les arrière-plans de votre site via un champ personnalisé, cela est également très facile à faire. Collez simplement le code suivant dans le fichier functions.php de votre thème (si vous utilisez un thème tiers, il est préférable de le faire via un thème enfant). Assurez-vous de changer l'endroit où il est écrit “myprefix” pour votre identifiant unique (c'est pour éviter les conflits avec les thèmes et les plugins) et une fois que tout est prêt, vous pouvez maintenant utiliser le champ personnalisé “myprefix_background_image” pour entrer une URL vers une image pour toute page ou publication dans laquelle vous souhaitez modifier l'arrière-plan.

<?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
	if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
		<style type="text/css">
			body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
		</style>
	<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );

Remarquez comment la fonction s'accroche à l'action “wp_head” ? Cela signifie que chaque fois que vous utilisez le champ personnalisé, le CSS en ligne sera ajouté à la balise d'en-tête de votre site avec le code permettant de modifier l'arrière-plan en fonction de la valeur de votre champ personnalisé.

Ajouter des arrière-plans à WordPress avec des plugins

Vous pouvez cibler les publications et les pages WordPress et styliser chacune selon le contenu de votre cœur avec PHP et CSS, comme nous l'avons montré. Mais si vous n'avez pas le temps pour le code, ou si les instructions ci-dessus ne fonctionnent pas pour une raison ou une autre, voici quelques plugins d'arrière-plan WordPress pour démarrer.

Plugin WordPress gratuit WP-Backgrounds Lite

wp-background-lite-plugin-wordpress-messages-et-pages

Que puis-je dire ? Cela fait partie de ces plugins WordPress qui répondent au besoin. Vous avez envie d'arrière-plans dynamiques pour vos articles et pages WordPress ? Bien sûr, pourquoi pas. Ce plugin est-il facile à installer et à utiliser ? J'aimerais entendre votre opinion.

WP-Arrière-plans Lite, people, est le plugin qui vous aide à posséder des arrière-plans WordPress une fois pour toutes. Vous pouvez même rendre l'arrière-plan de vos publications et pages WordPress cliquable ! Et il n'exécutera pas toutes les pages à moins que vous ne le vouliez, et il fonctionne bien avec tous les principaux navigateurs.

Arrière-plans personnalisés Premium WordPress Plugin

arrière-plans-personnalisés-pour-wordpress-preview

Présenté par RightHere, un auteur d'élite de CodeCanyon, le plugin Custom Backgrounds vous offre un contrôle complet sur vos arrière-plans WordPress. En quelques minutes, vous pouvez créer des arrière-plans exceptionnels pour les publications, les pages, les types de publication personnalisés, les taxonomies et les archives WordPress parmi d'autres modèles, et égayer le tout avec des effets de parallaxe, des minuteries et le meilleur de jQuery.

Vous pouvez même définir des arrière-plans cliquables et multiples pour vos articles et pages WordPress sans vous embêter. L'auteur vous permet de tester le plugin avant de l'acheter, afin que vous sachiez exactement à quoi vous attendre.

Arrière-plans vidéo et parallaxe pour WPBakery Page Builder

Plugin de parallaxe et d'arrière-plans vidéo

Le défilement de parallaxe semble être partout ces jours-ci, et pour cause : c'est l'un des effets visuels les plus cool qui soient et, lorsqu'il est bien exécuté, il est visuellement époustouflant. Cela a vu un grand nombre de thèmes WordPress de parallaxe arriver sur le marché – pour ceux d'entre vous qui ne connaissent pas le terme parallaxe, c'est lorsque les images d'arrière-plan défilent à une vitesse différente par rapport au premier plan, ce qui crée un effet visuel intrigant.

De manière générale, la plupart des utilisateurs de WordPress s'appuient sur leur thème pour le défilement parallaxe. Toutefois, si vous souhaitez ajouter un effet de parallaxe à un thème sans parallaxe, vous devez consulter les arrière-plans vidéo et parallaxe pour WPBakery.

Le plugin prend en charge les arrière-plans pleine largeur et largeur normale, l'effet de parallaxe fonctionnant dans les quatre directions. Vous pouvez télécharger vos propres images à utiliser comme arrière-plan d'image fixe, ou vous pouvez simplement utiliser un arrière-plan de bloc de couleur unie. Vous pouvez choisir d'activer le défilement fluide pour garantir des performances optimales, et vous pouvez désactiver la parallaxe pour les appareils mobiles. L'interface intuitive facilite la configuration de tout, et vous pouvez spécifier la direction et la vitesse de l'effet de défilement de parallaxe d'un simple clic sur un bouton.

En plus d'un effet de parallaxe, le plugin peut également être utilisé pour ajouter un arrière-plan vidéo, avec des vidéos de YouTube ou Vimeo facilement intégrées – ajoutez simplement l'URL à intégrer. C'est un autre excellent moyen de créer un site Web accrocheur que les visiteurs trouvent mémorable.

Derniers mots

Que vous creusiez dans le code ou que vous utilisiez des plugins, l'ajout de différents arrière-plans à vos publications ou pages WordPress peut contribuer énormément à la notoriété de la marque et à la conception visuelle de votre site. Comment changez-vous l'arrière-plan de vos publications ou pages WordPress ? Faites-nous part de vos questions, suggestions et réflexions via la section des commentaires ci-dessous.