Cocoonにはサイトマップを自動生成するショートコード機能があり、
記事一覧、固定ページ一覧、カテゴリー、アーカイブを表示出来ますが、
- カテゴリー単位に分ける
- 並び変える
などが出来ない為、カテゴリー単位に表示する為に「新着記事一覧ウィジェット」を利用してサイトマップページを作る方法についてです。
今回はサイトマップショートコードは使用しませんが
サイトマップショートコードについては以下をご覧ください。

Cocoonショートコード-サイトマップの使い方と表示サンプル
サイトマップ生成ショートコード サイト内のページ一覧を簡単に作成する事が出来ます。 投稿ページ 固定ページ カテゴリーページ 月別アーカイブページ それぞれの表示・非表示を指定...
手順
手順
- STEP1カテゴリーID表示するすべてのカテゴリーIDを調べる
- STEP2ページ作成サイトマップ用の固定ページを新規作成する
- STEP3ショートコード新着記事一覧ショートコードを記述・編集する
カテゴリーIDの調べ方
カテゴリーやタグには、投稿記事同様にワードプレスによるユニークIDが自動で振られます。そのユニークIDを調べる必要があります。
「投稿」→「カテゴリー」
対象のカテゴリーにマウスの載せます。
ブラウザの下部にアドレスが出るので、そのID=XXの数字部分がIDになります。
以下の例なら 99
固定ページを作成する
パターン1
表示サンプル
カテゴリー名などを記述し、
ショートコードを挿入していきます。
ショートコードには色々なオプションがあるので、お好みのデザインや表示項目、順序などで設定して下さい。
新着記事一覧ショートコードの使い方やオプションの詳細は以下にまとめています。

Cocoonショートコード-新着記事一覧の使い方と表示サンプル
新着記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので...
ショートコードサンプル
[new_list count="XX" type="default" cats="XX" children="0" post_type="post" type="border_partition" arrow=1]
サンプルご利用の場合の編集箇所は以下です。
count=”XX“ 表示件数(数値)
cats=”XX“ カテゴリーID
cats=”XX“ カテゴリーID
記事編集画面サンプル
パターン2
並列表示の例
2カラム1行分
横並び2列の1行分です。以下を必要な行数だけ繰り返して記述して下さい。
ショートコードサンプル
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">カテゴリー1</h3>
[new_list count="XX" type="default" cats="XX" children="0" post_type="post"]
</div>
<div class="column-right">
<h3 style="text-align: center;">カテゴリー2</h3>
[new_list count="XX" type="default" cats="XX" children="0" post_type="post"]
</div>
</div>
サンプルご利用の場合の編集箇所は以下です。
<h3 style=”text-align: center;”>カテゴリー1</h3>
count=”XX“ 表示件数(数値)
cats=”XX“ カテゴリーID
記事編集画面サンプル
カラム配置については以下にまとめています。

Cocoonの記事内で2~4カラムのエリアを自在に配置する方法
Cocoonには、ページ内で2~3カラムの並列記述を可能にするデザインCSSが標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で 簡単に横並びに好きな配置利用する事が出来...
コメント