dedede プラグインMy Snow Monkeyを入れて、scss (sass)を使おう
スノーモンキーで追加cssを使っての編集をしているとコードが増えて、”見にくくてよく分からなくなってきた、、” って事ありませんか？しかも追加CSSはデータベースに保存されるのでエディターで簡単に変種することはできません。
そこでvscodeでscss(sass)を使ってカスタマイズできたらいいなあと思ってやってみたら意外と簡単にできたので書いていきます。
環境設定と大まかな流れ
次のような環境で、設定をしています。
- 開発環境:vscode
→プラグイン Live Sass Compiler をいれておいてください。自動でコンパイルされるものとして説明いたします。 - ローカルサーバー:Local by flywheel もちろんFTP接続などで外部サーバーに対しても同様なことはできます。
大まかな設定の流れはシンプルで以下のようになります。
念の為説明しておくと、snow monkeyではテーマ編集する場合、子テーマではなくこのプラグインを使っての編集が推奨されています。
プラグイ my-snow-monkey/my-snow-monkey.phpにstyle.cssを読み込ませるコードを書きます。
同じディレクトリにstyle.scss を作成すれば完成。あとはvscodeが勝手にコンパイルしてくれるのでこのscssファイルに書きたいように書けば良いです。
①プラグインMy Snow Monkeyを入れる。
snow monkey ホームページからmy snow monkey.zipをダウンロードしてください。
そこに入っている,my-snow-monkeyフォルダをwp-content/plugins/ にコピーします。これでワードプレスの管理画面のプラグインに追加されているのを確認し、プラグインを有効にしてください。
②My Snow Monkeyで自分で作ったstyle.cssを読み込ませる。
次は先程のmy-snow-monkeyフォルダ内にある,my-snow-monkey.phpを編集します。
そのまま以下のコードをphpファイルにコピペして追加したらOKです。
*MY_SNOW_MONKEEY_URL はこのプラグインがあるパスを保持する定数です。
// 実際のページ用の CSS 読み込み
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_style(
'my-snow-monkey',//名前はなんでも良い。分かりやすいものに
MY_SNOW_MONKEY_URL . '/style.css',//このファイル名が読み込まれる
[ Framework\Helper::get_main_style_handle() ],//読み込む順序指定
filemtime( plugin_dir_path( __FILE__ ) )//ver管理
);
}
);
//以下は任意。編集中でもcssを当てる場合は以下のコードを追加。
add_action(
'after_setup_theme',
function(){
add_editor_style(MY_SNOW_MONKEY_URL . '/style.css');
});③my-snow-monkeyと同じディレクトリにstyle.scssを作成
先程のmy-snow-monkey.phpと同じディレクトリにvscode上でstyle.scssを作成してください。
あとは普通にscssを書いていけば自動コンパイルされてstyle.cssができるのでそれが読み込まれます。
試しにh2{display:none;}などで動くか確認してみてください。
まとめ
わかる人が見ると当たり前だろ、という感じですがscss使って効率的にcssカスタマイズできるようにしておきましょう。これで追加cssとはさようなら^^
