Snow Monkeyは標準では、投稿につけられたタグは、記事詳細の下部に表示される仕組みになっています。
投稿のタイトル付近には、投稿日やカテゴリーなどが表示されているため、そちらに併せてタグも設置したいという要望もあるかと思います。
そういった際のカスタマイズ方法をご紹介します。
カスタマイズ方法
流れとしては以下のようになります。
snow_monkey_entry_meta_items
で投稿ヘッダー部分にメタ情報を追加- 投稿下部に標準で出力されているタグ部分の処理(そのまま or 非表示処理)
snow_monkey_entry_meta_itemsフックを使う
こちらの記事でも紹介しているsnow_monkey_entry_meta_items
というフックを利用します。
こちらを利用して投稿メタ情報部分にタグを追加します。
<?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;
}
公式フォーラムでこの事例を確認する
このチップスは公式フォーラムでトピックスとして上げられたものをもとに紹介しています。ぜひこちらもご確認ください。