Changer l'arrière-plan de votre thème WordPress

Vous avez un site Web avec un thème de WordPress c’est la plupart de vos attentes, mais vous voulez donner ajustements supplémentaires, par exemple Soulignez subtilement l’arrière-plan, cela peut être une couleur unie ou une image.

Vous avez évalué et vous décidez qu’il s’agit d’une image qui sera utilisée comme motif, c’est-à-dire qu’elle sera répétée pour couvrir tout l’arrière-plan. Cela aurait l’air bien même sur quelques pages ou entrées sur le site, vous vous demandez maintenant comment s’y prendre?

Vous pouvez emprunter deux chemins ou utiliser un plugin ou utiliser du code.

Plugins pour changer l’image de fond dans WordPress

C’est l’alternative la plus simple. Actuellement, la plupart des plugins qui peuvent placer une image d’arrière-plan l’utilisent dans le contexte de Gutenberg (actuellement l’éditeur WordPress par défaut) et utilisent un bloc pour placer une image d’arrière-plan.

Mais on ne veut pas ça, on a besoin d’une photo au niveau de la balise HTML body et qui peut être utilisé dans certains articles et pages.

Le plugin que nous allons utiliser sera Contexte de XO Post

Plugin pour changer l'arrière-plan WordPress

Lorsque vous installez et activez le plugin, vous verrez qu’une nouvelle section apparaîtra sur chaque page et entrée où vous pouvez ajouter une image d’arrière-plan, comme indiqué dans l’image ci-dessous.

Ajouter une section d'image d'arrière-plan

Une fois l’image ajoutée, vous aurez la possibilité de la prévisualiser et de la supprimer également.

Image d'arrière-plan ajoutée

Idéalement, vous devriez utiliser une image comme motif, car elle est répétée par défaut et vous n’avez aucun moyen de changer cela via le plugin.

Dans ce site Internet Vous pouvez trouver des modèles que vous pourriez utiliser.

Image d’arrière-plan dans WordPress via le code

L’autre option pour ajouter le fond d’écran est Utilisez le code CSS tout de suite.

La première serait que vous ayez déjà téléchargé l’image d’arrière-plan que vous souhaitez utiliser sur votre WordPress. Tout ce que vous avez à faire est d’avoir l’URL absolue de l’image.

Vous pouvez trouver l’url de l’image via l’option multimédia WordPress lors de la visualisation des détails d’une image. Vous constaterez que vous avez le chemin absolu comme indiqué dans l’image suivante:

Détail de l'URL de l'image absolue

Une fois que vous avez l’url de l’image que vous souhaitez utiliser, il est temps de créer votre code CSS. Le code CSS de base est:

body{
	background-image:url(xxxx);
}

Vous devrez remplacer xxxx par l’URL absolue de l’image

Cependant, le code précédent s’appliquerait à l’ensemble du site. Donc, si vous souhaitez utiliser certaines pages ou entrées, vous devez gérer les classes générées dans la balise HTML body, telles que: B. pour une page avec un certain identifiant, ce serait

body.page-id-XX{
	background-image:url(xxxx);
}

XX est l’ID de la page et xxxx est le chemin absolu de l’image.

Si vous le souhaitez Utilisez un article au lieu d’une page Vous devrez remplacer l’ID de page par l’ID de publication

À l’intérieur Ce post Vous pouvez voir certaines des principales classes CSS créées au niveau du corps.

Pour ajouter du code CSS, vous pouvez consulter l’article Comment ajouter du code CSS dans WordPress?

Conclusion

Comme vous l’avez vu, vous pouvez personnaliser un peu la conception de votre site Web en créant une image d’arrière-plan pour les pages et les articles, donnant ainsi à certaines parties de votre site Web un aspect différent. Vous pouvez également le faire avec un plugin ou directement via du code.

En cas de doute, les points précédents sont détaillés dans la vidéo ci-dessous.



Source link

Recent Posts