【簡単2ステップ】SnowMonkeyでsass(scss)を使う方法

簡単に編集でき、カスタマイズ性も高いテーマSnowMonkey。
自分でどんどんカスタマイズしていくうち、こんなことに悩んだ経験はありませんか?

  • CSSを記述しすぎて、何がどこに書いてあるか分からなくなってきた…
  • WordPress、SnowMonkeyでもsass(scss)を使いたいけど、方法がわからず今までCSSを書き続けてきた。

実は、SnowMonkeyでは簡単にsassを導入することができるんです!

sassを導入すれば、CSSをそのまま書くより記述量が減少し、コードがすっきり見やすくなります。
加えて、記述にかける時間が少なくなり、作業効率も格段にアップするなど、いいことづくめですよ。

SnowMonkeyでsassを使うのに必要なのは

  1. My-Snow-Monkeyをインストール
  2. style.cssのパスを読み込ませる

という2ステップのみ。この記事を読んでサクッとマスターしてしまいましょう!

目次

My-Snow-Monkeyをインストール

まずは、SnowMonkeyでsassを利用するために必要なMy-Snow-Monkeyをインストールしていきます。

ちなみに今回は、
ローカル環境でWordPressを編集可能にする「Local」、
無料ソースコードエディタ「Visual Studio Code」を使用した方法を紹介しています。

My-Snow-Monkeyをダウンロードする

SnowMonkeyの公式ページから「my-snow-monkey.zip」をダウンロードします。

my-snow-monkeyをpluginsにインストールする

ダウンロードした「my-snow-monkey.zip」を解凍します。

Localを開き、「Go to site folder」をクリック。

「app」→「public」→「wp-content」→「plugins」の中に解凍したmy-snow-monkeyフォルダを入れます。

管理画面のプラグイン一覧からプラグインがインストールされたことを確認しましょう。

「有効化」をクリックして有効にします。

style.cssのパスを設定する

pluginsに入れたmy-snow-monkeyフォルダをVscodeで開きます。

macユーザーはDockにVscodeがあればフォルダをドラッグ&ドロップで開くことができます。

style.scssを作成します。

Vscodeの画面右下の「Watch Sass」をクリック。

sassがコンパイルされcssファイルが作成されました。

style.cssを読み込むため、「my-snow-monkey.php」に下記コードを記述をしましょう。

//CSSの読み込み
add_action( 'wp_enqueue_scripts', 
function() { 
wp_enqueue_style(
 'my-sm-style',
 MY_SNOW_MONKEY_URL . '/css/style.css',
 [ Framework\Helper::get_main_style_handle() ], 
filemtime( plugin_dir_path( __FILE__ ) ) 
); 
}
);

//編集中もCSSを反映させる
add_action(
'after_setup_theme',
function(){
 add_editor_style(MY_SNOW_MONKEY_URL . '/css/style.css');
});

私のVscodeの環境はコンパイルした時に「CSSフォルダ」の中にstyle.cssが作成されるようになっています。

Vscodeの設定によってはこの「CSSフォルダ」は作成されないため、その時は右側の赤枠内にある「’/css/style.css’」を「’/style.css’」へ変更してください。

body { background-color: yellow;}

ファイルが読み込まれているか確認するため、上記コードをstyle.scssに記述してみます。

背景色が黄色になっているのでCSSが読み込まれていることが確認できました!

これでSnowMonkeyのカスタマイズをsassを使ってできるようになります。

まとめ

以上で、SnowMonkeyでsassを使うことができるようになりました。

WordPressの追加CSSでもカスタマイズは可能ですが、使い慣れているVscodeなどのエディタを使用してコードの記述ができると作業も管理も効率的に行えるのでぜひ取り入れてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次