Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。
WordPress表示設定
この機能を使えば、トップページを固定ページにして、新着記事ショートコードやカラム表示を駆使した独自ページを作成する必要なく、
WordPressの「表示設定」では以下のように「最新の投稿」にしておく。
Cocoon設定
Cocoon設定 → インデックス の上部に追加されています。
表示サンプル
タブ一覧
カテゴリーを タブで切り替えできるメニュー が表示されます。
注意点
タブは4つまでしか表示できないので、
1つ目のタブ 新着記事
2つ目以降 カテゴリー単位
「もっと見る」ボタンでカテゴリーアーカイブ(一覧)ページが開きます。
カテゴリごと
カテゴリごとの一覧には、2カラム、3カラムも共通して
その下にカテゴリーごとのメニューが、表示カテゴリーで選択したものすべて順番に表示されます。
カテゴリごと(2カラム)
上記同様、一番上は「新着記事」
その下にカテゴリごとに2列の横並び表示。
カテゴリごと(3カラム)
上記同様、一番上は「新着記事」
その下にカテゴリごとに3列の横並び表示。
表示順序について
カテゴリーの表示順序は、デフォルトは「昇順」ですが、日本語の場合は思い通りの順番にはなりませんが、
主項目、副項目がある場合の表示順序は、以下のようになり、主項目を表示しない場合でも、
- 主項目A
- Aの副項目
- Aの副項目
- 主項目B
- Bの副項目
順番を変えたい場合
カテゴリーの順番を変えたい場合は、フロントページ設定のすぐ下にあるリンクからカテゴリーIDを記述する事で可能です。
カテゴリーIDの調べ方
カテゴリーやタグには、投稿記事同様にワードプレスによるユニークIDが自動で振られます。そのユニークIDを調べる必要があります。
ブラウザの下部にアドレスが出るので、そのID=XXの数字部分がIDになります。
以下の例なら 99
表示数設定
各カテゴリーごとに表示するカードの表示数は
フロントページ設定のすぐ下にあるリンクを開いて設定可能です。
投稿日順か更新日順か
記事の順序は設定から選択可能ですが、
Cocoon設定 → インデックス の「フロントページ設定」の下にあります。
※カテゴリー一覧(アーカイブページ)では、選択した順に表示されます。
新着記事一覧や、カテゴリー別記事一覧を 更新日順に出したい場合は、やはり固定ページで作成したフロントページにショートコードを記述する方法しかないようです・・。(Ver3.1.6.4)
ウィジェットやショートコード挿入
トップページのみ にウィジェットやショートコードを表示するには、
ウィジェットの「表示設定」で可能です。
- 「チェック・入力したページで表示」を選択
- 「ページタブ」で「トップページのみ」にチェック
ショートコード利用であれば、カスタムHTMLやテキストウィジェットを使えばOKです。
カスタマイズ
カスタマイズについては以下にまとめています。