Cocoonはトップページを作らず簡単にフロントページを設定!サンプルも

Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。

2020/05/25 Ver.2.1.6.x~ の新機能

 


 

WordPress表示設定

この機能を使えば、トップページを固定ページにして、新着記事ショートコードやカラム表示を駆使した独自ページを作成する必要なく、

記事一覧表示の設定で、簡単にフロントページを作成出来ます。

 

WordPressの「表示設定」では以下のように「最新の投稿」にしておく。

 

Cocoon設定

 

Cocoon設定 → インデックス の上部に追加されています。

 

 

表示形式を選択し、表示するカテゴリーにチェックを入れるだけで完了です。

 

表示サンプル

タブ一覧

カテゴリーを タブで切り替えできるメニュー が表示されます。

 

注意点

タブは4つまでしか表示できないので、

「新着記事」とカテゴリー3つまで を表示出来ます。

 

1つ目のタブ 新着記事

2つ目以降 カテゴリー単位

「もっと見る」ボタンでカテゴリーアーカイブ(一覧)ページが開きます。

 

 

カテゴリごと

カテゴリごとの一覧には、2カラム、3カラムも共通して

一番上に「新着記事」が表示されます。

 

その下にカテゴリーごとのメニューが、表示カテゴリーで選択したものすべて順番に表示されます。

タブとは違い、カテゴリー数に制限なく表示されます。

 

 

カテゴリごと(2カラム)

上記同様、一番上は「新着記事」

その下にカテゴリごとに2列の横並び表示。

モバイル端末では、1カラムで表示されます。

 

 

カテゴリごと(3カラム)

上記同様、一番上は「新着記事」

その下にカテゴリごとに3列の横並び表示。

 

モバイル端末では、1カラムで表示されます。

 

表示順序について

カテゴリーの表示順序は、デフォルトは「昇順」ですが、日本語の場合は思い通りの順番にはなりませんが、

主項目、副項目がある場合の表示順序は、以下のようになり、主項目を表示しない場合でも、

副項目が入り混じって表示される事はありません。
  1. 主項目A
  2. Aの副項目
  3. Aの副項目
  4. 主項目B
  5. Bの副項目

 

順番を変えたい場合

カテゴリーの順番を変えたい場合は、フロントページ設定のすぐ下にあるリンクからカテゴリーIDを記述する事で可能です。

カテゴリ表示の順番を並び替える場合はこちら」となっている部分を開きます。

 

カテゴリーIDの調べ方

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

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

 

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

 

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

以下の例なら 99

 

表示数設定

各カテゴリーごとに表示するカードの表示数は

フロントページ設定のすぐ下にあるリンクを開いて設定可能です。

カテゴリごと」表示でカード表示数を変更する場合はこちら」となっている部分を開きます。

 

投稿日順か更新日順か

記事の順序は設定から選択可能ですが、

Cocoon設定 → インデックス の「フロントページ設定」の下にあります。

 

β版となっている現在(Ver3.1.6.4)は適用されないようです。

※カテゴリー一覧(アーカイブページ)では、選択した順に表示されます。

 

新着記事一覧や、カテゴリー別記事一覧を 更新日順に出したい場合は、やはり固定ページで作成したフロントページにショートコードを記述する方法しかないようです・・。(Ver3.1.6.4)

 

ウィジェットやショートコード挿入

トップページのみ にウィジェットやショートコードを表示するには、

ウィジェットの「表示設定」で可能です。

 

  • 「チェック・入力したページで表示」を選択
  • 「ページタブ」で「トップページのみ」にチェック

 

 

ショートコード利用であれば、カスタムHTMLやテキストウィジェットを使えばOKです。

 

カスタマイズ

カスタマイズについては以下にまとめています。

Cocoonのフロントページ・カテゴリー別一覧をカスタマイズ
Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。 2020/05/25 Ver.2.1.6.x~ の新機能 設定方法は以下にまとめています。 カスタマイズ方法 簡単な...

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています