作業風景の写真、pixabayより
rawpixel / Pixabay

カスタマイズ画面から使うならJetPackだけでよい

 カスタマイズ画面で適用させる独自CSS画面でSCSSを使うのであれば、JetPackのその機能をONにし、SCSS Syntaxを適用させるだけでOKです。

 今回は、ランディングページに適用させたい部分のCSSが大きくなってきたこともあり、分離を検討しました。

テーマディレクトリに配置するなどしたSCSSファイルを自動コンパイルする場合

 WordPress外でのスクリプトによるコンパイルを考えないのであれば、プラグインを使用してSCSSファイルを自動コンパイルすることになります。

更新再開? WP-SCSS

 WordPressでSCSSを使う場合、有名なプラグインはWP-SCSSみたいですが、残念ながらこのプラグイン、最終更新日が結構前です。ですから、別のプラグインを探すことにしました。
→更新されました。いろいろバグフィクスなどあった模様。日本語ドキュメントが多いのはこのプラグインですから、どうしようか迷っています。
 実は使用中テーマの決まったフォルダ内のものしか変換できないみたいです。十分といえば十分でしょうけれど、さて。
 ちょっとFAQを見た限りでは、cssに変換した後、WP-SCSSをアンインストールしてもいいのか謎でした。

最近登場らしきプラグイン: Lenix scss compiler

 Lenix scss compilerという、最近更新のシンプルイズベストなプラグインを見つけました。
 シンプルイズベスト過ぎるのか、使っている人は少ないのが懸念事項ですね。日本語のあれこれも少ないし…。
 例に出されているフォルダの指定方法を鑑みるに、子テーマを作成して使う必要がありそうですが、うまくいけば別フォルダに配置したSCSSを使ってくれるかもしれません。
 なお、WP-SCSSに比べて、

  • アンインストールしても支障はない(cssファイルが残るだけ)
  • コンパイルするディレクトリとして、複数のフォルダを指定できる
  • 指定できるフォルダの位置がWP-SCSSより自由

という特徴があります。

 子テーマを作成し、今現在その子テーマで運用中です。なのでこのプラグインか、別のSCSSコンパイラでもいいので設定してSCSSを使おうかなあと思っています。

WP-SCSSとの違い

 どうやらWP-SCSSはコンパイルするファイルを入れるフォルダが決まっているようですが、こちらはそのフォルダを複数、WordPressのディレクトリ下にあるのであれば任意で選んで設定可能のようです。

SCSSを手動のWebサービスなどでコンパイルして結果をコピペしたCSSファイルを取り込む

 地道な方法ですが、こちらでもいいかもしれないと思っています。子テーマを作成して上のプラグインを使ってもいいですが。
 私(このサイト)の場合は、幸い、アイコンフォント適用などの関係で、外部ファイル用のフォルダは既に作ってありますので、ブラウザでSCSSを変換できるサービスか、CodePenで出力するかして、分離してみようかと考えています。
 でも、自動コンパイルはやっぱり魅力だし…どうしたものか。

広告

関連コンテンツと広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA