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

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

このブログでは「心の学び」と「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との上手な付き合い方

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

そして何より、

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

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