ワードプレスで記事を書いて公開する時、また、修正して更新する時に表示されるエラーに「返答が正しい JSON レスポンスではありません。」というものがあります。

解決するのに結構な時間がかかりましたが、私の場合、これまでプラグインが原因だったものとPHPでショートコードを自作していた時の2つのケースがあります。

ここではその2つについての解決法と、その過程で色々調べたその他ケースの解決法全体まとめを備忘録として残しておきます。

エラーの現象1:プラグインが原因

ワードプレスの環境

参考までに、問題解決したブログの動作環境を書いておくと以下の通り。(エラーが表示されるときの環境)

  • サーバー:エックスサーバー
  • ワードプレスのバージョン:WordPress 5.5.3
  • テーマ:Cocoon
  • パーマリンク:投稿名
  • .htaccess:常時SSL化のためのコードを追加済
  • 使用プラグイン:Broken Link Checker、Contact Form 7、Easy FancyBox、Jetpack、No Self Pings、Redirection、Simple Custom CSS and JS、Smush、Throws SPAM Away、TypeSquare Webfonts for エックスサーバー、UpdraftPlus、User Role Editor、WP External Links、WP Fastest Cache、WP Multibyte Patch、Yoast Duplicate Post

実際のエラー

それまで何ともなかったのに、ある時から突然、新たに記事を作成して公開する時や下書き保存、更新、をする時に「返答が正しい JSON レスポンスではありません。」とエラーが表示される。

エラーが表示され、え?と思って記事一覧とか表示しようとすると「行った変更が保存されない可能性があります」とか表示される。

変更が保存されない可能性がある、とか言われてもどうしようもないので「このページを離れる」をクリックして一旦編集を抜けてまた投稿一覧から編集に入ってみると、実際には記事の公開や更新、下書き保存はできている

ワードプレス自体は問題なく動作しているけど、エラーが表示されて気持ち悪い、みたいな、「なんだろう、このエラー」という感じです。

プラグインをまず疑え

「返答が正しい JSON レスポンスでは…」のエラーは、ネット上で調べてみるとその原因は主に「.htaccess」にあるようです。(詳しい調査結果は下方にまとめてます)

そうしたものを色々見て試してみましたが、私の場合、全て効果なし

そこでエラーが起きた時の対処法としては超基本となる、プラグインを一旦全て無効化(停止)としてみたところ、あら不思議、エラーが表示されなくなりました。(ものすごく嬉しい(笑))

原因は「WP External Links」というプラグイン。

このプラグインは、記事内などにある外部リンク(別サイトへのリンク)、内部リンク(自サイトの記事へのリンク)がクリックされた時に、ブラウザの同じタブで表示するか、別のタブで新たに開いて表示するか、といった動作を決められるもの。

このプラグインをOFF(無効化)したところ、「返答が正しい JSON レスポンスでは…」のエラーが出なくなり、普通に記事の公開や更新ができるようになりました。(やったね!)

エラーの現象2:ショートコード

自作で関数やショートコードを作る人はここではまるかも。

WP_Queryを使ったショートコードでJSONレスポンスエラー

その後何か月後になるのか、ワードプレス用にPHPで独自のショートコードを作っていた時のこと。

ショートコードで記事の一覧を表示させようとしていた時に、再びこのエラーが再来。

下書きに記事の一覧を表示させる自作のショートコードを貼り付けプレビューで動作チェックをする、みたいなことを繰り返してましたが、ある時から下書き保存でこの「返答が正しいJSONレスポンスではありません」が表示されるようになりました。

この時も、プレビューではショートコードは動作しているようですが、エラーがでるとやはり気持ち悪い。

実際のコードは以下のように、WP_Queryを使って記事一覧の表示でしたが、ショートコード作成の超基本をすっかり忘れていたのが原因。

ある時から、$args の変数を少しでも変えたりすると「JSONレスポンスエラー」が表示されるようになり、WP_Queryの使い方に問題があるのかとか、PC上でXAMPPを使って試していたので環境的な問題なのかなどなど散々さまよいましたが、ポイントはショートコードにありました。

上のコードで echo を使ってますが、ショートコードの基本として echo を使うのではなく return で返す、というのをすっかり忘れていたことからエラーになっていたようです。

そうだ、echo は使っちゃだめで return で返すんだったと気が付くまでに何時間使ったことか...

行13で表示するHTMLの変数 $html を作って、HTMLで表示させたい個所(echo で表示させていた箇所)はすべてそこに入れる。(17行目、30行目)

最後(32行目)に return で $html を返すようにすると、見事「JSONレスポンスエラー」が消えてくれました。(涙が出るくらいうれしかった笑)

原因といくつかある解決法

私の場合はプラグインや 自作ショートコード中の echo が原因でしたが、「返答が正しい JSON レスポンスでは…」のエラーついて、対処法を調べた結果を備忘録としてまとめておきます。

原因はそもそも何?

エラーに表示される「返答が正しい JSON レスポンスでは…」の意味ですが、まず「JSON」は「JavaScript Object Notation」で、軽量にデータ通信を行うためのフォーマットの一種とのこと。

ワードプレスでは「wp-json」というものがあるようで、ワードプレスver5以上で搭載されたブロックエディターでは、「REST API」(Webシステムを利用するための呼び出しルール)というものを使ってこの「wp-json」と通信し、記事の更新とかをしているのだとか。

何を言ってるのかさっぱり分かりませんが(笑)、この説明からすると関係しそうなのがまず「ブロックエディター」と「REST API」

それに加えてアクセス制御に関連するであろう 「.htaccess」と私が遭遇したケースのようにPHPプログラム的問題の計4点

  • 1)ブロックエディター
  • 2)REST API
  • 3).htaccess
  • 4)PHP

ネット上を検索すると、JSONエラーは様々な要因により発生し、原因の特定が難しい、というものだそうですが、私が調べた範囲(と私のケースを含めて)では、大体この4つに関連して「返答が正しい JSON レスポンスでは…」のエラーになる、と集約できそうです。(あくまで私が調べた範囲ですけど)

対処法1)ブロックエディターを使わない

ワードプレスのブロックエディタがJSONと関連した動作をしている、それが原因、となれば、そもそもブロックエディタを使わない、という対処法があります。

つまり「ブロックエディタ」ではなく、ワードプレス5より前に使用されていた「クラシックエディタ」を使う。

これにはそれ用のプラグインを使うことになりますね。

  • クラシックエディタにするプラグイン
    • 1)Classic Editor
    • 2)Advanced Editor Tools (previously TinyMCE Advanced)

1の「Classic Editor」プラグインは、ワードプレスがバージョン5になりブロックエディタが導入された時、以前の使い勝手が良い人(クラシックエディタが良い人)向けに期間限定として提供されたもの。

確かその内更新がとまる、という前提で開発されたもので、あまりおすすめはできない。

ということで、代わりに「Advanced Editor Tools (previously TinyMCE Advanced)」というプラグインを使うのが良さそうです。

このプラグインの設定に「上級者向け設定」があり、その中にある「ブロックエディターをクラシックエディターに置き換える」にチェックを入れて設定保存すればOK。

でもこの対応、クラシックエディタの経験がある場合は良いですが、新たにブログをはじめ、そもそもブロックエディタからワードプレスに入っている人には少しツライ対応になりそうです。

私の場合、もともとはクラシックエディタを使っていたのでこの対応でも良かったですが、これからはブロックエディタがより進化していくことになるので、古いエディタに戻りたくないし(ブロックエディタ内にもクラシックディタを使うためのブロックも用意されているし)、今ではブロックエディタの方が断然使い勝手が良い、と感じているので、この対応はしませんでした。

対処法2)REST APIに関連してWAFの設定

REST API(Webシステムを利用するための呼び出しルール)が関係している、となると、そこに関連するのがWAFの設定

WAFとは「Web Application Firewall」で、外部からの不正な侵入など防ぐファイアウォールと呼ばれるものの1つですが、ワードプレスがREST APIを使用して wp-jsonと通信しながら記事の更新などをする関係上、その通信時に「これは何か怪しい通信かも」とWAFが感知すると JSONエラーになるようです。

対処としては、ワードプレスの運営者(つまり自分)がワードプレスで記事の編集や公開をする場合には「WAF君は働かなくても良いよ、怪しいことしてないからね」、という設定をすること。

設定は、.htaccess に以下を追加する、ということのようですね。

※)ip(xxx.xx.xxx.xxx)には、自分のIPアドレスを調べてそれを記載する。

詳しくは以下の記事を参照してみてください。

この対処法を見た時、「これだ!」と思いましたが、そもそもWAFの設定はロリポップでは良く聞くトラブルの元(コンサル生からプラグインの設定更新ができない、と相談があると、ロリポップのWAF設定が原因という場合が何度もあった)。でも私が使っているのはエックスサーバー。

エックスサーバーでWAFの設定してたかな?と改めて見てみると、エックスサーバーにもWAFの設定がしっかり用意されているのを今回の件で初めて認識しました(笑)。

でも実際その設定を見ると全てOFFになっていて、この対応は私の場合には適用できない。

IPアドレスはプロバイダー(契約しているインターネット接続サービス)によって不定期で変わる場合もある。

また、そもそもエラーの出ているブログは外注さんにも使ってもらうもの(流動的な複数人が使用する想定のもの)なので、仮にこの対応でエラー表示がなくなっても、ブログの運用上、管理が結構つらそう。

これなら、いっそのこと対処法1のクラシックエディタにする、という方がまだ良いかもしれない。

対処法3).htaccessの確認

「.htaccess」はサーバー上の設定でアクセス制御に関するものを記述するファイルですが、この「.htaccess」が空欄になっている、とか、余計な空行が入っているなどで「JSONレスポンスエラーが表示される」ということがあるようです。

単に記事を更新していくだけのブログを運営しているよ、という場合には、常時SSL化するためのコードを追加する以外、基本的に自分で編集したりすることはない。
(リダイレクトを設定したり、さっき出てきた REST APIなどのアクセス制御をしたい、という場合が出てきたら編集して使う、といった結構上級者向けのもの。常時SSL化については「ブログやサイトの常時SSL化の詳細手順!誰にもわかる4つのステップで簡単にSSL化する方法」を参照)

でも実際には自分の知らないところで「.htaccess」の中身は編集されます。(以下例を挙げてみると...)

  • サーバー上の設定変更
    • アクセスに関連するサーバー上の設定を変えると、「.htaccess」の内容に追加や削除が起きる
    • エックスサーバーで言えば「ダッシュボード アクセス制限」や「REST API アクセス制限」の設定など。
    • その他キャッシュに関わるサーバー上の設定の変更すると、「.htaccess」の内容に追加や削除が起きる
  • パーマリンクの設定変更
    • ワードプレスのパーマリンクの設定を「基本」以外に変える、または「基本」に戻すと、ワードプレスが「.htaccess」を編集する
  • 各種プラグインの有効化/無効化
    • たとえばセキュリティ系のプラグインを導入する等、アクセスに関係するプラグインを有効化すると、プラグインが「.htaccess」に対して設定を書き込む
  • テーマの設定変更
    • アクセスに関わる設定を変更すると、その設定変更に合わせてテーマ自体が「.htaccess」に対して設定を書き込む
    • 例えば Cocoonでは「サイト高速化」設定にある「ブラウザキャッシュの有効化」をONすると「.htaccess」に多くの記述が書き込まれ、OFFにすると、その記述が削除される

こうしたところで「.htaccess」に対して知らない間に編集が起き、更に何らかの理由からその編集が正しく行われず、たとえば「.htaccessの中身がなくなった」(空欄になった)なども起きることがあるようです。

ネット上でJSONレスポンスエラーの解決法を見ると、たとえば、

パーマリンクの設定し直しにしても、テーマの設定のし直しにしても、つまりは .htaccess の中身が正しくなく、設定のし直しにより.htaccessの中身が改めて書き直されて正常になったため、JSONレスポンスエラーが出なくなった、と解釈できそうです。

.htaccess の中身の確認ですが、そもそも見ても「本来どうあるべきか」といった記述内容が分からないため、確認しても意味がないみたいにも思えますが、まずは以下の手順で対応するのが良いと思います。

  • 事前).htaccessの中身の確認法
    • エックスサーバーでは、「サーバーパネル」ログイン後、「ホームページ」の項目内に「.htaccess編集」というメニューがあるのでそこをクリック。
    • 画面上、「.htaccessの編集が行えます」の下に「.htaccess編集」というタブがあるので、そこをクリックすると .htaccessの内容が見れます(その場で中身の編集もできる)
  • 1).htaccessのワードプレス部分の記載が空欄になっている場合
    • パーマリンク設定が「基本」であれば、多分そのままでも良いが、「基本」以外(投稿名など)になっている場合には、一度設定をしなおしてみる。
    • それでもワードプレス部分の記載が空白の場合には、ワードプレスが基本として書き込む内容をコピペしてみる
    • ワードプレスが.htaccess に書き込む基本形はワードプレスの公式サイト「htaccess | WordPress.org 日本語」内の「WordPress の基本形」参照
  • 2).htaccessのワードプレス部分は問題なさそうな場合
    • パーマリンクの設定に対して、特に変更せずに保存してみる
    • テーマ内の設定でブラウザキャッシュの有効化など、アクセスに関連する設定があれば、一度OFFしてみる
  • 3)キャッシュのクリア
    • 1)や2)の設定変更でエラーが解消されない場合、一度ブラウザのキャッシュをクリアしてみる

対処法4)プログラム的問題

私が遭遇したケースはプログラム的問題(PHP的問題)ですが、まずワードプレスでエラーが出て原因不明な時の超基本、「プラグインを一旦すべて無効化してみる」を試してみるのが良です。

すべて無効化して「JSON レスポンス」が消えればしめたもの。

あとは無効化したプラグインを1つ1つ有効化して行って、どのプラグインを有効にしたときエラーが表示されるかをチェックしてみるのが良いですね。

また私の場合の2つ目のケースのように、自作のショートコードを作っている場合にこのエラーが表示されたら、echo を思わず使ってしまってないかもチェックしてみましょう。

まとめと補足

  • 1)プラグインを一度全部無効化(OFF)してみる
    (ショートコード作成では echo を使ってないか確認)
  • 2)クラシックエディタに変える(プラグインを活用)
  • 3)WAFの設定を自分のIPアドレスだけ避ける設定をする
  • 4).htaccessの内容を正しくする(そのために関連する設定のし直しなどをしてみる)

どの対処法にしても、ブラウザのキャッシュクリアもあわせて行っておくと良さそうです。

今回のJSONレスポンスエラーでは、私の1つ目のケースでは「WP External Links」という長い間愛用していたプラグインが原因でしたが、それが原因と分かった時はとてもびっくり。

(エラーが表示されるタイミングは、記事の下書き保存や公開時ですが、このプラグインがそのタイミングで動作するとは想像すらしてなかった。後で確認すると、このプラグインのon/offで .htaccess の内容にも変化ないし)

でもよく考えれば、テーマ(Cocoon)の設定の中に同様の機能があるので、そもそもこのプラグインを使う必要もなかったのですが、以前から愛用していたため、テーマの設定を使うより、惰性でこのプラグインを使っていた、みたいなところです。

プラグインを全て一旦OFFして確認してみる、というのはワードプレスのエラー対処の基本ですが、実際やろうとすると結構面倒に思えるのと、全てOFFにすることで何か悪いことが起きそうでどうも気が進まない。

でも、全てOFFにしたら、あとは1つづつ有効化しながら確認していけば良いだけで、その時間は多分10分ぐらいしかかからない。

面倒がらずにまずこの確認をまず最初にしておけば良かったですが、私の場合、この記事で書いていることを1つ1つ調べて試したりして、もう他に手を出せることがない、となった時にプラグインの全OFFで確認する、といった、非常に遠回りをしてしまいました。

この記事が少しでも誰かのお役に立てれば幸いです(とカッコつけて締めておきます!)

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前(全角文字)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!