WordPressは重いのが弱点ですが、よくよく調べてみると、テーマのCSSのファイルサイズが結構大きかったのです。そこで、この記事を見て圧縮してみました。

roScripts - Compress CSS code

これは便利ですね。CSSの最初と最後にPHPコードを書くだけで圧縮の準備が完了してしまいます。後はCSSをPHPが処理してくれるようにします。

これで圧縮前と圧縮後でCSSを分ける必要がなく、メンテナンスが非常にしやすくなりました。

ただし、.htaccessに下のようなコードを書いといてください。これで.htaccessを置いたディレクトリ下のCSSファイルが圧縮の対象になります。

<Files "*.css">
  SetHandler application/x-httpd-php
</Files>

そして、具体的な例を挙げてみます(PHPコードは記事を参照してください)。

<?php コードを書きます ?>
body {
  font: 75%/150% "Trebuchet MS", Tahoma, Arial;
  color: #333333;
  background: #FFFFFF url(images/main-bg.gif);
  margin: 0px;
  padding: 0px 0px 30px;
}
<?php コードを書きます ?>

という中身のCSSファイルをブラウザで読ませると、

body {font: 75%/150% "Trebuchet MS", Tahoma, Arial;color: #333333;background: #FFFFFF url(images/main-bg.gif);margin: 0px;padding: 0px 0px 30px;}

というように出力されます。

CSSを編集するときは普通のままで、ブラウザが読むと圧縮されるようにと、1つのファイルで実現できるのでとても便利です。

関連記事