【wordpress】SCSSを簡単に使う方法!WP-SCSSの導入方法とエラーの対処法Webサイト制作Web開発2020.07.01SCSSを使えば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へと進み、下記の設定画面を開きます。Location」から設定しましょう。「/wp-content/themes/」以降のルートを記載するのがポイント。ルートが記載されていないとコンパイルが実行されませんので注意が必要です。Location」の設定です。Locationと同様に、「/wp-content/themes/」以降のルートを明確にしておきましょう。「/my-thema/css/」を入力するコンパイル時のオプション設定3つここでは、3種類のオプション設定を行います。オプション設定に限っては全く設定しなくてもプラグイン自体は作動しますので、必要に応じて対応して下さい。Mode」とは、コンパイルの方式を指定するオプション設定です。どの形式を選ぶかによって、改行だけが削除されていたりスペースやコメントまで削除されていたりと、コンパイル後に書き出されるCSSファイルの状態が微妙に違ってきます。選択肢は6種類ありますが、サーバー上での動作性を考慮すると軽量化を優先すべきでしょう。したがって、改行・スペース・コメントが削除され、圧縮した状態で出力される「Compressed」が最も軽いと思われます。Mode:ソースマップの設定Cssに変換される前のScss上で、修正箇所を探したい時に活躍してくれるソースマップ。Cssの10行がscssの7行に相当するといった情報を伝えてくれるので、簡単に修正すべき箇所が見つかります。▼ソースマップの選択肢と特徴None:ソースマップ自体が生成されないInline:コンパイル後のCSSファイル内に生成されるFile:CSSに紐付いた状態で生成されるソースマップが必要ない方は「None」を、必要な方は「Inline」または「File」のどちらか使いやすい方を選びましょう。Display:コンパイル時のエラー設定このオプションでは、コンパイル時のエラーが表示される位置やタイミングといった表示形式を指定できます。Log:「error_log.log」ファイルが生成される最後に、画面の左下にある「変更を保存」をクリックして完了です。リロード毎にSCSSファイルを強制コンパイルさせる方法WP-SCSSは、SCSSファイルの編集をトリガーとしてコンパイルが実行される訳ではありません。コンパイルが実行されるのは、SCSSファイルが更新されたタイミングのみ!CSSファイルの更新デザインをチェックする場合は、意図的にリロードさせる必要があるのです。SCSSディレクトリ直下のSCSSファイルを保存した時しか実行されない、ある日突然コンパイルされなくなった、という事例も報告されています。そんな時は、ページをリロードする度にCSSファイルが出力されるよう、強制的にコンパイルさせる設定を試してみましょう。下記のコードを「function.php」または「wp-config.php」に追加するだけで、ページをリロードする度に強制的にコンパイルが実行されるようになります。内に書き込みできる「cacheディレクトリ」を手動で作成することで解決します。「cacheディレクトリ」を追加する際は、下記のディレクトリ構成を参考にして下さい。まとめコンパイルに苦手意識を持っている方にとって、WP-SCSSは救世主のような存在。スタンダードになりつつあるSCSSを使って、自由自在にサイトデザインをカスタマイズできるようになるかもしれません。インストールから設定にいたるまで、わずか数ステップで完了するのも、多くのユーザーに愛用されている理由でしょう。2016年9月ご質問やご相談などお気軽にお問い合わせください。