Cocoonでサイトマップをカテゴリー単位に表示する方法

Cocoonにはサイトマップを自動生成するショートコード機能があり、

記事一覧、固定ページ一覧、カテゴリー、アーカイブを表示出来ますが、

カテゴリー単位に分ける
並び変える

などが出来ない為、カテゴリー単位に表示する為に「新着記事一覧ウィジェット」を利用してサイトマップページを作る方法についてです。

今回はサイトマップショートコードは使用しませんが

サイトマップショートコードについては以下をご覧ください。

Cocoonショートコード-サイトマップの使い方と表示サンプル

サイトマップ生成ショートコードサイト内のページ一覧を簡単に作成する事が出来ます。投稿ページ固定ページカテゴリーページ月別アーカイブページそれぞれの表示・非表示を指定...

手順
- カテゴリーIDの調べ方
固定ページを作成する
- パターン１
- パターン２

手順

STEP1
カテゴリーID
表示するすべてのカテゴリーIDを調べる
STEP2
ページ作成
サイトマップ用の固定ページを新規作成する
STEP3
ショートコード
新着記事一覧ショートコードを記述・編集する

カテゴリーIDの調べ方

カテゴリーやタグには、投稿記事同様にワードプレスによるユニークIDが自動で振られます。そのユニークIDを調べる必要があります。

「投稿」→「カテゴリー」

対象のカテゴリーにマウスの載せます。

ブラウザの下部にアドレスが出るので、そのID=XXの数字部分がIDになります。

以下の例なら　99

固定ページを作成する

パターン１

表示サンプル

カテゴリー名などを記述し、

ショートコードを挿入していきます。

ショートコードには色々なオプションがあるので、お好みのデザインや表示項目、順序などで設定して下さい。

新着記事一覧ショートコードの使い方やオプションの詳細は以下にまとめています。

Cocoonショートコード-新着記事一覧の使い方と表示サンプル

ショートコードサンプル

[new_list count="XX" type="default" cats="XX" children="0" post_type="post" type="border_partition" arrow=1]

サンプルご利用の場合の編集箇所は以下です。

count=”XX“　表示件数（数値）
cats=”XX“　カテゴリーID

記事編集画面サンプル

パターン２

並列表示の例

２カラム１行分
横並び２列の1行分です。以下を必要な行数だけ繰り返して記述して下さい。

ショートコードサンプル

<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">カテゴリー１</h3>
[new_list count="XX" type="default" cats="XX" children="0" post_type="post"]
</div>
<div class="column-right">
<h3 style="text-align: center;">カテゴリー２</h3>
[new_list count="XX" type="default" cats="XX" children="0" post_type="post"]
</div>
</div>

サンプルご利用の場合の編集箇所は以下です。

<h3 style=”text-align: center;”>カテゴリー１</h3>

count=”XX“　表示件数（数値）
cats=”XX“　カテゴリーID

記事編集画面サンプル