Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法

テーマ設定
この記事は約4分で読めます。

Cocoon 2.1.5以前では、フロントページはインデックスリストしかありませんでした。

インデックスリスト以外にしようとした場合、以下のいずれかの編集が必要でした。

  • 「固定ページ」をトップにしてショートコードを利用して編集
  • PHPを用いた独自カスタマイズ

Cocoon 2.1.6から追加された「フロントページタイプ」切り換え機能により「表示したいコンテンツ」や「目立たせたいカテゴリー」などを見て欲しい位置に配置することができるようになりました。

力の入ったカテゴリーを上部に表示できるようになります。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

フロントページの変更設定

フロントページを変更するにはまずテーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「インデックス」タブを選択すると以下のような「フロントページタイプ」設定項目があります。以後の設定は、こちらの設定項目を用いて行います。

フロントページタイプ(β版)

フロントページの変更は以下の手順で行うことができます。

  1. 表示形式を選択する
  2. 表示カテゴリーを選択する
  3. 必要なら表示エントリーカード数の変更

以下では、一つ一つ説明します。

表示形式を選択する

現在ある表示形式がこちら。
  1. 一覧(デフォルト)
  2. タブ一覧
  3. カテゴリごと
  4. カテゴリごと(2カラム)
  5. カテゴリごと(3カラム)
それぞれの表示はこんな感じになります。

一覧(デフォルト)

従来の表示形式です。

通常のインデックス

デフォルト設定だと、新着記事順に並んだ単なるエントリーカードの並びになります。

タブ一覧

「新着記事一覧」に加えて最大3つまでのカテゴリを切り替えて表示できます。

タブ一覧

タブに選択できるカテゴリは最大3つまでです。

内訳はこちら。
  • 新着記事一覧×1
  • カテゴリー一覧×3

カテゴリごと

冒頭は、新着記事で、カテゴリごとに表示することもできます。

カテゴリごと

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

冒頭は新着記事を表示し、あとは2カラムで新着記事ウィジェット形式で表示します。

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

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

冒頭は新着記事を表示し、あとは3カラムで新着記事ウィジェット形式で表示します。

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

「メインカラムとサイドバーのレイアウト」状態での表示は推奨しません。「サイドバーを非表示にしたメインカランのみのレイアウト」で、利用することをおすすめします。

表示カテゴリーを選択する

次に「表示カテゴリー」を選択します。

表示したいカテゴリーをチェックボックスで選択してください。

フロントページタイプの表示カテゴリー

「タブ一覧」表示を行う場合は、カテゴリーは最大3つまでしか表示されません。「カテゴリごと」表示を選択した場合は、何個でも表示できます。

カテゴリーの表示順を変更する場合は

カテゴリーの表示順を変更する場合は「チェックリスト」の下にある「カテゴリ表示の順番を並び替える場合はこちら」をクリックしてください。

カテゴリ表示の順番を並び替える場合はこちら

入力欄が表示されるので、カテゴリーIDを順番にカンマ区切りテキストで入力します。

カテゴリー順の変更

手っ取り早く順番を変更する方法

手っ取り早く順番を変更するには、Category Order and Taxonomy Terms Orderプラグインをインストールして有効化します。

Category Order and Taxonomy Terms Order
ドラッグ & ドロップで並べ替え可能な JavaScript 機能を使用して、カテゴリーとすべてのカスタムタクソノミーのターム(階層)と子タームを並べ替えます。

インストールを終えたら、「投稿→Taxonomy Order」を選択します。

Taxonomy Orderメニュー

あとは設定画面上でドラッグ&ドロップで順番を入れ替えます。

Taxonomy Orderの順番変更画面

これで順番を入れ替えると、通常のカテゴリ表示の順番も変わります。それが都合が悪い場合は、カンマ区切りの方法で設定してください。

カンマ区切りテキストが入力されていた場合は、そちらが優先されます。この方法を行うのであれば、カンマ区切りテキストは空欄にしておいてください。

必要なら表示エントリーカード数の変更

エントリーカードの表示数を変更する場合は、『「カテゴリごと」表示でカード表示数を変更する場合はこちら』をクリックしてください。

「カテゴリごと」表示でカード表示数を変更する場合はこちら

あとは、カードの表示数を選択してください。

エントリーカード表示数

2カラムの場合は2の倍数。

3カラムの場合は3の倍数がお勧めです。

現在は、新着記事一覧も、カテゴリ一覧も同じ数のカードが表示されます。ここら辺は、利用者さんの意見を聞きながら変更するかもしれません。

まとめ

この機能を使うことで、気軽にサイト型のフロントページをマウス操作のみで作ることもできます。

これまでのような、固定ページへの入力やカスタマイズは必要無くなりました。

利用する方によっては、大幅にサイト初期の設定の手間を省くことができるかと思います。

コメント テーマの質問はフォーラムへ

  1. simpfan より:

    こんにちは。
    いつもお世話になってます。

    これは「不具合」というほどでもないちょっとしたことなのでここにコメントするのですが、この機能を有効化するときに「表示カテゴリー」にチェックを入れ忘れて更新してしまうと即座にエラーが出るようなので、できれば最低でも1つのカテゴリーにチェックを入れないと有効化できないような仕様にしていただければと思いました。
    もちろん利用時に注意すればいいだけなのでこのままでもいいのですが、もしできればということで、よろしくお願いします。

    • わいひら わいひら より:

      エラーメッセージはどのようなものが出ていますか?
      僕が試した限りでは、エラーは表示されませんでした。
      ただ、空欄タブなどができてしまう不具合があったため、取り急ぎ修正はしてみました。
      ------------------------------------------------
      https://github.com/yhira/cocoon
      最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
      https://wp-cocoon.com/wp-content/uploads/2019/01/github-zip.png
      FTPでのアップデート方法はこちら。
      https://wp-cocoon.com/ftp-update/
      ------------------------------------------------
      もしこれでエラーメッセージが出るようであれば、そのエラーメッセージをコピペで貼り付けていただければと思います。

    • わいひら わいひら より:

      あでもやっぱり、エラーが出るようであればよろしければ、フォーラムにトピックを立ててエラーメッセージを貼り付けていただければと思います。
      加えて、Cocoon設定での設定状態のスクリーンショットいただければ幸いです(コメントに画像アップロード機能はないので)。
      同じ状態にしてテストしてみます。

      • simpfan より:

        わいひらさん、ご返信ありがとうございます。

        僕が試したところローカル環境でもエックスサーバーでもエラーが出ていたのですが、上の修正版をインストールしたあとは、なにもチェックを入れていない状態でも正常に表示されるようになりました。
        なので僕の確認できる範囲では、今のままの設定でも問題はなさそうです。
        さっそくのご対応、ありがとうございました!

        • わいひら わいひら より:

          ご確認いただきありがとうございます!
          エラーが出なくなったとのことで、安心いたしました。
          またなにかご不便がありましたら、書き込んでいただければ幸いです^^

  2. 綾糸 より:

    こんばんは。お世話になっております。
    お忙しいとろこ恐れ入ります。

    またまた素敵な機能追加ありがとうございます!
    ひとつ気づいたのですが、
    インデックスの「並び順」のところを「更新日」にチェックしても
    投稿日順に表示されるようなのですが。

    ちなみに
    この「並び順」は新着記事一覧のみでしょうか、カテゴリーごとにも適応でしょうか。
    現在はどちらにも適応されないようです。

    • わいひら わいひら より:

      こんにちは。

      こちらについては、以前も同様の要望があったのですがまだ実装していません^^;
      もしよろしければ、お手数ですが、こちらの要望トピックにコメント内容をそのままコピペしてトピックを立てていただけますでしょうか。
      https://wp-cocoon.com/community/demands/
      TODOリスト代わりに、トピックの固定表示にしておこうと思います。

      • 綾糸 より:

        こんばんは。
        同様の内容見つけられずにお手数おかけして申し訳ありません。

        トピック、やってみます。

  3. こく より:

    新しい機能のバグについてのご報告です。
    フロントページタイプの「カテゴリごと表示」に設定すると、ページ送りがなくなり、過去の記事まで遡れないようになってました。

  4. 神月紫苑 より:

    こんにちは。開発お疲れ様です。いつも便利な機能を実装頂きありがとうございます。

    本記事で紹介されている機能のうち、「カテゴリごと」を使用しているのですが、「新着記事」の項目を表示せず、各カテゴリごとの表示のみにすることはできないでしょうか。

    新着記事順表示があまり意味のないサイトだと考えておりますので、サイドバーにだけ表示しておけばよいかと考えているのですが。

    ご回答いただければ幸いです。よろしくお願いいたします。

    • わいひら わいひら より:

      大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。

  5. らぶ より:

    いつもお世話になっております。

    フロントページタイプのタブ一覧でサイト作成を考えているのですが
    表示カテゴリーの箇所に何も表示されず空白のままでタブ一覧作成ができない状態です。

    思いつく箇所に表示したいカテゴリ入力をしたり色々試行錯誤しながらすすめていますがうまく表示ができない状態です。。
    根本的なところが抜けている可能性もありますのでそこも踏まえた上でご教授いただければと思います(__)

    • わいひら わいひら より:

      大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。

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