CSS

WordPress s’appuie largement sur les styles de présentation CSS. Avec l’utilisation des thèmes, vous disposez d’un choix presque infini d’options de mises en page. Les thèmes WordPress permettent de modifier facilement l’apparence de votre site et vous offrent l’opportunité de créer votre propre thème et donc votre propre mise en page.

CSS est l’abréviation de « Cascading Style Sheets » (feuilles de style en cascade). Les fichiers .css vous permettent de stocker les informations des styles de présentation (comme les couleurs, la taille des polices ou celles des marges) séparément de votre structure HTML. Cela permet un contrôle précis de la mise en page de votre site et rend vos pages plus rapides et plus faciles à mettre à jour.

Cet article décrit brièvement l’utilisation des styles CSS dans WordPress, et propose quelques références pour de plus amples informations. Pour se documenter sur les CSS, voir la page d’accueil CSS du W3C (en anglais) ou encore la page Reference de W3Schools (en anglais).

WordPress et les CSS

Les thèmes WordPress utilisent une combinaison de fichiers modèles, des marqueurs de modèles et des fichiers .css pour générer l’aspect de votre site.

Fichiers modèles

Les fichiers modèles sont des éléments qui sont assemblés pour composer les pages de votre site. Dans la structure d’un thème WordPress, l’entête, la colonne latérale, le contenu et le pied de page sont stockés dans différents fichiers. Ces derniers sont combinés pour créer votre page. Ceci permet de personnaliser chaque élément de la page.
Par exemple, dans un thème par défaut de WordPress, la page d’accueil, les pages d’archives ou de catégories, la page de recherche peuvent contenir une colonne latérale. Lors d’un clic sur un article, celui-ci est affiché selon la mise en page d’un article unique et la colonne latérale pourrait ne plus être présente.
Vous pouvez ainsi choisir les éléments qui apparaissent sur votre page, et les personnaliser individuellement, en permettant qu’un entête ou une colonne latérale différents apparaissent sur toutes les pages d’une catégorie spécifique. Et plus encore. Pour une introduction plus complète aux modèles, consultez l’article Hiérarchie des fichiers modèles.

Marqueurs de modèles

Les marqueurs de modèles sont des portions de code qui fournissent des instructions et exécutent des requêtes sur les informations stockées dans la base de données. Certains d’entre eux sont hautement configurables et vous permettent de personnaliser la date, l’heure, les listes et d’autres éléments affichés sur votre site. La page Template Tags (en anglais) du guide du développeur de thème vous permet d’en savoir plus sur les marqueurs de modèles.

Feuilles de style

Le fichier .css est l’endroit où tout prend forme. Dans chaque fichier modèle de votre site, des balises HTML entourent les marqueurs de modèle et le contenu de votre modèle. Dans la feuille de style de chaque thème se trouvent des règles permettant de contrôler la conception et la disposition de chaque balise HTML. Sans ces instructions, votre page ressemblerait simplement à une longue page (composée de textes et d’images) sans mise en forme. Grâce à ces instructions, vous pouvez déplacer les structures des éléments constituant la page, rendre votre entête très long et rempli de graphiques ou de photographies, ou simple et étroit. Votre site peut « flotter » au milieu de l’écran avec de l’espace à gauche et à droite, ou s’étendre sur tout l’écran, remplissant toute la largeur. Votre colonne latérale peut se trouver à droite ou à gauche, ou même commencer au milieu de la page. C’est vous qui décidez du style de votre page. Mais les instructions relatives au style se trouvent toujours dans le fichier style.css inclus dans le dossier du thème.

CSS personnalisé dans WordPress

Depuis la version 4.7, vous pouvez ajouter des CSS personnalisés à votre propre thème à partir de l’outil de personnalisation de l’apparence, accessible via le menu Apparence puis Personnaliser, sans avoir besoin ni d’extensions supplémentaires, ni de modifier directement le thème ou le thème enfant. Il suffit d’afficher la section CSS additionnel lors de la personnalisation de votre thème actuel pour commencer.

Toutes les modifications apportées au CSS apparaitront dans l’aperçu des pages, tout comme les autres modifications apportées dans l‘outil de personnalisation, ce qui signifie que vous avez le temps d’ajuster et de perfectionner l’aspect de votre site, sans modifier quoi que ce soit jusqu’à ce que vous soyez satisfait.

Gardez en tête que les modifications apportées aux CSS sont liées à votre thème. Cela signifie que si vous passez à un nouveau thème, vos styles CSS personnalisés ne seront plus actifs (bien sûr, si vous revenez à votre thème précédent, ils seront à nouveau présents).

Pourquoi utiliser du CSS personnalisé ?

Plusieurs raisons justifient l’utilisation de CSS personnalisé :

• Si vous modifiez un thème directement et que celui-ci est mis à jour, vous perdez vos modifications. En utilisant le CSS personnalisé, vous vous assurez de préserver vos modifications.
• L’utilisation de CSS personnalisé permet d’accélérer le temps de développement.
• Le CSS personnalisé est chargé après le CSS original du thème aussi cela permet de remplacer des instructions CSS spécifiques, sans avoir à écrire un nouvel ensemble CSS complet à partir de rien.

Modèles et CSS

Pour vous aider à mieux comprendre le fonctionnement des feuilles de styles CSS par rapport à votre page web, vous pouvez lire certains de ces articles :

• Les thèmes WordPress
• Templates (en anglais)
• Guide sur le développement de thèmes (en anglais)
  

Aide pour la mise en page de WordPress

Si vous rencontrez des difficultés ou avez des questions à propos de votre thème WordPress ou de sa mise en page, commencez par consulter le site de l’auteur ou autrice du thème pour voir si une mise à jour est disponible ou s’il y a des réponses à vos questions. Ou encore consultez la leçon Où trouver des informations spécifiques à votre thème (en anglais).

Ressources

• Qu’est-ce qu’un thème (en anglais)
• Introduction aux css (en anglais)
• Anatomie d’un thème (en anglais)
• Classes CSS additionnelles dans l’éditeur (en anglais)
• Introduction au développement de thèmes basés sur des blocs (en anglais)

Traduit par Jenny Dupuy
Relu par Didier Demory & Jb Audras
Dernière mise à jour le 20 avril 2024

Contribuer à la documentation en français de WordPress