Comment styliser les images sur votre site WordPress avec CSS

Je suis sûr que vous avez déjà une idée de l'importance des images pour le succès de votre site Web.

Mais lorsqu'il s'agit de stimuler l'engagement (et, en fin de compte, votre résultat net), il ne s'agit pas seulement d'inclure des images sur votre site, il s'agit de savoir quelles images vous incluez et comment vous les présentez.

Dans cet article, je veux aborder une pièce importante de ce puzzle : la présentation.

WordPress est livré pré-emballé avec des moyens simples de styliser les images avec CSS. Vous avez le pouvoir de créer différents effets pour les différentes classes CSS que WordPress attribue automatiquement aux images de votre site. (S'il semble que j'ai commencé à parler dans une langue étrangère, ne vous inquiétez pas, je vous expliquerai tout en détail plus tard dans l'article.)

Je vais commencer par approfondir les raisons pour lesquelles les images sont si importantes pour votre site, puis aborder les classes CSS par défaut que WordPress applique aux images, et enfin démontrer comment vous pouvez utiliser CSS pour appliquer des styles personnalisés à vos images. .

• Pourquoi les images sont si importantes pour les sites Web
• Un cours accéléré CSS WordPress
• Comment ajouter un CSS personnalisé à WordPress
• Les classes d'images CSS par défaut de WordPress
• Style d'image simple avec WordPress
• Plus d'exemples de ce que vous pouvez faire avec Image CSS dans WordPress
• Qu'en est-il des styles existants ?
• Le ciel est la limite

Pourquoi les images sont si importantes pour les sites Web

Quelle meilleure façon d'expliquer à quel point les images sont bénéfiques pour les blogs qu'en le prouvant avec une image ?

Les choses deviennent encore plus intéressantes quand on en vient à la biologie de la façon dont nous traitons l'information. Considérons par exemple que 90 % des informations transmises au cerveau sont visuelles et que 40 % des personnes réagissent mieux aux informations visuelles qu'au texte brut (source : Zabisco).

Mais soyons honnêtes : je n'ai pas besoin de vous lancer des statistiques pour faire valoir mon point de vue. Vous savez par vos propres habitudes que les sites Web et les blogs visuellement attrayants sont beaucoup plus susceptibles d'attirer votre attention qu'une masse de texte. Les images ajoutent de la couleur, de l'attrait et de l'intrigue. Ils déclenchent un tas de réactions dans notre cerveau avant même que nous ayons eu la chance de commencer à lire.

En termes simples, si vous n'incluez pas d'images convaincantes et pertinentes dans vos articles de blog, vous êtes loin de tirer le meilleur parti de votre contenu. Faire un effort supplémentaire lorsqu'il s'agit d'inclure des images dans vos articles de blog et de bien les présenter peut faire toute la différence en termes d'engagement, de trafic et de ventes.

Un cours accéléré CSS WordPress

Les principaux développeurs de WordPress ne sont que trop conscients de l'importance des images pour les sites Web, c'est pourquoi ils offrent aux développeurs de thèmes (et aux tweakers de thèmes) beaucoup de puissance et de flexibilité pour déterminer la manière dont les images sont présentées.

Cette puissance et cette flexibilité sont offertes sous la forme d'un certain nombre de classes CSS. Mais avant d'aller plus loin, prenons un moment pour vous expliquer ce qu'est CSS et comment vous pouvez l'utiliser.

CSS signifie Cascading Style Sheets : un langage de balisage utilisé pour déterminer l'apparence des pages Web. CSS est combiné avec HTML (Hyper Text Markup Language), qui est le langage de balisage utilisé pour définir la structure sémantique d'un site Web. Si cela n'a pas beaucoup de sens pour vous, ne vous en faites pas – il s'agit de plus d'informations supplémentaires que nécessaire.

CSS est un langage simple, une fois que vous avez compris. En ce qui concerne la possibilité de modifier l'apparence et le placement des images, vous pourrez reprendre et travailler avec le code que j'inclus dans cet article avec une relative facilité.

Voici un exemple d'extrait de code CSS relatif à l'apparence d'un type d'image particulier dans WordPress :

 .alignright {
	bordure : 1px solide #c5c5c5 ;
	Flotter à droite;
	marge : 0 0 10px 10px ;
	rembourrage : 3px ;
}

Le texte .alignright est une classe CSS (identifiable en tant que classe par le point qui précède son nom). Dans ce cas, .alignright est une classe que WordPress attribue à toute image sélectionnée dans le backend WordPress pour être alignée à droite du contenu :

Diverses déclarations (telles que border et padding ) peuvent être appliquées à une classe CSS, qui sont finalement appliquées à tout élément HTML auquel la classe en question a été affectée.

Dans l'exemple ci-dessus, toute image dans WordPress qui a été alignée à droite (via l'éditeur de texte) se verra attribuer la classe .alignright et héritera donc du style appliqué à cette classe. L'image « flottera » vers la droite, aura une petite marge pour empêcher le texte de s'y glisser, une bordure grise autour d'elle et un peu de rembourrage pour séparer la bordure du bord de l'image.

Tout cela aura beaucoup plus de sens avec une représentation visuelle :

Il y a beaucoup plus de déclarations qui peuvent être ajoutées à une classe CSS ; nous nous amuserons avec eux sous peu.

Comment ajouter un CSS personnalisé à WordPress

Les thèmes WordPress sont livrés avec leurs propres "feuilles de style" CSS, qui sont des fichiers remplis de balisage CSS comme dans l'exemple ci-dessus. Bien qu'il existe de nombreuses façons d'ajouter votre propre CSS personnalisé à votre site Web, la modification de la feuille de style CSS d'un thème existant n'est pas la solution. Votre travail acharné pourrait être écrasé la prochaine fois que le thème sera mis à jour.

La méthode la plus propre et la plus évolutive consiste à créer votre propre "thème enfant" WordPress simple avec sa propre feuille de style CSS. La feuille de style CSS dans le répertoire de votre thème enfant remplacera tous les styles correspondants dans la feuille de style du thème "parent".

La création d'un thème enfant peut sembler un exercice quelque peu intimidant, mais c'est assez facile si vous êtes familier avec FTP. Si vous souhaitez vous engager dans cette voie, consultez le tutoriel sur le WordPress Codex.

Si vous cherchez quelque chose de plus simple, j'ai deux suggestions de plugin :

1. Le module CSS personnalisé dans Jetpack : Idéal si vous utilisez déjà Jetpack sur votre site.
2. CSS personnalisé simple : si vous n'utilisez pas déjà Jetpack (et que vous n'avez pas besoin de ses fonctionnalités variées), il s'agit d'une option plus légère.

Quelle que soit l'option que vous choisissez, ajouter du CSS personnalisé à WordPress sera aussi simple que de modifier le fichier CSS personnalisé qui a été généré (par vous ou l'un des plugins).

Les classes d'images CSS par défaut de WordPress

Avec tout cela à l'écart, passons aux choses juteuses : les classes CSS d'image par défaut de WordPress.

Il existe quatre classes par défaut que vous pouvez utiliser pour modifier l'apparence des images dans WordPress :

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Je suis sûr que vous pouvez déterminer à quels types d'images ces classes sont attribuées.

Chaque image que vous ajoutez à votre site Web via l'éditeur de texte TinyMCE sur les écrans de publication/page se verra attribuer l'une de ces classes, ce qui signifie que vous avez le pouvoir de styliser toutes ces images comme bon vous semble.

Pour styliser un type d'image particulier, il vous suffit de suivre le format que vous avez déjà vu dans l'exemple ci-dessus :

 .nom du cours {
	valeur de la propriété;
	valeur de la propriété;
	valeur de la propriété;
}

Important : lorsqu'une image a une légende, WordPress attribue l'une des classes ci-dessus à un div qui entoure l'image, plutôt qu'à l'image elle-même. S'attaquer à ce problème particulier sort du cadre de cet article, mais c'est quelque chose à garder à l'esprit lorsque vous expérimentez. Je vous recommande de tester les effets que vous avez choisis avec des images sous-titrées pour voir à quoi ressemblent les choses.

Cela dit, passons à la partie amusante : styliser vos images !

Style d'image simple avec WordPress

Lorsqu'il s'agit d'ajouter des effets stylistiques simples à vos images dans WordPress, il existe cinq propriétés CSS communes :

1. background
2. border
3. float
4. margin
5. padding

Pour bien comprendre comment ces propriétés affectent l'apparence d'une image (ou plus précisément, l'apparence du "cadre" dans lequel l'image est placée), nous devons considérer le "modèle de boîte" CSS :

Lorsqu'il s'agit de styliser des images, l'image elle-même est le "contenu". Cette image est ensuite entourée de remplissage, de bordures et de marges ; tout ce que vous pouvez définir. Les images peuvent également être "flottantes", ce qui, dans le cadre de ce didacticiel, signifie simplement alignées. Vos options "flottantes" sont gauche, droite et aucune. (Centrer une image est un peu plus compliqué ; nous y reviendrons sous peu.)

Prenons un exemple simple pour montrer comment ces propriétés peuvent être utilisées. Tout d'abord, voici une image avec la classe .alignright qui lui est assignée, sans aucun balisage CSS :

Ajoutons maintenant un balisage CSS simple :

 .alignright {
	fond : gris ;
	bordure : 3px noir uni ;
	Flotter à droite;
	marge : 10px ;
	rembourrage : 3px ;
}

Voici l'effet final :

Vous pouvez probablement déchiffrer ce que nous avons fait ici. L'image a maintenant été « flottante » (c'est-à-dire alignée) vers la droite, de sorte que le texte l'entoure. Nous avons ajouté un peu de rembourrage, qui a reçu un fond gris. Nous avons appliqué une bordure noire épaisse qui apparaît autour du rembourrage. Enfin, une marge de 10 pixels crée de l'espace entre l'image et le texte.

Il y a beaucoup de choses que vous pouvez faire avec les cinq sélecteurs ci-dessus seuls. Si vous souhaitez les explorer davantage, voici une ressource complète pour chacun :

• background
• border
• float
• margin
• padding

J'ai aussi promis une solution pour centrer les images. Pour des raisons qui sortent du cadre de ce didacticiel, CSS ne vous permet pas simplement d'utiliser float: center; (c'est-à-dire que la valeur n'existe pas). Au lieu de cela, vous devez définir l'image en tant qu'élément de bloc , appliquez margin: 0 auto; et définir une largeur pour l'image. Vous pouvez en savoir plus sur cette technique ici. (Je vais également fournir un exemple du balisage utilisé pour créer une image centrée ci-dessous.)

Plus d'exemples de ce que vous pouvez faire avec Image CSS dans WordPress

Maintenant que vous avez une meilleure compréhension des propriétés CSS les plus courantes que vous pouvez utiliser, voici quelques exemples pour vous inspirer.

Commençons par un rembourrage et un fond gris pour donner un cadre à nos images :

 .alignez à gauche {
	arrière-plan : #dbdbdb ;
	flotteur : gauche ;
	marge : 0 10px 5px 0 ;
	rembourrage : 5px ;
}

Ce balisage donne ceci :

Explorons ce qui s'est passé ici :

• J'ai utilisé une couleur hexadécimale HTML pour l'arrière-plan. Ces codes de couleur vous offrent une flexibilité pratiquement illimitée dans le choix des couleurs de votre site Web.
• Parce que l'image que j'ai utilisée est un PNG transparent, la couleur d' background -plan a rempli tout l'espace disponible non utilisé dans le fichier image.
• J'ai utilisé quatre valeurs dans la propriété margin pour définir des marges différentes pour chaque côté de l'image.

Essayons autre chose. Au lieu de donner à nos images une couleur d'arrière-plan, définissons-les dans une simple bordure pour les délimiter du contenu. Voici le balisage :

 .alignright {
	bordure : 1px solide #000099 ;
	Flotter à droite;
	marge : 0 0 10px 10px ;
	rembourrage : 3px ;
}

Comme vous pouvez le voir, nous avons joué avec les valeurs de la propriété margin pour tenir compte de l'alignement de l'image, réduit le rembourrage et ajouté une bordure solide de 1px. Voici le résultat final :

Enfin, créons une image centrée et donnons-lui une bordure grise épaisse. Voici le balisage :

 .aligncenter {
	bordure : 5px solide #dbdbdb ;
	bloc de visualisation;
	marge : 0 automatique ;
	largeur : 300 pixels ;
}

Et le résultat final :

Comme vous pouvez le constater, il est possible de modifier complètement le placement et l'apparence d'une image dans WordPress en utilisant uniquement CSS.

En réalité, nous n'avons fait qu'effleurer la surface ici; il y a beaucoup plus que vous pouvez faire. (Si vous souhaitez en savoir plus, j'ai fourni ci-dessous des ressources utiles pour un apprentissage plus approfondi.)

Qu'en est-il des styles existants ?

Si vous utilisez un thème WordPress de qualité réelle, le développeur aura déjà ajouté des styles à chacune des classes d'images WordPress par défaut. À tout le moins, elle aura aligné chaque classe d'images de manière appropriée.

Au-delà de cela, ses choix auront été entièrement subjectifs, et vous avez maintenant le pouvoir de passer outre leurs effets de style. Tout balisage CSS que vous entrez - soit sur la feuille de style de votre thème enfant, soit via un plugin - aura priorité sur le CSS par défaut du thème. Vous êtes en contrôle.

Le ciel est la limite

En lisant cet article, j'espère également que vous serez inspiré pour expérimenter vos propres styles CSS personnalisés. Je ne voulais pas approfondir les sélecteurs plus avancés de ce didacticiel, mais vous pouvez faire beaucoup plus avec CSS que ce que j'ai couvert ici.

Si vous souhaitez explorer des effets plus avancés (tels que les ombres, l'arrondi et la rotation), il existe un grand nombre de ressources en ligne gratuites qui peuvent vous en apprendre davantage sur CSS. Mes recommandations personnelles sont :

• Mozilla Developer Network : Apprécié par la communauté des développeurs Web.
• W3 Schools : détesté par de nombreux développeurs Web "sérieux", mais il est indéniable que sa profondeur et son étendue d'informations sont indéniables. Gardez simplement à l'esprit qu'il n'est pas toujours 100% correct et/ou à jour.
• Codex WordPress : En savoir plus sur la façon dont WordPress et CSS se rejoignent.

Si vous avez des questions, n'hésitez pas à nous contacter dans la section des commentaires ci-dessous !

Crédit photo : Simon Pow, PicJumbo.

• CSS
• images