案件の提案などで、Wordpressのテーマである「Snow Monkey」を使われている方も多いのではないかと思います。ノーコードでサクサク作れるうえに、GoogleアナリティクスなどのSEO関連設定もバッチリできて言うことなしです！ とはいえ、案件の要件定義上CSSや場合によってはJava Script(JQuery)を使わざるを得ない一方、「カスタマイズ環境の構築に手間取った」なんてお声もちらほら。 というわけで、そんな人のお役に立てればと思い、この記事を作成しました。 このページを見てもらいたい人 プラグイン「My Snow Monkey」を入れたけど、どうやって使えばよいかわからないという方CSSまでは設定できたけど、Java Scriptの設定ができていないという方 下準備 Snow Monkeyのカスタマイズは子テーマではなく、プラグイン「my-snow-monkey」が推奨されており、これをインストールするところからなんですが、こちらはSnow Monkeyといえばこの人！のじゃんきーの兄貴のブログがとても分かりやすいので、そちらをご参照ください。じゃんきーさん、ありがとうございます。 今回使用するMy Snow Monkeyのフォルダ完成図 デフォルトから配置を変え、こんな感じにしました。参照するstyle.cssを直下に置いているのは参照ファイルの視認性をあげるためです。 My Snow Monkeyに追記するコード 公式サイトのデフォルトコードにjsを読み込めるように追記されております。なお、こちらのコードはじゅんぺーさんのブログのもので、それを使い、自分なりに仕組みを考察したものです。大変勉強になりました。ありがとうございます。 じゅんぺーさんのブログは素晴らしく、必要事項は全て説明がされているため、リンク先からすんなり環境構築が済んだ方はこの先を読む必要はありません。どんどんカスタマイズしてスキルアップしちゃってください！ 私と同じく足踏みした人だけ以下の記事をお読みください。 仕組みを理解するための考察 アクションフック「wp_enqueue_scripts」はWordpress標準のものですので、Ｗordpress化をされたことがある方なら一度は目をにしたことがあるはずです。その引数である「msm_enqueue_style_script」関数（関数名をつけずに無名関数でも可能）で読み込みたいjsとcss指定しています。swiper.jsなど、追加で読み込みしたいファイルがある場合は、ここに追記すればjsファイルの追加が可能です。 男性スノモンでもCSSやJava Scriptを自由に追加できると思うと、使い勝手が飛躍的に上がるね！ 参照ファイルを増やす際、それぞれの名称（上でいうとmsm_styleとmsm_scripts）は異なる名称にしてください。挙動がおかしくなります。 ＶS CodeでのLive Sass Compilerのインストール インストールがまだお済みでないようでしたら、こちらのサイトがとてもわかりやすいです。ここではSass環境の構築の説明は割愛させていただきます。 ※上記と同じ状態にする場合は、my-snow-monkey\styles\src\_test.scssのファイルを作成し、style.scssファイル内で「@import ‘src/test’;」とコードを書いてコンパイル対象のSCSSファイル読み込み用のパスを通しておいてください。じゅんぺーさんのファイルをお使いになるのが早いですが、ご自身で考えながらやるのもよいかもしれません。 設定後、画面下にある「Watch Sass」をクリックして「watching…」状態にすることをお忘れなく。 本来はすんなり完了ですが・・・ 上記コードをマイスノモンに追記し、 Live Sass Compiler をインストールして起動すれば本来はCSSもJSも反映します。にもかかわらず、CSSの反映がうまくいかない方は、次の点が考えられないでしょうか。 マイスノモンのCSS読み込みパスと Live Sass Compiler パスの不一致 私はまさにこれだったのですが、ファイルの整理によりSassがコンパイルした後吐き出すStyle.cssのファイルパスとマイスノモンで指定するファイルパス（上で/* […]
とっぷ