🌱 はじめに：メニューに出てきた「謎の説明文」

こんにちは、ミータです。

このブログでは「心の学び」と「WordPress運営」をテーマに、実際に自分で体験したことを中心に書いています。

今回のお話は、WordPressを使っていて誰もが一度は経験するかもしれない、“どうしても消えない謎の表示” にまつわる体験談です。

テーマは「Cocoon」。

無料とは思えない完成度で、デザインもSEOも強い人気テーマですよね。

ところがある日、スマホでブログを見ていたら、メニューの下に余計な説明文が出ているのを発見しました。

Cocoonでメニューを設定していたら、スマホ表示のときにメニュータイトルの下に説明文が出てしまう…。

削除しても、どの設定を探しても消えない。

そんな“Cocoonあるある”のトラブルを、ChatGPTと一緒に解決した実録です。

この記事では、初心者でも安全にできる「Code Snippets」を使った解決方法を、会話形式でわかりやすく紹介します。

同じ悩みを持つ方のヒントになれば幸いです。

📱 トラブル発生：「メニューに説明が出てる!?」

私のメニューはこんな感じでした。

MENU
ホーム／心の羅針盤／ 潜在意識の旅路／ 願いは叶う／ WordPress体験談／ WordPressでブログを始めた体験を、実際の失敗談や気づきを交えながら紹介しています。／運営者／ 記事一覧

WordPress体験談の下に「説明文」がズラッと並んでいます。

最初は「まぁ、悪くはないかな」と思いました。

でも、よく見るとモバイルでの表示が長すぎる。

スクロールしないと他の項目が見えない。

デザイン的にも、なんだかスッキリしない。

「これ、いらないな」と思って設定を見直しました。

⚙️ 設定を見ても「非表示」がない…

「Cocoon設定 → モバイル → メニュー」
「外観 → メニュー」

どこを見ても、「説明を表示しない」という設定は見つかりません。

試しに「説明欄の文章」を全部削除してみても、スマホでは残ったまま。

キャッシュを削除しても変わらない。

テーマスキンを変えても変わらない。

もうお手上げ状態でした。

🤔 「functions.php」で消せる？でも怖い…

ネットで検索してみると、「functions.php にコードを追加すれば消える」という情報がありました。

でも、functions.phpって、WordPressの“心臓部”みたいなファイルですよね。

初心者がいじっていい場所ではないと、ずっと思っていました。

「もし間違えて真っ白になったらどうしよう…」

そう思うと手が出せませんでした。

💡 ここで登場：ChatGPTに相談してみた

そこで頼ったのがChatGPT。

「何をどこに書けばいいのか全然わからない」とき、やさしく順番に教えてくれる相棒のような存在です。

実際に質問してみました👇

💬 ChatGPTとの会話（要約）

私：「Cocoonのスマホメニューに説明文が出てます。非表示にしたいのですが、設定が見つかりません。」

ChatGPT：「Cocoonの仕様で、説明文はHTMLに自動で出力されています。設定からは消せません。コードで非表示にできます。」

私：「コードは怖いです…」

ChatGPT：「大丈夫です。テーマを直接いじらずに済む方法があります。“Code Snippets”というプラグインを使えば安全ですよ。」

🧩 Code Snippetsとは？初心者の味方になる神プラグイン

ChatGPTが教えてくれたのが、「Code Snippets」という無料プラグイン。

簡単に言うと——

WordPressに“自作コード”を安全に追加できるツールです。

functions.phpに書くようなコードを、WordPressの管理画面から“安全に”追加・管理できます。

• テーマを壊さない
• エラーが出たら自動停止
• テーマ変更しても残る

初心者でも安心して使える“コード専用ノート”みたいなものです。

🪄 ChatGPTが教えてくれたコード

ChatGPTが提示してくれたのが、こちら👇

/**
 * Cocoonのモバイル/PCメニューの説明文（サブテキスト）を非表示にする
 */
add_filter('walker_nav_menu_start_el', function($output, $item, $depth, $args){
  // 説明用のHTML要素を削除
  $output = preg_replace('#<span[^>]*(menu-description|item-description)[^>]*>.*?</span>#us', '', $output);
  // <a>内にある<br>以降の説明を削除
  $output = preg_replace('#(<a[^>]*>[^<]*)<br\s*/?>.*?(</a>)#us', '$1$2', $output);
  return $output;
}, 10, 4);

ChatGPTいわく：

「Cocoonが自動で出力している説明文を、HTMLから取り除くコードです。」

なるほど、メニューの“下の文章”を根こそぎ消す仕組み。

—

🧭 実際にやってみた手順

① Code Snippetsをインストール

管理画面 → プラグイン → 新規追加

「Code Snippets」と検索

インストール → 有効化

これで「スニペット」という新しいメニューが左側に表示されます。


—

② 新しいスニペットを作成

1. 「スニペット → 新規追加」クリック


2. タイトルに「Cocoonモバイルメニュー説明の削除」と入力


3. コード欄に、さっきのコードを貼り付け


4. 「スニペットタイプ」を PHP に設定


5. 一番下の「保存して有効化」をクリック


③ ……でも反映されない!?

ここでスマホで確認したら、変わらない。

あれ？ちゃんと保存したのに？

再びChatGPTに質問。


—
💬 ChatGPT

「スニペットが“使用中”になっていますか？」

なるほど！

Code Snippetsは“保存しただけ”では動かない。

ちゃんと「使用中（Active）」にしないと反映されないのです。

—

④ 使用中にする

1. 「スニペット → 一覧」を開く


2. 追加したスニペットを探す


3. 「有効化」をクリック



これで「使用中」と表示されました。


✅ 再度確認 → 消えた！

スマホで再読み込みしてみると、メニューがスッキリ！説明文がすべて消えました。

思わず「やったー！」と声が出ました（笑）

🧩 他のスニペットも整理

この作業をきっかけに、他のスニペット一覧も整理しました。

📘 スニペットってそもそも何？

体験を通じてやっと理解できました。

スニペット＝WordPressに追加する“小さな機能パーツ”

テーマ本体をいじることなく、

「この部分だけ動きを変える」という小さな魔法を加えるイメージです。

💡 スニペットの状態を理解しておく

💬 ChatGPTのサポートで、本当に助かった

今回一番ありがたかったのは、ChatGPTが

「専門用語を使わずに説明してくれた」ことです。

たとえば、私が「preg_replaceって何ですか？」と聞くと、

「文字の中から特定の形を探して消す命令です」
と具体的な言葉で答えてくれました。

「functions.phpをいじらないほうがいい理由」も、
ちゃんと背景まで説明してくれたので安心して進められました。

🧠 学んだこと：コードは怖くない、理解できると楽しい

今回の経験で一番大きかったのは、

「コード＝怖いもの」ではなく、

“ブログをもっと自由にする道具”だとわかったことです。

ちょっとのコードで、サイトの見た目や使いやすさが変わる。

しかも、スニペットならリスクも最小限。

「失敗しても大丈夫。止めれば戻せる。」

という安心感があるから、楽しく試せるようになりました。

🔍 まとめ：Cocoonのメニュー説明を消したいならこの方法！

🌟 今回の教訓

1. 設定で変えられない部分も、コードで直せる
2. functions.phpを直接編集しない
3. Code Snippetsを使えば安全
4. “使用中”にするのを忘れない
5. ChatGPTを活用すれば理解が深まる

💬 最後に：AIは冷たい存在じゃなかった

私は正直、AIってちょっと距離を感じていました。

でも今回のやり取りを通じて思ったのは、

「ChatGPTって、まるで隣に座って一緒に考えてくれる先生みたい。」

「コードが苦手」「WordPressが難しい」という人こそ、ChatGPTと一緒に進めてみてほしいです。

あなたのペースに合わせて、言葉を選びながら教えてくれます。

さいごに：トラブルも“学びの宝”

今回の出来事は、最初こそ困りましたが、今となっては「良い経験」になりました。

• 設定でできること・できないこと
• コードの安全な扱い方
• ChatGPTとの上手な付き合い方

この３つを一度に学べた気がします。

そして何より、

「自分の力でブログを整えられた」

という達成感がすごく大きかったです。

作成：2025年10月14日

第1章：はじめに 〜 なんとなく「見にくい」と感じた瞬間

ブログを始めてしばらく経つと、誰でも一度は思います。

「記事は増えたのに、なんだかまとまりがないな…」と。

私もまさにそうでした。

WordPressでテーマCocoonを使っていましたが、記事が20本を超えたあたりから

「どこに何があるかわからない」と感じるようになりました。

そんなときに助けてくれたのがChatGPTです。

「ミータさん、今の段階なら“構造”を整えると一気に見やすくなりますよ。」

この言葉をきっかけに、メニュー・トップページ・パンくずリストの3つを整理していくことにしました。

WordPressを始めたばかりのころは、正直「設定の多さ」に圧倒されていました。

メニュー？ パンくず？ カテゴリー？ どれから手をつければいいの？

そんな私が、ChatGPTと一緒にひとつずつ整理していくうちに、

ブログが見違えるほどスッキリし、読者にもGoogleにも伝わる構造へ変わっていきました。

この記事では、

初心者の私が実際に行った手順・設定箇所・気づきを、体験談として分かりやすく紹介します。

第2章：ヘッダーメニュー（グローバルナビ）でサイトの地図を作る

🪄 なぜメニューを整えるの？

メニューは、ブログで言う“地図”です。

訪問者が「どこに何があるか」を一目で理解できるようにするためのものです。

例えば旅行先の地図がなかったら、どこに何があるかわかりませんよね。

ブログも同じで、メニューがある＝読者が迷わないブログになります。

🧭 ChatGPTとのやり取り（抜粋）

私：「記事が増えてきて、カテゴリーごとに整理したいんです」

ChatGPT：「では、“カテゴリー別にメニューを作る”のが一番自然ですね。Cocoonなら簡単にできますよ」

⚙️ 操作手順：WordPressでヘッダーメニューを作成する

1. WordPress管理画面にログイン
2. 左のメニューから
   　「外観」→「メニュー」をクリック
3. 「新しいメニューを作成」をクリック
4. メニュー名を入力（例：「ヘッダーメニュー」）
5. 「メニューの位置」で
   　✅「ヘッダーメニュー（グローバルナビ）」
   　を選択
6. 「メニューを作成」をクリック

💡 次にカテゴリーを追加しよう

もし「心の羅針盤」「願いは叶う」などのシリーズ記事がある場合、

それぞれをカテゴリーとして登録しておくと便利です。

手順：

1. 左メニューから「投稿」→「カテゴリー」
2. 「新規カテゴリーを追加」で以下を作成 　- 心の羅針盤
   　- 願いは叶う
   　- 潜在意識の旅路
   　- WordPress体験談
3. 作成したカテゴリーを「メニューに追加」して並べ替え

🌟 完成イメージ

ホーム ｜ 心の羅針盤 ｜ 願いは叶う ｜ 潜在意識の旅路 ｜ WordPress体験談 ｜ 運営者 ｜ お問い合わせ

これで、訪問者がどんなページからでも「次にどこへ行けばいいか」わかるようになりました。

💬 ChatGPTのアドバイス

「メニューの数は7個以内が見やすいです。

“ホーム”と“お問い合わせ”を両端に置くと、バランスが良くなりますよ。」

第3章：トップページにカテゴリー別カードを設置して“入口”を整理

💡 目的：最初に「どんなブログか」伝えるため

トップページはブログの“玄関”です。

初めて訪れた人がここを見て、

「どんなブログなのか」「どんなテーマがあるのか」を判断します。

以前は最新記事だけが並んでいた私のトップページ。

でもそれだと、初めての人には方向がわかりにくいんです。

ChatGPTに相談したら、こう提案してくれました👇

「カテゴリーごとにカードを並べて、読者が入りたいテーマを選べるようにしましょう。」

⚙️ 操作手順：トップページの設定と編集

ステップ①：固定ページをトップページに設定

1. 管理画面の左メニューから
   　「外観」→「カスタマイズ」→「ホームページ設定」
2. 「固定ページ」を選択し、「ホーム」ページを指定
3. 「公開」ボタンをクリックして保存

ステップ②：「ホーム」固定ページにカードリンクを追加

WordPressブロックエディターで「カスタムHTML」ブロックを追加し、
次のコードを貼り付けます👇

<h2>カテゴリー別に読む</h2>

<div style="display: flex; flex-wrap: wrap; gap: 20px;">
  <div style="width: 48%;">
    <a href="/category/compass/">
      <img src="/img/compass.jpg" alt="心の羅針盤">
      <h3>🧭 心の羅針盤</h3>
      <p>日々の気づきと成長を記すシリーズ。</p>
    </a>
  </div>

  <div style="width: 48%;">
    <a href="/category/wish/">
      <img src="/img/wish.jpg" alt="願いは叶う">
      <h3>🌈 願いは叶う</h3>
      <p>潜在意識と願望実現の実践記録。</p>
    </a>
  </div>

  <div style="width: 48%;">
    <a href="/category/subconscious/">
      <img src="/img/subconscious.jpg" alt="潜在意識の旅路">
      <h3>🌌 潜在意識の旅路</h3>
      <p>内なる世界を探る心の旅。</p>
    </a>
  </div>

  <div style="width: 48%;">
    <a href="/category/wordpress-experience/">
      <img src="/img/experience.jpg" alt="WordPress体験談">
      <h3>💡 WordPress体験談</h3>
      <p>ブログ運営や設定の実体験を紹介。</p>
    </a>
  </div>
</div>

✨ 効果

訪問者が「どのテーマを読むか」直感的に選べる

見た目が整い、信頼感アップ

ChatGPT：「読者が“入口で迷わないサイト”が、結局いちばん強いですよ。」

💬 補足ポイント

各カテゴリー画像は「メディア」からアップロードしてリンクを設定

画像のサイズは横幅1200px以内にすると軽くて速い

Cocoonでは ショートコードでも同じような見た目にできます

第4章：パンくずリスト（Breadcrumb）で読者が“今どこにいるか”を示す

💡 パンくずリストとは？

パンくずリストとは、ページ上部に表示される「道しるべ」のようなものです👇

ホーム ＞ カテゴリー名 ＞ 記事タイトル

たとえば地図アプリで「今どこにいるか」がわかるように、

パンくずリストは読者に“サイト内の現在地”を教えてくれるナビゲーションです。

🧭 ChatGPTとのやり取り

私：「パンくずって、あの童話の『ヘンゼルとグレーテル』のパンくずのこと？」

ChatGPT：「まさにその通りです！道に迷わないようにパンくずを落としていく、という意味なんですよ。」

⚙️ 設定手順（Cocoonテーマ）

1. 管理画面 → Cocoon設定 → タイトル タブを開く
2. 「パンくずリストを表示」にチェック✅
3. 「投稿ページで表示」「固定ページで表示」「カテゴリページで表示」もON
4. 「表示位置」を「メインカラムトップ（タイトル下）」に設定
5. 「変更をまとめて保存」をクリック

💬 表示例

もしあなたのサイトで「WordPress体験談」というカテゴリの記事を読んでいる場合、

次のように表示されます👇

ホーム ＞ WordPress体験談 ＞ 記事タイトル

これが「パンくずリスト」です。

🌟 メリットまとめ

🧩 出ないときのチェックポイント

もし設定してもパンくずが表示されないときは、次を確認してください👇

• Cocoon設定 → タイトルタブで「パンくずを表示」がONになっているか
• CSSで非表示にしていないか（display: none;が書かれていないか）
• キャッシュを削除（WP Fastest Cache → 全削除）
• ブラウザでスーパーリロード（Windows: Ctrl+F5 / Mac: Cmd+Shift+R）

✨ 設定後の印象

タイトルの上に「ホーム ＞ WordPress体験談 ＞ 記事タイトル」と出た瞬間、

「おおっ…！ちゃんとしたサイトみたいだ！」と感動しました。

ChatGPT：「パンくずは“信頼感を見せる最短ルート”ですよ。」

💡 さらに一歩（SEO的メリット）

パンくずリストを設定すると、Google検索結果にも

「サイト名 ＞ カテゴリ名 ＞ 記事タイトル」といった階層構造が表示されやすくなります。

これはSEO的にもユーザー体験的にも好影響で、

AdSense審査でも「サイト構造が整理されている」と評価されるポイントです。

第5章：カテゴリー名の整理とリンク修正（体験談 → WordPress体験談）

💡 なぜカテゴリー名を変えるの？

以前は「体験談」というカテゴリー名にしていました。

でもChatGPTからこんなアドバイスをもらいました👇

「“WordPress体験談”のように、何の体験談なのかを明確にした
方が読者にも検索エンジンにも伝わりやすいですよ。」

なるほど！たしかに「体験談」だけだと、

「どんな体験談？」という印象になってしまいます。

🎯 変更するメリット

⚙️ 操作手順（カテゴリー名の変更）

1. 管理画面の左メニューから
   　「投稿」→「カテゴリー」 をクリック
2. 一覧から「体験談」を探して「編集」をクリック
3. 名前を「WordPress体験談」に変更
4. スラッグを「wordpress-experience」に変更
5. 「更新」をクリック

これでカテゴリー名が変更されます。

既存の記事も自動的に新しいカテゴリーへ移動します。

💬 ChatGPTとのやり取り（抜粋）

私：「“体験談”を“WordPress体験談”にしたいけど大丈夫？」

ChatGPT：「とても良い判断です！テーマが明確になるので、

読者にもGoogleにも好印象ですよ。」

🔗 忘れずに修正する場所

カテゴリーURLが
/category/experience/ → /category/wordpress-experience/
に変わるため、次のリンクを直しておきましょう👇

• ヘッダーメニューのリンク先
• トップページのカードリンクHTML
• 内部リンク（もし手動で貼っている場合）

✅ 例：トップページのHTML修正版

<div style="width: 48%;">
  <a href="/category/wordpress-experience/">
    <img src="/img/experience.jpg" alt="WordPress体験談">
    <h3>💡 WordPress体験談</h3>
    <p>WordPress導入やブログ運営の実体験を紹介。</p>
  </a>
</div>

このように修正するだけでOKです。

🌟 設定後の変化

ブログのカテゴリー一覧を見たとき、

「WordPress体験談」という文字があるだけで、

一気にプロっぽい印象に変わりました。

ChatGPT：「“誰のためのカテゴリーか”が明確なブログは、読まれやすく育ちます。」

💬 ワンポイント

カテゴリー名を変えたあとに404（ページが見つかりません）エラーが出た場合は、

「設定 → パーマリンク」で何も変更せずに「保存」をクリックしてみてください。

→ WordPressが自動で内部ルールを再生成してくれます。

第6章：パンくず・カテゴリー整備後のSEO＆AdSense効果

💡 構造を整えると何が変わるの？

パンくずリストやカテゴリーを整備してすぐに思ったのは、

「なんだか、ブログ全体がひとつの“まとまり”を持った気がする」
ということでした。

読者にとっても、Googleにとっても、

どこに何があるかが明確になり、サイトの“理解度”が上がるのです。

📊 SEO効果：Googleがサイトを正しく理解しやすくなる

パンくずリストや整理されたカテゴリーは、

Googleのクローラー（検索エンジンが情報を収集する仕組み）が

サイトの構造を理解するうえで重要な手がかりになります。

ChatGPTのアドバイス：

「パンくずリストは“サイトマップの縮図”のようなもの。

Googleに『このサイトは整理されていますよ』と伝える役割があります。」

💰 AdSense的にもプラス効果

AdSenseの審査や広告配信では、「サイトの透明性」「構造の明確さ」が重視されます。

パンくずやカテゴリーの整備は、

“ユーザーの利便性を高める＝ポリシー遵守”と見なされるポイントです。

ChatGPTのコメント：

「AdSenseの審査では、“安全で整理されたサイト”が優先されやすいです。

特に初心者の場合、パンくずや固定ページが整っていると信頼度が大きく上がります。」

🧭 整理後のBefore / After

✨ まとめ：小さな整備が“大きな信頼”を生む

パンくず・カテゴリーの整備は、見た目の変化は小さくても、

“読者とGoogleの両方に伝わる改善”です。

ChatGPTのまとめアドバイス：

「読者が迷わず、Googleが理解できる。

この2つを意識した構造にすることが、ブログの“信頼度”を上げる一番の近道です。」

💬 私の実感

WordPress初心者の私でも、ChatGPTと一緒に進めたら、

思ったよりスムーズに整備できました。

「パンくず」と聞いて最初はピンとこなかったけど、

いざ設定してみると“サイトの背骨”のような存在だと感じました。

第7章：まとめとこれからの運営方針

🌱 今回の学びを振り返って

今回の作業を通して、ただブログの設定を整えただけでなく、

「読者の立場でサイトを見る」という意識が芽生えました。

以前は「自分が書きたい記事を投稿する」だけでしたが、

ChatGPTと一緒に作業を進めていくうちに、

“どう見せれば読みやすく、伝わりやすいか” という視点が育っていった気がします。

🧭 ChatGPTとのやり取りで得た気づき

ChatGPT：「構造を整えることは、読者への優しさです。」

この言葉が印象的でした。

パンくずリストもカテゴリー整理も、単なる設定作業ではなく、

読者が迷わず目的の記事にたどり着けるようにするための“おもてなし”

なんですよね。

そしてもうひとつ。

Google（検索エンジン）も、実は“読者の代弁者”なんだということ。

つまり、読者に優しい構造は、Googleにも優しい構造。

結果的にSEOやAdSense評価にもつながるんです。

🧩 サイトの現在地（進行状況まとめ）

🌟 今後の運営方針

1. カテゴリー別シリーズ記事を充実させる
   　→ 各シリーズを10記事以上目標にして、テーマを深掘り。
2. 内部リンクを強化する
   　→ 記事の最後に「関連記事へのリンク」を設置して回遊率UP。
3. アイキャッチ画像の統一
   　→ 同系色・シリーズ別デザインで「世界観の統一」を。
4. メタディスクリプション（記事の説明文）を整備
   　→ 検索結果でクリック率UP。
5. 定期的にChatGPTで改善相談
   　→ 記事構成・SEO・デザインのバランスを客観的に見直す。

💬 私の実感とメッセージ

最初は「設定って難しそう」と感じていたWordPressも、

ChatGPTと会話しながら進めることで、

まるで“隣に先生がいる”ような安心感で進められました。

途中でうまく表示されなかったり、

どこに設定があるかわからなかったりしても、

質問するとすぐに「ここをクリック」「この順番で」と教えてくれる。

その繰り返しの中で、少しずつ“自分で調べて理解できる力”も育ってきました。

🪄 最後に

「ブログの整備は、見た目を整えることじゃなくて、“信頼を積み重ねること”。」

ChatGPTのこの言葉が、今の私のブログ運営の軸になっています。

パンくずもカテゴリーも、ただの設定ではなく、

読者への導線であり、信頼への階段なんだと思います。

これからも少しずつ成長しながら、

読んでくださる方が“心地よく学べる場所”を目指していきます。