WordPressで画面表示がおかしいと思ったらCORSが原因かもです

本記事では、WordPressでCSSが反映されていないなど画面表示が想定と違う時に原因がCORS(Cross-Origin Resource Sharing)だったときの対処法を説明します。例えば、本来は図1のような画面が正しいのですが、図2のようにCSSのスタイルが適用されていないような場合になります。

正常な画面
図1 : 正常な画面
CORSエラーによる画面
図2 : スタイルがおかしい画面

原因確認

まずはどのようなエラーが出ているかを確認するため、画面表示がおかしいページを開いた状態で開発用のツールを開いてみてください。開き方はChrome/FirefoxであればmacOSにおいては「option + command + i」で開きます。Windowsの場合は、「ctrl + shift + i」で開きます。

図3はChromeの開発用ツールを起動し「Console」タブを開いたところですが、赤枠のようにCORS(Cross-Origin Resource Sharing)に関するエラーが出ていることがわかります(CORSについては、こちらの記事もご参照ください)。

WordPressアドレス (https://shop.btj0.com)とサイトアドレス (https://btj0.com)が異なるためにCORSエラーが発生してしまっています。

Chromeコンソール
図3 : Chromeコンソール

対応方法

ここでは「.htaccess」ファイル(WebサーバーApacheの挙動を設定するファイル)に「Access-Control-Allow-Origin」ヘッダーを追加する設定を示します。レンタルサーバーをお使いの場合は、「.htaccess」ファイルを編集できるかご確認ください。

設定は簡単で以下の3行を「.htaccess」ファイルに追記するだけです。「https://btj0.com」部分は各自の環境にあわせて上記エラーログの「from origin ‘〜’」にある「〜」に修正してください。

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “https://btj0.com”
</IfModule>

sponsor