Snow Monkeyの「メタ」のカスタマイズについて、いろいろ調べました

これは「Snow Monkey Advent Calendar 2021」の10日目の記事です。

既成のテーマを案件で使用する場合、一番の壁になってくるのが「メタの表示」です。レイアウトは今やCSSとJavaScriptでどうとでもなりますが、SEOに関わるメタはHTMLレベルで変更しなければなりません。
WordPressテーマ「Snow Monkey」は一般的なCMSテーマとはカスタマイズに関する考え方が異なっています。メタの表示コントロールについて調べたので記事にしてみます。

「コードスニペットはQiita、理論はブログに書く」と決めているため、今回検証したTIPSは別記事にまとめました。お時間があればこちらも見ていただければ幸いです。

WordPressテーマ「Snow Monkey」の投稿情報の表示内容を細かく変更する - Qiita

ごあいさつ

WordPress関連のアドベントカレンダーの参加ははじめてです。改めて自己紹介します。フロントエンドエンジニアのうぇびんと申します。

WordPress・a-blog cms・Movable Type・baserCMSなどのCMSを使ったサイト制作を主業務にしており、自作テーマやCSSフレームワークの公開、CMSをテーマとした勉強会の開催もしてきました。
Snow Monkeyの開発者とプロダクトが気に入って、最近になってWordPressのコミュニティにもちょくちょく関わっています。

メタと表示ルール

投稿の詳細ページの、タイトル周辺には、公開日やカテゴリー等が出力されます。本記事ではこれをメタ＝投稿情報としています。

投稿一覧の場合は、サムネイルの上にラベルとして表示されたり、タイトルや概要の下に表示されます。

支給されたデザインカンプをCMSのテーマに落とし込む場合、メタに関する要望で、記憶している限りで一番多かったのが以下の4つです。順番や配置を変えるのはCSSでできるのでここでは言及しません。

メタの「どこか」にカスタムフィールドを挿入する
メタの「どこか」にカスタムタクソノミーを挿入する
更新時刻を表示しない
投稿者名を表示しない

まず、最低でもこれらをコントロールすることを考えて調べていきました。

Snow Monkeyでは、メタの内容はテーマのカスタマイズ画面で選択したビューテンプレートによって自動的に決められます。

今までに把握したルールは以下のとおりです。

ビューテンプレートを投稿用にした場合はメタ全体を表示、それ以外は非表示
以下、メタ表示が前提
- タイトル下は時刻、著者、カテゴリー、カスタムタクソノミーの順に自動で表示される
- 本文下はタグが自動で表示される
- たとえタグ形式であっても、カスタムタクソノミーは本文下に自動で表示されない
- 公開日と最終更新日が異なっている場合は更新時刻が差し込まれる
- 一覧ページの投稿繰り返しには主カテゴリーが表示される
- カスタムタクソノミーは投稿繰り返しには自動で表示されない

子テーマよりプラグイン

このルールに沿わない表示をすることになった場合、一般には「子テーマ」を作って該当のテンプレートファイルをまるごと上書きします。それに対しSnow Monkeyは、簡単な「プラグイン」を作る方法を推薦しています。Snow Monkeyはテーマ内にフックを多数用意してあるので、これをPHPで操作してカスタマイズしてほしいそうです。

子テーマを作らせない前提となった経緯は、開発者のキタジマさんのブログ記事に書かれています。プラグインのひな形もこちらでダウンロードできます。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました – WordPress テーマ Snow Monkey

フック

テーマ内の任意の箇所にHTMLを追加したり、まったく違う関数を挿入する場合は、Snow Monkey独自の「アクションフック」「フィルターフック」を使用します。これらの技術情報は公式ドキュメントだけでなく、パワーユーザーのOleinさんが運営している解説サイト「HAPPY SNOW MONKEY」でも詳しく解説されています。

HAPPY SNOW MONKEYのサイトを訪問すると、ページ全体に赤い四角が入って崩れまくっています。これは不具合ではなく「フックの場所」を可視化しています。Snow Monkeyには見えるだけでも凄い数のフックがあることがわかります。

メタの書き換えの手法

ここからは、今回のテーマとなっているメタの書き換えについて、頻出しそうなものを解説します。

snow_monkey_template_part_render

snow_monkey_template_part_render_{拡張子を除いたテンプレートファイルまでのパス} というフックがあります。
これは名前のとおり、すべてのテンプレートファイルに設けられていて、その箇所の出力予定だったHTMLや変動する値を受け取って加工できます。

snow_monkey_template_part_render | HAPPY SNOW MONKEY

カスタム投稿タイプが「test」のときは
カスタム投稿タイプの投稿一覧で
ブログと同じレイアウトを使いつつ
メタにカスタムフィールド「test_text（作者）」を追加する

場合は、これを利用して、以下のようなコードを書いてリストの最後にカスタムフィールドの値を追加します。ここではpreg_replaceを使用して置換しています。

/**
 * カスタム投稿タイプの投稿一覧のメタにカスタムフィールドを追加する
 */
function custom_add_entry_summary_meta_items( $html ) {
	if( get_query_var('post_type') === 'test' ) {
		$field = get_field('test_text');
		$output = '';
		if( $field ) {
			$output = '<li class="c-meta__item c-meta__item--text">' . $field . '</li>';
		}
		$html = preg_replace( '/</ul>/', $output . '</ul>', $html );
	}
	return $html;
}
add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary/meta/meta',
	'custom_add_entry_summary_meta_items'
);

snow_monkey_get_template_part_args

置換などでHTMLを書き換えすぎると、バージョンアップのときに崩れやすいテーマになってしまいます。パーツを表示しないだけなら、snow_monkey_get_template_part_args_{拡張子を除いたテンプレートファイルまでのパス} というフックで制御できます。

snow_monkey_get_template_part_args | HAPPY SNOW MONKEY

例えば、詳細ページで投稿の全体を表示しているテンプレート template-parts/content/entry/entry.php は、冒頭に以下のような配列の定義があります。

$args = wp_parse_args(
	// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
	$args,
	// phpcs:enable
	[
		'_display_adsense'                     => false,
		'_display_article_bottom_widget_area'  => false,
		'_display_article_top_widget_area'     => false,
		'_display_bottom_share_buttons'        => false,
		'_display_contents_bottom_widget_area' => false,
		'_display_comments'                    => true,
		'_display_entry_footer'                => false,
		'_display_entry_header'                => false,
		'_display_eyecatch'                    => false,
		'_display_profile_box'                 => false,
		'_display_tags'                        => false,
		'_display_top_share_buttons'           => false,
	]
);

配列のキーが「display」となっていることで、これがtrueだと表示、falseだと非表示になるのだとわかります。

カスタム投稿タイプが「test」のときは
ブログと同じレイアウトを使いつつ
「この記事を書いた人」は非表示にする

場合は、これを利用して、以下のようなコードを書いて $args[‘vars’][‘_display_profile_box’] を変更します。

/**
 * この記事を書いた人を表示しない
 */
function custom_remove_profile_box( $args ) {
	if ( get_query_var('post_type') === 'test' ) {
		$args['vars']['_display_profile_box'] = false;
	}
	return $args;
}
add_filter(
	'snow_monkey_get_template_part_args_template-parts/content/entry/entry',
	'custom_remove_profile_box'
);

snow_monkey_entry_meta_items

snow_monkey_entry_meta_items というアクションフックは、詳細ページのメタに処理を挿入できます。第3引数は優先度＝表示される順番となっていて、小さいほど左、大きいほど右に挿入されることになります。99ならよほどのことがない限り最後尾です。

カスタム投稿タイプが「test」のときは
ブログと同じレイアウトを使いつつ
メタにカスタムフィールド「test_text（作者）」を追加する

場合は、以下のようなコードを書きます。

/**
 * メタにカスタムフィールドを追加する
 */
function custom_entry_meta_items_field() {
	if( get_query_var('post_type') === 'test' ) {
		$output = '';
		$field = get_field('test_text');
		if( $field ) {
			$output = '<li class="c-meta__item c-meta__item--text">' . $field . '</li>';
		}
		echo $output;
	}
}
add_action( 'snow_monkey_entry_meta_items', 'custom_entry_meta_items_field', 41 );

snow_monkey_template_part_root_hierarchy

snow_monkey_template_part_root_hierarchy というフックを利用すると、自作プラグインの中の任意ディレクトリが、Snow Monkeyの子テーマのような扱いになります。
ただし、リンク先の解説にある通り少し表示が遅くなるようで、推薦はされていません。根本から違うテンプレートを作りたい場合の奥の手と考えた方が良さそうです。

My Snow Monkey でテンプレートの追加/上書きをできるようにする（テンプレートルートの追加） – WordPress テーマ Snow Monkey

ノーコードか、モダンコードか

これだけ豊富なフックがあれば、住宅会社向けとか、出版社向けとか、ものづくり向けにSnow Monkeyをセットアップするプラグイン、もしくはチェックボックスのオンオフで細かく表示する情報を変更するプラグインが作れそうな気もします。実際、既に「類人猿」というSnow Monkeyを特定業種向けにするプラグインもリリースされています。

まだまだ頭が働いていますが、多彩なフックがあるんだね！というあたりで記事をまとめます。やべぇ明日朝から病院なのにもう2時だし。

Snow Monkeyのプラグイン前提の仕様は正直驚きです。扱う人によっては、my-snow-monkey.phpに数千行のスパゲッティコードが書かれた、子テーマより闇が深いサイトが生まれてしまうのでは…という危惧があります。PHPを書けるWordPressにおいて、それは子テーマでも同じことなのですが。

ノーコードを徹底してSnow Monkeyの機能でできることを考え、他の技術に注力するか
精細な要望に応え、読みやすく安心して引き継げるモダンコードを追求するか

Snow Monkey（たぶん他のWordPressテーマも）を利用するエンジニアすべてが自身の役割を明確にする必要があると思います。あ、うぇびんは後者がいいです。がんばります。

開発者のキタジマさんの噂を最初に聞いたのはいつだったかは忘れましたが、札幌のコーディング勉強会のSaCSSで登壇されたときに設計思想の凄さに感心し、WordPressに再び関心を持つきっかけになったことは覚えています。

Snow Monkeyをはじめとした最近のWordPressコミュニティは開発元の魅力とコミュニティの意識の高さが素晴らしいと思います。キタジマさん、WordPressな皆様、来年も宜しくお願いいたします。

Blog