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

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.

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

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 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.

$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’à compi­ler la feuille de style LESS, pour obte­nir 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é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 nous en infor­mer en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée .

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *