徒然なるままに

作成しているWebサイトについてやそこで使用しているWordPressやサーバー、個人的に感じたことなど色々なことを書いていきます。

WordPressのテーマ「Xeory」でエラーが出たので解決!!

WordPressでサイト制作をしてて困ったことが!!

 

エラー内容は

Access to Font at 'abcde.com' from origin 'bcdef.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'bcdef.com' is therefore not allowed access.

 

使っているテーマは「Xeory」です!

xeory.jp

 

 

デベロッパーツールでエラーを確認し、解決しましょう!!

 

 

 

デベロッパーツールとは

デベロッパーツールとはGoogle Chromeで使用できるサイトのHTMLやCSS、JavaScriptなどを確認したり、変更できる機能のことです。

macやとメニューから「表示」→「開発/管理」→「デベロッパーツール」で表示させることができます。

f:id:takashi19831006:20170927021316p:plain

 

こんな感じでどのように表示されているのかすぐに見ることができます。

 

f:id:takashi19831006:20170927021501p:plain

 

エラーなどは上記の右にあるをクリックすると確認できます。

 

f:id:takashi19831006:20170927021650p:plain

 

もちろんJavaScriptのエラーなども確認できます。

 

エラーの内容 

今回のエラーの内容をデベロッパーツールで確認するとこんなエラーが。

 

Access to Font at 'abcde.com' from origin 'bcdef.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'bcdef.com' is therefore not allowed access.

 

要約すると

 

abcde.comにあるFontにbcdef.comからはアクセスが許可されていません!

 

ってことです。

 

エラー解決方法

 

エラーの内容から解決策を推測すると、アクセスできるように許可するとかいけつするということがわかったので、アクセスできるように対策しましょう!

 

僕の場合はサイトアドレスとWordPressサイトのURLが違うので、ルートフォルダにある.htaccessを以下のようにし対処しました。

 

# 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

#Start Error

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

#End Error

#Start HTTPS

<IfModule mod_rewrite.c>
RewriteEngine On
# Something
# …
# HTTP to HTTPS
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

#End HTTPS

 

上記のようにするとエラーはなくなりました。

 

必要なのは赤字の部分です。

 

ちなみに最後の青字の部分はHTTPでアクセスしてきたユーザーを301リダイレクトで強制的にHTTPSで安全にアクセスするように変更する部分です

 

 

まとめ

WordPressだけでなく、JavaScriptのエラー、CSSの細かい設定などもデベロッパーツールで行うことができます。

デベロッパーツールは色々な使い方ができるので是非触ってみてください。 

 

 

 

 

 

 

Copyright © 2017 徒然なるままに All rights reserved.