【Cocoon】新着記事リストに投稿日のみor更新日のみを表示する

Cocoonの新着記事リストに投稿日のみor更新日のみを表示したいと思ったことはありませんか？
更新頻度が高くないブログや、日時が重要なブログジャンルや記事などは、事前に投稿日を表示しておくとクリックされやすくなることもあります。（必ずではない…）

ここでは、新着記事リストに投稿日のみor更新日のみを表示する方法をご紹介します！

前提条件

この記事は、Cocoon用のカスタマイズ方法です。
他のワードプレステーマでは不可能（または動作未確認）です。
また、Cocoonでもバージョンにより動作や設定が異なる場合があります。

【WordPress】6.7.2
【テーマ：Cocoon】2.8.4.1

なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「株は人生の縮図ですか？」はCocoonで作っています。完成例としてご覧ください。

株は人生の縮図ですか？

株は人生の縮図ですか？ 大儲けも大損もない 平凡サラリーマンのリアル株取引

新着記事リストに日付を表示する方法

まずは通常の新着記事リストを表示してみましょう。

新着記事リストを作る

新着記事リストの作り方は実は何通りかあるのですが、今回ご紹介する日付表示方法は、Cocoonであればどの作り方でも表示される（はず）です。

Cocoonではショートコードで新着記事リストを作れるので、ここではショートコードを使います。
作成方法は簡単で、以下のショートコードを入力するだけです。
いくつかオプション設定が可能ですが、詳しくは公式マニュアルをご覧ください。

[new_list]

日付エリアを表示する方法

Cocoon Childのスタイルシート（style.css）に以下のコードを追記します。
すると、投稿日と更新日が両方表示されます。

.new-entry-card-date {
	display: block;
}

.widget-entry-card-update-date {
	display: none;
}

.widget-entry-card-post-date {
	display: none;
}

完成例は以下の通りです（投稿日のみ表示する場合）

.new-entry-card-date {
  display: block;
}
.widget-entry-card-update-date {
	display: none;
}

応用編

アイコンを付ける

何もしない場合は、「2025.01.30」のような数字だけが並びます。
そこで日付の前にアイコンを追加すると、日付ということがより分かりやすくなります。

以下はFont Awesomeの時計アイコンを表示する方法です。

/*日付にアイコン追加*/
.widget-entry-card-post-date::before,
.widget-entry-card-update-date::before{
	font-family: "Font Awesome 5 Free";
	padding-right: 3px; /*右余白*/
	font-size:10px;
}

/*投稿日アイコン*/
.widget-entry-card-post-date::before{
	font-weight:normal; 
	content: "\f017"; /*アイコン*/
}

/*更新日アイコン*/
.widget-entry-card-update-date::before{
	font-weight:bold; 
	content: "\f1da"; /*アイコン*/
}

投稿日か更新日のどちらか一方だけを表示する場合は、上記をひとまとめにする記述も可能です。

/*更新日のみ表示する例*/
.widget-entry-card-update-date::before{
	font-family: "Font Awesome 5 Free";
	padding-right: 3px; /*右余白*/
	font-size:10px;
	font-weight:bold; 
	content: "\f1da"; /*アイコン*/
}

他のアイコンにする場合は Search for Font Awesome で調べてください。
上記cssの”\f1da”などの部分を、好みのアイコンに替えることができます！

アイコンが表示されない時は…

CocoonにはFont Awesome 5が標準搭載されていますが、有効化されていない可能性があります。

1. ダッシュボードの「Cocoon設定」にアクセス
2. 「全体」タブを開く
3. サイトアイコンフォントで「Font Awesome 5」にチェックを入れる

まとめ

新着記事一覧に日付を表示することで、ユーザーが投稿日時（つまり情報の新鮮さ）を確認しやすくなります。
さらに、アイコンを使えばデザイン性も他サイトと差別化可能です。

そこまで難しいカスタマイズではないので、ご自身で少し調べるだけで更なるカスタマイズも十分可能かと思います。
より分かりやすい新着記事リストを作りましょう！