Etat des lieux : L’HTML est constitué comme des pièces de légo. Chaque brique a ses spécificités (forme, taille, options) et toutes s’emboîtent pour former une construction solide et organisée. Le CSS est la cosmétique. Avec ce langage, la brique de légo est bleue, verte ou jaune maïs.
C’est la même expérience que dans Transformers (Hasbro). On peut dire que ce qui fait la différence entre un camion et Optimus Prime (le gentil robot) c’est du CSS.
Le référencement sémantique ne s’occupe pas a priori de cosmétique. Mais cela change, avec l’introduction de l’IA dans les algorithmes, il devient de plus en plus facile de faire une recherche du type : « site rose ». En regardant les résultas de la recherche, on voit bien que celle-ci s’appuie plus sur le contenu sémantique du site, qui contient le mot « rose », que sur la reconnaissance de la valeur chromatique « pink » (#FFC0CB ou rgb(255,192,203). Mais les choses changent. Pour conclure momentanément sur ce propos, on voit bien que les sens connexes sont aussi oubliés, même si vous n’avez pas activer de filtrage de « contenus explicites ».
En prenant en compte la séparation entre le sémantique et le cosmétique il devient facile de comprendre que la commande HTML <strong> est une mise en valeur sémantique du propos qu’elle encapsule alors que la commande <b>old devenue caduque est remplacée par la commande CSS « font-weight ». Les deux ont le même effet visuel dans la page du navigateur. Mais le référencement trouvera une emphase dans le contenu <strong>. Reportez-vous sur le site w3schools.com pour plus d’informations.
Wordpress et Woocommerce ont en commun une extension extraordinaire : Yellow Pencil, développée par la société Waspthemes.com Son prix est dérisoire et peut être acquise sur le site émérite : codecanyon.net .
Yellow Pencil est un éditeur en ligne de CSS tellement simple et puissant que l’on multiplie les modifications de présentation à foison. Un peu trop quand même ! La sanction est immédiate : le site perd 2 à 3 secondes au téléchargement. Chaque seconde ajoutée c’est 10 à 15 % d’internautes en moins !
Nous allons donc unifier l’ensemble des commander CSS mise en oeuvre avec Yellow Pencil et les intégrer non pas seulement dans un seul et unique fichier commun au site, mais dans l’ensembles des CSS gérés par la base de donnée du site. Chaque mise à jour du thème glissera sur ces commandes et tout restera en place. Vitesse, confort, solidité, que demande l’internaute ?
- Dans un premier temps, nous allons unifier le fichier généré par Yellow Pencil. C’est une unification intermédiaire dans le fichier « custom.css ».Externe au site, mais unique à Yellow Pencil.
Dans le Backend de WordPress / Yellow Pencil / Settings / Static Externel CSS File : « https://monsite.com/custom.css » - Exportation des commandes CSS : Yellow Pencil / Customizations /Export as CSS file ( dans le dossier de téléchargement de votre ordinateur. Un fichier du type : « Style-feb-01.css »
- Suppressions des CSS générés par Yellow Pencil / Customizations / Sélectionner toutes les lignes / Bulk Actions / delete . le fichier « custom.css » est vidé de ses commandes.
- Copier le contenu du fichier Style-feb-01.css » avec un simple éditeur de texte (Notepad++ ou Textedit.app).
- Coller dans votre base de données WordPress : Dans le Backend WordPress / Apparence / Personnaliser / Custom CSS / Coller. Le contenu du fichier est largement documenté pour pouvoir à tout moment retrouver une modification (page template, page unique, div etc …). Le ficher custom.css peut être détruit avec un client FTP.
Testez avec le site tools.pingdom.com pour constater un gain de rapidité significatif après avoir agréger les commandes CSS éparses dans la base de donnée de WordPress. Le diagnostique de Pingdom.com ne doit plus contenir d’erreurs qui entravent la rapidité de votre site du fait de l’éparpillement des commandes CSS. Pour d’autres diagnostiques j’ai envi de dire … next.
Remarques importantes : quand vous modifier un CSS, préférez le faire au niveau de la page Template plutôt que dans une page spécifique. Dès que la modification est actée, ouvrez une autre page (effacez le cache) pour contrôler que votre modification est bien pérenne.
Quand vous sélectionnez un objet CSS (balise, div, image, etc ..) contrôlez bien que vous êtes au niveau « parent » le plus haut possible. Là on peut dire que cela ruisselle( puisque le CSS est une feuille de style en cascade).
Limitez les modification en bannissant des commandes de l’ordre : « cellule à droite », « colonne à gauche » et « tableau au milieu »…. dans le CSS tout n’est pas dans tout ni réciproquement…
