2021

　案件の提案などで、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のファイルパスとマイスノモンで指定するファイルパス（上で/* […]

WEB制作に携わっていると、既存テーマでの投稿・カテゴリー・タグ分類だけではなく、カスタム投稿やカスタムタクソノミーを使うことがあります。また、記事を任意で抽出する際、サブクエリを使うためにパラメータとしてタームのスラッグを設定する、なんてシチュエーションもあります。 僕のあるあるで、わかったつもりで先に進み、新たな学習コンテンツが手詰まると、わかったつもりのところまで手戻りするというのがあり、これもその一つでした。 そんなこんだを自分なりに整理した結果を、図や表を交えて説明をします。 この記事を読んでもらいたい方 WP初心者同じようなカタカナだらけで、頑張って学習した時はわかったような気になるけど、振り返るとちょっと習熟した自信がない。。。けど、体系の理解だけして先に進みたい！ という方の、備忘録的な位置づけを考えています。（もちろん自分にも） 分類表 カテゴリー、タグ、カスタムタクソノミーの説明 分類名/項目内　容備　考カテゴリー記事を大きく分類するのに使用。基本は記事ごとに1つの設定。デフォルトで存在する。固定ページでは設定不可タグ 記事を細かく分類するのに使用。記事ごとに1つ以上設定したり、設定しないことも可能。デフォルトで存在する。 固定ページでは設定不可 カスタムタクソノミー（命名した分類名）カスタム投稿を分類したり、既存のカテゴリーやタグとは違い、分類名を具体的に定義して使いたい場合に使用。プラグインなどで任意に導入する。 固定ページでも設定可能 どれもタクソノミー（分類）なのですが、デフォルトのカテゴリー＆タグと、タクソノミーをカスタムするカスタムタクソノミー（そのまんま）があります。 タームとは？ タームとは、各分類に対して作成された、具体的な項目を指します。 具体例 既存のカテゴリーやタグに対して「新規カテゴリー（タグ）を追加」で作成されたのがタームとなります。カスタムタクソノミーの場合は、分類名を具体的に命名ができますので、命名した分類名に対して「新規”分類名”を追加」で作成されたものがタームとなります。 カスタムタクソノミーの場合、分類名「愛知県」に対して、ターム「名古屋市」といった具合です。 ダッシュボード上の説明 画面はプラグイン「Custom Post Type UI」でカスタムタクソノミーを作成後のカスタムタクソノミー作成画面です。カテゴリー、タグでも見方は同じです。 なぜタームの理解が必要なのか？ ちょっと大げさな見出しですが、カテゴリーなどで新規作成したものを「ターム」と呼ぶっていうことを知っておくべしというだけです。ですが、ダッシュボード上などでタームという表記が見当たらず（たぶん）、特に知る必要のないまま学習を進めてサブクエリを使う段階で、任意の投稿抽出用のパラメータ項目でterms(タクソノミーターム)という文言をみて「ん？」と思ったところからちょっと考え始めました。ここでタームのスラッグが必要となります。 サブクエリについてはメインクエリと共にwordpress（というかデータベース関連の言語）を使う上では重要項目ですのできちんと理解してまた記事を書きたいと思いますが、ひとまず wordpress 上では関連記事系をアーカイブする際などに必要なものと理解しています。 さいごに 今回は、タクソノミー系の理解のために必要となる事項を記事にしましたが、カスタムタクソノミーは柔軟に分類するためには必須ですので、迷いなく使えるようになりたいです。 また、よくカスタムタクソノミーははカスタム投稿、カスタムフィールドと「カスタム3兄弟」として付加機能的な紹介をされるのですが、学習する際は既存のカテゴリーやタグと比較しながら確認することをお勧めします。 それでは。