Cocoonでフキダシが表示されなくなりました。
具体的には、
- Cocoonの吹き出し機能を使うとHTMLがエスケープされ、コードが崩れる
- クラシックエディタのビジュアルエディタでのみ発生。
- コードエディタに直接コードを打ち込む分には正常に表示される。
- ブロックエディタは問題なし。
突然サイトを襲ったこのトラブルは、解決するのにかつてないほどの地獄を見ました。
原因を探り当てるのに、とてつもない作業を強いられました。
子テーマを探し、親テーマを探し、WordPress本体を探し、果てにKUSANAGIと格闘し。
3つのサイトとサーバー設定を丸一日かけて解体・再構築し。
その果てに辿り着いた結論は、
バージョンの不具合だったよ！
本稿はこれに至るまでの格闘記です。
同じトラブルに直面して訪ねてきた方に向け、対処法を始めに記します。
興味ありましたら、このまま読み進めていただけると嬉しいです。
同じ症状の人へ（チェックリスト）
- フキダシが文字列のまま表示される
- HTMLが<div>のまま出る
- ブロックエディタでは正常
- クラシックエディタだけおかしい
環境と症状
環境
- サーバー：ConoHa VPS（KUSANAGI）
- テーマ：Cocoon ver2.91～2（執筆時点での最新版）
- エディタ：クラシックエディタ（※この現象はブロックエディタでは生じません）
- サイト数：3つあるサイトの全てで同時発生
発生した症状
画像がこちら。
コードエディタで見ると、HTMLがエスケープされてます。
<div → <div
ブラウザが「これはタグではなく、ただの文字だ」と認識してしまっている状態でした。
補足として、
- クラシックエディタでもコードエディタにコードを直接貼りつけた場合は正常に吹き出しが表示されます。
- ブロックエディタでは発生しません。
試したこと 1st STEP（テーマ・ブラウザ・WordPress本体）
高速化カスタマイズを全て元に戻す
実は今回の症状に気づいたのは高速化カスタマイズを行った直後でした。
経験則的にも、
なのでカスタマイズを全て戻しました。
functions.phpに加えた記述を全て消し、ヘッダーに加えた記述も消し。
……が、ダメ。
これで直ると思ったんだけどな
キャッシュを全て削除する・無効化する
次に疑うべきはキャッシュ。
なのでKUSANAGIのbcache・fcacheともにクリアします。
これで決まるだろう……と思いきや、またもやダメ。
ええっ！
切るだけでなく無効化してもダメでした。
イヤな予感が頭をよぎります。
さあ、「デバッグ沼」の始まりです。
プラグインを全て外す
次なる常套手段はプラグインの干渉。
どこでどんなタイミングで相性悪くなるかわかったものではないので。
しかし、これもダメ。
ま、まあ……これはお約束の手順だし……
親テーマに変える
ここで子テーマのカスタマイズが原因か、そうでないかを切り分けることにしました。
これで動くなら子テーマのカスタマイズが原因、しかし動かなければ……考えたくないので略。
そして、
親テーマでも動かなかった！
ブラウザを変更する
意外と盲点となりがちなのが、
例えばChromeの拡張機能。
こちらのトラブルが具体例です。
ChromeのシークレットウィンドウとEdgeでログインしてみました。
……が、ダメ。
これであってほしかったよ……
WordPress再インストール
テーマ側で万策つきた。
ブラウザでもなかった。
そうなるとフロントエンド側の原因としてありうるのはWordPress本体くらい。
そんなに壊れるものじゃないですけど、壊れたことも過去にはあります。
一か八か再インストールかけてみました。
……が、ダメ。
まあ……そうだよね……
全てのサイトで吹き出しが使えなくなってた！
テーマ・ブラウザ・WordPress。
サイト個別の要因で考えられる要因はほぼ潰したにも関わらず症状は続いてます。
この先は考えたくないのですが、もしかして……３つのサイト全てをチェックして回りました。
全部のサイトで同じ症状が発生してる！
とどめを刺されました。
ここまで条件が揃うと、テーマ側の問題とは考えにくい。
３つのサイト全てに共通する要素はサーバーだけ。
つまり……KUSANAGIが原因ということになりそうです。
試したこと 2nd STEP（KUSANAGI）
エラーログのチェック
GeminiとChatGPT、2人のAI執事と相談します。
どちらの答えも同じ。
KUSANAGIの何かの設定がJSと干渉しちゃってるんじゃないですか？
だよねえ……
症状的にはJSの可能性が大なのですが、それなら基本的にテーマ側で直るわけで。
AI執事達も私と同じく「Cocoonが原因じゃなさそう」という見立てをしました。
KUSANAGIも独自のチューニングを施しているだけに、衝突することは多々あるわけで。
ただ、動かないっぽいのは吹き出し機能だけ。
KUSANAGIの干渉で吹き出しだけピンポイントに動かなくなるなんてあるだろうか？
Cocoonの吹き出しは意外とデリケートなんですよ
まずはNginxのエラーログをチェックしてもらえます？
エラーログを渡すとGeminiが叫びました。
ああっ！ マスター！ エラー出まくってるじゃないですか！
ファイルとフォルダの所有権がおかしいせいで色々動いてない！
なんだって！ 所有権は前にちゃんとchownしたよ！
いや、そういえば……少なくともマビノギブログはやってませんでした。
もともと完全趣味のブログだから高速化もSEOも意識したことない。
ただサイト作って、ひたすら書き流しているだけでした。
AI執事に言われるままchownします。
これで直ってくれれば……と祈るものの、当然ダメ。
他2つのサイトは以前より所有権設定していたわけですから。
まあ、
マビノギサイトのエラー消えたからいっか
そうでも思わないとやってられません。
その他いろいろ
KUSANAGIの設定やPHPバージョン変更なども試しましたが、いずれも解決しませんでした。
AI執事もついに音を上げたらしく、同じ答えを繰り返すだけになってしまいました。
全くわからない！ 何が原因なの！
思いついた対処法2つ
もう直すのは諦めました。
代わりに対処法2つを思いつきます。
①AddQuicktagプラグインを使う
②サーバーを新しく立て直す
①のAddQuicktagは定型文登録プラグイン。
非常に便利なプラグインでした。
でしたと過去形なのは、最後の更新から5年経っているため。
セキュリティその他の問題で他人にはおすすめできないのでリンクも貼りません。
私としても5年も更新されてないプラグインなんて使いたくないのですが、AI執事曰く。
定型文入力するだけですからねえ
セキュリティ面の実害はないと思いますよ？
ただ入れて定型文を登録するのがめんどくさい。
サーバーごと立て直した方がいいかなあ
プラグインでの対処はその場凌ぎですし
この先もどんなトラブル待ってるかわかりませんし
サーバー立て直す方が根本的な解決図れますからトータルでのコストは低くなります
なるほどなあ。
とはいえ、サーバー立て直すとなると３サイト分。
今だけとはいえ、ちょっと考えたくない作業量です。
とりあえずプラグインでしのぐよ
ついに原因を発見！
ただ1つ、やり残していたことに気づきました。
ここまでの検証で、Cocoon本体が原因ではないというのが私とAI執事の共通認識。
でも、ムダとわかっていても、やれることは全てやっておきたい。
Cocoonの以前のバージョン入れてみようと思う
今のよりも新しい2.9.2は既に試してダメだったんですけど。
古いバージョンはまだ試してませんでした。
吹き出し機能ごときがバージョンアップで壊れるというのも考えづらいので。
だったら2.8.6 ～ 2.8.9で入れてみてください
Gutenberg対応が成熟してる時期でフキダシ・ショートコード周りも枯れてるので
確か2.8.9は入れたの覚えてる。
安定もしてたはず。
これで行こう。
Cocoon 2.8.9をインストール。
なおったあああああああああああああああああああああ！
ついに、ついにやりました！
まさかのCocoonそのものが原因でした！
よかった！！！
すぐさまテーマの自動更新を切りました。
サーバー作り直す羽目にならなくて本当によかったです。
まとめ ～AI執事の語るトラブルの真相
Cocoonの特定バージョン × WordPress（または環境）との不整合で確定です
以下AI執事によると、
「WordPressは壊れてないのに全部壊れて見える」パターン
かなり価値ある今回の重要な学び
Cocoonめ……。
でもとにかく、
直ってよかったです！
最新版（おそらく2.9系）で初期化処理のどこかでコケて、add_shortcode() まで到達しない。
その結果、
・フキダシ死ぬ
・HTMLおかしく見える
となるわけです。