MENU

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

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
			}
		);
	}
);

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

上記コードを書いた直後は、カスタム投稿の個別ページのサイドバーは下記のようになります。

まだ何も設定していないので、真っ白な状態です。

ウィジェットでカスタム投稿専用のサイドバーを設定

それではサイドバーに表示させるものを設定していきます。

ワードプレス管理画面の「外観」→「ウィジェット」へ進みます。

ウィジェット画面で上記で設定した「お知らせ用サイドバー」が登場しています。

ここを展開して、コンテンツを設定していきます。

今回は、新着記事を設定しましたが、リンクやアーカイブ等、好きな項目を設定してください。

設定後、「更新」ボタンを押します。

カスタマイズ後、サイドバーの表示

このカスタム投稿だけのサイドバーの設定が完了です。

複数のカスタム投稿を設定するとき

今回はカスタム投稿が1つだけの場合を紹介しましたが、複数設定も可能です。

このページの手順をもう一度繰り返せば、いくつでも設定可能です。

以上です。

ご参考までに!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次