wordpressのテーマ制作で「compass」を使うための設定

普通にCSSを書くよりも「早い」「見やすい」「メンテが楽」ということで、使い始めるともう手放せない!!でおなじみの「Compass」。
wordpressのテーマ制作にももちろん使いたい!ということで、テーマ作りの際に覚えておきたいcompassの設定のメモを共有します。

ちなみに、「compassって何?」という方には、こちらの記事がオススメです。

1. style.cssの書き出し先を変更する

まずやっておきたいのが、wordpressのテーマで一番大事なcssファイル「style.css」の書き出し先フォルダを変更すること。

compassの基本ファイル生成コマンドcompass createを実行すると、設定ファイル「config.rb」の内容は以下のデフォルト設定で生成されているはずです。

compass watchコマンドで監視するフォルダ(sassファイルの格納フォルダ)はデフォルトの「sass」のままで構いませんが、style.cssファイルをテーマフォルダの直下に置く必要があるため、cssの格納先フォルダ(css_dir)は変更が必要です。

css格納フォルダの変更方法には、以下の2つがあります。

1-1. すべてのcssファイルをテーマフォルダ直下に書き出す場合(style.cssにすべてのスタイルを記述する場合もこちら)

すべてのcssファイルをテーマ直下に置く場合、対応方法はとても簡単。設定ファイル(config.rb)のcss格納フォルダを「/」に書き換えるだけです。

これで「style.css」ファイルを含むcssファイルはすべてテーマフォルダのルートディレクトに書き出されます。
複数のcssファイルを利用せず、style.cssにすべてのスタイルを記述する場合も、この方法でOKです。

1-2. style.cssは最小限の記述のみを行い、それ以外のcssファイルは「css」フォルダで運用したい場合

子テーマで運用する場合など、環境によってはcssファイルはcssフォルダに格納する場合もあると思います。
でも、wordpressではstyle.cssだけはルートディレクトリに置く必要があります。
そういう場合、設定はデフォルトのままで、cssをコンパイルするタイミングで「style.css」をルートディレクトに移動させます。

具体的には、「config.rb」の一番上(# Require any additional compass plugins here.と書かれている箇所)に、以下の処理を記述します。

これで、cssファイルがコンパイルされるタイミング(scssファイルを保存したタイミング)で、style.cssファイルだけが「css」フォルダではなく、テーマのルートフォルダに移動されます。

2. style.cssの「テーマ詳細」の記述を、圧縮できないコメント形式に変更する

compassの売りの一つに、cssの圧縮があります。
(設定ファイル(config.rb)のoutput_styleの値を書き換えるだけで、一般的なcssの書き方である「expanded」、要素ごと一行にまとめて書き出す「compact」、すべての記述を1行に圧縮する「compressed」と、簡単に書き出し方法を変更することができる機能です。)

サイトの表示を高速化するためにも、サイト公開時のcssは「compressed」で圧縮して容量を少しでも減らしておきたいところ。
しかし、compressed形式ではcssのコメントがすべて削除されてしまうため、wordpressのstyle.cssには絶対に必要なテーマ詳細(「Theme Name」など)も消えてしまいます。もちろん、テーマ詳細が消えてしまうと、wordpressはテーマを読み込むことができません。

そこで、「compressed」形式でも削除されないコメントでテーマ詳細を記述しておく必要があります。
その方法はとても簡単で、コメント開始の/*を、/*!に書き換えるだけ。
これで、style.cssもガツンと圧縮することができます。

<例>

というわけで、wordpressでcompassを使いたい時には、何よりも先に「style.cssの書き出し先の変更」と「テーマ詳細を/*!形式のコメントに変更」の2点を忘れずに行いましょう!

ちなみに、、、
「0からテーマを作るぞ!」という人は、style.cssにはテーマ詳細だけを記述し、サイト内では「css」フォルダ内のまったく別のcssファイルを読み込む方法だと、すべてデフォルト設定のままcompassを使えます。
実は、これが一番楽な方法かもしれません…。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です