Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
カスタマイズ

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

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

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

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

 

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

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

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

 

スポンサーリンク

手順

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

カテゴリーIDの調べ方

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

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

カテゴリー

 

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

カテゴリー

 

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

以下の例なら 99

カテゴリーID

 

 

固定ページを作成する

固定ページを作成

 

パターン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

記事編集画面サンプル

サイトマップカスタムサンプル記事編集画面

 

パターン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が標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で 簡単に横並びに好きな配置利用する事が出...

 

 

コメント

タイトルとURLをコピーしました