アクツ おはようございます。こんにちは。こんばんは。
師走先生が猛ダッシュの12月も後半、この記事を読んでくださりありがとうございます。
この記事はSnow Monkey Advent Calendar 2021 20日目の記事になります。
みなさん、Snow Monkeyのプロダクト良いですよね。
Snow Monkeyテーマでは、ヘッダーやコンテンツのレイアウトもカスタマイザーでさくさく変更できるし、Snow Monkey Blocks入れれば、マウスでポチポチしていくだけでページが出来上がっちゃうし、段落の一部の文字もSnow Monkey Editorで色変えたり大きくしたりなんかもできたり。
決められたカードを組み合わせていくというノーコードな作り方でも、出来合いの品ながらにとても品質の良いサイトが作れるのが魅力。
今日はさらにもっと好きになれる魅力をご紹介したい
さて、Snow Monkeyには更に愛すべき所がある。
その手元にある素敵なアイテムは、出来合い部分をフルカスタマイズできるのだ。
なにで？
「フックで」
ということでノーコード・ローコードなSnow Monkey好きの方々に、これを覚えたらコードのカスタマイズがもっと身近で好きになれると思う3大Snow Monkeyフックを紹介したいと思う。
急に文体がかわりやがって・・・というのはとりあえず目をつぶってほしい。
こんな話し言葉で書きたかったんです（でも慣れないのでものすごいぎこちない）
Snow Monkey 3大フック
私が3大フックと思っているのは、下記の３つ。
この3つのフックを使えば大体の案件は対応できるなと思っている。
- snow_monkey_template_part_render_{slug}
- snow_monkey_pre_template_part_render_{slug}
- snow_monkey_get_template_part_args_{slug}
フックだけで当然できるはずもなく
ちなみに察しはついていると思うが、フック以外のこともやっていることをここに付け加えされてほしい。
オリジナルのCSSを書いている。また当然そのCSSを読み込むコードもMy Snow Monkeyに記載している。
さらに言えば、オリジナルのCSSを書くのを少しでも効率化したいのでSASS（SCSS）で書いてそれをNodeでCSSに出力している。
ただこれを説明するだけで、この記事をあと10スクロールぐらいしてしまいそうなレベルの説明ベタな人間なので、ここの説明は省略されてもらおうと思う。
My Snow Monkeyってさらっとでてきましたが！？
フォーラムなどを見ていても当たり前のように出てくる「My Snow Monkey」
なんだろう？って思った方に説明すると、カスタマイズ内容を記載するためのノート的なプラグインのことである。
なので、最初ダウンロードして開くと、
- テーマがSnow Monkey以外のときはこのノートもう閉じやがれ
- オリジナルの呪文を記しておく。このプラグインまでのディレクトリーは良く呼び出すのでこの呪文で呼んでくれ。そしてプラグインまでのURLも呪文を定義しておくぞ（呪文というのが表現としてふさわしいかは棚置きにさせてほしい）
の指示だけ書かれてる。
当然この状態でプラグインを有効にしても、なにか変わったりするわけではない。
ご自身でこのノートにひたすらカスタマイズしたい内容を記載していくことが必要である。
また、私の紹介する3大フックもここに記載していくことになる。
っていうかフックってなんですか！？
おっと、説明を忘れていた。
WordPressにはフックという仕組みがある。フックっていうと、タオルひっかけたり袋引っ掛けたりできるアレなイメージがでてくると思うが、まさしくそんなイメージで、なにか横入りで処理を入れてほしかったり、あらかじめ予定されていた処理の仕様を一部書き換えたいといったときに自分のしたい要望をひっかけておき、対応してもらうといったことができる。
ただし、どこかしこでもフックは掛けられるわけではなく、WordPress本体だったりプラグインだったりが「ここはフックを引っ掛けたいだろうな」と思える場所にフックを引っ掛けるバー的なもの設置してくれており、そこに対してだけひっかけることができる。
フック引っ掛ける場所がないプラグインやテーマももちろんあるので、全部のプロダクトがフックでカスタマイズできるわけではないこともお伝えしたい。
/* 無名関数で書いたもの （フックを引っ掛ける際に直接指示する内容も一緒にその場で記載している形） */
add_filter(
'theme_mod_header-position-lg', //この一番目の''に入るものはどこの場所に引っ掛けるかの「場所」になるもの
function( $value ) { //どんな内容を指示するのかを指示するもの（こちらは直接指示を書いてしまっている）
if ( is_front_page() ) {
return 'sticky-overlay';
}
return $value;
},
10, //自分の指示の優先度（数値が低いほど優先度が高く早く実行される）
2 //引数の数（大本の指示書に用意してある仕様の項目何個使うか）
);
/* 指示は関数で書いたもの （フックを引っ掛ける際に指示書はこちらにあるからよろ！っていう形で伝えてる） */
add_filter( 'theme_mod_header-position-lg', 'front_page_header', 10, 2);
function front_page_header ($value) {
if ( is_front_page() ) {
return 'sticky-overlay';
}
return $value;
}ちなみに最初の頃は「xxxxしたい」で検索して出てきたコードやフォーラムで回答もらったものをMy Snow Monkeyに貼り付けることが主になるので、意識をあまり向けない部分であるがフックには２つ種類があることも伝えておく
アクションフック add_action()
ここの場所で横入りで処理を入れてほしい！といったときに使うフック。
Snow Monkeyテーマだとヘッダとコンテンツの間にメインビジュアル入れたいみたいな要望のときに使ったりする。
フィルターフック add_filter()
あらかじめ予定されていた処理の仕様を一部書き換えたいといったときに使うフック。
例えば、トップだけヘッダーをオーバーレイにしたい（他のページは1カラムにしたい）なんていうときにもフィルターフックを利用するとさくっと対応できたりする
今日伝えたい3大フックもフィルターフックである。
余談も余談 PHP自体でやってることWordPress独自でやってること
add_action()、add_filter()をはじめ、WordPressではPHPで動く独自の関数（これをしてねという指示をまとめた塊のようなもの）をたくさん定義している。
たぶん、WordPressでサイト構築すると、この用意してある独自の関数を使うことが主になると思う。
だが、関数を利用して、自分の望む処理を入れていこうとすると、PHP自体でできる演算や処理の理解も必要になってくる。
なので、コードでカスタマイズすることに慣れてきたら、PHPの簡単な処理などを理解しておくと更にカスタマイズが捗ることをお伝えしたい（例えば if / while / foreach など）
長い脇道失礼。本題に。
snow_monkey_template_part_render_{slug}
さて、3大フックの中でもこれが一番使うんじゃないかなって思うtemplate_part_render。
出力するテンプレートパーツのHTMLの一部を書き換えたいというときに使うもの。
例えばアーカイブのタイトル上に「NEWS」のような装飾的なテキストを入れたいときなどにも使える。
add_filter(
'snow_monkey_template_part_render_template-parts/archive/entry/header/header',
function ( $html, $name, $vars ) {
$before = '<h1 class="c-entry__title">';
$after = '<div class="fuga_entry_subtitle">NEWS</div><h1 class="c-entry__title">';
$html = str_replace( $before, $after, $html );
return $html;
},
10,
3
);それ以外にもH2をH3にしたいときや、要素にclassを足したいとかにも使うことができるのでとても便利である。
さらに、このclass名がついたh2だけ置換したいときなど条件が細かいときには、str_replace()ではなく、正規表現で置換を行うPHP関数preg_replace()を使うことによって実現できる。
{slug}って何？ 何を入れたら良いのかわからない
{slug}は、ここにこのテンプレートパーツのパスを入れてねの部分になる。
このテンプレートパーツのパスがわからない！と思われると思うが安心してほしい。
WordPressのデバッグモードを有効にすると、HTMLソースの各所にslugがコメントで入るようになるので、そこから取得ができるようになる。
テンプレートパーツ？
Snow Monkeyはコンテンツの要素毎に細かくパーツで分割されて管理されている
ちなみにどんな分割のされ方されてるのかな？と気になる場合は、Snow Monkeyテーマのtemplate-partsディレクトリー内を見てみると良い。
デバッグモードの有効の仕方
WordPressのルートディレクトリー内にある「wp-config.php」に下記を記載すると有効になる。
define( 'WP_DEBUG', true );
注意点
デバッグモードが有効になると、プラグイン・テーマなどでエラーがある場合にエラー文が画面に表示されるようになってしまう。デバッグモードが無効だと重要なエラー以外はエラー文がでない）
なので、公開しているサイト領域でデバッグモードの有効化はおすすめしない。ご自身のローカル環境か検証サーバー環境で行うことを強くすすめておく。
正規表現？？
はい。また登場した新しい言葉「正規表現」
私は、うまく言語化して説明できないので、別の方が説明している文を引用させていただく。
いくつかの文字列を一つの形式で表現するための表現方法。
https://userweb.mnet.ne.jp/nakama/
この表現方法を利用すれば、たくさんの文章の中から容易に見つけたい文字列を検索することができる
特殊文字を駆使して、条件文を作り出すのだが、その文章を作り出すのが最初はとても難しいが、正規表現が使えるようになると、エディタを使ってファイル内の文字列探すときなどにとても活躍するので、扱える能力あったほうが良い。
（私はとても正規表現がとても苦手で条件文言作り出すのに人の数倍時間がかかってしまってる）
正規表現で条件文つくるときに便利なチェッカー
https://weblabo.oscasierra.net/tools/regex/
snow_monkey_pre_template_part_render_{slug}
先程の「snow_monkey_template_part_render_{slug}」ととても良く似ているのがでてきた。
（”pre”がつくかどうかの識別で判断が良さそうだ）
先程の出力されるHTMLの一部を書き換えるのに対して、”pre”がつく方については、大きく出力内容を変更する場合に使うケースが良いだろうか。
というのも、このフックの場合は、null値（空の値）以外を設定して指示内容はこれです返すと、元の方のテンプレートはロードされないという仕組みになっている。
私の場合だと、文字の置換程度ではどうにもならないレベルのカスタマイズの場合は”pre”の方を使って、それ以外は”pre”がついてない方を使っているのだがこれが最適解かは不明。
同じ挙動をするもので{slug}を付けないものがあったりする
先程紹介した「snow_monkey_template_part_render」を含め、_{slug}が末尾にあるフック名には、”_{slug}”を抜いたフックも存在する。
snow_monkey_pre_template_part_render
→すべてのテンプレートにフックがかかるので、指示の実行も全部のテンプレートにされる。もちろんこうやってくれの指示内に「このテンプレートパーツのみ」といった指示を書いて条件分岐させることも可能だけど、それだったら{slug}でやったほうが健全かなと思ってる
snow_monkey_pre_template_part_render_{slug}
→slugで指定したテンプレートのみフックがかかる。指定した箇所以外で実行されないので幾分か処理も軽く（たぶん）、想定外のテンプレートパーツ内で指示が実行されるといったトラップも起きなくなる
snow_monkey_get_template_part_args_{slug}
こちらは、先程の２つのフックとはちょっと趣向が異なる。
というのも、こういうふうに出力しますからね！と出す直前にごめんなさいなここ修正させてくださいとゴニョゴニョするのが前２つのフックの処理イメージ。
「get_template_part_args_{slug}」の方は、出力内容を決めるための仕様表の一部をちょっと書き直させてもらうイメージである（そのあと出力内容が生成される）。
（赤色のリボンで結ぶ予定のものを緑色のリボンに変更させてもらうイメージ）
どんな仕様を書き換えられるのかについてはどこで知ればよいのか
これについては、Snow Monkeyテーマにあるtemplate-partsディレクトリーの中にある各ファイルを見ていくしかない。
まず自分がカスタマイズしたいなと思うテンプレートパーツはどれかを探す（{slug}を探す手順でいける）。
そして、下記のようなコードがないかを確認する
$args = wp_parse_args(
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
$args,
// phpcs:enable
[
//// ここの値は各ファイルごとに異なっている /////
'_context' => 'archive',
'_entries_layout' => 'rich-media',
'_force_sm_1col' => false,
'_infeed_ads' => false,
'_posts_query' => false,
]
);$args = wp_parse_argsで仕様の各種値を宣言していれば、その各種値について「snow_monkey_get_template_part_args」フックで書き換えることが可能になる。
ここはガッツリコードを見る所になるので、「え？プログラムのコードなんてわからない」ってなってしまいそうだが、落ち着いてみると「_entries_layout’ => ‘rich-media’」って、なんかアーカイブのレイアウトがリッチメディアなんだな など単語で推測することができるので、PHPわからないといった場合でもカスタマイズできるチャンスがあると思う。
個人的にはここってこうなのかな？って推測ができたら、その推測できた部分のコードをgoogleで検索する。
大概Snow Monkeyのフォーラムあたりがひっかかるので、そこの質疑応答を見ていって推測が当たってそうかなどを見ていく。そして手元で試してみる。という流れが多い。
フックでカスタマイズって大変そう！
「3大フックさえ使えれば、あなたのカスタマイズ人生は明るい」みたいな冒頭からすると、実際ご紹介した内容はなんだかボリューム多いしハードじゃないか！？と思われる方も少なからずいると思う。
その点については、「そうだよね」だし「そうじゃない」と言える部分もある。
というのも、まずは、My Snow Monkeyに、コピペでコードをペタリであれば簡単だし、その繰り返しである程度のところまで行きつけると思ってる。ハードではない。（少なくともわたしはそうだった）
たが、Snow Monkeyでサイト作れば作りつづけるほど、「このときはこうだったけど、ここはもうちょっとああしたい」といった応用になってくる部分がでてくるし、似たようなことを度々フォーラムに聞くのもちょっと心が引けてしまう。
そんなときに結局、今回紹介したことの数々と立ち向かう必要が出てくる気がしている。うんハードだ。
ただ１つ応用を覚えるととても楽しいし、できるというのはとても快感である。
そして応用を覚えると、色々と応用したいことがでてくる。
私は今日紹介した3大フックをコピペから応用させてをしていって多少理解をできた結果、Snow Monkeyのフックの魅力やプラグインでゴリゴリとカスタマイズしていく魅力にはまっている。３つのフックを理解しただけでだ。
（ついでに社内でどやあ！な顔してこれはこのフック使えばいいんだよ！ってしたりと説明できたりする ３つしか使ってないのにｗ）
なので、フックでカスタマイズに躊躇している方も今日ご紹介したSnow Monkey3大フックに挑戦してほしい。
また、来年SNSやブログで「このフック使ったら良かった！もっと楽しくなった」みたいな声が聞けたらなおのこと嬉しい。
欄外：自分のブログ記事から見るSnow Monkey制作の変化
最後にCMタイムです
フック使ってバリバリやろうぜ！な記事の末尾には到底似つかわしくない宣伝です（笑）
私が所属しているmgnという会社では、Snow Monkeyユーザー向けのサービス・プロダクト「類人猿」を展開しています。
（Snow Monkey好きという立場を乱用し（←オイ）、一応私がプロダクトのリードをさせていただいております）
類人猿では、現在ブロックパターン集を販売中。
マウスでポチポチパターンを選んで配置していくだけで、素敵なLPサイトが出来上がります。
よろしくお願いします
（サンプルの無料お試しもあります）
