誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ！」、一応5回でおしまい、と思ったのですが、「…更新履歴とか新着情報とか欲しいな？」と思ったので追加する事にしました。
1回目「トップページ編」、2回目「メニュー編」、3回目「料金表編」、4回目「よくある質問編」、5回目「まとめ編」とサンプルサイトはこちら。
サンプルサイトです。
トップページに「新着情報」を入れる
こういうやつです。
今回はWordPressの「投稿」に
・お知らせ
・スタッフブログ
というカテゴリーを作り、それぞれの新着情報をトップページに表示させてみようかなと思います。
PCでは2カラム、モバイルで1カラムに表示させます。
まずは「投稿」の設定から
「投稿」にカテゴリーを作成
カテゴリを作ります。
「カテゴリーID」をチェック
のちほどカテゴリーごとに新着情報を出す際に使うので、「カテゴリーID」を控えておきます。
「カテゴリーID」は、カテゴリーの詳細画面のアドレスなどから調べることが出来ます。
表示テスト用にいくつか投稿しておくとよいかもです。
トップページの設定
トップページに「2カラム」のエリアを作る
トップページ用の固定ページに2カラムのエリアを作ります。
ビジュアルエディタの「タグ」から「2カラム」を選択することであっという間に作れます。
見出しなんかも設定しておきましょうか。
新着情報を表示させるためのショートコードを挿入
今度はビジュアルエディタの「ショートコード」から「新着記事一覧」を選択します。
このままだと全てのカテゴリが表示されるので、cats=”all”の部分をcats=”先程調べたカテゴリーID”に変更します。
ついでに見た目も変えます。
下線を表示したいので、type=”default”をtype=”border_partition”に変えます。
新着記事一覧のショートコードに関するCocoon公式ページはこちらです。
投稿日を表示したい！
しかし何かが足りないですね…？
そう、新着のお知らせには日付が欲しい…！ということで、こちらはCSSを書いていきます。
「投稿日」を表示して「更新日」を非表示にするCSSはこんなかんじ。
.new-entry-cards .display-none {
display: block;
padding-top: 0.2em;
text-align: right;
}
.new-entry-card-update-date {
display: none;
}
できました！
トップページに「新着情報」を入れる まとめ
「Cocoonをコーポレートサイトっぽくカスタマイズ！おまけ：新着情報編」でした。
プラグインなしでこういった設定が出来るのは本当にありがたいです…！
新着情報の日付が表示されない場合には…
新着情報に日付が表示されない場合、「Cocoon設定」のタブの「本文」「投稿情報表示設定」の日付表示設定が外れているかもです。
コメント
初めまして。
nullll様の素敵な記事を参考に、初心者ながらcocoonを使ったサイトを作りはじめました。
投稿日を表示するCSSをCocoon Child: スタイルシート (style.css)に書き込んだのですが表示されずに困っております。当方の記載箇所に間違いがあるのでしょうか・・？大変お手数ではございますが、ご教授頂けると幸いです。
mik様
返信遅くなりまして申し訳ありません。
サイトを拝見させていただきました。
おそらく「Cocoon設定」のどこか（「SEO」タブや「インデックス」タブなど）で「投稿日を表示しない」設定が入っているのだと思います。
とりあえずCSSに下記を追記すると表示されるようになると思います。
.no-post-date .post-date {display:block!important;}
【追記】「Cocoon設定」の「本文」タブの「投稿情報表示設定」の「投稿関連情報」の「投稿日の表示・更新日の表示」のチェックが外れてるかも
nullll様
CSSに追記を行ったところ無事に時刻が表示されました！何時間も頭を抱えて苦戦していたので本当に嬉しいです。
また、追記にありました部分のチェックもご指摘の通り外れておりました。
この度は本当にありがとうございました。初心者にも分かりやすい記事を書いて下さり本当に助かっております。
mik様
よかったですーーー！
わたしもまだまだ初心者なのですよ。でも参考にしていただいて嬉しいです。
お互い頑張りましょう！！
nullll様
はじめまして
Cocoonでビジネスサイト的な物は、作れないのか？と探していたら
こちらのブログを見つけました、非常に助かりました。
お聞きしたいことが一点あるのですが、新着情報の投稿のタイトルやフォントサイズは
Cocoonの設定で変更できるのでしょうか？ それともCSSなんでしょうか？
教えて頂けたらたすかります。
こんにちは。お役に立てたようで何よりです。
返事が遅くなりすみません。
フォントサイズなどをピンポイントで変更する場合はCSSで記述する必要があります。
新着情報のタイトルの部分でしたらクラス名「new-entry-card-title」か「widget-entry-card-title」か「card-title」に指定してあげるといいんじゃないでしょうか。
(.new-entry-card-title { color: red; }のように)