↬ishii00141.stars.ne.jp/20250302-1225-1258/
以前から使ってるWorPressのサイトに「いしい＠長文」と「ひとりネズミ」の記事一覧ページを作ったのだけど、その際に利用したショートコードの解説はここにある。
新着記事一覧を表示するショートコードの利用方法 | Cocoon
https://wp-cocoon.com/new_list/
ここに日付を表示するオプションが無かったので、検索して見つけた。日付は既にくっついているのだけど非表示になっているらしかったので、それを表示させるcssを「追加css」に記載すれば良い。F12でどのようなclass内にあるかが分かる。さらに、特定のページにだけ表示したければ、そのコンテンツのIDも指定すれば良い。そんなわけで、次のコードを追加しておいた。更新日の方は、ちょっとした操作で勝手に見えない所が更新されて更新日も更新されちゃうので実際の私による更新日とは異なるので非表示にした。
/*記事一覧に投稿日を表示する*/
#post-2789 .new-entry-card-date.widget-entry-card-date.display-none {
display: block;
}
#post-2789 .new-entry-card-update-date.widget-entry-card-update-date.post-update{
display:none;
}
#post-2832 .new-entry-card-date.widget-entry-card-date.display-none {
display: block;
}
#post-2832 .new-entry-card-update-date.widget-entry-card-update-date.post-update{
display:none;
}
/*記事一覧に投稿日を表示する*/
コメント
コメント欄やマストドンだとコードブロックの改行が削除されちゃうみたいだけど、コードが長くなるのを抑えるのに良いかもしれない。
ただ、改行が必要な場合はコードブロックに書かないように気をつけた方が良さそう。
IDを指定してあるから、そのページに同じclassを使っている所が他にないのなら、コードをシンプルにできると思って、次のように変更した。
/*記事一覧に投稿日を表示する*/
#post-2789 .widget-entry-card-date{
display: block;
}
#post-2789 .widget-entry-card-update-date{
display:none;
}
#post-2832 .widget-entry-card-date{
display: block;
}
#post-2832 .widget-entry-card-update-date{
display:none;
}
/*記事一覧に投稿日を表示する*/
#Cocoon
“新着・人気・関連記事ウィジェット（ショートコード）全て共通。
.widget-entry-card-date {
display: block;
}
”
新着・人気・関連記事ウィジェット（ショートコード）で投稿日や更新日を表示させる方法 | Cocoon
https://wp-cocoon.com/widget-entry-card-date-css/