Une feuille de style statique avec LESS

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.

Cet article prend 3 minutes à lire et comporte 656 mots.

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 /cssde 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)

function yourtheme_get_stylesheet($concat){
  $md5raw = md5($concat, true); // true pour obtenir un md5 raw
  $styleSheet = ‘/css/’ . $md5raw . ‘.css’;
  if ( !file_exists( get_template_directory() . $stylesheet ) ) { // le fichier n’existe pas, on crée la feuille de style
    yourtheme_set_stylesheet( $font );
  } // puis on la récupère pour l’insérer dans la page
  return $styleSheet;
}

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.

$font = get_theme_mod( ‘yourtheme _fonts' );
// ou
$font = get_theme_mod( ‘yourtheme _fonts' );

$eFont = explode( ':', $font );
$fontfamily = $eFont[0];
$params = array ( ‘@fontfamily’ => "’ " . $fontfamily . "’ "; // doubles quotes pour le cas où il y aurait une police à nom composé

Compilation

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

function yourtheme_set_stylesheet( $font ){
  if( !class_exists( 'lessc' ) ) require( 'inc/lessc.inc.php' );
  $compiler = new lessc();
  $compiler->setFormatter('compressed');
  $compiler->setVariables($params);
  $compiler->compileFile(  get_template_directory() . '/style.less', get_template_directory() . $styleSheet );
}

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.

Tweetez

Partagez

Épingle