サイト内の最新記事(新着記事)の一覧をWordPressの無料テーマ「Cocoon」で表示させる方法をご紹介します。今回は標準機能で設定できる主な方法として3種類をご紹介します!
最新記事一覧を表示させるメリットは以下の2点です。
- 他の記事に誘導することでサイト内の回遊を促す
- 更新状況を表示することで「生きているサイト」という印象を与える
![](https://www.nlogood.fun/wp-content/uploads/2021/12/21078a5f5469c52d68957d3b3dccccd0-150x150.jpg)
ブログ・マガジンサイトには新規記事一覧を表示させよう〜
Cocoon最新記事一覧の表示方法1 ブロック機能で表示する
まずは投稿画面のブロックエディターからブロックとして追加する方法です。固定ページや特定の投稿ページに表示させたい場合に有効です。
最新の投稿を表示させる
追加するブロックの選択メニューから「最新の投稿」を選択します。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/d7deea9c3af613b23e172688bfd8d5c4-1.png)
これだけで、以下のように最新記事一覧が表示されます。
表示内容のカスタマイズ
これだけでもよいのですが、さらに表示のカスタマイズができるようになっています。最新記事一覧のボックスを挿入後に、ボックス部分をクリックすると、画面右側のブロックメニューにカスタマイズ項目が表示されます。
いろいろな項目の表示/非表示などを簡単に設定できますが、ここではおすすめの設定内容を紹介します。
投稿日を表示させる
記事のタイトルに加えて、投稿日を表示させます。ブロックメニューから「投稿日を表示」をオンにします。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/3bad5535db85155ce2cbfda2aad34301.png)
アイキャッチ画像(サムネイル)を表示させる
記事に設定しているアイキャッチ画像(サムネイル)を表示させます。ブロックメニューから「アイキャッチ画像を表示」をオンにします。各種設定項目で表示内容はカスタマイズできます。サンプルに、以下の設定内容の表示イメージをご覧ください。アイキャッチ画像が表示されると一気に見やすく、印象的になりますね。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/2a623fd9a668feba12dc0182fa1a5f1f.png)
表示件数の設定とカテゴリーの絞り込み
「並び替えと絞り込み」の設定項目から、以下の内容が設定できます。
- 並び順・・・投稿順(最新から、過去から)、タイトル順(A→Z、Z→A)の並び替えを選択できます。
- カテゴリー・・・特定のカテゴリーの記事のみを表示できます。カテゴリーの名前を入力することで設定できます。
- 投稿者・・・複数の投稿者で運営している場合、特定の投稿者の記事のみを表示できます。
- 項目数・・・表示する件数を設定できます。デフォルトは5件表示になっています。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/a73c1ea00eb830baa2014bc2c9432549.png)
Cocoon最新記事一覧の表示方法2 ウィジェット機能で表示する
続いての表示方法は、ウィジェット機能による表示です。こちらはサイトのサイドバーや、すべての投稿ページに表示させたい場合に設定する方法です。
まず、ウィジェットの設定画面を開きます。WordPressのダッシュボード画面から、外観>ウィジェットを開きます。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/1e1afe15e4da14b3fd6f767be83bfbc8.png)
サイドバーにサムネイル付きの新着記事一覧を表示させる
利用できるウィジェットの一覧から、「新着記事」を選択します。新着記事リストをサムネイルつきで表示できるウィジェットです。ここで、表示させたい位置を指定します。サイドバー(サイトの右側に表示されるエリア)に表示をさせたい場合は、「サイドバー」もしくは「サイドバースクロール追従」を選択します。サイドバースクロール追従は、名称の通りページをスクロールしたときに追従して右側に表示されます。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/2a9202f1f92eb3c0aa14fcf34063172e.png)
ウィジェットを追加をクリックすると、詳細の設定画面が表示されます。表示するカテゴリ、件数、表示形式などの設定ができます。「新着記事のタイトル」では、サイドバーに表示される見出しを設定できます。記入しない場合は’新着記事’と表示されます。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/2d5f3fbbf3673e2d9589c72e96d61de2-616x1024.png)
表示イメージはこんな感じになります。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/e201db0a67fea2ec0353245bf40c159b-698x1024.png)
サイドバーにサムネイルなしの新着記事一覧を表示させる
サムネイルを表示させいないウィジェットもあります。利用できるウィジェットの一覧から「最近の投稿」を選択します。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/317fcef10f7a2ca2f9736bcc47703b9b.png)
詳細設定ではサイドバーに表示される見出し、表示件数、カテゴリーなどの設定ができます。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/b32f595ad0e9b06c770b6f02f9427810-660x1024.png)
表示イメージは以下のようになります。件名だけが表示されるのでシンプルです。文字だけなので、件名の切れ目が少しわかりづらいかもしれません。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/5c544a769e3e12ee8505aacb5efd7a42-732x1024.png)
Cocoon最新記事一覧の表示方法3 ショートコード機能で表示する
最後に、ショートコード機能で表示させる方法です。最新記事の一覧を表示させるショートコードはこちらです。
[new_list]
ショートコードの設定は、ブロックの追加から「ショートコード」を選択します。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/8f9f3eaaa5909e21af396242fe06d0e2-1.png)
ショートコードの入力フォームに、先ほどのショートコードを入力すれば完了です。
![](https://www.nlogood.fun/wp-content/uploads/2022/01/9208867405c31ca6425988a5fcf64631-1024x140.png)
表示のイメージはこのようになります。
ショートコードに付加コードを追加することで、表示件数やか表示するカテゴリーの設定ができます。詳細はCocoonの公式サイトに詳しく記載されているのでご覧ください。(個人的には投稿日の表示/非表示を選択できればとても嬉しいのですが・・・)
![](https://www.nlogood.fun/wp-content/uploads/cocoon-resources/blog-card-cache/44bb505ec58262bd9e6aec83ec08fd5c.jpg)
まとめ
WordPressの無料テーマCocoonで、最新記事の一覧を表示させる方法をご紹介しました。最新記事の一覧を表示させることで、サイトの更新状態を訪問者に見せることができます。サイト内の回遊率アップも期待できるので、是非サイト内に設置しましょう。
![](https://www.nlogood.fun/wp-content/uploads/2021/12/21078a5f5469c52d68957d3b3dccccd0-150x150.jpg)
このブログもサムネつきの最新記事を表示させたら、グッとそれっぽくなった気がする!
コメント