Une feuille de style statique mais dynamique avec LESS

0

Une méthode simple à mettre en œuvre pour optimiser les feuilles de style de votre site sous WordPress, en utilisant la puissance de LESS et du PHP.


code CSS
code CSS

Pour qui a un jour tenté de créer un thème WordPress, ou de le personnaliser, le réglage des options passe la plupart du temps par une balise <style>  rajoutée dans la balise <head> du thème. Il existe une alternative simple qui évite de répéter l’opération à chaque chargement de page, si tant est qu’un système de cache ne soit mis en place.

Quoi qu’il en soit, cette alternative permet de réduire et les temps de traitement, et le volume de données transmis à l’internaute. Optimisation des performances qui ne coûte que peu de temps si vous avez correctement codé votre thème.

Prenons l’exemple d’une option que l’on trouve fréquemment, la police de caractères. Vous allez donc stocker une variable, soit via   set_theme_mod() , soit via set_option() . Et la récupérer soit via   get_theme_mod() , soit via get_option().

Plutôt que de réécrire un style à placer dans la section <head> de votre page, pourquoi ne pas créer directement une feuille de style personnalisée, à placer dans le dossier /css de votre thème, en lui donnant une empreinte unique ?

Voyons en quelques étapes simples comment mettre en œuvre cette solution.

Étapes préliminaires

Je ne vous ferai pas l’injure de vous expliquer comment récupérer les variables du thème, nous allons passer allègrement cette étape. Mais vous n’y couperez pas.

Il faut aussi créer une feuille de style qui serve de master, où nous pourrons injecter les variables de thème. Pour ce faire, la solution idéale passe par une feuille de style LESS, copie exacte de style.css, ou celle qui a servi à créer la feuille de style du thème ; vous placerez les variables à votre convenance dans cette feuille de style LESS. Par exemple font-family: @fontfamily ; Et bien sûr, sacrilège suprême, vous ne déclarerez nulle part @fontfamily .

Pour créer votre feuille de style, vous aurez besoin de   less.inc.php , une classe permettant de compiler une feuille de style LESS via PHP. Vous trouverez cette classe dans jetpack ou via une recherche sur Google.

Création de la feuille de style personnalisée

Nommage du fichier CSS

Vous pouvez par exemple récupérer l’ensemble des options, les concaténer et créer un md5 « raw » à 16 caractères, et vous servir de ce md5 pour nommer votre feuille de style. Si elle n’existe pas, vous la créez, si elle existe, vous vous en servez.

Vérification (la feuille de style existe, ou pas)

Création des variables à injecter

Si vous ne l’avez pas compris, nous allons injecter les variables dans la feuille de style LESS avant compilation, pour remplacer @fontfamily par la police de caractères choisie.

Nous créons donc un tableau, tout simplement, avec la variable LESS en index et la variable récupérée dans les options comme valeur.

Compilation

Il ne reste plus qu’à compiler la feuille de style LESS, pour obtenir notre CSS final.

Et voilà, la feuille de style est créée, il n’y a plus qu’à l’utiliser, et à oublier les développements hasardeux pour rajouter vos styles dans la section <head> de votre page. Et lorsque vous changerez une option dans le thème, le md5 raw ne sera plus le même, une nouvelle feuille de style sera générée avant d’être utilisée. Il ne vous restera qu’à détruire la précédente, soit manuellement, soit via un petit appel PHP.

Si vous avez trouvé une faute d’orthographe, veuillez sélectionner le texte en question et appuyer sur Ctrl + Entrée.

Partager…
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on Pinterest

Commenter

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.