lessを使って超高速にWordPressテーマを開発するためのTips

ちょっとマニアックなネタかも知れませんが、最後にステマが含まれておりますので最後までお読みください。笑

lessというCSSフレームワークがあります。

LESS « The Dynamic Stylesheet language

Tiwtter Bootstrapもこれを使用しているので、ご存じの方も多いと思いますが、このフレームワークを使用するとCSSを以下のように記述することができて超便利です。

普通のCSS

#headerを何回も書くのめんどくさい!

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

lessを使ったらシンプル!

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

でも作業性が悪いっちゅうねん。

コーディングだけなら超絶楽しいlessですが、実際に作業を始めると作業性が悪い!

僕は、Macにlesscというコマンドをインストールしてコンパイルしてるんですが、今までは修正=>確認で住んでいた作業が、修正=>コンパイル=>確認になってしまうので、このひと手間がめんどくさい!

less.jsを使うのはどうよ

lessでは、less.jsというjavascriptが用意されていて、これを読み込むと*.lessをクライアントサイドでダイナミックにコンパイルしてくれます。

でも、この方法は、クライアントサイドでJavaScriptの処理が入ってしまうので、体感速度が遅くなります。

そのため本番環境ではおすすめできませんが、開発環境では手っ取り早く修正が確認できるので便利です。

あと、もう一つWordPress固有の問題があって、wp_enqueue_style()で、*.lessを指定しても、WordPressが吐く<link />タグがlessの仕様にマッチしないので、うまくコンパイルしてくれません。

そんなわけでlessをゴニョゴニョするプラグイン作った。

less-developer – GitHub(公式ディレクトリに申請中)

このプラグインを使用すると以下の様な処理を行います。

  • wp_enqueue_style()で指定された各CSSファイルと同名のlessファイルの有無を判別し、lessファイルがあれば<link />タグ内でsrc属性に指定されたcssファイルのURLをlessのURLに変換します。
  • <link />タグの rel  属性の値を “stylesheet” から “stylesheet/less” に変換します。
  • less.jsを <head /> 内でロードします。

たとえば、テーマのfunctions.phpに以下の様な記述をします。

wp_emqueue_style(
    'my-theme', // handler
    get_stylesheet_uri(), // url to css
    false,
    '1.2.3' // version
);

こうしておくとWordPressは通常は以下の様なタグを <head /> 内に出力します。

<link rel='stylesheet' id='my-theme-css'  href='http://example.com/url/to/style.css?ver=1.2.3' type='text/css' media='all' />

このプラグインを適用すると以下の様な感じに変換されます。

<link rel='stylesheet/less' id='my-theme-css'  href='http://example.com/url/to/style.less?ver=1.2.3' type='text/css' media='all' />

lessの有無を確認してから変換するので.lessがない場合は何もしません。

これで、テーマの開発中はlessの修正に専念できるようになりました。めでたしめでたし。

開発が終わったら無効化してね。

ただし、この方法はパフォーマンス上の問題点を無視してます。遅いです。

なので、テーマの開発が完了したら、.lessをコンパイルして.cssに変換しましょう。

あと、プラグインも邪魔なだけなので無効化しちゃいましょう。

え?lessのコンパイルがめんどくさいって?

近日中に、WP Boosterが自動的に.lessを.cssに変換するサービスを提供するらしいよ!

たぶんですが、.lessをコンパイルしてminifyしてキャッシュまでしてくれちゃうと思いますので、お楽しみに。