【Wordpress】テーマで指定されたCSSがうまく読み込めない

投稿日：

Wordpress

Wordpressで他人が作成したテーマを使っているとCSSがうまく読み込めない時があります。
条件としては以下の両方に当てはまっている場合だと思います。

  • Wordpressの管理画面と公開画面でドメインが違う
  • テーマ内にstyle.css以外のCSSファイルがあり、それをwp_enqueue_styleを使って読み込んでいる

このとき、ブラウザの開発ツールでコンソールを表示すると、以下のようなエラーが発生していると思います。

Access to Font at 'http://yourdomain1.com/wp-content/themes/sparkling/assets/fonts/glyphicons-halflings-regular.woff2' from origin 'http://yourdomain2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yourdomain2.com' is therefore not allowed access.

クロスドメインなどが原因のようなのですが、手早く直したかったので
以下の修正をして直しました。

①wp_enqueue_styleをしている箇所をコメントアウトする。(テーマによるが、function.phpなどに記載あり)

// wp_enqueue_style( 'bs', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );  
// wp_enqueue_style( 'awe', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );

②htmlのheadタグ内にてCSS読み込み処理を記載する。(テーマによるが、header.phpなどに記載あり)
※以下例ではCDNを指定しています。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">  
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

これで正常にCSSが読み込まれ、ブラウザのコンソールからもエラーが消えました。