WordPress
scss

SCSSをwordpressに導入してみた

SCSSの基礎知識

拡張子:.scss
メリット:CSSの書き方がそのまま使える

SCSS記法は、括弧{}を使って入れ子構造にすることでCSSの依存関係を示す。

導入の流れ

1.プラグインの追加

使用プラグイン:Lenix scss compiler
「プラグイン」>「新規追加」で検索したら出てくるので「今すぐインストール」

Lenix scss compilerについて

メリット
  • アンインストールしてもコンパイルしたCSSファイルが残る
  • コンパイルするディレクトリを複数指定できる
  • 指定できるフォルダの位置がWP-SCSSより自由(./wp-content/themesより下の階層ならどこでもOK)
デメリット
  • 使っている人が少ない
  • 使っている人が少ないからドキュメントがほとんど英語

2.SCSSファイルの作成

Lenix scss compilerは前述の通り、themes以下のファイルをコンパイルしてくれるのでthemes以下にファイルを作成。
今回の場合は、子テーマにスタイルを当てているので「./wp-content/themes/子テーマ/」に設置。

3.プラグインの設定

「設定」>「Lenix scss compiler」から設定。
画面はこんな感じ
scss_001.PNG

Add Compiler」を押すとコンパイルしたいディレクトリの指定を増やせる。
「scss folder」にコンパイルしたいディレクトリを指定して、
「css folder」に吐き出す先のディレクトリを指定。

指定の仕方は
【scss folder】
 thmes/子テーマ/コンパイルするディレクトリ
【css folder】
 themes/子テーマ/吐き出す先のディレクトリ

※注意
吐き出す先にコンパイルするscssファイルと同じ名前のcssファイルがいると勝手に上書きされちゃう

「変更を保存」したら設定完了。
これであとはscssファイルを保存するたびに勝手にコンパイルしてくれる。

4.ファイルを読み込む

吐き出されたCSSファイルを読み込まないといけないので、読み込みたいところでCSSファイルを呼び出す。
今回の場合は、すべてのページに適用されてほしいので「header.php」の他のスタイルを読み込んでいる場所に<link ~を記述。

5.テーマの編集でSCSSを編集できるようにする

Snippetsにテーマの編集で表示される拡張子を追加するための記述を作成。
今回つけた名前は「拡張子追加(テーマの編集)」
下記のコードを書いてSnippetsをアクティブにすればテーマの編集に表示される。

拡張子追加(テーマの編集)
add_filter('wp_theme_editor_filetypes', function($default_types) {
  $default_types[] = 'scss';
  $default_types[] = 'js'; /* 追加したい拡張子を1行ずつ増やしていけば出てきてくれる */

  return $default_types;
});

6.実際に書いてみる

あとはSCSSで書くだけ。
SCSSの記述にミスがあった場合、保存が終わらずSave Boxが一生居るので消えないな?と思ったらミスがある。

wordpressのエディタでミスを探すのは至難の業なのでローカルで書いて少しずつ移していくにしたほうがいいかな?
Atomだったら「sass-autocompile」が保存のたびにコンパイルしてエラーチェックしてくれるので便利。