tips
Error

画像・サムネイルが表示されない＆JSONレスポンスエラーの切り分けと対処方法【WordPress】

WordPressで発生したJSONレスポンスエラーのメッセージ
2024.11.04
この記事は約14分で読めます。

Word Pressで記事を書いてたら、ある日突然「更新に失敗しました。 返答が正しいJSONレスポンスではありません。」と表示されて記事の保存が出来なくなり、同時に画像が表示されなくなりました。サムネイルも表示されなくなってしまいました。切り分け方法と対処方法を説明します。

WordPressで発生したJSONレスポンスエラーのメッセージ

JSONレスポンスとは

そもそもJSONっていうのはファイル形式の事で、プログラミングでデータのやり取りをするために使うテキスト形式のデータファイルです。データファイルの似た様なものには、CSVファイルやXMLファイルがよく使われます。

{
  "title": "記事タイトル",
  "content": "この記事の内容です",
  "author": "著者名"
}

JSONレスポンスは、サーバーとクライアント間でJSONファイルのデータのやり取りをすることを指します。WordPressは記事情報をサーバーに送る際に、JSONファイルを使うことでデータを受け取ったり解析したりしています。このデータのやり取りの際に何らかのエラーが発生していて保存ができない状態になっています。

レスポンスエラーの原因

これが表示されるのは一般的には下記の様な原因があります。

  1. WordPressのサイト設定が間違えている
  2. パーマリンク設定の不具合
  3. プラグインの競合、セキュリティ設定
  4. テーマ独自の問題
  5. htaccessファイルに問題がある
  6. セキュリティプラグインREST APIの設定
  7. WAFによるブロックによって特定の文字列を入力するとブロックされる

筆者の場合は、今までちゃんと保存出来てたのにある日突然保存されなくなったので、テーマではないなと思ったんですが一応全部見直して見ました。結論から言うと画像ファイル名とhtaccess問題の二重苦でした🤯！！

WAFによって特定の文字列がブロックされる

追記：またJSONエラーが発生しました。今度は文字列でした。

WAF（Web Application Firewall）は、Webアプリケーションの脆弱性を悪用した攻撃からWebサイトを守るセキュリティ対策です。これによって特定の文字列を入力・保存するとJSONレスポンスエラーが発生します。主にプログラムやコマンドで使われる文字列＋特殊記号がブロックされます。セキュリティプラグインのWAFの検知した履歴など見てもらえばブロックされた文字列が特定できるかもしれません。特定の文字列を許可できる設定があればそれを試してみるのも良いかもしれません。

  • SQLインジェクション：シングルクォートやダブルクォート。SQLコードと特殊記号の組み合わせ
  • クロスサイトスクリプティング：「<>」や「＆」タグで使われる文字列「iframe」と特殊記号の組み合わせなど。
  • OSコマンドインジェクション：セミコロンや「cd」「wget」のコマンド文字列などコードと単体文字列または特殊記号の組み合わせなど。
  • コードインジェクション：セミコロンやシングルクォート、ハイフンなど。「exec」などのコードと特殊記号の組み合わせなど。

新規でテストページを作成しエラーが表示されないか確認

上記を試す前に新規でテストページを作成して、画像を貼り付けて「下書き保存」を試してみてください。これでレスポンスエラーが表示される場合は、画像でエラーが発生しています。特定の画像のみの場合は画像自体に問題がある可能性があります。

前者の場合はWordpressの設定やセキュリティプラグインの設定、htaccessが適切に記述されていない可能性があります。

後者の場合はファイル名を変えてみてください。以前に同じ名前が使われててサーバー側にキャッシュが残ってるとエラーになります。筆者はこれにハマりました。また、ブラウザがその画像形式に対応してるか確認してください。

画像が表示されてるか確認

ブラウザのキャッシュを削除し、ライブラリでサムネイルが表示されているか確認します。

WordPressのサイトURLを確認する

[設定 > 一般設定 > WordPressアドレスの場所(URL)]と、その下の[サイトアドレス(URL)]のパスを確認する。初期値では「http://」になっているのでここも注意してください。

前者はWordPressをインストールしたパスで、後者はサブフォルダを作ってそこにインストールした場合やサブドメインの統合をしたい場合に、ユーザーがブラウザでアクセスするアドレスを記述します。

例えばサブフォルダを作ってそこにインストールした場合は、

「WordPressアドレスの場所(URL)」は「https://test.jp/wp」になります。

「サイトアドレス(URL)」は「https://test.jp」になります。

「https://test.jp/wp」にインストールしたけど、「https://test.jp/」として扱ってね、という設定になります。

パーマリンク設定の不具合

「設定」 > 「パーマリンク設定」 からそのまま変更しないで「変更を保存」をクリックして設定を更新すると直る場合があります。記事を公開後にこの設定を変更するとURLが変更されてしまうので変更しないでください。

※これを行うとWord Pressがhtaccessファイルを上書きするので解消するかもしれないという事です。ただし、独自のルールを記述してる場合はhtaccessの確認をしてください。

プラグインの競合

一部のプラグインがJSONレスポンスを妨げている場合があるようです。特にセキュリティプラグインや画像関係のプラグインで問題がある場合があります。セキュリティプラグインは止めてしまうと何らかの攻撃をされたり、ログインできなくなるかもしれないので停止しないでください。

1つずつプラグインを停止し、プラグインに問題があるか確認してください。

テーマ独自の問題

テーマ依存の問題もあるようです。デフォルトのテーマ「Twenty Twenty」に変更して確認してください。

htaccessファイルに問題がある

画像のRewrite設定をしている場合や初期値以外の事を記述した場合は確認してください。WordPressはhtaccessファイルを自動的に上書きします。

これはhtaccessに記述されています。この中に書くと上書きされます。詳しくは下の章で説明しています。

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

# END WordPress

例えば、パーマリンクの更新をした時などに書き換えをします。おそらく、[設定 > 一般設定 > サイトのアドレス]の場所のhtaccess。サブフォルダを作って、public直下とサブフォルダ直下の両方にhtaccessファイルを置いてる場合が厄介で、上書きに加えて適切に記述されていないと画像が表示されず、結果JSONが画像を探せないので、レスポンスエラーが発生します。

REST APIの設定

REST APIは異なるアプリケーション間でデータをやり取りする為に使われるAPIです。WordPressでは記事の取得やコメントの追加、ユーザー情報の管理など至る所で利用されています。記事を保存するときにもREST APIが使われていて記事の内容や設定をJSON形式でサーバーに送信しています。これにより、スマホや他のアプリケーションからもWordPressのデータを更新したりすることが出来るようになっています。

サーバーの設定やセキュリティプラグインのファイアウォールの設定でREST APIのリクエストをブロック出来るようになっています。しかし、基本的なWord Pressの操作を邪魔しないようになってるはずです。

この設定を無効にしてしまうとセキュリティリスクがあるので注意してください。特定のプラグインや「wp-json/wp/v2/posts」だけは除外するなどの設定の見直しをしてみてください。(通常「wp-json/wp/v2/posts」はどのセキュリティプラグインでも除外設定されてるはずです)

Word Pressで発生しているエラーを確認する

wp-config.phpに下記の設定を追加すると、デバッグログに記録されるエラー情報を確認することができます。「WP_DEBUG」で検索すると1行目の記述があるので(falseになってます)そこに記述します。wp-content/debug.logに保存されます。通常はfalseにしておいた方がいいです。

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

問題の切り分けと対策

まずは画像自体が表示されないのか、JSONのレスポンスエラーなのかを切り分けます。

問題の切り分けフロー

手順毎に、都度ブラウザのキャッシュを削除して画像が表示されるか確認してください。


①ライブラリで画像のサムネイルが表示されているか確認します。


②画像ファイルの拡張子を確認しブラウザが対応してる形式か確認します。webpだとブラウザによっては表示されない場合があります。他の形式で試してください。それから、ファイル名を変更してアップロードしてみてください。以前に同じ名前が使用されていてサーバーのキャッシュに残ってる場合はエラーを返す場合があります。


③ライブラリから画像のアドレスを確認し、httpsになってるか確認します。httpから画像を送信するとブラウザのセキュリティ設定が拒否する場合があります。WordPressの[設定 > 一般設定 > WordPressアドレスの場所(URL)]と、その下の[サイトアドレス(URL)]に記述したアドレスを確認してください。


④JSONレスポンスエラーが表示されているページでF12を押してデベロッパーツールを起動しエラーが表示されていないか確認します。(Windowsの場合。他のOSは調べてみてください)


404エラー：ファイルが見つからない時に起こるエラー。ライブラリの画像の詳細からアドレスを確認し、FTPソフトなどでサーバーにファイルが有るのか確認します。有る場合は401エラーも起きてる可能性があります。


401エラー：アクセス制限で起こるエラー。JSONでこのエラーが発生してると思います。セキュリティプラグインやhtaccessファイルでファイルへのアクセス制限がかかってる可能性があります。


⑤401エラーの場合はセキュリティプラグイン以外を全て停止して画像が表示されるか確認します。セキュリティプラグインを停止(無効)しないでください。その後、どのプラグインが影響してるか、1つずつ有効にして確認します。


⑥セキュリティプラグインでREST APIを無効にする設定がある場合は「wp-json/wp/v2/posts」を有効にするか、一旦、REST APIを無効にする設定を解除します。スクリーンショットを取るなどして元の設定を覚えて置いてください。セキュリティプラグイン自体を無効にしないでください。


⑦JSONレスポンスエラーが発生しているページで再度F12を押して401エラーが表示されてないか確認します。


⑧変わらず401、または404エラーが表示されてる場合は、ファイルやフォルダのパーミッションを確認します。

  • 画像フォルダ：755
  • 画像ファイル：644

⑨htaccessファイルを確認します。

分からない場合は、REST APIの設定や他の設定を元に戻して、レンタルサーバーのサポートにお願いした方がいいです。

htaccessファイルで注意すること

htaccessの書き方は調べて頂くとして注意点のみ説明します。

前章でWordPressは上書きすると言いましたが、特定の範囲のみ書き込みをしています。

# BEGIN WordPress

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

# END WordPress

コメントにも書いてある通り(邪魔なのでここでは消しました)「# BEGIN」～「# END」までが一括りのグループになっていて、その間に定義されたものが上書きされます。

なのでこの中に書き込んではいけません。他にもセキュリティプラグインやテーマが独自の設定を定義しています。同様にその中に書き込みをしてはいけません。追記したい場合は新たにグループを作ります。

#(なくてもいいけど半角スペース)BIGIN(半角スペース)英単語で名前を書く
 追記する定義
 追記する定義
 追記する定義
#(なくてもいいけど半角スペース)END(半角スペース)BIGINで書いた名前とおなじにする

これを書く場所が重要で、上位にある程優先されます。例えばサブフォルダを作ってその中にWordPressをインストールしてる環境の場合、publicとサブフォルダに両方htaccessを置くと下記のようにpublicの記述の方が優先度が高くなります。


publicのhtaccess
優先度①BEGIN～END
優先度②BEGIN～END
サブフォルダのhtaccess
優先度③BEGIN～END
優先度④BEGIN～END

今回のようにJSONレスポンスエラーで画像表示されないケースでは、プラグインの影響、もしくはサブフォルダ直下にWordPressをインストールしてる場合や画像フォルダを変更した場合に起こりそうですが、この場合の例を書いておきます。

試すとしたら以下のように画像ファイルにリダイレクトさせるように定義すればいいと思います。既に書かれていたら記述しているパスが合ってるか、記述してる場所を見直してください。

既に公開してる場合は控えた方がいいと思いますが、これを行う場合はhtaccessのバックアップを取って自己責任でお願いします。ブラウザのキャッシュの削除してから確認してください。

画像フォルダへリライト(リダイレクト)させる

多分こっちだけで大丈夫だと思います。ひとまず、書く場所はpublicに置いてあるhtaccessの1番上に書いて下さい。「サブフォルダ名/画像フォルダ名」は自分の環境に合わせて書き直してください。詳しい書き方は調べてください。

# BEGIN MySettings
# リライトさせる。
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_URI} ^/画像フォルダ名/
    RewriteCond %{DOCUMENT_ROOT}/サブフォルダ名/画像フォルダ名/$1 -f
    RewriteRule ^画像フォルダ名/(.*)$ /サブフォルダ名/画像フォルダ名/$1 [L]
</IfModule>
# END MySettings

publicのhtaccessの1番上に記述することで、WordPressやプラグインの設定よりも画像のリダイレクトを優先させています。これによって適切に画像が表示され、JSONレスポンスエラーも解消するはずです。

画像フォルダにアクセス権を与える

403エラーが出てたらこちらも書いてみてください。サブフォルダにもhtaccessがある場合は、サブフォルダに置いてあるhtaccessに書いてください。

# 画像ファイルへのアクセスを許可する。
    RewriteCond %{REQUEST_URI} ^/サブフォルダ名/画像フォルダ名/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^画像フォルダ名/(.*)$ /サブフォルダ名/画像フォルダ名/$1 [L]

サムネイルの表示とJSONレスポンスエラーが表示されない事に加えて、画像へ直接アクセスして表示されるか試してください。サブフォルダ名を記述した場合と通常のアドレスで行ってください。通常両方アクセスできるのはSEO的に良くないです。index.phpが両方に置かれてないか確認してください。

上手くいったら自分の環境に合った場所に追記した部分を書き直して検証ください。セキュリティプラグインやその他のプラグインに影響があるかもしれないのでそちらの検証も必要になります。それから、今まで行った設定の変更を元に戻して確認してください。

上手くいかなかったらhtaccessと今まで行った設定を元に戻してレンタルサーバーのサポートにお願いしましょう！

以上、早急に解決されることを願っています。

Comment

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