Cet article présente différents points permettant de modifier l’apparence d’un site web en WordPress, en utilisant CSS. De nombreuses indications ne sont pas propres à WordPress, mais à CSS en général. Voir nos autres articles sur la création de site web (en particulier WordPress).
Comment modifier le style CSS d’une page, d’un article ou d’un bloc
Quel que soit le thème appliqué et les plug-ins installés, quand on maîtrise CSS, il est souvent plus rapide d’indiquer le style que l’on veut précisément, pour une page précise ou un bloc. En particulier, si on veut utiliser une image en background d’une page… il faut aller modifier le style de la page! Et ce style n’est souvent pas « accessible » sous WordPress, suivant si on a acheté la version premium d’un thème ou pas. La balise « body » (à corps, contenu de la page), n’est pas modifiable.
- Pour en savoir plus sur CSS : le site de Mozilla reste une référence.
- W3Schools est bien aussi
- Et on peut valider son CSS avec l’outil du W3C (l’organisme de standardisation): il suffit d’entrer l’url du site. L’outils ira « chercher » le CSS inclut. C’est important à faire lorsque l’on ajoute du CSS personnalisé (= option CSS additionnel).
- Pour voir mieux ce qu’on fait, on peut aussi utiliser NotePad++ pour copié / collé le style et le vérifier un peu. On ne va pas pouvoir éliminer toutes les erreurs et warnings venant des fichiers sources de WordPress et du thème. Mais on peut éliminer des coquilles dans son propre CSS.
- Il vaut mieux mettre des commentaires pour séparer les sections dans le CSS, on s’y retrouve mieux : /* …. Style pour les actualités …. */
L’utilisation de CSS
L’objet de cet article n’est pas de faire un cours sur CSS, on en trouve de très bon partout sur le web. Voici juste quelques principes.
On définit dans un fichier CSS des règles qui permettent de centraliser l’apparence d’un peu tout, dans un site web. Par exemple, les titres et sous-titres d’une page web sont toujours reconnus de HTML comme étant des H1, H2, H3… On peut donc modifier le style des tous les titres de niveau 2, en une fois, avec une seule règle.
h2 {
border-bottom: solid 1px #F2DC76;
border-radius: 5px;
}
L’utilisation des attributs « class »
Lors de la création de site web, on devrait d’abord déterminer la charte graphique. C’est à dire définir le style des différents éléments. En particulier, on peut vouloir fixer le style d’un bloc en particulier, et réutiliser ce style. Dans ce cas, on lui met un attribut « class ». Ensuite on définit une règle dans le fichier CSS du site. Ainsi, on peut créer des styles de blocs que l’on pourra customizer facilement, en une fois. On pourra les modifier pour noël, etc… Par exemple, un bloc « calltoaction » pourrait être dessiné de la manière suivante (on aurait pu faire mieux et définir une variable pour la couleur…):
.calltoaction {
background-color:#FCB9001C;
padding:15px;
box-shadow: 5px 5px 10px 0 rgb(50 50 50 / 50%);
text-align:justify;
border-radius: 10px;
}CSS avec WordPress
- Pour modifier le style d’une page complète, il faut modifier le style du « body » de la page:
- en wordpress, le body de la page principale s’appelle « home » (à vrai dire, le body porte bien d’autres noms que l’on peut voir dans l’attribut class, mais celui-ci est bien pratique).
- le body de la page affichant les articles s’appelle « blog ».
- Une page sera nommée page-id-622 si son numéro est 622
- Un post (=article) sera nommé postid-833 si c’est le numéro 833
- on peut aussi utiliser un plug-in (voir ci dessus) pour ajouter une class.
- Les blocs ne sont pas ainsi nommés mais on ne devrait pas avoir besoin de faire de règle générale pour un bloc précisément. Si néanmoins on en a besoin… on peut utiliser le plug-in Attributes for blocks. Lorsque l’on édite un bloc, dans la colonne de droite (bloc), dans « avancé », on peut ajouter des attributs. On peut directement insérer un style, ou un id.
- Cela devrait être très rarement utile puisqu’on peut déjà ajouter une « class » (dans les options avancées). C’est suffisant puisqu’il suffit ensuite d’aller créer les règles CSS dans le « CSS additionnel ».
- Notons que sur un bloc, sans plug-in supplémentaire, on peut ajouter une ou des class CSS supplémentaire. Par exemple car on voudrait avoir un bloc sur fond orange et pouvoir le réutiliser partout… on lui met la class « bloc-fond-orange ». Ou « bloc-d-aide ».
L’utilisation des outils de développement web de Chrome
On sort un peu du sujet « WordPress ». Mais quand on fait du développement web, qu’on a à faire avec des notions de style (CSS) voir de Javascript (ce qui ne devrait pas être le cas avec WordPress), il faut utiliser les outils de développement inclus avec les navigateurs.
Pour voir mieux les attributs class et les CSSs utilisés par un site, il suffit d’utiliser un outil de développement du navigateur (par exemple pour Chrome: « outils de développement » qui est dans « plus d’outils », fourni de base avec Chrome). On peut ensuite aller « voir » le contenu de la balise « body ». On recherche alors le contenu de son attribut « class ».
On peut le faire sur n’importe quel site… cela peut aider à voir ce qui est faisable, et en tirer des idées. Le CSS (en tant que langage et options offertes) évolue et s’enrichit tout le temps, il est bon de rester à jour des possibilités (et des tendances, usages et modes).
La création de règles « CSS » pour le site, donnant des indications pour ces « class »
En WordPress, dès qu’on a repéré ce nom (une valeur de l’attribut class), il suffit d’aller ajouter un CSS personnalisé (« Apparence » > « Personnaliser », il y a une option « CSS additionnel »). Il suffit alors de faire une règle pour .home (ou .body ou toute autre page ou bloc visé).
Exemple: .home {background-color:red} va donner un fond de couleur rouge à la page principale. Il faut ensuite aller apprendre à utiliser CSS.Si l’on veut modifier le style du contenu d’un bloc, il suffit de passer en « html » (texte) dans l’éditeur de bloc, et de mettre ce que l’on veut.
Exemple: <span class="icimonnom" style="color:red">mon texte</span> va aller donner un nom à "mon texte" sur lequel on pourra alors aller créer une règle (comme on a fait pour .home ou pour .blog. Là on fera pour .icimonnom).On peut aussi coller directement le style (ici color:red). Cependant pour une charge graphique harmonisée et cohérence, on préfère définir d’abord des types de blocs que des styles. Ainsi, on créera plutôt le type de bloc « ceci_est_un_bloc_d_aide » que « bloc_orange ». Comme ça, si plus tard on veut améliorer le style de tous les blocs d’aide, (ou le décorer pour noël), on le fera par le CSS général du site, en une fois. De manière cohérente. Les cordonniers étant les plus mal chaussés, cela n’a pas été fait correctement sur ce site web…Mea culpa.
Comment faire un sticky-header
Le plus simple est de repérer le header et de faire une règle de type « position:fixed ». Le soucis est qu’il faut ensuite bien décaler la page, vérifier que ce décallage fonctionne bien avec toutes les résolutions d’écran / smartphone. Et, lorsque l’on utilise des ancres HTML (#) ajouter avant un bloc paragraphe vide mais avec une certaine hauteur : et y définir l’ancre. Ainsi, c’est vers ce bloc vite que le lien#ancre sautera, et c’est au-dessus du titre visé.
Et sinon… il y a des plugs-ins qui feront la même chose.
L’utilisation des variables CSS pour les couleurs
Si l’on veut facilement modifier les couleurs d’un site, l’idéal est de les définir en variable (en tête de fichier) et les réutiliser ensuit partout. Avec WordPress, suivant les thèmes, on trouve dans le CSS des variables définissant les couleurs. Si on veut écrire des règles CSS spécifiques réutilisant ces couleurs, il suffit de :
- Aller voir le CSS (par l’outil de dév de Chrome, voir ci-dessus)
- recopier la variable (par exemple –wp–preset–color–ast-global-color-2)
- Et l’utiliser dans une règle en utilisant var(…): (par exemple background-color : var(–wp–preset–color–ast-global-color-2) )
- Mais l’on peut créer ses propres variables pour les réutiliser ensuite partout dans le CSS (ce qui limite l’utilisation des outils de customization de l’apparence. C’est manuel et plus facile à dupliquer d’un site à l’autre).
body{
--color-monrose:pink;
}
Pour vos créations de site web en WordPress sur Orléans, contactez-nous. Pour un accompagnement à l’autonomie de manière à ce que vous puissiez le mettre à jour et le gérer tout seul, également! Pour une aide sur la gestion du projet, la structure des offres, l’argumentaire et les textes, on peut aussi vous aider!
