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

2022-08-012022-08-18

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

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

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

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

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

My-Snow-Monkeyをインストール
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');
});