WordPress est le chouchou de beaucoup à la fois en tant que plate-forme de blogs et système de gestion de contenu (CMS). C’est en grande partie 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 publications et pages WordPress, ce qui se trouve être le sujet de ce guide.
Si vous cherchez à ajouter de la couleur et du style à vos articles et pages WordPress, ce guide aborde 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 proposez 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’à la fin et partagez vos suggestions, commentaires ou questions dans la zone de commentaires. Prêt? Faisons le grand saut dans 3, 2, 1…
Comment ajouter des arrière-plans à WordPress avec du code
Cette section sera très utile si vous connaissez bien 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 au montage.
Ajouter différents arrière-plans aux articles et pages WordPress à l’aide de CSS
Une grande partie du style qui entre 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 intitulé style.css. Vous pouvez accéder à style.css en accédant à Apparence > Éditeur dans votre administrateur WordPress :
Nous ajoutons des arrière-plans (et d’autres styles) à vos articles/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 d’ailleurs – vous devrez charger les fichiers modèles 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 les pages et les 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 publication que vous créez.
Recherchez cet extrait de code :
<body <?php body_class(); ?>>
Cette fonction a un seul but. Il divise les classes CSS que vous pouvez utiliser pour modifier le style de vos articles et pages. Tout ce que vous avez à faire est de cibler une classe CSS spécifique à la page ou à la publication que vous souhaitez personnaliser, ajouter votre arrière-plan et vos styles, enregistrer vos modifications et 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 une partie 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é: Voir le code source de n’importe quel article ou page est une chose facile. Si vous utilisez Chrome, faites un clic droit sur une page/une 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), cliquez avec le bouton droit sur votre page/article 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 génère quelque chose 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 id no. 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 affecteront uniquement 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 cours ? C’est la syntaxe CSS conventionnelle, qui indique dicte que vous devez appeler toutes les classes en utilisant un point (.) et toutes les div en utilisant un hachage (#). Histoire pour un autre jour.
Par exemple, pour appliquer un arrière-plan noir à toutes les publications, ajoutez l’extrait suivant à style.css :
.single { background-color: #000; }
Ajouter un arrière-plan aux articles et pages WordPress à l’aide de 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é, c’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 dont 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 sera ajouté à la balise d’en-tête de votre site avec le code pour 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 articles et les pages WordPress et styliser chacun à votre guise 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
Que puis-je dire ? C’est l’un 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-Backgrounds 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.
Plugin WordPress Premium d’arrière-plans personnalisés
Présenté par RightHere, un auteur d’élite chez CodeCanyon, le plugin Custom Backgrounds vous offre un contrôle total sur vos arrière-plans WordPress. En quelques minutes, vous pouvez créer des arrière-plans exceptionnels pour les publications WordPress, les pages, les types de publication personnalisés, les taxonomies et les archives, entre autres modèles, et agrémenter 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 publications et pages WordPress sans vous fatiguer. 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
Le défilement parallaxe semble être partout ces jours-ci, et pour cause : c’est l’un des effets visuels les plus cool du moment, 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 de parallaxe. Cependant, si vous souhaitez ajouter un effet de parallaxe à un thème sans parallaxe, vous devriez 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, avec 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 permet de tout configurer facilement et vous pouvez spécifier la direction et la vitesse de l’effet de défilement de parallaxe d’un simple clic.
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 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 changer l’arrière-plan de vos articles ou pages WordPress ? Faites-nous part de vos questions, suggestions et réflexions via la section commentaires ci-dessous.