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

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

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

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

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

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

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

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

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

ayaito.net

当サイトでは、現時点で850本ほどの記事があり、カテゴリーもごちゃまぜで一覧で出るのは非常に見にくい為、カテゴリーごとに以下のように表示しています。

サイトマップはこちら

この記事でご紹介する新着記事一覧ショートコードを使ったやり方＋カスタマイズCSSで簡単に行えます。

最下部でご紹介します。

手順

カテゴリーIDの調べ方

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

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

以下の例なら　99

固定ページを作成する

パターン１

表示サンプル

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

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

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

新着記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので、思い通りの表示が可能です。 ショートコー...

ayaito.net

ショートコードサンプル

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

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

記事編集画面サンプル

パターン２

並列表示の例

２カラム１行分
横並び２列の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>

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

記事編集画面サンプル

カラム配置については以下にまとめています。

Cocoonの記事内で２～４カラムのエリアを自在に配置する方法

Cocoonには、ページ内で２～３カラムの並列記述を可能にするデザインCSSが標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で 簡単に横並びに好きな配置利用する事が出来ます。 サンプル 利用可能なカラム 以下...

ayaito.net

当サイトのカスタマイズ例

• カテゴリー単位に
• 好きなカテゴリー順に
• ２カラムで表示し
• アイキャッチ非表示
• 文字を小さく

Cocoonのレスポンシブカラムを利用しているので、モバイル端末では１カラムになります。

新着記事表示のショートコードを使っている為、

アイキャッチを表示しない事と、文字サイズを変える事は、

トップページで出しているリスト（「カテゴリーごと（2カラム）」や「カテゴリーごと（2カラム）」の場合）や、ウィジェットで表示している他の新着記事リストにも影響を与える事になるので、

サイトマップ独自のクラス名を指定します。

サイトマップのHTMLサンプルは以下です。

１行目の「sitemap1」がサイトマップ独自のクラス名。

<div class="sitemap1"><!--サイトマップ全体にクラス指定 -->
<h2>Cocoon</h2><!-- カテゴリー名 -->
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">設定</h3><!-- 左側・サブカテゴリー名 -->
<!-- 新着記事ショートコード -->
[new_list count="999" type="default" cats="XXX" children="0" post_type="post"]
</div>
<div class="column-right">
<h3 style="text-align: center;">使い方</h3><!-- 右側サブカテゴリー名 -->
[new_list count="999" type="default" cats="XXX" children="0" post_type="post"]
</div>
</div>

あとはCSSで以下を追記します。

このCSSは、サイトマップでしか使用しないので、固定ページで作成した「サイトマップ」の記事編集画面の下部にある「カスタムCSS」に記述でOKです。

/*アイキャッチ非表示*/
.sitemap1 .new-entry-cards figure {display:none;}
/*文字の調整*/
.sitemap1 .widget-entry-cards .widget-entry-card-content{margin-left: 2px; font-size:12px;}