wordpress 使用 less

STEP1.
下載less.js(http://lesscss.org/)

STEP2.
在你使用的theme裡創建一個library資料夾
在library資料夾再建js與styles資料夾

STEP3

把樣板theme裡的functions.php 加入以下幾行code
注意less版本如果是新版，請將裡面的less-1.3.0.min.js改為你的版本

<?php
// Setting paths to the resources we will need later, js and styles
$path_to_js         = get_stylesheet_directory_uri() . '/library/js/';
$path_to_styles = get_stylesheet_directory_uri() . '/library/styles/';

// We don't want to load unnecessary things when browsing the Dashboard, right?
if ( ! is_admin() ) {

        function load_LESS() {

                // Retrieving the paths we set above
                global $path_to_js, $path_to_styles;

                // Actually printing the lines we need to load LESS in the HEAD
                print "\n<!-- Loading LESS styles and js -->\n";
                print "<link rel='stylesheet/less' id='style-less-css'  href='" . $path_to_styles . "style.less' type='text/css' media='screen, projection' />\n";
                print "<script type='text/javascript' src='" . $path_to_js . "less-1.3.0.min.js'></script>\n\n";
        }

        // Adding the action to the HEAD
        add_action( 'wp_head', 'load_LESS' );

} // END ! is_admin()
?>

在此注意由於css裡使用相對路徑所有 images資料夾都要丟進library/styles/裡
不然就是更改上面的/library/styles/路徑
筆者我本身是改成 get_stylesheet_directory_uri() . '/';


COOL 開始在library裡的styles裡style.less 使用吧!!!

原文出處
http://carlorizzante.com/2011/how-to-implement-less-in-wordpress-first-approach/