WordPress
scss
@nchhujimiyama

SCSSをwordpressに導入してみた

WordPressscss

SCSSの基礎知識

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

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

導入の流れ

１．プラグインの追加

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

Lenix scss compilerについて

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

２．SCSSファイルの作成

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

３．プラグインの設定

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

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

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

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

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

４．ファイルを読み込む

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

５．テーマの編集でSCSSを編集できるようにする

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

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

  return $default_types;
});

６．実際に書いてみる

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

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

Edit request
0