Cocoonショートコードを利用したウィジェット新着・人気記事に日付を表示する方法（投稿日・更新日）

テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。

デフォルトでは投稿日や更新日が表示されませんが、CSSを追加するだけで日付を追加できます。

この記事では,ショートコードやブロックを利用したウィジェット新着記事、人気記事に日付（投稿日・更新日）を表示させる方法を紹介します。

以下、具体的なコードを記載します。CSSの編集については、子テーマのスタイルシートをご利用ください。

Cocoonウィジェット新着記事・人気記事に日付を表示する

/*ウィジェット記事の投稿日、更新日を表示させる*/
.widget-entry-card-date {
	display:block;
}

最初は日付がdisplay:noneに設定され非表示になっています。親クラスであるwidget-entry-card-dateを指定してdisplay:none→blockに変更することで、記事タイトルの下に投稿日と更新日が表示されます。

デフォルトは左寄せです。

画像は大きなサムネイルカードの例ですが、小さなカードでも同様に表示されます。

上記のコードではすべての記事に日付が表示されますが、新着記事、人気記事どちらかだけに表示することもできます。

新着記事ウィジェットだけに表示する場合

新着記事の子クラスを指定してdisplay:blockに変更します。

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

人気記事ウィジェットだけに表示する場合

人気記事の子クラスを指定してdisplay:blockに変更します。

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

Cocoonウィジェット新着記事・人気記事／投稿日・更新日のどちらかだけを表示する

また、投稿日・更新日のどちらかだけを表示するこもとできます。

この方法は、いったんすべての日付を表示してから不要な部分を非表示にする形です。

投稿日だけを表示する場合

投稿日だけを表示したい場合、更新日を非表示にするコードを追加します。

/*更新日を非表示にする*/
.widget-entry-card-update-date{
	display: none;
}

更新日だけを表示する場合

更新日だけを表示したい場合、投稿日を非表示にするコードを追加します。

/*投稿日を非表示にする*/
.widget-entry-card-post-date{
	display: none;
}

ただし、この方法だと投稿日=更新日のときに日付が何も表示されません。（投稿日を非表示にしてしまうため）特に気にならないのであればこれでもよいですが、日付表示のあるカードとないカードが混在しないように次の対応策を追記します。

対応策／更新日がない場合には投稿日を表示する

• 更新日がある場合→更新日
• 更新日がない場合→投稿日

更新日がない場合には投稿日を表示するように、更新日だけを表示したい場合にはこちらのコード対応がベストです。

.widget-entry-card-date > span:nth-last-of-type(2) {
	display:none;
}

Cocoonウィジェット新着記事・人気記事／日付の表示位置を右寄せにする場合

表示位置についてはデフォルトは左寄せのため、右寄せにするには text-align:rightを追加します。

/*ウィジェット記事の投稿日、更新日を表示させる*/
.widget-entry-card-date {
	display:block;
        text-align: right;/*右寄せ*/
}

すると、このように投稿日と更新日が右寄せになります。

Cocoonウィジェット新着記事・人気記事／時計のアイコンを追加する場合

日付だけだと投稿日なのか更新日なのか分かりずらいため、日付の先頭にアイコンを表示できます。Cocoonの記事一覧についているアイコンと合わせて、時計のアイコンを追加する場合はこちら。

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

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

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

アイコンはFont Awesome 5を使用

アイコンは【Font Awesome 5】を使用しています。

Cocoonには標準搭載されているので、「Cocoon設定」→「全体」→サイトアイコンフォントのところでFont Awesome 5に○をつけておいてください。

Search for Font Awesome のサイトで調べると他のアイコンにも変更できますよ。

まとめ

以下について解説しました。

1. 日付を表示する（投稿日・更新日両方）
   • 新着記事だけに表示する場合
   • 人気記事だけに表示する場合
2. 投稿日・更新日のどちらかだけを表示する
   • 投稿日だけを表示する場合
   • 更新日だけを表示する場合
3. 日付の表示位置を右寄せにする
4. 日付の前に時計のアイコンを付ける

ショートコードやブロックを利用して新着記事や人気記事を表示する機能は、当記事で紹介しているサイト型トップページの作り方 の記事でも使用しています。ぜひトップページ作成に活用してください！