【Snow Monkey】カスタム投稿、個別記事ページの投稿日やアイキャッチ表示およびサイドバーのカスタマイズ

2024年10月31日2024年11月14日

SnowMonkeyカスタム投稿、投稿日・アイキャッチ・サイドバーのカスタマイズ

こんにちは。TOMOデザインです。

Snow Monkeyでカスタム投稿を設定したとき、毎回、アーカイブや個別ページのカスタマイズ方法を失念して調べ直し＆迷子になるので、備忘録として残しておきます。

カスタム投稿を設定した上で、

個別記事ページをブログのように、日時やページャーを表示させたい
個別記事ページでそのページ専用のサイドバーを設定したい

といったときにどうぞ。

カスタム投稿を設定する

まずカスタム投稿の設定をします。

今回の設定は
・カスタム投稿名は「お知らせ」
・カスタム投稿スラッグは「news」
の設定を前提とします。

なお、カスタム投稿は、CPT UI（Custom Post Type UI）のプラグインを使っています。
（CPT UIのインストール方法は今回は割愛します）

CPT UIでカスタム投稿「news」を設定する

ダッシュボードから「CPT UI」→「投稿タイプの追加と編集」へ進みます。

下記のような新規作成画面になります。

下記のように設定します。
（今回はnewsで設定していますが、必要に応じ、任意の文字に置き換えて活用してください）

設定が完了したら「投稿タイプを追加」ボタンを押します。

カスタム投稿の設定完了

設定が完了すると、サイドバーに先ほど設定したカスタム投稿の項目が追加されます。

記事をいくつか投稿しておきます。

カスタム投稿の個別ページをカスタマイズ

カスタム投稿・個別ページのデフォルト表示

Snow Monkeyのカスタム投稿個別記事ページのデフォルトの表示は下記のようになります。

このままだと

投稿日
アイキャッチ
記事の前後のリンク
記事下の関連記事

が表示されません。

そのため、これらが表示されるようにカスタマイズをしていきます。

カスタマイズで目指すもの

目指すは下記のような表示です。（表示設定後のデフォルト表示です）

my-snow-monkey.phpでカスタマイズ

今回は、my-snow-monkeyでカスタマイズを行います。

「wp-content」→「plugins」→「my-snow-monkey」のフォルダ内にある「my-snow-monkey.php」をエディタで開きます。

「my-snow-monkey.php」に下記のコードを記入します。

// カスタム投稿 news
add_action(
	'snow_monkey_get_template_part_args_templates/view/content',
	function( $args ) {
		// カスタム投稿タイプ ニュース
		if ( 'news' === $args['name'] ) {
			// 投稿日を表示
			$args['vars']['_display_entry_meta'] = true;
			// 前後の記事を表示
			$args['vars']['_display_entry_footer'] = true;
			$args['vars']['_display_prev_next_nav'] = true;
			// 記事下関連記事表示
			$args['vars']['_display_related_posts'] = true;
			// アイキャッチを表示
			$args['vars']['_display_eyecatch'] = true;
		}
		return $args;
	}
);

ご自身でカスタマイズする場合は、「news」の部分を任意の投稿タイプスラッグに書き換えてください。

また、今回は、

投稿日
記事下関連記事表示
記事下共通コンテンツ表示
アイキャッチ表示

の全て利用するため「true」にしています。（不要な場合は「false」にしてください）

カスタマイズ後の表示

設定後、下記のようになります。

カスタム投稿の個別ページのサイドバーをカスタマイズ

さて、上記では個別記事ページのカスタマイズを行いました。

ここからはよくばりモードです。

カスタム投稿の個別ページのサイドバーは、基本的に共通のサイドバーが表示されます。

ここをカスタム投稿専用のサイドバーにカスタマイズしていきます。

カスタム投稿のサイドバーのカスタマイズについては、プラグイン「Custom Sidebars」が紹介されています。
しかしこちらは2024年現在、Gutenberg（グーテンベルク）に対応していません。
Classic Editor (クラシックエディター) モードにして使えば使えなくもありません。
しかしGutenbergをメインに使っている場合は不便なため、my-snow-monkeyにコードを書く方がラクかもしれません。

カスタマイズで目指すもの

my-snow-monkey.phpでカスタマイズ

こちらも、my-snow-monkeyでカスタマイズを行います。

「wp-content」→「plugins」→「my-snow-monkey」のフォルダ内にある「my-snow-monkey.php」をエディタで開きます。

「my-snow-monkey.php」に下記のコードを記入します。

// お知らせ サイドバー＆お知らせ用サイドバーウィジェット追加
add_action(
	'widgets_init',
	function() {
		register_sidebar(
			array(
				'id'            => 'sidebar-news',
				'name'          => 'お知らせ用サイドバー',
				'before_widget' => '<div id="%1$s" class="c-widget %2$s">',
				'after_widget'  => '</div>',
				'before_title'  => '<h2 class="c-widget__title">',
				'after_title'   => '</h2>',
			)
		);
	}
);

add_action(
	'wp_body_open',
	function() {
		// 「カスタム投稿タイプ詳細かつカスタム投稿アーカイブページではないとき」は何もしない
		if ( ! is_singular( 'news' ) && ! is_post_type_archive( 'news' ) ) {
			return;
		}

		// サイドバーからデフォルトのウィジェットを外す
		remove_action( 'snow_monkey_sidebar', 'snow_monkey_sidebar_add_sidebar_widget_area', 20 );

		// カスタム投稿タイプ用のウィジェットエリアをサイドバーに追加
		add_action(
			'snow_monkey_sidebar',
			function() {
				?>
<div class="l-sidebar-widget-area"
	data-is-slim-widget-area="true"
	data-is-content-widget-area="false"
	>
	<?php dynamic_sidebar( 'sidebar-news' ); ?>
</div>
				<?php
			}
		);
	}
);