ある日突然、WordPressサイトのFont Awesomeアイコンが表示されなくなりました。
ブラウザのデベロッパーツールで検証したところ、CORSポリシー エラーが発生していました。
Font Awesomeアイコンが正しく表示されず、すべてのアイコンが□表示になってしまった場合は、デベロッパーツールでエラーを確認してみてください。
Access to font at ‘***’ from origin ‘***’ has been blocked by CORS policy:…
というエラーが表示されたら、後述の手順で解消できます。
CORS ポリシーとは
CORS (Cross-Origin Resource Sharing / オリジン間リソース共有)は、「HTTP ヘッダーの転送で構成されるシステムで、オリジンをまたいだリクエストのレスポンスについて、フロントエンドの JavaScript コードがアクセスすることをブロックするかどうかをブラウザに指示するものです。
詳細は、MDN web docs （翻訳版日本語ページ）に記載されているので、ご参考になさってください。
発生した現象と、デベロッパーツールのエラー表示
発生した現象：WordPressで作成したサイトで Font Awesome アイコンがすべて□で表示された
以前は正しく表示されていた Font Awesome アイコンが、気付いたらすべて□で表示されていた…。
という現象に出くわしました。
数日前までは普通に表示されていたのに、理由がわからずビックリです。
デベロッパーツールのエラー表示
ブラウザ表示エラーが発生したらデベロッパーツールを確認してみましょう。
をクリックすれば、コンソールでエラーの詳細を確認できます。
で、表示されたエラーは、これ。
Access to font at ‘https://www.example.com/wp/wp-content/themes/〇〇〇/assets/fonts/fontawesome-webfont.woff2?v=4.7.0’ from origin ‘https://example.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
日本語に直すと、こんな感じになりますかね。
オリジン`https://example.com’ からの https://www.example.comのワードプレステーマ〇〇〇内のフォントに対するアクセスは、CORS ポリシーによりブロックされました。要求されたリソースに ‘Access-Control-Allow-Origin’ ヘッダーが存在しません。
解消方法は意外と簡単
CORS ポリシーにブロックされたためフォントにアクセスできないことが原因で、「Access-Control-Allow-Origin ヘッダーが存在しません」と指摘されているので、これを追記すればフォントが表示されない問題が解消できることがわかりました。
それでは、Access-Control-Allow-Origin を追記する手順を説明しますね。
注意点：WordPressのテーマエディタ編集は子テーマで
以下に説明する作業は、WordPress のテーマエディターを編集します。
テーマエディターに限らず、WordPress をカスタマイズする際は、必ず子テーマで作業することをおすすめします。
WordPress テーマの配布元によっては独自の子テーマを提供しているところもあります。
配布元が子テーマを提供していない場合は、コーディングや込み入った設定をしなくても子テーマを作成できるプラグインを利用するのが良いでしょう。
あっという間に子テーマが作れるプラグイン
functions.php に追記する内容
[外観] ＞ [テーマエディター] を開きます。
編集するテーマを選択:欄で子テーマが選択されていることを確認し、テーマファイルの functions.php を選択します。
以下の内容を追記します。
/*****
Access-Control-Allow-Originヘッダを追加
*****/
add_action('send_headers', 'cors_http_header');
function cors_http_header(){
header("Access-Control-Allow-Origin: https://example.com");
}最後に [ファイルを更新] をクリックして、「ファイルの編集に成功しました。」と表示されれば OK です。
サイトを開いて、Font Awesome アイコンが正しく表示されていることを確認しましょう！
以上 WordPress サイトで Font Awesome アイコンがすべて□に表示され、その原因が CORS (Cross-Origin Resource Sharing / オリジン間リソース共有) である場合の対処方法の説明でした。
ご参考になれば幸いです♪