Respuesta rápida
Al lado de style.css añadimos style.less. Este archivo llamara a los archivos LESS de nuestro propio theme y de otros frameworks que añadamos. A su vez, añadimos al wp_head nuestro style.less y less.js.
Respuesta completa
Requisitos:
Un poco de LESS
Antes de escribir esta entrada estuve pensando si hacer una solo de LESS.js, qué es y qué posibilidades da y cual es la mejor manera de usarlo.
Pero, en su página oficial lo explican tan bien que no creo que sea necesario escribir un post entero sobre ello.
Lo comentaré por encima.
LESS.js es una librería que te permite «programar» css, ya que css no es un lenguaje de programación.
Como por ejemplo, te permite tener variables, tener mixins (son clases con o sin parámetros que puedes llamar en otra clase) y tener una estructura anidada.
¡Vamos al meollo!
En nuestra carpeta extensions añadimos la carpeta less, que contendrá:
- init.php, que iniciará las funciones,
- function.php, que contendrá las funciones,
- less.min.js, que es la librería de LESS minificada.
También hay que añadir el style.less.
Copiaremos el comentario de style.css en style.less porque a partir de ahora lo que haya en style.css será lo que haya compilado style.less.
La estructura de ficheros se queda así:
alisios |- framework | |- extensions | | |- less | | |- function.php | | |- init.php | | |- less.min.js | | | |- alisios-functions-init.php | |- ... |- style.css |- style.less
Nuestro less/init.php tendrá hooks y filters, cuyas funciones a las que llama estarán en el archivo function.php.
La única funcionalidad que tendrá esta extension será la de cargar el style.less en nuestro <head>.
Hay que tener en cuenta la escalabilidad, así que encapsularemos el less/function.php en una clase.
class AlisiosLess {}
Dentro de esta clase tendremos la función de añadir el stylesheet al head. También añadiremos una variable para que podamos elegir si cargamos el fichero CSS o el fichero LESS.
De este modo, cuando estemos en el ámbito de desarrollo, usamos LESS sin que tenga que compilar en cada cambio; y, cuando estemos en el ámbito de producción, ahorramos el tiempo de compilación y mejoramos el rendimiento de la página.
/*
* Hook
* Add in wp_head our style.css/less
*/
public static function add_stylesheet() {
/**
* @var bool
* When it's true, style.less is load. If not, load style.css
*/
$useLess = true;
if( !$useLess ) {
wp_enqueue_style( 'alisios-style', get_stylesheet_uri() );
} else {
wp_enqueue_style( 'alisios-style', get_template_directory_uri() . '/style.less' );
wp_enqueue_script( 'alisios-less', get_template_directory_uri() . '/framework/extensions/less/less.min.js');
}
}
wp_enqueue_script($id, $url) carga un fichero javascript a wp_head.
wp_enqueue_style($id, $url) carga un fichero css en wp_head.
Por desgracia, wp_enqueue_style solo carga el formato CSS, no LESS, así que hay que crear un filtro que modifique lo que devuelve esta función para que tenga el formato de LESS.
/*
* Filter
* Rebuild link stylesheet to less format in wp_enqueue_styles
*/
public static function wp_enqueue_styles_less($tag, $handle) {
global $wp_styles;
$match_pattern = '/\.less$/U';
if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
$handle = $wp_styles->registered[$handle]->handle;
$media = $wp_styles->registered[$handle]->args;
$href = empty($wp_styles->registered[$handle]->ver) ? $wp_styles->registered[$handle]->src : $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
$title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';
$tag = "<link rel='stylesheet/less' id='".$handle."' ".$title." href='".$href."' type='text/css' media='".$media."' />";
}
return $tag;
}
Ahora, hay que llamar a estas funciones en nuestro less/init.php
/**
* Less
* Hooks & Filters
*/
require_once('functions.php');
add_action( 'wp_enqueue_scripts', array('AlisiosLess', 'add_stylesheet'));
add_filter( 'style_loader_tag', array('AlisiosLess', 'wp_enqueue_styles_less'), 5, 2);
Conocer todos los ‘action’ y ‘filter’ de WP es prácticamente imposible, así que según se va teniendo la necesidad no hay más que buscarlo a través del codex de WP.
Ahora solo queda llamar al less/init.php en nuestro alisios-functions-init.php.
alisios-functions-init.php contendrá todas las extensiones que vayamos añadiendo.
$extensionsDirectory = get_template_directory() . '/framework/extensions'; /* LESS */ require_once( $extensionsDirectory . '/less/init.php' );
Si queremos activar y desactivar las extensiones tan solo debemos comentar y descomentar el require_once(‘extension’).
Ver en Github Alisios v0.1.5.
