トップページで雑多な最新記事が並ぶことって読者さんにとったらわかりにくいんじゃないの？って思うんですよね。
特化ブログで、かつすべての記事が同じようなペルソナを想定している場合や、トレンド記事を書かれている場合は最新記事がトップにならぶので良さそうですね。
一方で、雑多ブログの場合は、最新記事が自分に関係ないテーマばかりだったりして読む気がなくなったりしますよね。
雑多ブログでも、トップページをカテゴリごとの最新記事で並べ、そこから記事一覧にリンクさせることができれば、特化ブログのようなデザインができるんじゃないか？
これが今回紹介する、ブログの最新記事をカテゴリごとに表示するトップページを作ろうと考えたきっかけです。
ワードプレスx Cocoonで最新記事をカテゴリごとに表示する
Cocoon使用時のこのブログのトップページはこのようにカテゴリごとの最新記事を並べています。
Cocoonで使えるカテゴリ別最新記事のコピペ用テンプレート
Cocoon用にコピペできるコードをまずはご紹介します。
<!-- wp:heading --><h2> －カテゴリー別の最新記事－ </h2><!-- /wp:heading --><!-- wp:cocoon-blocks/column-2 --><div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box"><!-- wp:cocoon-blocks/column-left --><div class="wp-block-cocoon-blocks-column-left column-left"><!-- wp:heading {"level":3} --><h3> <i class="fa fa-laptop fa-fw my-yl"></i>世界のニュース</h3><!-- /wp:heading --><!-- wp:image {"id":1602,"align":"center","linkDestination":"custom"} --><div class="wp-block-image"><figure class="aligncenter"><a href="https://www.global-lifetips.com/category/data-analysis/"><img src="https://www.global-lifetips.com/wp-content/uploads/2019/05/world-news.jpg" alt="" class="wp-image-1602"/></a></figure></div><!-- /wp:image --><!-- wp:paragraph --><p> [new_list count="5" type="default" cats="95" children="0" post_type="post"] </p><!-- /wp:paragraph --><!-- wp:cocoon-blocks/button-1 {"content":" 世界のニュース関連の記事をもっと読む","url":"https://www.global-lifetips.com/category/news/","target":"_blank","align":"center"} --><div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://www.global-lifetips.com/category/news/" class="btn btn-key-color" target="_blank"> 世界のニュース関連の記事をもっと読む</a></div><!-- /wp:cocoon-blocks/button-1 --></div><!-- /wp:cocoon-blocks/column-left --><!-- wp:cocoon-blocks/column-right --><div class="wp-block-cocoon-blocks-column-right column-right"><!-- wp:heading {"level":3} --><h3> <i class="fa fa-language fa-fw my-rd"></i>英語ラボ</h3><!-- /wp:heading --><!-- wp:image {"id":1601,"align":"center","linkDestination":"custom"} --><div class="wp-block-image"><figure class="aligncenter"><a href="https://www.global-lifetips.com/category/english/"><img src="https://www.global-lifetips.com/wp-content/uploads/2019/05/海外生活-1-1.jpg" alt="" class="wp-image-1601"/></a></figure></div><!-- /wp:image --><!-- wp:paragraph --><p>[new_list count="5" type="default" cats="94" children="0" post_type="post"]</p><!-- /wp:paragraph --><!-- wp:cocoon-blocks/button-1 {"content":"英語ラボの記事をもっと読む","url":"https://www.global-lifetips.com/category/english/","target":"_blank","align":"center"} --><div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://www.global-lifetips.com/category/english/" class="btn btn-key-color" target="_blank">英語ラボの記事をもっと読む</a></div><!-- /wp:cocoon-blocks/button-1 --></div><!-- /wp:cocoon-blocks/column-right --></div><!-- /wp:cocoon-blocks/column-2 -->Cocoonをお使いの方で、同じようなデザインにしてみたい方は、このコードをコピーしてください。
新規で固定ページを作成し、コードエディターモードにして貼り付けましょう。
コードエディターモードのやり方は次の記事で詳しくご紹介しています。
ワードプレスの無料テーマCocoonを使ったブログでのトップページデザインもついに４回目になりました。今回は、アピールエリアと呼ばれるエリアについてご説明します。 グリット[…]
コードをそのまま貼り付けた場合、世界のニュース（左）と英語ラボ（右）という２つのコンテンツが並ぶ形式です。
| 見出し３ | 見出し３ |
| 写真 | 写真 |
| カテゴリの最新記事５つ | 勝てごrの最新記事５つ |
| カテゴリの他の記事をみるリンクボタン | カテゴリの他の記事をみるリンクボタン |
まず、見出し３のタイトルをご自分のカテゴリに合わせて変更しましょう。
写真の箇所も、カテゴリにあった写真に変更します。
文字入りの画像をうまくデザインするには、下のヘッダーデザインの記事で紹介しているCanvaというソフトが便利です。
さて、前回の記事ではブログのトップページをオリジナルにデザインしなおした際のBefore＆Afterをお見せしました。今回の記事からは、ブログのトップページデザインシリーズとして、それぞれのデザインを行った際に利用したC[…]
カテゴリごとの最新記事５つのところは、ビジュアルモードで次のようなコードが書かれていると思います。
[new_list count="5" type="default" cats="94" children="0" post_type="post"]
- new_list count=”5″ ： 最新記事を５つ表示するということ
- type=”default”：表示形式なので、このままでOKです。
- cats=”94″：カテゴリーID94を選択します。このカテゴリー番号は、ダッシュボードの「カテゴリー」から各カテゴリーのIDが確認できるので、自分が載せたいカテゴリのIDをここに記載しましょう。
- post_type=”post”：投稿ページのみという指定です。
このショートコードの詳しい説明は、Cocoonのマニュアルページをご覧ください。
この２列を１ブロックとして、下に並べていくことで、２列２行の４カテゴリや２列３行の６カテゴリの、カテゴリ別最新記事一覧を作成できます。
Cocoonでカテゴリ別最新記事をトップページに指定する。
アピールエリアの場合はウィジットで登録したように、カテゴリ別最新記事も作成後にトップページに登録する必要があります。
設定から表示設定を選択します。
ホームページの表示を「固定ページ」とし、ホームページのところに「作成した固定ページ：上の例の場合はtop-page」、投稿ページを「最新記事」としておきましょう。
Cocoon以外でカテゴリ別最新記事を表示する方法
例えばJINのテーマでは、タブごとに最新記事を表示できたりしますよね！
それ以外のテーマは、テーマごとにやり方は異なるだろうから詳しいやり方はわからないというのが本音なところです。
けど、読者の人が一手間しないとみたいところに行けないっていうのは、あまりユーザーフレンドリーとは言えないよね。
ブログのトップページは、読者さんを惹きつけも離しもするとても重要な場所です。
「読者さんの視点で、見たい記事にすぐアクセスできる」ということを第一に、トップページのデザインを見直してみたらどうでしょうか？
このシリーズでは、トップページのデザインを場所ごとに説明してきました。ブログデザインの参考にしてみてください。
このブログは、ワードプレスでCocoonという無料テーマをもとに立ち上げました。無料でありながらかなり優秀といわれるCocoonのテーマをもとに、「他のブログとは差別化したデザイン」にしたいという思いから、様々なツールや[…]