【wordpress】SCSSを簡単に使う方法！WP-SCSSの導入方法とエラーの対処法

SCSSを使えばCSSよりも作業効率がUPすると分かっていても、コンパイルが必須と聞いて二の足を踏んでいる方も多いようです。そこで本記事では、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」の便利さを解説したうえで、インストール方法やオプション設定、エラーが出た時の対処法などを解説します。

SCSS（Sass）とは？使用するメリット3つ

 

「WordPressのテーマを制作してみたい！」「自分好みにカスタマイズしたい！」という方なら、一度はSCSSに興味を持ったことがあるのではないでしょうか。

SCSS（Sass）とはCSSの拡張言語、いわゆるメタ言語の一種です。CSSの発展形といった方がイメージしやすいかもしれません。なお、SCSSには下記のようなメリットがあります。

▼SCSS（Sass）のメリット

• 独自の書き方で関数が使える
• 変数が使えるだけでなく、値の使い回しもOK
• サイズ値などの演算が使える

CSSコードが効率的に書けるので、コーディングスピードが早くなるうえCSSよりも短いコードで済むのが特徴です。

ちなみに、世界のフロントエンド開発者を対象に実施されたアンケートでは、CSSコードを使っていたエンジニアが約14％だったのに対し、63％以上がSassを使っていたという調査結果が報告されています。

WP-SCSSとは？

SCSSは利便性が高い反面、有効化する際にはコンパイル（変換）が必須で手間がかかるのが難点でした。

そこでおすすめしたいのが、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」というプラグイン！しかもインストール後に、ファイルの場所を2カ所指定して3種類のオプションを設定するだけで使えるようになります。

このプラグインさえあれば、そもそもコンパイルとは？と悩む必要もありません。

事前に作成しておく「ディレクトリ構造」の見本

下記画像を参考に、あらかじめScss用とCSS用のディレクトリ（フォルダ）を作成しておきましょう。なお、scss直下のscssファイルだけがコンパイルの対象です。つまり、下記画像のディレクトリ構造で言うと「style.scss」と「ie.scss」は、どちらも直接コンパイルされてcssデータになります。

ただし、scssディレクトリの内部に全く別のAディレクトリを作成すると、Aディレクトリ内のファイル（データ）は全て「scssディレクトリ直下」という条件から外れてしまうので注意が必要です。

 

 

WP-SCSSのインストール方法

WordPressへアクセスし、管理画面＞プラグイン＞新規追加画面へと移動します。

下記画像の赤枠で囲ってある「WP-SCSS」を選択し、「今すぐインストール」をクリックして有効化して下さい。

プラグインの設定方法

管理画面＞設定＞WP-SCSSへと進み、下記の設定画面を開きます。

「Scss」の置き場所を指定する

まず、上記画像の赤枠で囲ってある「Scss Location」から設定しましょう。「/wp-content/themes/」以降のルートを記載するのがポイント。ルートが記載されていないとコンパイルが実行されませんので注意が必要です。

▼Scss Location

• Scssファイルを格納する場所
• 「/my-thema/scss/」を入力する

「CSS」の置き場所を指定する

次は上記画像の緑枠で囲ってある「CSS Location」の設定です。こちらもScss Locationと同様に、「/wp-content/themes/」以降のルートを明確にしておきましょう。

▼CSS Location

• ScssからコンパイルされたCSSファイルを置く場所
• 「/my-thema/css/」を入力する

コンパイル時のオプション設定3つ

ここでは、3種類のオプション設定を行います。ただし、オプション設定に限っては全く設定しなくてもプラグイン自体は作動しますので、必要に応じて対応して下さい。

Compiling Mode：コンパイル後のCSSタイプを設定

「Compiling Mode」とは、コンパイルの方式を指定するオプション設定です。どの形式を選ぶかによって、改行だけが削除されていたりスペースやコメントまで削除されていたりと、コンパイル後に書き出されるCSSファイルの状態が微妙に違ってきます。

選択肢は6種類ありますが、サーバー上での動作性を考慮すると軽量化を優先すべきでしょう。したがって、改行・スペース・コメントが削除され、圧縮した状態で出力される「Compressed」が最も軽いと思われます。

Source Map Mode：ソースマップの設定

Cssに変換される前のScss上で、修正箇所を探したい時に活躍してくれるソースマップ。たとえば、Cssの10行がscssの7行に相当するといった情報を伝えてくれるので、簡単に修正すべき箇所が見つかります。

▼ソースマップの選択肢と特徴

• None：ソースマップ自体が生成されない
• Inline：コンパイル後のCSSファイル内に生成される
• File：CSSに紐付いた状態で生成される

ソースマップが必要ない方は「None」を、必要な方は「Inline」または「File」のどちらか使いやすい方を選びましょう。

Error Display：コンパイル時のエラー設定

このオプションでは、コンパイル時のエラーが表示される位置やタイミングといった表示形式を指定できます。

▼Error Displayの選択肢と特徴

• Show in Header：ヘッダー
• Show to Logged in Users：ヘッダー（WPにログイン中のみ）
• Print to Log：「error_log.log」ファイルが生成される

最後に、画面の左下にある「変更を保存」をクリックして完了です。

リロード毎にSCSSファイルを強制コンパイルさせる方法

WP-SCSSは、SCSSファイルの編集をトリガーとしてコンパイルが実行される訳ではありません。コンパイルが実行されるのは、SCSSファイルが更新されたタイミングのみ！CSSファイルの更新デザインをチェックする場合は、意図的にリロードさせる必要があるのです。

また、SCSSディレクトリ直下のSCSSファイルを保存した時しか実行されない、ある日突然コンパイルされなくなった、という事例も報告されています。そんな時は、ページをリロードする度にCSSファイルが出力されるよう、強制的にコンパイルさせる設定を試してみましょう。

下記のコードを「function.php」または「wp-config.php」に追加するだけで、ページをリロードする度に強制的にコンパイルが実行されるようになります。

 

 

エラー（Sass Compiling Error）の対処法

Sass Compiling Error
/app/public/mw/wp-content/plugins/wp-scss/cache/
“File Permission Error, permission denied. Please make the cache directory writable.

上記のエラーが出た時は、下記画像のようにpluginsディレクトリのWP-SCSS 内に書き込みできる「cacheディレクトリ」を手動で作成することで解決します。「cacheディレクトリ」を追加する際は、下記のディレクトリ構成を参考にして下さい。

 

 

 

まとめ

コンパイルに苦手意識を持っている方にとって、WP-SCSSは救世主のような存在。すでにスタンダードになりつつあるSCSSを使って、自由自在にサイトデザインをカスタマイズできるようになるかもしれません。インストールから設定にいたるまで、わずか数ステップで完了するのも、多くのユーザーに愛用されている理由でしょう。