【解決】WordPressで下書き保存できない!くるくるスピナーが止まらない原因はCocoonのブログカード機能だった

保存できない原因はブログカード? WordPress
この記事は約7分で読めます。

WordPressの投稿編集画面で「下書き保存」や「公開」ボタンを押しても、くるくる回るスピナーが止まらない。エラーメッセージも出ない。画面も遷移しない。ただひたすら、回り続けるスピナー。

「サーバーが落ちた?」「プラグインが壊れた?」——焦る気持ちを抑えながら、あれこれ試すこと数時間。最終的にたどり着いた原因は、まさかのCocoonのブログカード機能でした。

この記事では、私が実際に遭遇した「スピナー地獄」の症状から原因特定、そして解決までの全プロセスを共有します。同じ症状で困っている方の参考になれば幸いです。

発生した症状:保存ボタンが永遠に「処理中」のまま

まずは、私が遭遇した症状を整理します。

  • ブロックエディタ(Gutenberg)でもクラシックエディタでも発生
  • 「下書き保存」「公開」どちらを押してもスピナーが回り続ける
  • 数分待っても完了しない
  • 特定の記事だけで発生(他の記事は問題なく保存できる)
  • ブラウザのDevTools(Network)を確認しても、403や500などの明確なエラーがない

「サイト全体がおかしいわけではない」という点が、逆に原因特定を難しくしていました。

私の環境

参考までに、問題が発生した環境を記載します。

項目 内容
テーマ Cocoon(子テーマ使用)
サーバー Xserver
セキュリティ系プラグイン Wordfence / SiteGuard WP Plugin / BBQ Firewall
エディタ ブロックエディタ・クラシックエディタ両方で再現

ここで重要なのは「特定の記事だけで発生する」という事実です。サイト全体の障害であれば、サーバーやWordPress本体を疑いますが、特定記事だけとなるとその記事の本文に何らかのトリガーがある可能性が高くなります。

原因を探る:消去法で絞り込んでいく

まず疑ったこと

1. WAF(Web Application Firewall)のブロック

XserverにはWAF機能があり、特定の文字列パターンをブロックすることがあります。しかし、WAFを一時的にOFFにしても改善しませんでした。

2. セキュリティプラグインの干渉

Wordfence、SiteGuard、BBQを順番に無効化してテスト。これも効果なし。

3. キャッシュの問題

ブラウザキャッシュのクリア、WordPressのキャッシュプラグインの一時停止。変化なし。

4. 投稿本文の特殊文字やHTMLタグ

記事内に壊れたHTMLや特殊文字がないか確認。問題なさそう。

転機:「この記事だけの特徴」を洗い出す

行き詰まった私は、発想を変えて「この記事だけにある特徴は何か?」を考えました。

そこで気づいたのが、コードブロック内に大量のURLが1行ずつ並んでいるという点でした。

 https://example.com/page1
 https://example.com/page2
 https://example.com/page3
...(数十行続く)

この形式のURLリストが、<pre><code>...</code></pre>の中に入っていたのです。

原因判明:Cocoonの「URL単独行=ブログカード化」処理

Cocoonはどうやってブログカードを生成するか

Cocoonテーマには便利なブログカード機能があります。使い方はシンプルで、本文中にURLだけを1行で書くと、自動的にブログカード形式で表示してくれます。

https://example.com/target-page

↑ これだけで、タイトルやアイキャッチ付きのカードになる。便利ですよね。

WordPress本体にも「自動埋め込み」機能がある

さらに、WordPress自体にも「oEmbed」と呼ばれる自動埋め込み機能があります。YouTubeやTwitterのURLを貼ると自動で埋め込みプレイヤーになるアレです。

この機能も、URLが単独で1行にある場合に処理対象として検出します。

問題の構図

つまり、私の記事では以下のことが起きていたと推測されます。

  1. コードブロック内に「URLだけの行」が数十行ある
  2. Cocoonのブログカード処理、またはWordPressの埋め込み処理が、それらをすべて検出
  3. 各URLに対して、タイトル取得やOGP解析などの処理を試みる
  4. 処理が大量に積み上がり、保存処理がタイムアウト(または極端に遅延)
  5. 結果として「くるくるスピナーが止まらない」状態に

「コードブロックの中だから大丈夫でしょ」と思っていましたが、テーマやエディタの処理タイミングによっては、コードブロック内でも検出対象になりうるようです(少なくとも私の環境では)。

解決策:URL単独行を「ブログカード対象外」にする

原因がわかれば、対処は簡単です。要は「URLだけの行」という条件を崩せばいいのです。

方法1:URLの先頭に「!」を付ける(推奨)

Cocoonには、ブログカード化を無効にする公式の方法があります。URLの先頭に「!」を付けるだけです。

!https://example.com/page1
https://example.com/page2
https://example.com/page3

この書き方だと、URLはリンクとして機能しますが、ブログカードにはなりません。Cocoonユーザーにはこれが最も確実な方法です。

方法2:行頭にスペースや記号を入れる

私が最初に試したのはこちらです。

   https://example.com/page1
   https://example.com/page2

行頭にスペースを入れることで、「行頭からURLが始まる」という検出条件から外れます。ただし、見た目に影響が出る可能性があるため、「!」を使う方法のほうがスマートです。

方法3:Cocoon設定で外部ブログカードをOFFにする

根本的な対策として、Cocoonの設定画面で外部ブログカードを無効化する方法もあります。

設定場所: Cocoon設定 → ブログカード → 外部ブログカード設定

外部サイトへのURLが多い記事を頻繁に書く場合は、この設定を検討してもいいでしょう。内部ブログカードはONのまま、外部だけOFFにすることも可能です。

一括置換で効率化:VSCodeの正規表現を活用する

「URLが何十行もあるのに、1つずつ直すの…?」

安心してください。VSCodeの置換機能(正規表現)を使えば一瞬です。

URL単独行の先頭に「!」を付ける

検索パターン(正規表現をONにする):

^(\s*)(?!!)(https?:\/\/[^\s<>"']+)\s*$

置換後:

$1!$2

この正規表現は以下の動作をします。

  • https://... または http://... で始まるURL単独行を検出
  • すでに「!」が付いている行はスキップ
  • 行頭のスペース(インデント)があれば維持
  • 該当行の先頭に「!」を追加

元に戻したい場合

検索パターン:

^(\s*)!(https?:\/\/[^\s<>"']+)\s*$

置換後:

$1$2

今回の原因ではなかったが、チェックすべき項目

私の場合は「URL単独行」が原因でしたが、同じ「くるくるスピナー」症状でも、別の原因であるケースもあります。改善しない場合は、以下も確認してみてください。

1. WAF(サーバー側のファイアウォール)

Xserver、ConoHa WING、ロリポップなど、多くのレンタルサーバーにはWAF機能があります。投稿内容に特定のパターン(SQLインジェクション風の文字列など)が含まれていると、ブロックされることがあります。

確認方法: サーバーの管理画面でWAFを一時的にOFFにして、保存を試す。

2. セキュリティプラグイン

Wordfence、SiteGuard WP Plugin、BBQ Firewallなどのセキュリティプラグインが、保存リクエストをブロックしている可能性もあります。

確認方法: プラグインを1つずつ無効化して、どれが原因か特定する。

3. 投稿内容の文字数・データ量

極端に長い記事や、大量の画像を含む記事は、POSTデータのサイズ制限に引っかかることがあります。

確認方法: 記事の内容を半分程度に減らして保存を試す。

4. PHPのタイムアウト設定

サーバーのPHP設定で、max_execution_time が短く設定されていると、処理が完了する前にタイムアウトすることがあります。

まとめ:「保存できない」は本文がトリガーになっていることがある

今回の経験で得た最大の学びは、保存・公開ができない問題は、必ずしもサーバーやWordPress本体の障害ではないということです。

「特定の記事だけ」「エラーメッセージが出ない」という場合は、投稿本文の中身が何らかの自動処理を引き起こしている可能性を疑ってみてください。

再発防止のためにやっていること

私は今回の件以降、以下のルールを自分に課しています。

  1. URLをリスト形式で大量に載せる記事では、最初から「!」を付けて貼る
  2. ブログカードは「本当に見せたいリンク」だけに使う(全URL自動カード化はしない)
  3. URLが多い記事を書いた後は、保存前に「URL単独行」がないかチェックする
  4. どうしても多い場合は、VSCodeで一括置換してから貼り付ける

おわりに

「くるくるスピナーが止まらない」という症状は、原因が見えにくいぶん、精神的にもダメージが大きいものです。私も数時間を費やしてしまいました。

しかし、原因さえわかれば対処は驚くほど簡単でした。同じ症状で困っている方が、この記事で少しでも早く解決できれば嬉しいです。

コメント

タイトルとURLをコピーしました