Cocoonで全記事一覧を表示する方法！ショートコードの使い方と設定まとめ

Cocoonを使っていて「全記事一覧を表示したい」と思ったことはありませんか？

ブログに記事が増えるほど、読者が過去の記事に辿り着きにくくなります。
そんなときに役立つのが、全記事を一括で表示できる「ショートコード」です。

Cocoonでは、わざわざプラグインを入れなくても、1行のショートコードを貼るだけで全記事一覧を作ることができます。
しかも、表示件数や並び順、カテゴリ指定などの細かな設定もオプションで自由に変更可能です。

この記事では、Cocoonのショートコードを使って全記事一覧を作る方法を、初心者でも迷わず設定できるように解説します。

全記事一覧はCocoonならショートコードを貼り付けるだけ

Cocoonで全記事一覧を表示する方法は、とてもシンプル。
以下の専用ショートコードを、固定ページや投稿本文に貼り付けるだけです！

[sitemap]

これだけで、ブログの全記事を一覧で表示できます。

新しい記事を公開するたびに、一覧も自動で反映されます。
手動でリンクを貼り直す必要がないのは、楽で良いかも。

プラグインを追加する必要がなく、かつCooconの標準機能として動作するため、表示速度にも影響しないのも良いですね。

全記事一覧は『固定ページ』で作るのが、最も分かりやすくておすすめです。

例えば「サイトマップ」や「全記事一覧」というタイトルで固定ページを新規作成し、本文欄に先ほどのショートコードを貼り付けます。

[sitemap]

これを公開すると、ブログ内の全記事が一覧で表示される専用記事が完成します。
この記事をナビメニューやフッターに設置しておくと、読者が過去の記事を探しやすくなることでしょう。

全記事一覧を作成するのにCocoonのショートコードを使用すると、自動的に「投稿一覧」という見出しが生成されます。

そのため、自分でタイトルや説明文を付けたい場合、この見出しが邪魔になります。

もしも見出しが邪魔なときは、以下のコードをCSSに入力することで削除できます。

.sitemap > h2 {
	display: none;
}

上記のコードを「外観 → カスタマイズ → 追加CSS」に貼り付けてください。

これで「投稿一覧」という見出しが消え、全記事一覧の部分だけ表示できます。

ブログ内の全記事を一覧化する「sitemap」のショートコード。
実は、どの記事を表示するか細かく指定することもできます。

要は、固定ページだけ表示したり、投稿ページは非表示に設定したりといったカスタマイズが可能なんです。

以下は、設定できるオプションの一覧です。

対象ページ	入力例	表示する	表示しない
固定ページ	page=	1	0
投稿ページ	single=
カテゴリーページ	category=
アーカイブページ	archive=

これだと、ちょっと意味が分からないですよね。

簡単に説明すると、1は「表示する」、0は「表示しない」という意味です。
この「1 or 0」を「入力例」と組み合わせることで、お好きな表示方法に変えられます！

例えば…

というときは…

[sitemap page=1 single=1 category=0 archive=0]

というように設定することで、目的のページだけを表示できます！

Cocoonでは、専用のショートコードを使うだけで、全記事一覧を作れました！
そのうえ「page=」や「single=」などのオプションを使えば、表示する記事を細かく調整できちゃいます。

全記事一覧は、読者が過去の記事を探しやすくなるだけでなく、内部リンクの強化や回遊率アップにも効果的です。
まだ設置していないなら、今日中に1ページ作ってみましょう。