最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
SCSSを使えばCSSよりも作業効率がUPすると分かっていても、コンパイルが必須と聞いて二の足を踏んでいる方も多いようです。そこで本記事では、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」の便利さを解説したうえで、インストール方法やオプション設定、エラーが出た時の対処法などを解説します。
目次
「WordPressのテーマを制作してみたい!」「自分好みにカスタマイズしたい!」という方なら、一度はSCSSに興味を持ったことがあるのではないでしょうか。
SCSS(Sass)とはCSSの拡張言語、いわゆるメタ言語の一種です。CSSの発展形といった方がイメージしやすいかもしれません。なお、SCSSには下記のようなメリットがあります。
▼SCSS(Sass)のメリット
CSSコードが効率的に書けるので、コーディングスピードが早くなるうえCSSよりも短いコードで済むのが特徴です。
ちなみに、世界のフロントエンド開発者を対象に実施されたアンケートでは、CSSコードを使っていたエンジニアが約14%だったのに対し、63%以上がSassを使っていたという調査結果が報告されています。
SCSSは利便性が高い反面、有効化する際にはコンパイル(変換)が必須で手間がかかるのが難点でした。
そこでおすすめしたいのが、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」というプラグイン!しかもインストール後に、ファイルの場所を2カ所指定して3種類のオプションを設定するだけで使えるようになります。
このプラグインさえあれば、そもそもコンパイルとは?と悩む必要もありません。
下記画像を参考に、あらかじめScss用とCSS用のディレクトリ(フォルダ)を作成しておきましょう。なお、scss直下のscssファイルだけがコンパイルの対象です。つまり、下記画像のディレクトリ構造で言うと「style.scss」と「ie.scss」は、どちらも直接コンパイルされてcssデータになります。
ただし、scssディレクトリの内部に全く別のAディレクトリを作成すると、Aディレクトリ内のファイル(データ)は全て「scssディレクトリ直下」という条件から外れてしまうので注意が必要です。
WordPressへアクセスし、管理画面>プラグイン>新規追加画面へと移動します。
下記画像の赤枠で囲ってある「WP-SCSS」を選択し、「今すぐインストール」をクリックして有効化して下さい。
管理画面>設定>WP-SCSSへと進み、下記の設定画面を開きます。
まず、上記画像の赤枠で囲ってある「Scss Location」から設定しましょう。「/wp-content/themes/」以降のルートを記載するのがポイント。ルートが記載されていないとコンパイルが実行されませんので注意が必要です。
▼Scss Location
次は上記画像の緑枠で囲ってある「CSS Location」の設定です。こちらもScss Locationと同様に、「/wp-content/themes/」以降のルートを明確にしておきましょう。
▼CSS Location
ここでは、3種類のオプション設定を行います。ただし、オプション設定に限っては全く設定しなくてもプラグイン自体は作動しますので、必要に応じて対応して下さい。
「Compiling Mode」とは、コンパイルの方式を指定するオプション設定です。どの形式を選ぶかによって、改行だけが削除されていたりスペースやコメントまで削除されていたりと、コンパイル後に書き出されるCSSファイルの状態が微妙に違ってきます。
選択肢は6種類ありますが、サーバー上での動作性を考慮すると軽量化を優先すべきでしょう。したがって、改行・スペース・コメントが削除され、圧縮した状態で出力される「Compressed」が最も軽いと思われます。
Cssに変換される前のScss上で、修正箇所を探したい時に活躍してくれるソースマップ。たとえば、Cssの10行がscssの7行に相当するといった情報を伝えてくれるので、簡単に修正すべき箇所が見つかります。
▼ソースマップの選択肢と特徴
ソースマップが必要ない方は「None」を、必要な方は「Inline」または「File」のどちらか使いやすい方を選びましょう。
このオプションでは、コンパイル時のエラーが表示される位置やタイミングといった表示形式を指定できます。
▼Error Displayの選択肢と特徴
最後に、画面の左下にある「変更を保存」をクリックして完了です。
WP-SCSSは、SCSSファイルの編集をトリガーとしてコンパイルが実行される訳ではありません。コンパイルが実行されるのは、SCSSファイルが更新されたタイミングのみ!CSSファイルの更新デザインをチェックする場合は、意図的にリロードさせる必要があるのです。
また、SCSSディレクトリ直下のSCSSファイルを保存した時しか実行されない、ある日突然コンパイルされなくなった、という事例も報告されています。そんな時は、ページをリロードする度にCSSファイルが出力されるよう、強制的にコンパイルさせる設定を試してみましょう。
下記のコードを「function.php」または「wp-config.php」に追加するだけで、ページをリロードする度に強制的にコンパイルが実行されるようになります。
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を使って、自由自在にサイトデザインをカスタマイズできるようになるかもしれません。インストールから設定にいたるまで、わずか数ステップで完了するのも、多くのユーザーに愛用されている理由でしょう。