【Cocoon】特定のおすすめ記事をピックアップ表示する方法｜new_listショートコード（ordered_posts）の使い方

Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。

この記事では、new_list（ordered_posts）ショートコードを使って、トップページや記事内に特定記事を表示する方法を解説します。

設定を少し工夫するだけで、回遊率やクリック率は大きく変わります。

「おすすめ記事」や「ピックアップ記事」など読んでほしい記事を、確実に目に留めてもらうためのCocoon活用術をマスターしましょう！

Cocoon｜new_listショートコードで作る、ピックアップ記事の表示例

設定自体はシンプルですが、完成イメージを知らないとピンと来にくい部分もあります。そこでまずは、ピックアップ記事の実際の表示例から見てみましょう。

以下は、当サイトのトップページに導入している例。

トップページの作り方関連の記事をピックアップ表示しています。

PickUp

Cocoon｜new_listショートコードとは？できること・特徴

new_list は、Cocoonに標準で用意されている投稿一覧表示用ショートコードです。

通常は「新着記事」「カテゴリー別記事」などを表示するために使われますが、ordered_postsパラメータを指定することで特定の記事だけをピックアップ表示できます。

• 表示する記事
• 表示順
• 表示スタイル

を自由にコントロールできるのが特徴です。

基本構文

[new_list]

この状態では、テーマ設定に基づいた「新着記事一覧」が表示されます。

特定記事を指定する方法（ordered_posts）

[new_list ordered_posts="1234"]

ordered_posts は、表示したい投稿をIDで直接指定するためのパラメータです。

• 指定した投稿ID記事だけを表示（※複数記事はカンマ区切り）
• 指定した順番＝表示される順番
• 新着順・公開日・更新日とは無関係

「読んでほしい順」に並べられるのが、この方法の最大の強みです。

ショートコードのパラメータ一覧

new_list でよく使うパラメータをまとめました。

ピックアップ表示では特に ordered_posts・typeが重要です。

パラメータ	内容	初期値	選べる値（代表例）	用途・ポイント
type	表示スタイル	default	default / large_thumb など	large_thumb はサムネイル大きめでピックアップ向き
snippet	抜粋文の表示	0（表示しない）	1 / 0	0 にするとタイトル＋画像だけでスッキリ
horizontal	並び方向	0	1 / 0	0 は縦並びで本文中・サイドバー向き
ordered_posts	表示する記事ID	―	"1234" / "1234,5678,9012"	指定したID順＝表示順になる

ショートコード例（おすすめ設定）

[new_list type=large_thumb snippet=0 ordered_posts="1234,5678,9012"]

• 左から／上から 1234 → 5678 → 9012 の順で表示
• 大きめのサムネイルで目立たせる
• 抜粋テキストを非表示にしてスッキリ表示

• 指定しない場合は初期値が自動で使われるため必要なパラメータだけを書けばOK
• ordered_posts を使う場合、count, cats, tags など他の条件指定は無効です。

Cocoon｜記事ID（投稿ID）の調べ方

管理画面 →「投稿」→「投稿一覧」からIDを確認できます。

Cocoon｜new_listショートコードはどこに設置できる？おすすめ設置場所

new_list ショートコードは貼り付ける場所を選びません。

• ブロックエディタ →「ショートコード」、または「カスタムHTML」ブロック
• ウィジェット
• 固定ページ

目的に応じて効果的な設置場所を選びましょう。

Cocoon｜new_listの記事カードを横並び・列数調整する方法（CSS）

new_list の表示はデフォルトでは縦並びになりますが、「2列・3列で固定したい」「スマホで崩したくない」といった場合はオプション設定＋CSSで柔軟に調整できます。

ここでは、

• 横スライド表示（horizontal）
• 列数を固定するCSS調整

の2パターンを紹介します。

horizontalで横並びにする例（横スライド）

[new_list horizontal=1 type=large_thumb ordered_posts="1234,5678,9123,4567,8901,2345..."]

この設定をすると、記事カードが横方向にスライド表示されます。

• 特徴
  • 横スクロールで表示できる
  • スマホと相性が良い
  • CSS不要で簡単

※ horizontal は「列固定」ではなく横スライド表示になる点に注意してください。

実際の表示イメージ

列数を固定するCSS調整

デスクトップで2列表示する例

「横スライドではなく、通常表示で2列・3列にしたい」場合はCSSで調整します。

.new-entry-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

これで、new_list の記事カードが常に2列表示になります。

スマホで1列に切り替える方法

スマホでは列数を減らすと読みやすくなります。

@media (max-width: 480px) {
  .new-entry-cards {
    grid-template-columns: 1fr;
  }
}

• PC：2列
• スマホ：1列

と自動で切り替わります。

このCSSは、サイト内すべての .new-entry-cards に反映されます。

特定の場所だけ変更したい場合は、

.front-page .new-entry-cards { … }

など、親クラスを指定して調整してください。

実際の表示イメージ

Before：縦並び（デフォルト）

After：横並び（２列）

レイアウトを少し調整するだけで、ピックアップ記事の見せ方がさらに整います。

Cocoon｜new_list とナビカードの違い・使い分け

Cocoonで特定の記事を目立たせたい場合は、new_listだけでなく「ナビカード」機能も利用できます。

ナビカードは、あらかじめ作成したメニューを元にカードを生成し、ブロック・ウィジェット・ショートコードから表示できるのが特徴です。

new_listとの違い

項目	ナビカード	new_list
記事の指定方法	メニューで管理	ordered_postsで記事ID指定
メニュー作成	必要	不要
説明文（スニペット）	手動入力	抜粋利用
リボン表示	対応	非対応
表示方法	ブロック／ウィジェット／ショートコード	ショートコードのみ

ピックアップ用途はどちらも同じなので、次のように使い分けると便利です。

• メニュー作成なしで手軽に表示したい → new_list
• リボン付きで強調表示したい → ナビカード

ナビカードの詳しい設定方法は、以下の記事で解説しています。

まとめ｜Cocoonのnew_listショートコードでピックアップ記事を自由に表示しよう

• ordered_posts を使えば 特定の記事だけ を表示できる
• 表示順・表示スタイル・設置場所も自由に設定可能

収益記事・リライト記事・力を入れている記事ほど、new_listで目立たせるだけでクリック率が変わります。