3mar/124

Utilisation de LESSphp et intégration dans wordpress

2766154718601541

MaJ : Changement de méthode pour insérer le thème.

Comme je vous l'avait promis je vais faire des articles plus régulièrement (enfin plus souvent, ça ne sera pas forcément régulier ^^).

Je vais donc cette fois-ci vous montrer comment intégré LESS du côté serveur, pour ne plus être dépendant du côté client (avec le javascript) mais aussi pour ne pas alourdir plus que nécessaire le site.

Pour cela nous allons utiliser LESSphp qui permet de compiler LESS via php (logique vu son nom). Sinon il reste bien sur la possibilité d'utiliser node.js mais cela n'est pas disponible sur les serveurs mutualisé (à ma connaissance), le php par contre est utilisable (quasi) partout.

Il y a plusieurs méthodes proposé par ce compilateur, mais on va s'intéressé ici à la compilation automatique de tous nos fichier LESS dans un seul fichier css avec un système de cache.

Ceci n'est pas la méthode proposé dans la doc de LESSphp, du moins ce n'est pas le même code. Pourquoi? Tout simplement car j'ai essayé avec wordpress et je n'ai pas réussi à faire fonctionner cette fonctionnalité avec le code proposé dans la doc. Du coup j'ai cherché une autre méthode, et celle-ci me parait d'ailleurs plus efficace.

Ce code je l'ai donc pris ici : http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/

N'hésitez pas à aller sur cette page, ce n'est pas uniquement en rapport avec LESSphp mais cela parle de LESS en général avec une sorte de mini-tuto.

Nous allons voir comment intégré tout cela à wordpress, bien entendu la technique étant la même pour n'importe quel site internet vous n'aurez pas de mal à adapter cela à vos besoin.

Mon thème wordpress se présente comme cela :

dossier thème wordpress

Comme vous pouvez le voir j'ai un dossier lessphp où il y a les fichiers que vous téléchargerez ici : http://leafo.net/lessphp/#download

Ensuite j'ai un dossier stylesheets où je mets tous mes fichiers concernant less ou css. Le fichier styles.php est celui qui va nous permettre de compiler les fichiers .less en .css.

Bien entendu toute cette arborescence n'est pas obligatoire, vous vous arrangez comme vous voulez, mais j'aime bien quand c'est propre.

Maintenant nous allons voir le contenu de ce fichier styles.php :

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler");
else ob_start(); 

$files = array(
    'config.less',
    'app.less',
    'global.less',
    'typography.less',
    'grid.less',
    'ui.less',
    'forms.less',
    'orbit.less',
    'reveal.less',
    'mobile.less'

); 

$time = mktime(0,0,0,21,5,1980);
$cache = 'cache.css';  

foreach($files as $file) {
    $fileTime = filemtime($file);  

    if($fileTime > $time) {
        $time = $fileTime;
    }
}  

if(file_exists($cache)) {
    $cacheTime = filemtime($cache);
    if($cacheTime < $time) {
        $time = $cacheTime;
        $recache = true;
    } else {
        $recache = false;
    }
} else {
    $recache = true;
}  

if(!$recache && isset($_SERVER['If-Modified-Since']) && strtotime($_SERVER['If-Modified-Since']) >= $time){
    header("HTTP/1.0 304 Not Modified");
} else {
    header('Content-type: text/css');
    header('Last-Modified: ' . gmdate("D, d M Y H:i:s",$time) . " GMT");  

    if($recache) {
        require '../lessphp/lessc.inc.php';
        $lc = new lessc();  

        $css = '';  

        foreach($files as $file){
            $css .= file_get_contents($file);
        }  

        $css = $lc->parse($css);
        file_put_contents($cache, $css);
        echo $css;
    } else {
        readfile($cache);
    }
}
?>

Alors qu'avons nous là? La toute première partie permet de zipper le fichier css qui sera fait.

Ensuite nous avons la partie dont vous devrez vous souciez : la déclaration des fichiers à compiler. Cela passe par un array, rien de plus simple.

Ensuite pour chaque fichier on vérifie qu'il n'a pas été modifié depuis la dernière mise en cache, si cela a été modifié on lance donc la compilation.

if($recache) {
        require '../lessphp/lessc.inc.php';
        $lc = new lessc();

C'est ici dans le require (ligne 49 dans mon fichier) que nous allons spécifier le chemin vers la librairie LESSphp : lessc.inc.php. Dans mon exemple c'est dans le dossier lessphp d'ou le chemin '../lessphp/less.inc.php'.

Maintenant que nous avons fait tout cela nous allons pouvoir dire à notre header.php d'aller exécuter ce styles.php. Pour cela rien de plus simple, à la place où vous auriez mis votre lien vers votre style.css vous mettez cela :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/stylesheets/styles.php">

Cela aura pour but d'aller activer le fichier styles.php qui se trouve dans mon dossier stylesheets (d'ou le chemin). En faisant cela j'ai découvert qu'il était possible de spécifier un fichier php comme feuille de style, je ne savais pas que cela était possible ^^.

MaJ : autre manière d'intégrer styles.php

Nous allons voir une autre manière plus élégante d'indiquer le chemin de styles.php. Cette façon de faire je l'ai trouvé ici : http://www.geekpress.fr/wordpress/astuce/modifier-dossier-css-principal-theme-wordpress-159/
Il s'agit ni plus ni moins de faire un filtre à la fonction bloginfo(‘stylesheet_url’) pour qu'elle renvoie directement sur styles.php.
Pour ce faire nous allons ouvrir functions.php et ajouter cette fonction :

function stylesheet_uri_filter($stylesheet_uri, $stylesheet_dir_uri) {
	return $stylesheet_dir_uri.'/stylesheets/styles.php';
}
add_filter('stylesheet_uri', 'stylesheet_uri_filter', 10, 2);

Bien sur vous devez adapter cela à la configuration de votre chemin.

Nous devons ensuite ajouter le lien vers notre styles.php, la manière est donc simplifiée grâce à ce bout de code que nous venons de mettre.
A rajouter dans header.php, la où vous mettriez votre lien vers votre css :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

MaJ : garder un fichier style.css à la racine de votre thème

Encore une chose que j'ai découvert par la suite de cet article, "One does not simply delete style.css" : il ne faut surtout pas supprimer de style.css à la racine de votre thème. Ce fichier sert à la déclaration de votre thème avec les différentes infos (auteur, url etc...) et apparemment on ne peut pas déplacer ce fichier ni le renommer...

Fin des MaJ 😉

Et voila nous avons finis, vous pouvez donc dès à présent utiliser ce compileur php pour vos projets.

Au niveau des avantages il y a bien sur de faire cela côté serveur plutôt que client. Il y a aussi le fait de pouvoir organiser ses fichiers sans se soucier du nombre vu que LESSphp vous les compilera en un seul. Cela permet de mieux pouvoir s'organiser et ne pas avoir une seule feuille de 3k lignes ^^.

Au niveau des inconvénients je vois surtout le fait d'utiliser des ressources serveur. Mais cela est moindre du fait de la mise en cache si rien n'est changé.

Si vous ne voulez pas de fichier less sur votre serveur de production vous pouvez utiliser la ligne de commande pour utiliser LESSphp comme compilateur, et ensuite récupérer le fichier css produit. Cela perd l'intérêt de LESSphp et si c'est vraiment ce que vous souhaitez je vous conseil plutôt de prendre un compilateur de votre distribution (cherchez lessc) ou tout simplement des applications qui permettent de compiler une fois le fichier sauvegarder. C'est le cas de la très connue less.app pour mac, sinon il y a simpLESS pour toutes plateforme : http://wearekiss.com/simpless

Vous vous en doutez surement, moi j'ai fait le choix de garder LESSphp pour mes projets. Cela ne fait que quelques jours que je l'utilise, j'espère qu'il n'y aura pas de problèmes de compilations, sinon je me rabattrais sur la solution js pour le dev et ensuite un compilateur pour la prod. (pour le moment aucuns problèmes)

Commentaires (4) Trackbacks (0)
  1. Super manière de gérer le cache, d’ailleurs tu devais utiliser WP_DEBUG pour désactiver le cache automatiquement en environnement de développement ;).

  2. Merci :)
    Dans la doc c’est marqué que WP_DEBUG est utilisé juste pour le message, il n’y a rien sur le cache. Par contre il y a WP_CACHE.
    Je n’ai jamais touché ses valeurs, et aucun problèmes de caches pour moi :)
    Mais bon je ne connaissais pas WP_DEBUG (il faut croire que j’en ai pas vraiment eu besoin ^^’) mais je vais l’activer pour mon dev, ça peut s’avérer utile merci :)

  3. Superbe tuto !
    Par ailleurs on peut aussi ajouter le style via un simple hook, ce qui est d’ailleurs recommande par WordPress :

    23 add_action( ‘wp_enqueue_scripts’, ‘xav_css3_menus’ );
    24 function xav_css3_menus() {
    25 wp_register_style( ‘css3-menus’, plugins_url( ‘css3-menus/assets/less/style.php’ ) );
    26 wp_enqueue_style( ‘css3-menus’ );
    27 }

  4. Bonjour,
    Comment faire pour travailler avec des variables php ?
    Merci


Laisser un commentaire


CommentLuv badge

Aucun trackbacks pour l'instant