WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

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

アイキャッチ/ウィジェット日付 カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

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

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

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

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アイコン*/
}

時計のアイコンを付けると、投稿日か更新日かが分かりやすくなりますね!

アイコンはFont Awesome 5を使用

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

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

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

COMMENT

  1. Arisa より:

    はっちゃんさん、こんにちは。
    投稿ページとして残してくださりありがとうございます。
    無事、自分のページでも反映させることができました。
    本当にありがとうございます!

タイトルとURLをコピーしました