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

当記事では サイト型トップページ の記事で使用している、「ショートコードを利用して表示したウィジェット新着記事、人気記事に日付（投稿日・更新日）を表示させる方法」を紹介します。

お問い合わせがありましたので記事で公開します。

ショートコード、またはウィジェットで表示した新着記事、人気記事に最初は日付（投稿日・更新日）は表示されていないのですが、CSSを追加することで表示可能です。

CSSの編集については、子テーマのスタイルシートをご利用ください。

以下、具体的なコードを書いていきます。

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

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

最初はdisplay:noneに設定され非表示になっているので、none→blockに変更することで記事タイトルの下に投稿日と更新日が表示されます。

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

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

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

新着記事ウィジェット（ショートコード）だけに表示する場合

.new-entry-card-date {
	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アイコン*/
}

Search for Font Awesome でアイコン検索ができるので、他のアイコンにも変更できます。

アイコンはFont Awesome 5を使用

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

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

以上、参考になれば幸いです。