【体験談】Cocoonのモバイルメニュー説明が消えない! ChatGPTと一緒に解決した初心者のリアル記録

作成：2025年10月13日

🌱 はじめに：メニューに出てきた「謎の説明文」
📱 トラブル発生：「メニューに説明が出てる!?」
⚙️ 設定を見ても「非表示」がない…
🤔 「functions.php」で消せる？でも怖い…
💡 ここで登場：ChatGPTに相談してみた
1. 💬 ChatGPTとの会話（要約）
🧩 Code Snippetsとは？初心者の味方になる神プラグイン
🪄 ChatGPTが教えてくれたコード
🧩 他のスニペットも整理
📘 スニペットってそもそも何？
1. 💡 スニペットの状態を理解しておく
💬 ChatGPTのサポートで、本当に助かった
🧠 学んだこと：コードは怖くない、理解できると楽しい
🔍 まとめ：Cocoonのメニュー説明を消したいならこの方法！
🌟 今回の教訓
💬 最後に：AIは冷たい存在じゃなかった
さいごに：トラブルも“学びの宝”

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

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

このブログでは「心の学び」と「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. 「有効化」をクリック

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

✅ 再度確認 → 消えた！

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

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

🧩 他のスニペットも整理

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

スニペット名	内容	現在の状態
Cocoonモバイルメニュー説明の削除	今回のコード	✅ 使用中
アップロードしたファイル名を英小文字にする	ファイル名を整える	⭕ テスト後に使用
管理バーを無効化する	上部の黒いバーを非表示	⛔ 停止
絵文字を許可する	WordPressの絵文字設定	⛔ 停止
現在の年	年号を自動で表示	⭕ 必要なときのみ

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

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

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

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

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

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

状態	意味	動作
使用中	コードが実行されている	有効（反映中）
停止中	保存されているが実行していない	無効（安全）
削除	完全に消える	元に戻せない

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手順	内容
①	Code Snippetsプラグインをインストール
②	新規スニペットを作成して、コードを貼り付け
③	「保存して有効化」をクリック
④	一覧画面で「使用中」にする
⑤	スマホで確認（シークレットモード推奨）