Une feuille de style statique mais dynamique 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 ten­té de créer un thème Word­Press, ou de le per­son­nalis­er, le réglage des options passe la plu­part du temps par une balise <style> rajoutée dans la balise <head> du thème. Il existe une alter­na­tive sim­ple qui évite de répéter l’opération à chaque charge­ment de page, si tant est qu’un sys­tème de cache ne soit mis en place.

Quoi qu’il en soit, cette alter­na­tive per­met de réduire et les temps de traite­ment, et le vol­ume de don­nées trans­mis à l’internaute. Opti­mi­sa­tion des per­for­mances qui ne coûte que peu de temps si vous avez cor­recte­ment codé votre thème.

Prenons l’exemple d’une option que l’on trou­ve fréquem­ment, la police de car­ac­tères. Vous allez donc stock­er une vari­able, soit via  set_theme_mod(), soit via set_option() . Et la récupér­er soit via  get_theme_mod(), soit via get_option().

Plutôt que de réécrire un style à plac­er dans la sec­tion <head> de votre page, pourquoi ne pas créer directe­ment une feuille de style per­son­nal­isée, à plac­er dans le dossier /cssde votre thème, en lui don­nant une empreinte unique ?

Voyons en quelques étapes sim­ples com­ment met­tre en œuvre cette solu­tion.

Étapes préliminaires

Je ne vous ferai pas l’injure de vous expli­quer com­ment récupér­er les vari­ables du thème, nous allons pass­er allè­gre­ment cette étape. Mais vous n’y couperez pas.

Il faut aus­si créer une feuille de style qui serve de mas­ter, où nous pour­rons injecter les vari­ables 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 plac­erez les vari­ables à votre con­ve­nance dans cette feuille de style LESS. Par exem­ple font-fam­i­ly: @fontfamily; Et bien sûr, sac­rilège suprême, vous ne déclar­erez nulle part @fontfamily .

Pour créer votre feuille de style, vous aurez besoin de  less.inc.php, une classe per­me­t­tant de com­pil­er une feuille de style LESS via PHP. Vous trou­verez cette classe dans jet­pack ou via une recherche sur Google.

Création de la feuille de style personnalisée

Nommage du fichier CSS

Vous pou­vez par exem­ple récupér­er l’ensemble des options, les con­catén­er et créer un md5 « raw » à 16 car­ac­tères, et vous servir de ce md5 pour nom­mer 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 com­pris, nous allons injecter les vari­ables dans la feuille de style LESS avant com­pi­la­tion, pour rem­plac­er @fontfamily par la police de car­ac­tères choisie.

Nous créons donc un tableau, tout sim­ple­ment, avec la vari­able LESS en index et la vari­able 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’à com­pil­er 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 à oubli­er les développe­ments hasardeux pour rajouter vos styles dans la sec­tion <head> de votre page. Et lorsque vous chan­g­erez une option dans le thème, le md5 raw ne sera plus le même, une nou­velle feuille de style sera générée avant d’être util­isée. Il ne vous restera qu’à détru­ire la précé­dente, soit manuelle­ment, soit via un petit appel PHP.

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris