• Paru le 20 décembre 2016

Une feuille de style statique mais dynamique avec LESS

770 mots - 4mn

Une feuille de style statique mais dynamique avec LESS

1024 678 Tout sur WordPress

Une méthode simple à mettre en œuvre pour opti­mi­ser les feuilles de style de votre site sous WordPress, en utili­sant la puis­sance de LESS et du PHP.

Pour qui a un jour tenté de créer un thème WordPress, ou de le person­na­li­ser, le réglage des options passe la plupart du temps par une balise <style>  rajou­tée dans la balise <head> du thème. Il existe une alter­na­tive simple qui évite de répé­ter l’opération à chaque char­ge­ment de page, si tant est qu’un système de cache ne soit mis en place.

Quoi qu’il en soit, cette alter­na­tive permet de réduire et les temps de trai­te­ment, et le volume de données trans­mis à l’internaute. Optimisation des perfor­mances qui ne coûte que peu de temps si vous avez correc­te­ment codé votre thème.

Prenons l’exemple d’une option que l’on trouve fréquem­ment, la police de carac­tères. Vous allez donc stocker une variable, soit via   set_theme_mod() , soit via set_option() . Et la récu­pé­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, pour­quoi ne pas créer direc­te­ment une feuille de style person­na­li­sé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 solu­tion.

Étapes préliminaires

Je ne vous ferai pas l’injure de vous expli­quer comment récu­pé­rer les variables du thème, nous allons passer allè­gre­ment cette étape. Mais vous n’y coupe­rez pas.

Il faut aussi créer une feuille de style qui serve de master, où nous pour­rons injec­ter les variables de thème. Pour ce faire, la solu­tion 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 place­rez les variables à votre conve­nance dans cette feuille de style LESS. Par exemple font-family : @fontfamily ; Et bien sûr, sacri­lège suprême, vous ne décla­re­rez nulle part @fontfamily .

Pour créer votre feuille de style, vous aurez besoin de   less.inc.php , une classe permet­tant de compi­ler une feuille de style LESS via PHP. Vous trou­ve­rez 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écu­pé­rer l’ensemble des options, les conca­té­ner et créer un md5 « raw » à 16 carac­tè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 injec­ter les variables dans la feuille de style LESS avant compi­la­tion, pour rempla­cer @fontfamily par la police de carac­tères choi­sie.

Nous créons donc un tableau, tout simple­ment, avec la variable LESS en index et la variable récu­pé­rée dans les options comme valeur.

Compilation

Il ne reste plus qu’à compi­ler la feuille de style LESS, pour obte­nir notre CSS final.

Et voilà, la feuille de style est créée, il n’y a plus qu’à l’utiliser, et à oublier les déve­lop­pe­ments hasar­deux pour rajou­ter vos styles dans la section <head> de votre page. Et lorsque vous chan­ge­rez 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 utili­sée. Il ne vous restera qu’à détruire la précé­dente, soit manuel­le­ment, soit via un petit appel PHP.

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser une réponse

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

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :