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

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

スポンサーリンク
使い方
この記事は約4分で読めます。

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

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

 

スポンサーリンク

WordPress表示設定

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

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

 

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

WordPress 表示設定

WordPress 表示設定

 

Cocoon設定

 

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

 

Cocoonトップページの記事一覧表示設定

 

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

 

表示サンプル

タブ一覧

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

 

注意点

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

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

 

1つ目のタブ 新着記事

Cocoonフロントページサンプル

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

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

Cocoonフロントページサンプル

 

 

カテゴリごと

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

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

Cocoonフロントページサンプル

 

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

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

 

Cocoonフロントページサンプル

 

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

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

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

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

 

Cocoonフロントページサンプル

 

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

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

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

 

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

Cocoonフロントページサンプル

 

表示順序について

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

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

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

 

順番を変えたい場合

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

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

フロントページ、カテゴリー順の設定

 

カテゴリーIDの調べ方

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

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

カテゴリー

 

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

カテゴリー

 

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

以下の例なら 99

カテゴリーID

 

表示数設定

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

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

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

フロントページ、表示カード数設定

 

投稿日順か更新日順か

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

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

Cocoon:記事一覧の表示順

 

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

フロントページ設定

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

 

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

 

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

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

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

 

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

 

ウィジェット表示設定

 

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

 

カスタマイズ

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

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

 

コメント

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