WordPress est un chouchou parmi tant d’autres en tant que plate-forme de blogs et système de gestion de contenu (CMS). C’est cruellement 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 essayer. 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 souhaitez ajouter de la couleur et du style à vos articles et pages WordPress, ce guide se penche sur 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 le ferons 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 c’est un projet relativement facile. De plus, c’est toujours amusant d’apprendre quelque chose de nouveau. Profitez-en jusqu’au bout et partagez vos suggestions, commentaires ou questions dans la zone de commentaires. Prêt? Faisons le grand saut en 3, 2, 1…

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

Cette section vous sera très utile si vous connaissez 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 en utilisant CSS

Une grande partie du style qui entre dans les articles 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 nommé 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 le 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 devez en utiliser un btw – 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 articles lorsque WordPress rassemble les fichiers qui composent votre site Web. En d’autres termes, le code dans 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 objectif. Il divise les classes CSS que vous pouvez utiliser pour changer 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 affiché 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 tâche facile. Si vous utilisez Chrome, cliquez avec le bouton droit sur une page / un article et sélectionnez «Afficher la source de la page». Dans Mozilla, faites un clic droit sur l’article / 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 génère 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 l’id no. 2
  • .single pour tous les articles uniques, ce qui signifie que tous les styles CSS que vous appliquez à cette classe s’appliqueront à tous les articles
  • .postid-1 pour le message avec id = 1, ce qui signifie que tous les styles CSS que vous appliquez n’affecteront que ce message
  • .single-format-standard – Cela vous permet d’appliquer des styles CSS à tous les articles 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 hooks 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 conventionnelle, qui indique dicte que vous devez appeler toutes les classes en utilisant un point (.) et toutes les div en utilisant le hachage (#). Histoire pour un autre jour.

Par exemple, pour appliquer un arrière-plan noir à tous les articles, 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 dit “mon préfixe” par votre identifiant unique (ceci afin d’é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 se raccorde à 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 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 des articles et des 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

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

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? Je serais ravi d’entendre votre opinion.

WP-Backgrounds Lite, people, est le plugin qui vous aide à posséder une fois pour toutes les arrière-plans WordPress. Vous pouvez même rendre l’arrière-plan de vos articles et pages WordPress cliquables! Et il n’exécutera pas toutes les pages sauf si vous le souhaitez, et il fonctionne bien avec tous les principaux navigateurs.

Plugin WordPress Premium pour arrière-plans personnalisés

arrière-plans-personnalisés-pour-aperçu-wordpress

Présenté par RightHere, un auteur d’élite chez 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 articles WordPress, les pages, les types d’articles 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 jQuery a à offrir.

Vous pouvez même définir des arrière-plans cliquables et multiples pour vos publications et pages WordPress sans vous ruiner. L’auteur vous permet de tester le plugin avant d’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 parallaxe semble être partout ces jours-ci, et pour une bonne raison: c’est l’un des effets visuels les plus cool du marché 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 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, 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 fond 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 une autre excellente façon de créer un site Web accrocheur que les visiteurs trouvent mémorable.

Mots finaux

Que vous creusiez dans le code ou que vous utilisiez des plugins, l’ajout d’arrière-plans différents à vos articles ou pages WordPress peut grandement contribuer à la notoriété de la marque et à la conception visuelle de votre site. Comment changez-vous 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.

Share: