Cocoonのサイドバーが表示されない原因と解決手順

cocoonでサイドバーが表示されなくなると、「え、どこ行った？」と心臓がヒュッとするくらい焦れませんか。

この記事では、その原因をひとつずつつぶしながら、PCとスマホの両方でサイドバーをきちんと表示させるための手順をまとめました。

上から順番にチェックしていくだけで、多くの「サイドバーが消えた」トラブルは自力で解決できるはずです。

cocoonでサイドバーが表示されないときにまず知っておきたいこと

症状別に見た「サイドバーが表示されない」パターン一覧

自分がどのパターンに近いか、ざっくりチェックしてみてください。

症状のパターン	よくある原因	優先して確認する場所
PCでもスマホでもサイドバーがまったく出ない	ウィジェットが空 / テーマ設定で非表示	外観>ウィジェット / Cocoon設定の全体タブ
PCでは出るがスマホでは出ない	モバイル用の表示設定	Cocoon設定のモバイルタブ
トップページだけサイドバーがない	トップ用固定ページのレイアウト	固定ページのページタイプ・テンプレート
特定の固定ページだけサイドバーがない	そのページだけ1カラムなどを選択	各ページのレイアウト設定
サイドバーはあるのに中身が真っ白	ウィジェット未設定 / 文字色と背景色が同じ	ウィジェット画面 / カラー設定
プロフィール画像だけ表示されない	画像関連プラグインの影響	画像最適化プラグイン・ウィジェット設定
スマホでサイドバーを開くボタンが効かない	メニューやボタンのリンク設定ミス	外観>メニュー / モバイルヘッダーの設定

だいたいどのあたりが怪しそうか、なんとなくイメージできたでしょうか。ここで目星を付けておくと、このあとがかなり楽になります。

この記事で解決できることと前提条件

この記事で想定しているのは、次のような状況です。

• WordPressで無料テーマ「Cocoon」を使っている
• サイドバーを表示させたいのに思ったように出てこない
• できればコードをいじらず、設定の見直しで解決したい

PHPファイルを大きく書き換えた結果の深刻なエラーなどは、ここでは扱いません。ただ、「子テーマを少し編集したらサイドバーがおかしくなった」くらいのレベルであれば、この記事の範囲でも十分に切り分けができると思います。

cocoon サイドバーが表示されないときの基本チェックリスト

ウィジェットに何も入っていないとサイドバーは出ない

いちばんよくある原因がこれです。WordPressのサイドバーは、中にウィジェットがひとつも入っていないと、そもそも表示されません。

確認の手順は次のとおりです。

• 管理画面の「外観」>「ウィジェット」を開く
• 「サイドバー」またはそれに近い名前のエリアを探す
• そのエリアの中にウィジェットが入っているか確認する
• 空っぽなら「検索」や「テキスト」などをひとつでいいので追加する

私も最初は、Cocoonの設定ばかり疑っていましたが、実際にはサイドバーにウィジェットをひとつも入れていなかっただけでした。ウィジェットを1個入れた瞬間、「あ、出た…」と肩の力が抜けたのを覚えています。

まずは、ここからチェックしてみてください。

Cocoon設定「全体」でサイドバーの表示状態を確認

次に見るべきなのが、Cocoonの全体設定です。ここでサイドバーを非表示にしていると、いくらウィジェットを入れても画面には出てきません。

大まかな流れはこうです。

• 管理画面の「Cocoon設定」を開く
• 上部のタブから「全体」を選ぶ
• レイアウトやサイドバーに関係する項目を探す
• サイドバーの位置が「表示しない」になっていないか確認する

目安としては、次のような状態にしておくと原因の切り分けがしやすくなります。

項目名	おすすめの状態	ポイント
サイドバーの位置	右サイドバーまたは左サイドバー	どちらでもいいので「サイドバーあり」の設定にする
サイドバーの表示範囲	基本的にはすべてのページで表示	まずは一括表示にして、あとから細かく調整する
フロントページのサイドバー	必要に応じて表示	トップだけ非表示にしたい場合は、原因が分かったあとで切り替える

いったんこのように設定して保存し、表示が変わるかどうかを確かめてみてください。

固定ページや投稿のレイアウトが1カラムになっていないか

「トップページだけサイドバーがない」「この固定ページだけおかしい」といった部分的な症状の場合は、そのページのレイアウト設定を疑います。

チェックの流れは次のとおりです。

ランディングページ風のテンプレートなど、一部のページタイプはわざとサイドバーを表示しない作りになっています。「このページだけ違うぞ」と感じたら、まずはそのページの設定をチェックしてみるとよいです。

PC表示でサイドバーが出ないときの原因と対処

画面幅とズームでサイドバーが消えているように見える

ノートPCなどでブラウザのズームを拡大していたり、ウィンドウを極端に細くしていたりすると、PCでもスマホに近いレイアウトが適用されます。その結果、サイドバーが下の方へ移動してしまい、「なくなった」と勘違いしがちです。

次のように確認してみてください。

• ブラウザのズームを100％に戻す（ショートカットキーで一発リセットできるものも多いです）
• ブラウザの横幅をできるだけ広くしてみる
• ページの一番下までスクロールして、そこにサイドバーがないか探す

感覚的な目安を表にすると、こんなイメージです。

画面の状態	見え方の例	サイドバーの位置
横幅が広く、ズーム100％	典型的なPCレイアウト	右または左に2カラムで表示
横幅がやや狭い / ズームをかなり拡大	タブレットに近いレイアウト	本文の下にサイドバーが移動する場合がある
ウィンドウがかなり細い	ほぼスマホレイアウト	モバイル設定次第では非表示や別位置になる

「サイドバーが本当に消えたのか」「単に位置が変わっているだけなのか」を切り分けるだけでも、次の一手が見えやすくなります。

サイドバー非対応のスキンを使っていないか

Cocoonにはたくさんのスキンが用意されていて、ものによっては1カラム前提のデザインになっているものもあります。そういったスキンを選んでいると、サイドバーを表示しないレイアウトになることがあります。

確認の手順は次のとおりです。

• 「Cocoon設定」を開く
• 「スキン」タブを選ぶ
• 現在選択されているスキン名をメモしておく
• 別のスキンに一時的に切り替えて、サイドバーが出るかどうか試す

スキンを変えたとたんにサイドバーが表示されるようなら、もとのスキンの仕様が原因だった可能性が高いです。その場合は、サイドバーを活用したいかどうかを考えながら、別のスキンを選ぶか、スキン作者の説明を確認してみましょう。

サイドバー追従ウィジェットだけに入れている

Cocoonには、通常のサイドバーとは別に「サイドバー追従」というエリアがあります。ここだけにウィジェットを入れていると、思った位置に中身が出ず、「サイドバーがない」と勘違いしてしまうことがあります。

次の点をチェックしてみてください。

• 「外観」>「ウィジェット」で、「サイドバー」と「サイドバー追従」両方の中身を確認する
• サイドバー本体が空っぽで、追従エリアのみにウィジェットが入っていないかを見る
• サイドバー本体にも、テキストやプロフィールなどのウィジェットをひとつ追加してみる

広告を追従エリアだけに配置していると、思った場所と違うところに出てしまい、「サイドバーが真っ白だ」と感じやすくなります。一度、通常のサイドバーと追従エリアを整理してみるのがおすすめです。

スマホでサイドバーが表示されないときの原因と対処

モバイルではサイドバーがデフォルトで非表示の場合がある

Cocoonは、スマホの読みやすさを考えて作られているテーマです。そのため、モバイル表示ではサイドバーを記事の下に回したり、設定によってはそもそも表示しないようにしていたりします。

つまり、「PCで見えているものがスマホでは同じ位置に出ない」というのは、必ずしも異常ではありません。必要に応じて、どこまでモバイルでもサイドバーを見せるかを決めていくイメージです。

Cocoon設定「モバイル」でサイドバーの表示をONにする

スマホでもサイドバーの内容を見せたい場合は、モバイル用の設定を見直します。

• 「Cocoon設定」を開き、「モバイル」タブを選ぶ
• 記事下にサイドバーの中身を表示するかどうかの設定項目を探す
• 必要に応じてチェックを入れ、設定を保存する

関連する項目を整理すると、次のようになります。

設定項目	場所	役割
コンテンツ下にサイドバーを表示するかどうか	Cocoon設定のモバイルタブ	スマホ閲覧時に、本文の下にサイドバー内容を出すかどうか
サイドメニュー開閉ボタンの表示	Cocoon設定のモバイルタブ	ヘッダーの三本線ボタンからメニューを開くかどうか
モバイル用メニュー	外観>メニュー	スマホで表示されるメニューの中身

ここでも大事なのは、「設定をONにしても、ウィジェットが空なら何も出ない」という点です。PC側と同じように、ウィジェットとモバイル設定をセットで確認するのがコツです。

モバイルヘッダーボタンやメニューの設定ミスを直す

スマホのヘッダーに表示される三本線のボタンを押しても、何も起きないことがあります。この場合は、メニューのリンク先やボタンの設定がうまく噛み合っていないことが多いです。

• 「外観」>「メニュー」から、モバイル用メニューを開く
• ヘッダーボタンやカスタムリンクのURLがおかしくなっていないか確認する
• サイドバーではなくメニューを開く仕様にしている場合、そのメニュー自体の中身も確認する

メニュー構成をあれこれ試しているうちに、いつの間にかリンク先が変わってしまうこともあります。サイドバーの中身に問題がないのに、スマホからだとどうしてもたどり着けない場合は、メニューまわりを一度リセットするつもりで見直してみてください。

サイドバーの一部だけ表示されないときの確認ポイント

サイドバー見出しや文字色が背景と同化している

サイドバーのタイトルや文字の色が、背景色とほぼ同じになってしまい、「文字が消えた」ように見えることがあります。スキンを変えたときに起こりやすいパターンです。

特に、シンプルな白系デザインのスキンに変えたときは要注意です。見出しの枠線や背景色だけが残って、文字だけ読みづらくなっているケースもあるので、スクリーンショットを撮って誰かに見てもらうと気づきやすくなります。

プロフィール画像や一部の画像だけ表示されないとき

サイドバーの中でも、特にプロフィール画像やバナーだけが表示されない場合は、画像圧縮プラグインや遅延読み込み設定の影響を受けている可能性があります。

• 画像を最適化するプラグイン（EWWWなど）を一時的に停止してみる
• プラグインのキャッシュを削除してから、サイドバーを再読み込みする
• プロフィールウィジェットから一度画像を削除し、もう一度アップロードし直す

切り分けの考え方を、簡単に表にまとめておきます。

状況	考えられる原因	試してみたいこと
テキストは出るが画像だけ出ない	画像最適化プラグインの設定	プラグインを一時停止し、表示が変わるか確認
特定のウィジェットだけ画像が出ない	そのウィジェットの設定ミス	画像URLやメディアの指定が正しいかチェック
すべての画像が出ない	テーマまたはサーバー側の問題	メディアライブラリや他ページの画像も合わせて確認

画像だけおかしいときは、「サイドバー全体の問題」ではなく「画像周りの設定」に原因があることが多いので、イライラしすぎる前に一度落ち着いてチェックしてみましょう。

テーマやプラグインが原因でサイドバーが表示されないケース

子テーマやテンプレート編集でget_sidebarが外れていないか

Cocoonの子テーマでテンプレートファイルを編集したときに、うっかりサイドバーを呼び出すコードを削除してしまうことがあります。その場合、設定をいくら変えてもサイドバーは出てきません。

次のような手順で切り分けてみてください。

• 子テーマで独自に追加・編集したテンプレートファイルがないか確認する
• 編集したテンプレートを一時的に別名に変更し、親テーマのテンプレートを使わせてみる
• テーマを一時的に親テーマのCocoonに切り替え、サイドバーが表示されるかどうかを見る

親テーマに切り替えたときだけサイドバーが表示されるのであれば、子テーマ側のテンプレートに原因がある可能性が高いです。この場合、無理に自分で直そうとせず、元のファイルをアップロードし直したり、詳しい人に相談したりしたほうが安全です。

キャッシュ系プラグインや高速化設定の影響

表示速度を上げるためのキャッシュプラグインや、Cocoonの高速化設定が、サイドバーの表示に影響することもあります。コードの結合や圧縮のしかたによっては、レイアウトがおかしく見えることがあるためです。

• キャッシュ系プラグイン（WP Fastest Cacheなど）を一度停止する
• プラグインとブラウザのキャッシュを削除し、再読み込みする
• Cocoon設定の高速化タブで、スクリプトやスタイルの最適化を一時的にオフにしてみる

すべてを一気に無効化するよりも、「HTMLの縮小だけオフ」「JavaScriptの結合だけオフ」といった形で、少しずつ様子を見ると原因を見つけやすくなります。

テーマ更新後におかしくなった場合の対処

CocoonやWordPress本体を更新した直後にサイドバーが表示されなくなった場合は、以下のような順番でチェックしてみてください。

• まずキャッシュ系プラグインを停止し、キャッシュをすべて消してから表示を確認する
• 親テーマと子テーマのバージョンが混在していないかを見る
• 子テーマに書いた独自CSSやJavaScriptを、一度コメントアウトしてみる

それでも直らない場合は、Cocoonの公式フォーラムで「環境情報」と合わせて相談するのもひとつの手です。その際は「どのページで」「どんな操作をしたあとに」サイドバーが表示されなくなったのかを、できるだけ具体的に書くと、回答をもらいやすくなります。

cocoonのサイドバーが直った後にやっておきたいカスタマイズ

サイドバーに入れておきたい基本ウィジェット

まずは、基本的なサイドバー構成から整えていきます。とりあえず入れておくと便利なウィジェットを、目的別にまとめてみました。

カテゴリ	入れておきたいウィジェット例	目的
自己紹介	プロフィール	運営者の顔が見えて、読者の安心感につながる
回遊性アップ	新着記事 / 人気記事 / カテゴリー	ほかの記事に自然と移動してもらう
収益化	広告ウィジェット / バナー	広告やアフィリエイトの導線を目立たせる
利便性	検索ボックス / お問い合わせへのリンク	知りたい情報や連絡先にすぐ届くようにする

私の鉄板パターンは、「プロフィール」「人気記事」「カテゴリー」の3つです。この3つがあるだけで、「誰が書いているブログか」「どんな記事がよく読まれているか」「どんなジャンルがあるか」が一目で伝わります。

サイドバー追従エリアで収益系・CTAを目立たせる

サイドバー追従エリアは、画面をスクロールしても一緒についてくるので、特に見てほしい情報を置くのにぴったりです。

• おすすめ商品のアフィリエイトバナー
• メルマガやLINEなどの登録フォームへのリンク
• キャンペーンや企画への案内バナー

ただし、ここにあれもこれも詰め込みすぎると、読者が「広告だらけだな」と感じてしまいます。サイドバー追従には本当に見てほしいものを1〜2つだけ置く、くらいの感覚がちょうどいいです。

よくある質問（FAQ）

Q1. cocoonでサイドバーが表示されないとき、いちばん最初に確認したほうがいいところはどこですか？

A. まずは「外観」>「ウィジェット」で、サイドバーのエリアにウィジェットが1つでも入っているかを確認してください。ここが空のままだと、テーマ側でどれだけ設定を変えてもサイドバーは出てきません。次に、Cocoon設定の全体タブで、サイドバーを表示するレイアウトになっているかを見ていくのがおすすめです。

Q2. PCでは表示されるのに、スマホでだけcocoonのサイドバーが見えません。どうすればいいですか？

A. 多くの場合、モバイル用の表示設定が原因です。Cocoon設定のモバイルタブを開き、記事下にサイドバーの中身を表示する項目がオフになっていないか確認してみてください。また、モバイルヘッダーのメニューやボタンの設定がうまく動いていないこともあるので、外観>メニュー側も合わせて見直すと安心です。

Q3. 特定の固定ページだけcocoonのサイドバーが表示されないのですが、どこを見ればよいでしょうか？

A. その固定ページの編集画面を開き、ページタイプやテンプレートの欄をチェックしてください。「1カラム」や「本文のみ」といった、サイドバーなしのレイアウトが選ばれていると、そのページにだけサイドバーが出なくなります。通常の2カラムレイアウトに戻せば、ほとんどの場合は解決します。それでも直らないときは、Cocoon設定側で固定ページのサイドバー表示が制限されていないかも見てみましょう。

まとめ

この記事のポイントをまとめます

今日からできる最初の一歩は、「外観」>「ウィジェット」と「Cocoon設定」の全体タブ・モバイルタブを順番に開き、この記事のチェックリストと照らし合わせながら、一つずつ設定を確認していくことです。焦らずゆっくり進めていけば、「cocoonのサイドバーが出てこない…」というモヤモヤは、きっと解消できるはずです。