サイト内検索
Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2025年4月14日 20:34
いつもお世話になっております。現在、Cocoonテーマ(子テーマ利用)でサイトを構築しており、トップページのレイアウトで問題が発生しているため、ご助言いただけますと幸いです。
【実現したいこと】
サイトのトップページを、左側にメインコンテンツ、右側にサイドバーが表示される2カラムレイアウトにしたい。トップページにはWordPressの固定ページを指定しています。
【現在の状況】
-
WordPress設定: 「設定」>「表示設定」で「ホームページの表示」を「固定ページ」に設定し、該当の固定ページを選択済み。
-
Cocoon設定:
-
「Cocoon設定」>「全体」タブにて、「サイドバーの位置」は「サイドバー右」、「サイドバーの表示状態」は「全てのページで表示する」に設定済み。
-
「Cocoon設定」>「カラム」タブでは、特にレイアウトを変更する設定は見当たりませんでした(幅や余白の設定のみ)。
-
-
固定ページ設定: トップページに指定している固定ページの編集画面にて、「ページ設定」>「ページタイプ」は「デフォルト」を選択済み(他の選択肢に2カラム等がなかったため)。
-
ウィジェット: 「外観」>「ウィジェット」の「サイドバー」ウィジェットエリアには、表示させたいウィジェット(カスタムHTML、最近のコメント等)を配置済みです。
-
子テーマの利用: 子テーマ cocoon-child を有効化して使用しています。
【問題点】
上記の設定を行っても、トップページにサイドバーが表示されません。 開発者ツールで確認したところ、HTMLソースコード上にサイドバー要素(<aside id="sidebar"> 等)自体が出力されていないように見えます。
【試したこと】
この問題を解決するために、以下の手順を試しました。
-
子テーマに front-page.php を作成: トップページ表示を制御するため、子テーマフォルダ (cocoon-child) に front-page.php を新規作成しました。
-
front-page.php に基本コード記述:
-
get_header();, get_footer(); を記述。
-
メインコンテンツ部分とサイドバー部分を div などで区切り、サイドバー部分で dynamic_sidebar('sidebar'); を呼び出すように記述しました。
-
(当初 get_sidebar(); を試しましたが表示されず、sidebar.php を直接 require しても表示されませんでした。)
-
-
シンプルなテスト: front-page.php の内容を、Cocoonのラッパー等をほぼ排除した非常にシンプルなHTML(floatで左右カラム分け)にし、dynamic_sidebar('sidebar'); を記述したところ、この場合はサイドバーエリアとウィジェット内容が表示されることを確認しました。
-
get_header() / get_footer() を含めると表示不可: 上記3のシンプルなコードに get_header(); と get_footer(); を追加すると、サイドバーが表示されなくなりました(メインコンテンツの下に回り込むのではなく、完全に表示されない)。
-
sidebar.php の確認: 親テーマの sidebar.php には、トップページで出力を停止するような条件分岐はありませんでした。子テーマにコピーして is_active_sidebar() の条件分岐を削除しても、get_sidebar() で呼び出す形では表示されませんでした。
-
functions.php の確認: 子テーマの functions.php には、サイドバー表示を制御するようなコードは見当たりませんでした。
-
テンプレートファイルの上書き確認: 子テーマフォルダ内に page.php や tmp/page-contents.php など、レイアウトに関わりそうなファイルは存在しません。
-
キャッシュクリア: ブラウザキャッシュ、WordPressキャッシュ(もしあれば)はクリア済みです。
【質問】
-
固定ページをトップページに指定し、子テーマで front-page.php を使用する場合、サイドバーを正常に表示させるためには、他に確認すべき設定や注意点はありますでしょうか?
-
get_header() や get_footer() を読み込むとサイドバーが表示されなくなることから、Cocoonの基本CSSやJavaScriptが干渉している可能性は考えられますか? もしそうであれば、どのように対処すれば良いでしょうか?
-
あるいは、これはテーマの不具合である可能性はありますでしょうか?
【環境情報】
-
WordPressバージョン: WordPress 6.7.2
-
Cocoonバージョン:バージョン: 2.8.5.3
お忙しいところ恐縮ですが、何かアドバイスいただけると大変助かります。
よろしくお願いいたします。
このトピックは1日前からhigakingに変更されました
2025年4月14日 21:45
上記条件で確認しましたが、サイドバーは表示されました。
さんざん、弄りまわしていますが、このような現象は経験ありません。
●サイドバー(CSSクラスsidebar)が出力されず、メイン(CSSクラスmain)となるケース
サイドバーに表示するウィジェトが無い場合、サイドバーがなく、1カラムとなります。
https://github.com/xserver-inc/cocoon/commit/7e03e4ade3a4012da62de0b03862182d7134c785
●確認事項
Cocoon親テーマに切り替え。
- 図示のようにsidebarはありますか?(再確認)
- bodyタグにCSSクラスno-sidebarはありますか?
- サイドバー、サイドバースクロール追従に配置した、ウィジェットの設定で「チェック・入力したページで非表示にする」にチェックが入っていませんか?
higaking reacted
トピックスターター 2025年4月14日 23:45
ご回答いただきありがとうございます。
以下のとおり、お答えいたします。
1:親テーマに切り替えたところ、サイドバーは表示がされました。
2:bodyタグにCSSクラスno-sidebarはありません。
3:ウィジェットの設定で「チェック・入力したページで非表示にする」にはチェックを入れておりません。
親テーマに切り替えるとサイドバーが表示されることが分かり、ヒントになりそうです。引き続き原因を探してみます。ありがとうございます。
2025年4月15日 00:36
@higaking さん
●補足
ウィジェットエリア「サイドバー」「サイドバースクロール追従」に表示、非表示に関わらず、ウィジェットを配置するとis_active_sidebar()がtrueを返却。
結果、ウィジェットが非表示であっても、空のサイドバーが表示されます。
この場合、ウィジェットが空か判定し、no-sidebarを付加し、CSSで非表示となるよう、上記のURLで対策しています。
BODYタグにCSSクラスno-sidebarがない、親テーマなら表示される、この状況から、functions.phpや、テンプレート自体を修正していないでしょうか??
https://github.com/xserver-inc/cocoon/blob/7f56755f36aa906db162843fb48ddcbba2d3c8ff/sidebar.php#L10
higaking reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。