カスタム投稿タイプの表示をカスタマイズする基礎

Snow Monkey はカスタム投稿タイプにも対応していますが、デフォルトでは投稿と違ってすごくシンプルな表示になっています。サポートフォーラムでこの表示を「投稿と同じにしたい」「独自の表示にしたい」「カスタムフィールドのデータを表示したい」というトピックがよく立つので、基礎的な部分について書いてみようと思います。

投稿(ブログ)と同じ表示にする

投稿には、例えば一覧ページだと投稿日が表示されたり画像の上にカテゴリーラベルが表示されます。また、記事ページにおいてもカテゴリーや日付、シェアボタンなどが表示されます。

カスタム投稿タイプの場合はそのような表示はなくごくシンプルな表示になりますが、投稿と全く同じにするのであればカスタマイザーから簡単に設定できます。

下記マニュアルの「ビューテンプレート」の項目を参照してください。

独自のテンプレートパーツを使用する

Snow Monkey の標準機能ではシンプルなデフォルト表示、あるいはビューテンプレートを切り替えることで「投稿と同じ」「固定ページと同じ」表示にすることはできますが、「独自の情報を表示したい」「カスタムフィールドのデータを表示したい」という場合はコードによるカスタマイズが必要です。

一番簡単なのはカスタム投稿タイプ用のテンプレートパーツをつくる方法です。

例えば、カスタム投稿タイプの一覧ページの場合は次のようなテンプレート構成になっています。

- single-{カスタム投稿タイプ名}.php  [ページ全体]
  - templates/view/archive-{カスタム投稿タイプ名}.php  [ビューテンプレート]
    - template-parts/archive/entry/entry-{カスタム投稿タイプ名}.php
      - template-parts/archive/entry/header/header-{カスタム投稿タイプ名}.php  [一覧ページコンテンツヘッダー部分]
      - template-parts/archive/entry/content/content-{カスタム投稿タイプ名}.php  [一覧ページコンテンツ部分]
        - template-parts/archive/archive-{カスタム投稿タイプ名}.php
          - template-parts/common/entries/entries-{カスタム投稿タイプ名}.php  [一覧部分]
            - template-parts/common/entries/entries/posts-{カスタム投稿タイプ名}.php
              - template-parts/loop/entry-summary-{カスタム投稿タイプ名}.php  [一覧の各投稿部分]
                - template-parts/loop/entry-summary/figure/figure-{カスタム投稿タイプ名}.php  [一覧の各投稿の画像部分]
                - template-parts/loop/entry-summary/title/title-{カスタム投稿タイプ名}.php  [一覧の各投稿のタイトル部分]
                - template-parts/loop/entry-summary/content/content-{カスタム投稿タイプ名}.php  [一覧の各投稿の抜粋部分]
                - template-parts/loop/entry-summary/meta/meta-{カスタム投稿タイプ名}.php  [一覧の各投稿のメタ情報部分]

例えばカスタム投稿タイプ名が news の場合は、上記の {カスタム投稿タイプ名} の部分が news になると考えてください。

カスタマイザーでビューテンプレートを「投稿のビューテンプレート」にしている場合はこの {カスタム投稿タイプ名} の部分が news ではなく post になってしまいますのでご注意ください(「固定ページのビューテンプレート」の場合は page)。

各テンプレートパーツはテンプレート階層に基づいて選択・読み込みされるので、例えば一覧のタイトル部分のテンプレートパーツを独自のものにしたい場合は、子テーマをつくって template-parts/loop/entry-summary/title/title-news.php を配置すれば良いということになります。

子テーマの参考記事

テンプレートの上書きは超強力ですがメンテナンスを考えると扱いが難しい機能でもあります。ただ、特定のカスタム投稿タイプのときだけのテンプレートパーツを上書きするのであればリスクは少ないと思うので、用法用量に応じて使用されると良いのではないかと思います。

なお、Snow Monkey は子テーマではなくプラグインでもテンプレートパーツの上書きをできる仕組みがあるので、フックやコードによるカスタマイズに理解がある方はその方法を使うほうがメンテナンスしやすいかもしれません。

一部分だけ投稿と同じにする

基本的にはデフォルトのシンプルな表示で良いのだけど、一部分だけは投稿のビューテンプレートを選択したときと同じ表示にしたいということがあると思います。例えばカテゴリーラベルだけ表示したいとか。

そのようなときは snow_monkey_get_template_part_args_{テンプレートパーツのスラッグ} フィルターフックでテンプレート引数を書き換えることで実現できます。

そのテンプレートパーツが持つテンプレート引数は各ファイルの先頭付近に記述があります。template-parts/common/entries/entries/posts.php の場合は以下。

$args = wp_parse_args(
	// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
	$args,
	// phpcs:enable
	[
		'_entries_layout'      => 'rich-media',
		'_excerpt_length'      => null,
		'_force_sm_1col'       => false,
		'_infeed_ads'          => false,
		'_item_thumbnail_size' => 'medium_large',
		'_item_title_tag'      => 'h3',
		'_display_item_meta'   => 'post' === $args['_name'] ? true : false,
		'_display_item_terms'  => 'post' === $args['_name'] ? true : false,
		'_posts_query'         => false,
	]
);

それぞれのテンプレート引数の役割はコードを読むかフォーラムで聞いていただく感じになりますが、カテゴリーラベルを表示したい場合だと _display_item_terms という変数で制御されているので、template-parts/common/entries/entries/posts.php_display_item_terms をカスタム投稿タイプ name のときだけ書き換えるというコードは下記のようになります。$args['name'] の部分は前述の {カスタム投稿タイプ名} の部分と同じ扱いになります。

add_filter(
	'snow_monkey_get_template_part_args_template-parts/common/entries/entries/posts',
	function( $args ) {
		if ( 'news' === $args['name'] ) {
			$args['vars']['_display_item_terms'] = true;
		}
		return $args;
	}
);

コードでテンプレートパーツの内容を書き換える

変更したい内容が軽微な場合は、snow_monkey_template_part_render_{テンプレートパーツのスラッグ} フィルターフックで書き換えるのがオススメです(子テーマやテンプレートパーツの上書きと併用すると何をどこでおこなっているのか把握するのが難しくメンテナンス性がわるくなると思うので、子テーマやテンプレートパーツの上書きをおこなっている場合はそっちでまとめてやってしまったほうがわかりやすいかもしれません)。

例えば一覧部分の各投稿のタイトルは

<h2 class="c-entry-summary__title">〜</h2>

のような HTML が出力されますが、下記のようなコードを書くことで書き換えや置換をおこなうことができます。

add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary/title/title',
	function( $html, $name ) {
		if ( 'news' === $name ) {
			// 一覧の各投稿のタイトルの先頭に●を追加する
			return str_replace( '"c-entry-summary__title">', '"c-entry-summary__title">●', $html );
		}
		return $html;
	}
);

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!