サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年11月1日 12:28
はじめて投稿します。
現在、Cocoonを利用してメディアサイトの構築を進めております。
ローカル環境で作業している段階のため、共有できるURLがありません。
相談内容：
PC版において、
フロントページの記事一覧を3カラムとして、
一覧ページでは記事一覧を1カラムで表示することはできますでしょうか。
管理画面＞Cocoon設定＞インデックス＞カードタイプ より、
基本となるカラム設定が行えることは理解できたのですが、
ここで設定した内容が、フロントページ & 一覧ページの共通設定として反映されるようで、
一覧ページのみカラム数を変更することができませんでした。
理想的な例としては以下のサイトのように
・フロントページはカテゴリごとに記事一覧を3カラム
https://co-medical.mynavi.jp/contents/therapistplus/
・一覧ページにおいては記事一覧を1カラム
https://co-medical.mynavi.jp/contents/therapistplus/category/career/
このような仕様を希望しております。
ネット検索、フォーラム検索で調べてみたのですが
望ましい回答を見つけることができませんでした。
なにか知見をお持ちの方がいらっしゃれば、ぜひ教えてください。
当方、初めての投稿のため、フォーラムのルールに反した投稿となっていましたら申し訳ありません。
ご指摘いただければ修正、再投稿いたしますので、お知らせいただけるとありがたいです。
どうぞよろしくお願いします。
2023年11月1日 13:37
言われている通り、インデックスで設定したカードタイプは、フロントページ、一覧ページに反映されます。
この為、Cocoonフックを利用し、縦型カード3列で付加されるCSSクラスを変更します。
一覧ページでは、デフォルトカードとします。
PHPを操作するので、自己責任でお願いします。
●手順
[Cocoon設定]→[インデックス]→カードタイプ「縦型カード3列」
●functions.php
以下のコード追加します。
add_filter('get_index_list_classes', function($classes) {
// フロントトップページ以外
if (!is_front_top_page()) {
// 縦型カード3列→デフォルトカード
$classes = str_replace('ect-vertical-card-3 ect-vertical-card ect-3-columns', 'ect-entry-card', $classes);
}
return $classes;
});
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。