投稿詳細ページ下部に表示されているタグをエントリーメタ情報内に表示させる方法

Snow Monkeyは標準では、投稿につけられたタグは、記事詳細の下部に表示される仕組みになっています。

投稿のタイトル付近には、投稿日やカテゴリーなどが表示されているため、そちらに併せてタグも設置したいという要望もあるかと思います。

そういった際のカスタマイズ方法をご紹介します。

カスタマイズ方法

流れとしては以下のようになります。

1. snow_monkey_entry_meta_itemsで投稿ヘッダー部分にメタ情報を追加
2. 投稿下部に標準で出力されているタグ部分の処理（そのまま or 非表示処理）

snow_monkey_entry_meta_itemsフックを使う

こちらの記事でも紹介しているsnow_monkey_entry_meta_itemsというフックを利用します。

snow_monkey_entry_meta_items

投稿のメタ情報に追加要素を入れる際に利用します。 優先度を変えることで、要素を挿入する場所を指定することができ…

happy-snow-monkey.olein-design.com

こちらを利用して投稿メタ情報部分にタグを追加します。

<?php
add_action(
	'snow_monkey_entry_meta_items',
	function() {
		if ( ! get_the_terms( get_the_ID(), 'post_tag' ) ) {
			return;
		}
		?>
		<li class="c-meta__item c-meta__item--tags">
			<?php \Framework\Helper::get_template_part( 'template-parts/content/entry-tags' ); ?>
		</li>
		<?php
	},
	41
);

この処理によって、投稿ヘッダー部分のカテゴリーの次にタグが表示されます。

しかし、見た目が投稿下部に標準表示されているタグと同じですので、若干違和感を感じますね。カテゴリーとデザイン的にバランスを取るために、CSSで調整してみます。

.c-entry-tags {
  & > .tag-cloud-link {
    background-color: transparent;
    border: none;
    color: inherit;
    &:before {
      font-family: "Font Awesome 5 Free";
      content: "\f02b";
      color: inherit;
    }
  }
}

これで少しはカテゴリーとのデザインバランスが整ったかと思います。必要であれば良しなにカスタマイズしてみてください。

投稿下部に標準で出力されているタグ部分の処理（そのまま or 非表示処理）

ユーザー体験的な視点で、投稿下部にも同様にタグを表示させたままにしておく場合には、そのままで大丈夫でしょう。

逆に、上部に表示したので下部には必要ないという場合は、CSSスタイルで非表示にしておく方が良いでしょう。

.c-entry__body .c-entry-tags {
  display: none;
}

公式フォーラムでこの事例を確認する

このチップスは公式フォーラムでトピックスとして上げられたものをもとに紹介しています。ぜひこちらもご確認ください。

投稿ページのタグの位置や著作権者情報のカスタマイズ

このトピックには5件の返信、2人の参加者があり、最後にキタジマ タカシにより1週前に更新されました。 6件の投…

snow-monkey.2inc.org